You’re here to see how you can improve your website’s load time. Slow sites lose money left, right and center. Some fixes are easy while others require greater care and expertise. If you analyse your site speed using GTMetrix or Google Page Insights they’ll highlight the major issues. Below we show you how to fix them and why…
1. Reduce the size of graphics and files
A lot of websites have large graphics and other files that take a lot of space on the server. This means that the site will be slower because it has to load more information before you can see what’s happening. There are many ways to reduce the size of these graphic files and get your website to work faster:
Use optimised file formats
Use a compressed format such as JPEG or webP file formats to improve the load time of graphics and your website.
Scale images to fit the appropriate viewports
Make sure your images are in the most appropriate resolution for viewing them on your screen. For example, you don’t need a high-resolution image for an icon which is only going to be seen in a small size. Using a large file that then needs to be resized, will cause a load on the server. This matters when milliseconds count.
Use image optimisation plugins
There are image optimisation plugins available. They have their pros and cons. The pros are that they’re easy to implement and do a decent job. The downside is that some of them create multiple versions of an image, increasing the disk usage at the server level. Image optimisation plugins like Smush also strip away the alt tags and meta information to reduce the file size. This becomes an issue when it comes to SEO as you have to manually enter them back in for each file. Here’s a cheatsheet to reduce image sizes by Hubspot
2. Utilize caching plugins
Many plugins exist to help your site work faster. If you’re using WordPress, you can use a plugin such as WP Rocket or WP SuperCache that cache static (non-dynamic) files. This means that the server will send to the website visitor all of the files, but won’t have to build them every time they’re requested. This results in faster website load times and reduces resource usage at the server level.
3. Load pages asynchronously
A script is a piece of code executed by a web browser, an interpreter, or another program in order to perform an application’s logic; the scope of which may extend to modifying domain data, querying databases or other sources of information from the IoT (Internet-of-Things)
If we have multiple scripts on one page, it can take longer for that page to load because it has to wait for scripts to load before it can continue loading the content that’s actually needed for the page.
4. Use a Content Delivery Network (CDN)
A CDN, also known as a content delivery network, is a structured system of servers that may include the Internet. Cloudflare is the simplest and most widely used CDN. The CDN ensures that content is delivered faster to users by supplying it through servers close to them.
The less distance data has to travel between the server and the user, the quicker the website loads. There are image CDN’s that take over serving of images while your main server or CDN pushes the files.
By decentralising how your site is server, you increase the speed of your site load.
5. Minimize HTTP requests
Every time you include an external script, style sheet or image on your site, your browser has to make a separate HTTP request. The more requests there are, the slower a page can load because it’s taking longer for those resources to be loaded.
For example: if you have ten images and each image is from a different server, then that means that your browser needs to make ten HTTP requests to render them in the layout that you’re looking at.
It’s like having to visit multiple shops for ingredients for your meals. It’s quicker if you can get them all in one place right?
Nginx is the most popular server in use today. It is a web server, mail proxy and an application server. Memcache is a software that stores information across multiple servers.
Combining memcache with nginx or similar for your site will help reduce load times at a server level. Many servers have further caching options available. These should be configured by a professional web developer as incorrect configurations will result in a broken website.
8. Combine CSS files
If HTML and PHP are the bones of the website, CSS is the skin. CSS controls the visual elements of your site – the colours, the fonts etc. They are sprinkled throughout the site. This means that the browser renders them in line.
CSS files can be combined to speed up your website. The fewer requests a browser has to make, the faster it will load. Combining CSS files saves time and bandwidth because the page would not need to download multiple CSS files.
You can combine or minify them using tools like css-combine and mincss in order to optimize site load times. Preparing these scripts ahead of time requires some expertise but the payoff is that your website will load faster for most people.
9. Remove query strings from static resources
Every HTTP request needs to parse the URL and this becomes slower when you have long URLs with many parameters contained in the query string. By removing query strings from static resources, all requests for those resources will be shorter than they would have been without, and that means less parsing time when loading pages on your website.
The second reason for removing query strings from static resources is because it improves performance of your web server by reducing processing of each request on average.
The third reason for removing query strings from static resources is that it helps avoid duplicate content errors in search engine indexing for your site’s content
10. Defer non-critical HTTP requests to increase page load speed
An Http request is a program or command that be sent from the browser to a web server. Some of these requests are mandatory and others are optional. Non-critical requests, such as those for ads or elements that aren’t vital to the initial site load, can be deferred until after all critical content has been processed by the browser.
11. Bonus: Mobile Website Speed
Desktop bandwidth is generally greater than that for mobile users. This causes websites on mobile to load slower. Any issues highlighted above will have a greater effect on mobile for that reason. To counter this, you can either max our your optimisations or create a separate site for mobile users. This is not always a viable option but can come in handy for bulkier sites. It allows you to have granular control over all elements of the site that you can then optimise for mobile. AMP pages are accelerated pages that give near instant load times on mobile.
In a world where speed is king, your website can’t afford to be slow. If you’re looking for ways to improve the performance of your site, these 10 tips are just what you need! It’s important to remember that not all content on your page needs to load at once – instead of loading everything in one go, identify which elements are most critical and defer non-critical requests until after they’ve been loaded first. The more time you give yourself up front by removing unnecessary scripts from your page and combining CSS files into fewer files as well as enabling compression will pay off later when people visit your site. These best practices should help reduce the wait time for visitors who want their information fast.
Get in touch with us if you’re looking to increase your site speed but don’t want to go through the whole process alone.