{"id":3735,"date":"2019-10-31T11:00:46","date_gmt":"2019-10-31T11:00:46","guid":{"rendered":"https:\/\/www.usdigital.co.uk\/?p=3735"},"modified":"2019-11-21T12:33:54","modified_gmt":"2019-11-21T12:33:54","slug":"website-speed-improvements-optimising-images-reducing-download-size","status":"publish","type":"post","link":"https:\/\/www.usdigital.co.uk\/blog\/website-speed-improvements-optimising-images-reducing-download-size\/","title":{"rendered":"Website Speed Improvements – Optimising Images & Reducing Download Size"},"content":{"rendered":"
6 months ago we deployed a series of improvements to the USdigital website<\/a>, focusing on improving website speed. That project is still ongoing so we can provide a great experience for our users. Practice what you preach, right? Today, we’re going to focus on improving website speed by optimising images to reduce the page size.<\/p>\n <\/p>\n Over the last 6 months, Google has updated a number of their tools including their Search Algorithms (the most recent algorithm update in October<\/a>) and since our last look at site speed Lighthouse 3.0 has also been rolled out<\/a>. With the advent of Lighthouse 3.0 came a few tweaks to speed scoring so we’ll benchmark again before this process and then after.<\/p>\n Mobile: <\/p>\n Desktop:\u00a0<\/p>\n Mobile:\u00a0<\/p>\n Desktop: <\/p>\n As you can see, the goalposts have shifted over the last 6 months, and quite rightly so! Let’s have a look at our top opportunities:<\/p>\n <\/p>\n Our top two performance opportunities are to ‘Serve images in next-gen formats<\/em>‘ and to ‘defer offscreen images<\/em>‘.<\/p>\n Another item that caught my eye is our current homepage size: 1.8MB<\/strong>. While this isn’t huge, it is quite significant and every byte contributes to the overall loading time of a page.<\/p>\n So, our goals are clear: serve images in next-gen formats (WebP) and decrease the filesize of our pages. In a nutshell: optimise every image even more.<\/p>\n Unfortunately, WordPress does not support WebP images out of the box, yet. Part of this is probably because not all browsers are compatible with WebP yet (see CanIUse WebP for more information<\/a>) and as such it will still need a legacy format counterpart such as .png or .jpg. While WordPress will generate different image sizes for you when you upload an image, currently it does not do any conversions on the image. To fully support WebP images it will need to take the uploaded file, check to see if it’s a WebP, convert it to .jpg or .png if it is, or convert it to a WebP if not. Then it will need to process the thumbnail sizes on each of the two versions of the image. This potentially means you could end up with 10 different images stored on your server for one image upload.<\/p>\n One of the image management plugins we use is EWWW Image Optimiser<\/a> which does support webp images. In this case, it was as simple as configuring the plugin and re-optimising all of the images on the site. Obviously not all themes are going to be as easy as this to convert over, but for the most part there shouldn’t be too much trouble.<\/p>\nBenchmarking our website speed<\/h2>\n
Google PageSpeed Insights<\/h3>\n
Chrome Developer Tools – Lighthouse Report – Simulated Slow 4G<\/h3>\n
Opportunities to improve website speed<\/h2>\n
Some more things we did to improve our website speed<\/h2>\n
Our improved website speed results<\/h2>\n