If you're like me, you probably don't like waiting in supermarket queues. When it comes to websites, it turns out most people are not all that different to supermarket shoppers, and quickly become impatient if they don't get a fast response.
In a world of ultra-fast fibre broadband, 4K streaming video, and terrabytes of storage, it's easy to overlook website speed optimisations, however for many people, their computing device of choice is a mobile device, typically with monthly data caps, and with highly variable connection speeds depending on signal strength. Also, while it's common for desktop PCs and laptops to have 8 or 16GB of RAM, plenty of smartphones have less than 2GB of RAM.
(RAM is not to be confused with storage. RAM is working memory like desk space, whereas storage which is also measured in GB is like a filing cabinet, and generally much bigger than working space, but also slower. Smartphones often don't even specify how much RAM they have in advertising material, just how much storage, so when a phone says it's 16GB, that's storage, not RAM, and the quantity of RAM or work space will be a lot less.)
Web developers and designers work on nice high performance desktop or laptop computers with fast internet connections, and it's easy to design around what looks good in that environment, however with up to 60% of website traffic potentially coming from mobile devices, and Google taking a mobile first approach to search indexing, it's critical to ensure that websites not only look good on mobile, but also perform well in the more constrained environment of smartphones.
My introdution to computing came with the Commodore 64. It was called that because it had just 64 kilobytes of RAM and was proud of it, as this was more than many contemporary computers had. It had just one CPU ran at just 1MHz - today's computers frequently top 3GHz and have multiple cores - like multiple CPUs in one. Today, this seems laughable, however learning to make use of the Commodore 64 taught me some useful skills. Back when every byte and instruction counted, to be a succesful programmer, you had to learn how to do things efficiently avoiding wastage.
Leap forward to the modern environment where 'cloud' is the catchphrase, and everything happens on the internet, and although even a basic smartphone has well over a thousand times more computing power than my first computer, speed and efficiency still matters.
Why Responsive Design isn't enough - Mobile friendly, but not always mobile optimised
With the realisation that smartphones are the primary device many people use to access the web, a change in website design philosophy to something called respsonsive design has become standard. Responsive design means that a website will adapt itself to look good on any size of screen, so that text will always be readable, and it will make best use of available screen space. There are a lot of tools available to make it easy to create responsive designs, for developers, designers, and even end users. I personally use the very popular Bootstrap framework, with customisations and optimisations for site layout, which means that as a developer, I can make attractive websites quickly that just work.
Beyond responsive to mobile optimised
The trouble with responsive design on its own, is that it only solves part of the problem. It ensures that websites look good on any size screen, and are easy to interact with, however appearances are sometimes only skin deep, and while it's easy to make a site that looks good, it takes a bit more effort to make a site that actually performs well on any device. Bootstrap, which I've already mentioned, is a very popular tool with developers and designers because it contains a comprehensive suite of components to design a responsive website, however because it's designed as a universal tool, it contains many components that may not be used at all on many websites, but take up space, and add to download and processing time.
Performance is one of many factors Google takes into account when ranking sites, so going to the extra effort to have a truly mobile optimised site.
A really common issue is websites that are designed with a desktop first mentality with huge images that have to download on mobile devices as well. Sure, the images look the right size on a smartphone screen - but only because the big image is squished down to size after it has downloaded, and chewed through precious MB of data. It's far better to only download the image already resized to an appropriate size for a mobile screen.
When a web browser displays a web page, it has to download all the components, and interpret them to figure out what to actually display. Even components that aren't used, still have to be intepreted to check whether they are used or not, so having a lot of redundant code will have some impact on performance. I'll start a site with full Bootstrap, but once I have the design finalised, I'll go through and aggressively cull out components that aren't being used to create a much leaner version that takes less time to download, and for the browser to interpret.
One issue that can have a big impact on website performance is an issue called latency. Imagine you need to tranfer a houseful of people somewhere. If each one gets in their own car, all parked in the same driveway, they each have to get in their car, put the seatbelt on, start the motor and drive off one after the other. On the other hand, if they all get into one car, they can put their seatbelts on simultaneously, start just one motor, and drive off together, so even though the speed limit is the same, they're all likely reach their destination slightly earlier.
Something similar happens with web sites. Each file that needs to be fetched from the server has a small overhead, so that a single large file can finish downloading sooner than the last of a lot of little ones. Because the web browser typically has to check the instructions in each file to see how it impacts on drawing the page, this can introduce significant delays in drawing a web page on screen. A CMS like Wordpress with hundreds of plugins can add lots of useful features, but each one can add additional files that need to be downloaded, so it's quite possible to end up with a page that downloads dozens of files before it can display. Smart software on a web server can be configured to combine files, so that like the car full of passengers, they get to their destination a bit sooner as one download instead of many.
How to use free tools to analyse website performance bottlenecks
Figuring out all this optimisation stuff can sound like rocket science, but fortunately there are quite a lot of free tools that can help. Google in particular offer a lot of useful resources. Google Chrome has some very useful performance analysis tools built right into its Developer Tools. Many people may never get to see this, however pressing the F12 key on the keyboard when visiting any web page brings up the developer tools with a whole host of diagnostics. Much of this will seem like gibberish to the average person, however there are two very useful tools for checking performance; Audits and Pagespeed. Pagespeed can give you a range of suggestions for improvements to performance of your site for both desktop and mobile use, while Audits provides a mobile specific audit which gives you a score out of 100 on five different key criteria, along with suggestions on how to improve your scores. These improvements typically require some technical knowledge, however they're a good starting point for a discussion with your web developer. Also they can be a good way to evaluate your web developer or designer, as if they absolutely should know how to give you an acceptable score on all these criteria. A perfect 100% isn't necessary, but if you're scoring under 50% on all criteria, you really need to ask why.
Fixing website performance issues
Once you've identified performance bottlenecks, you need to do something about them. Many of the changes may require your web developer or hosting provider to change. In addition to the recommendations from tools like Audits and Pagespeed, here are some other ideas that can improve performance that you can ask your developer or hosting provider about.
- Ensure that images use the srcset attribute to specify different sized versions, so the browser can choose the most appropriate one for the device.
- Use mod_pagespeed on the server to provide automatic optimisations of web pages. (Requires admin access to the server to install if not already installed)
- If you use Wordpress or any other CMS powered by PHP, eg Joomla, Drupal, Prestashop, Processwire and many others, making sure that your site runs on version 7 or later of PHP.
- If you are using shared hosting, check that your hosting provider has not over-allocated resources. Shared hosting can be cheap, but if there are too many websites on a server and not enough RAM and CPU resources performance can suffer.
Progressive Web Apps - The New Frontier
If you've used the Google mobile site audit tool I mentioned previously, one of the things you might have noticed is a score for something called PWA or Progressive Web App. What on earth is this? PWAs are a really cool new direction the web is taking as the boundaries between websites and apps blur. If your website is fully optimised as a PWA, not only will it be fast on a mobile, but also parts of it can work offline when there's no internet connection, and it can be installed on a user's home screen just like a native app, with its own icon, and will run independently instead of in a browser window.
This is a super-cool, as instead of figuring out whether to spend limited funds on a website or an app, you can have them both, just by fully optimising your website, so that it becomes more app-like. Imagine if you run an online shopping site, and users don't have to use Google or open their browser, but have your icon direct on their home screen. In this case speed isn't just a case of loading your site, but also getting to it in the first place.
Conclusion
The web is a constantly changing environment as new developments in browser technology add new features that could only be dreamed of a few years ago. It's exciting, but can sometimes be hard to keep up with, even for those of us who work in the industry. I come from a developer rather than design background, so I like to dig deep under the bonnet of websites, which can get quite technical. I've hope I've managed to explain things in a way that makes sense to non-techies. If you've got any questions, you can always contact me.