- Images,
- Compression,
- Files,
- Caching,
- Setting a Budget,
- Tools for Testing and Improving Website Performance.
- Conclusion
The speed your site loads is an important consideration in web site design. Not everyone has fast internet, and more than ever people are accessing websites on mobile devices. A fast-loading site will please your visitors and get you better rankings in search engines.
Images
Bloated images are the main culprit for slow page load. Every image needs to be optimised to the lowest possible file size while maintaining good visual quality. Choose the right file format for the type of image you are using. Photos are best saved as jpg files. Jpg is a lossy format which means that when the picture is saved some information is removed permanently from the file. Every time you save a picture in jpg format some information is lost and there is some deterioration of quality. It is a good idea to keep an original of your photo and save a copy. The png format is very useful for images that have some level of transparency, for example, a picture with a transparent background. You can also save pictures with transparent background in the gif format. Gif files use a limited number of colours, so are good for diagrammes and illustrations.
Image Optimising Tools
Photoshop has a menu option called “Save for Web” to help you to optimise pictures for the web. It allows you to compare your original to your optimised version. You can test different levels of optimisation and different file formats until you get the smallest file size at an acceptable quality for your purpose. Reduce the physical size of your image to the maximum size it will appear on the screen.
Gimp is a free alternative to Photoshop. You can also download a plug-in to use with Gimp called Save for Web that will help you optimise your pictures for the web.
As a general rule, I aim to keep images under 100 kb but occasionally I use a larger image for clarity. If a file is too large, the pictures will be slow to load, if the file is too small, artefacts will appear in your pictures. Experiment to find the right level of compression. Reduce the physical size of your image to the largest size it will be displayed on your web page. If the picture is going to be displayed with a width of 800px don’t use a picture that is 2000px wide.
Sprites
A sprite is a large image that contains multiple smaller images. With the use of CSS different parts of the image can be displayed. Sprites can be used for button rollover effects. The use of sprites reduces the number of images that need to be downloaded.
CSS
Where ever possible use CSS styling instead of images. Many effects that required images in the past can be now achieved using only CSS. These include rounded corners, gradient backgrounds and text shadows. Transitions and animations can be used to bring your site alive.
Using CSS to style text. instead of using images, improves your site’s accessibility as well as download time.
Merge your CSS files to decrease the number of requests to the server.
Place the links to CSS files in the head section of your web page because the page will not render until the CSS file is downloaded. This prevents a page loading with no style and having to be redrawn when the CSS file downloads.
Fonts
Choose your fonts wisely. Each set of custom fonts requires a request to the server. Some fonts have larger file sizes that can slow down the rendering of your web page. The page will not be rendered until the font files are downloaded.
SVG
SVG stands for Scalable Vector Graphics and it has been around for quite some time. In the past, not all browsers were capable of displaying SVG files. It is a form of code that tells the browser how to display an image. Two advantages of SVG are:
- Simple images use smaller file size
- As the name suggests the files can be displayed at any size with only minimal loss of clarity.
This makes them an ideal choice of Retinal Display.
Compression
Compression is one way to decrease your website’s download time. When a visitor wants a web page, the request goes to the server and the server sends the requested page back to the browser and the browser displays it on the screen.
File compression can be enabled on your server so that if a browser requests a compressed file the server can send a smaller file which will be uncompressed in the browser before the visitor sees it.
Many web hosting servers allow you to set compression using cPanel. Log in to your web hosting account and go to “Manage Hosting” to access your cPanel. Find Optimize Websites and open it.
You can choose to compress all files or just some files. There isn’t much point in compressing your image files. I choose to compress my HTML, plain text, and CSS files.
After you have uploaded your settings you can check out your site at the gzip compression testing website.
For more information on gzip compression visit the following websites:
Files
Practice good housekeeping by getting rid of any redundant material on your HTML and CSS files. As information becomes outdated remove it or maybe store it on your own computer if you think you might use it at some later date. Remove any unused rules in your CSS and make your CSS as lean as possible. Keep your HTML clean and mean and avoid adding unnecessary div tags to your pages. Megan McDermott will tell you more about divitis and how to avoid it.
JavaScript
Combine your javascript files to reduce the number of calls to the server. Where possible put javascript files at the end of your HTML so that the page and images can render before the javascript files.
Minify
Minifying your CSS and JavaScript files can decrease their size by about 70%. Bootstrap and jQuery have minified versions available for you to use. The process of minifying your files involves removing any extraneous data such as spaces, line brakes and comments. This data is added to files to make them more readable for humans but are unnecessary for computers. You can minify your HTML, CSS and JavaScript files. Below is an example of how much you can save by using CSS Compressor to compress a CSS file.
The disadvantage of minifying a file that you regularly update is you need to keep two copies of the file; one that is readable for making changes and the minified version. Every time you make a change to your file you need to minify it again and upload your minified version.
Caching
Caching is the equivalent of memorising something so you don’t have to look it up. It can occur on the client browser, the client network or the server. Browser and client network server caching decreases the download time of a page if someone returns to the page within a set period of time. Some of the page resources are stored in the browser memory or network memory so not all resources have to come from the host server.
Set a Page Budget
Several developers recommend setting a page budget by either limiting the number of requests to the server or limiting the overall page size or both. This approach will help you prioritise the content on each page. Some plugins require a large number of resources, in particular, social media share buttons.
Tools for Testing Website Performance
PageSpeed
PageSpeed is Google’s tool for testing websites. It gives you an overall performance rating for desktop and mobile and provides tips for improving your performance.
The results indicate how Google sees your website so a good performance from PageSpeed will let you know that Google is happy with your website speed.
WebPageTest
This tool gives you a graph of your download so you can see where the problems lie.
My site fails in First Byte Time on this test. According to CloudFlare, this is not something to worry about too much. Delays can be caused by requesting the site in one country when the site is stored on a server in another country.
Go to WebPageTest to test your site but just don’t get too upset if you get a fail for First Byte Time.
YSlow
YSlow is a plugin for your browser. It is open source so it is free. You can download it for your Default browser at the YSlow website. Unfortunately, I couldn’t get it to work with Safari but it works on Chrome. After you have installed the plugin a small icon will appear next to the address bar. When you click on the icon the following screen appears.
Run the test and get some interesting information about the site you are on. This is a quick way of checking your competition’s website.
GTMetrix
This is another website that will test your page speed using both PageSpeed and Yslow. All these tools have great advice on how you can improve your site performance.

This is an example of a poor result using GTMetrics
WP Speed of Light
This is a plugin for WordPress sites to improve site performance. Download WP Speed of Light, unzip and uploaded it to the plugins folder in the wp-content folder on the server or go to the Plugins section of WordPress Dashboard and click on the “Add New” button at the top of the page. Use the search box to find it, install and activate it. For more information about installing plugins go to WPBeginner
Conclusion
Images often cause the biggest problem for slow loading websites. Always optimise your images to the smallest acceptable file size.
Where possible reduce the number of request to the server by combining files and use of image sprites.
Minify your HTML, CSS and JavaScript files.
Use Gzip compression to compress your files.
Enable caching so that your page will load faster on repeat visits.
Test your page to see how it performs.
Slow page load time will annoy your visitors and will also annoy Google. You don’t want a report like this.
Last updated 17th November 2018