Every site owner wants a quick loading site, every user wants to visit a site thats fast to load so that they can make use of it. It makes us all happy when things are fast, even Google like a fast site.
Its a fact that a fast site can lead to a better user experience and through that better experience more sales and leads can be gained. Its also a fact that Google have included a page speed element into their ranking algorithm and now (as of 2010) actively work to rank faster pages better in their search results. There are a few ways you can increase your site speed and one of these is through making configuration changes on your webserver. In this article however, I’l cover some other ways to improve the page load speed through making changes to the content side of your site. Things that may be easier to update if you don’t have full access to yours or your clients server.
What can you do to improve your page load speed?
Avoid Bad Server Requests
Sometimes resources are removed or are moved to a new URL, this is a normal part of a sites evolution as time passes. It is important however, whenever a resource is removed or moved that the old link is updated on the pages of your site that link to it. Every time a browser tries to load a broken link it slows the load process down a little this is also the same of search engine robots too. Basically what happens is the browser or robot makes more server requests than it needs for content that ultimately doesn’t exist. If the link is updated or removed then there is no time wasted on page loading. Here if the varvy guide on how you can deal with this.
It makes sense to make the images the browser requests as easy and quick to load as possible. Most webpages contain images and for every image on a page the server needs to request them, download them to the browser and then load them for the user. This can take time if images are not appropriately optimised and there are a few ways this can be done;
- Specify image dimensions – Pages load content before they load images. It can help to specify the dimensions of images so that when the content loads it makes it easier for the images to wrap around the content without the browser having to reflow resource positions on the page.
- Compress images – Compressing an image works in the same way as compressing a file before emailing it. It essentially makes the image file smaller whilst not losing any of the images quality. This then makes it faster for the browser to download the image from the server and load it on the page. Our favourite tools are Image Optim and Compress JPEG.
- Choose the best file type – Basically pick an image file type that your users browsers will have no trouble loading. .JPG files are your best bet as there is virtually no browser or computer that will be unable to read the file type. This format can also be compressed losslessly to a degree.
- Combine into CSS image sprites – If a page has several images that load as part of the overall design it makes sense to load them as one image by combining them into CSS sprites. This reduces the round trips required and thus the page load time is decreased.
Reduce Reliance On Third Party Resources
Sometimes resources on a webpage is served from a third party such as Google Maps or a social plugin for example. This can slow load times down if the resource is large or the server being called upon for it is not so quick. Its advisable to, where possible, serve the content from your own server or look to find a similar resource that loads faster.
In much the same way as avoiding bad server requests a page load speed can be reduced when a resource is loaded through a redirected link. This usually happens when a resource is moved or changed and a redirect is put in place rather than updating the link within the page itself. Reducing redirects helps to allow a resource to be loaded from its actual source rather than being called upon at a location that the server needs to redirect the browser/robot to.
Specify A Character Set
By specifying a character set in the header of a page on the site in order to allow the browser to begin parsing the HTML and loading scripts. This reduces the load times because it stops the browser having to load a page by guessing the character set itself. Below is what should be placed in the of a sites template to specify the character set for browsers.
Minify CSS Files
Minifying your CSS files is a great way to reduce page load times as sometimes your sites template isn’t using all the style elements it is loading. This is most prevalent in WordPress themes that you can customise within the CMS to change colours or fonts etc. Basically, although you may change the theme colour from red to blue it doesn’t remove the theme styling for the red option from the code and therefore this is also loaded every time the page itself loads. If you minify the CSS by removing the elements not needed this reduces the code being parsed by a browser and robot that is essentially superfluous. By implementing these, or at least a few of them you’ll be able increase your sites load speed and improve the user experience as well as help to work towards better rankings. Are there any other on-page areas that you have implemented to increase your page load speed? Let us know in the comments!
Updated: May 2018