Chariots of File
It’s been 3 years since Google started taking site speed into consideration when deciding what pages to include in your search results. Since then, the landscape of internet browsing has changed in such a way that optimisation of your website in terms of page load performance is more important than ever. As mobile browsing on devices of various sizes and resolutions is on course to overtake the traditional method of fixed browsing from desktop or laptop computers, sites need to perform well on mobile browsers.
Google offers a tool for measuring the performance of a specified page on your website according to their PageSpeed metric and gives a helpful breakdown of where optimisation is needed. You can generate a report based on desktop or mobile browsing.
At Passion Digital, as an SEO Agency, we’re currently working on the re-invention of our own online abode, with a lot of thought and planning going into the creation of a responsive web experience, which will look and perform great on all imaginable devices. Part of the strategy for this will be to establish some best practices in terms of optimisation using Google’s PageSpeed Insights as a guideline.
One of the biggest contributors to SEO and the performance of your site is the use of images; in this article, we’ll take a look at image optimisation and also see where things are headed in terms of using graphics in web design and development.
According to pingdom’s website monitoring tools, our home page weighs in at 3.4MB, which takes approximately 3 seconds to load on a test server in Amsterdam. Google’s PageSpeed Insights tells us that we could make a significant saving of 345kb by optimising all the images on the page. So how do we go about doing this? Running the Google PageSpeed Insights extension for Google Chrome actually gives you access to optimised versions of your image files it creates for you. You can then upload these files back onto the server. You can access these via an additional module that it creates within Chrome’s developer tools (accessed by pressing F12).
There’s currently no way to batch download these files, so for working with a larger quantity of files, there are a number of online tools that you can use. Yahoo’s SmushIt has been a popular choice for many years, providing a bulk uploader and the ability to download all files back as a zipped archive, retaining the directory structure that the files were originally uploaded within.
A relative up-and-comer, Kraken offers more flexibility and arguably, more power. You can select lossless or lossy optimisation, the former meaning your files will not degrade in quality and only useless pixel information is purged from the image, whereas lossy optimisation results in smaller files but a degraded image. The browser extensions it offers for Chrome and Firefox looks for the entirety of image URL’s on a page and uploads it to their server straight from the page itself as an automated version of the URL paster.
Another great service that Kraken provides is the API that allows developers to integrate the optimiser into their own applications. I’d love to see something like this integrated into WordPress’ default themes as part of the ‘crunching’ process.
Using Kraken to optimise all the images on our home page, we saved 387.16KB which is even more than what Google was suggesting. Our page size now comes to 3.1MB and takes only 2.11 seconds to load. This has also resulted in our PageSpeed Score increasing from 75 (72 on mobile) to 86 (84 on mobile).
What does the future hold for the use of static image files in websites? The way sites are being designed and developed has already been re-thought for the problem of catering to many different viewports and resolutions. The responsive design philosophy is being practiced by an ever-increasing number of companies, from the tech savvy start-ups to more traditional and significantly larger organisations.
This approach addresses layout well and has also got developers thinking more about how to better serve up the elements that are contained within them to the new breed of browsing devices – particularly those with high-resolution displays – while keeping file sizes down to a minimum. Displays such as those used on the Nexus 10 or iPad tablets demand high resolution imagery (around 200 – 300ppi) posing a massive obstacle to optimum page load speeds, even if your site can serve the appropriate resolution file to each device.
Thankfully, browsers are shouldering much of the responsibility of rendering web graphics such as UI elements and sprites using CSS3. Tools such as CSSHat and the new Photoshop CSS3 update for CS6.1 make it much easier design and develop with this fact in mind. CSS3 is being used to create increasingly complex illustrations and iconography, covering bases which extend just beyond the realm of the site’s native UI. The age-old format of SVGs are also seeing something of a revival beyond vector cartography.
Sportlobster’s very clever, infinitely scalable, vector logo
There is certainly more to page speed optimisation than is covered in this article; we hope to get into more of the gritty details as we continue work to redevelop our own site. In future installments of this little series we’ll look at further optimisation techniques such as using Gzip compression, and share some insights as to the effect it has on our visibility. Watch this space! For now though, we hope this helps you resolve your own site’s sluggish performance. If you have any further queries or want us to cover a specific aspect of site speed, please ping us a comment below and we’ll see if we can include something in the next installment.