This week we were discussing performance testing and the best techniques available to ensure our websites are optimised to fly, be super quick – to load efficiently across all devices.
During the review we concentrated on tools made available by Google, namely Google PageSpeed Insights (although we briefly also looked at gtmetrix). PageSpeed Insights analyses the content of a web page, then generates suggestions to make that page faster. Reducing page load times can reduce bounce rates and increase conversion rates. The following are common suggestions made on a range of websites tested through Google PageSpeed Insights
Improve server response time
Essentially the only way to score higher for this one is to upgrade your hosting. Hosting options range to affordable shared hosting through to expensive dedicated servers.
Optimize the order of styles and scripts
Correctly ordering external stylesheets and external and inline scripts enables better parallelization of downloads and speeds up browser rendering time. As a general rules put CSS in the header and scripts last thing before closing the body tag.
Compressing resources with gzip or deflate can reduce the number of bytes sent over the network.
Avoid CSS @import
Using CSS @import in an external stylesheet can add additional delays during the loading of a web page. However we often use Google fonts or fonts.com and so we have to consider which is more important – style or speed.
Serve scaled images
This was a tricky one. Responsive design for mobile dictates that we should have fluid images that scale according to the container with which it is in. This is to ensure that the images look great on smartphones, tablets and desktop. Typically we were not putting in any dimensions on images (removing width= and height= on the element) and putting max-width: 100%; and height: auto; in the css for the image. The page speed tests do not like this. We now put in these dimensions, even though they are overruled by the css.
Make sure your images are only as big as they need to be! If you’re using WordPress then there is also a Smushit plugin that is great for compressing images efficiently.
Define your Charset
You should state a character set within your html head – ie UTF-8 for example.
Remove query strings from the URL
The page speed tools will pick you up on any urls that contain a query (ie product=?123). This is really bad practise anyway. Search engines like meaningful URLs.
Combine images into CSS sprites
Combining images into as few files as possible using CSS sprites reduces the number of round-trips and delays in downloading other resources. Essentially this is the process of putting all your UI graphics into a single image that is then placed and masked using css to display the only image / icon that you need.
Minify your css
Compacting CSS code can save many bytes of data and speed up downloading, parsing, and execution. After minifying your css it will become a single block of text within the css file (a bit of a nightmare to work with but is super quick to load).
Leverage browser caching
Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.
Specify a cache validator
By specifying a cache validator – a Last-Modified or ETag header – you ensure that the validity of cached resources can efficiently be determined.
This is something made possible through editing you htaccess file. You may also need to contact your hosting provider
It would appear that standard share and like buttons are an absolute killer when it comes to speed. The shear volume of script that sits behind a simple share button is astounding and is a real issue when it comes to speed (especially if you’re on a mobile device). You should create friendly share buttons, which we may cover in a future post.
Fast loading vectors on the web
For icons you should consider converting these to a font to make them load quicker and to ensure they are super crisp on retina displays. There are various ways of doing this. Alternatively you could choose your icons from an online resource such as http://fontello.com
Committed to creating high performance web pages
We want to create websites that perform well. We find ourselves balancing aesthetics with functionality, rich content and the above performance tests. Of course it’s not always about speed. For example a product detail page with a small product image would score a higher page speed than the same page with a big, glossy image in a div overlay…but that doesn’t make it better. We aim to create pages that convert by hitting their goal. It’s important that we optimise the pages as much as possible without compromising their overall impact or effectiveness.