{"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

Benchmarking our website speed<\/h2>\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

Google PageSpeed Insights<\/h3>\n

Mobile: \"\"<\/p>\n

Desktop:\u00a0\"\"<\/p>\n

Chrome Developer Tools – Lighthouse Report – Simulated Slow 4G<\/h3>\n

Mobile:\u00a0\"\"<\/p>\n

Desktop: \"\"<\/p>\n

Opportunities to improve website speed<\/h2>\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

\"US<\/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

Some more things we did to improve our website speed<\/h2>\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>\n

Our improved website speed results<\/h2>\n

Our page size is now 1.5MB<\/em>. If you have read our first optimisation post<\/a>, you will have noticed that we have reduced our homepage size by a whopping 6.8MB<\/strong>! When we first started working on this, the homepage size was an outrageous 7.3MB!<\/p>\n

We are approaching the crux now in terms of resources spent vs. performance gain. While there is more that can be done to improve our website performance, ultimately we do not have infinite resource to spend on performance optimisation. There are whole departments of people that work on optimisation every day for companies like Google, Amazon and Facebook and even they manage to find something to do every day.<\/p>\n

The benefits of performance on SEO<\/h2>\n

Once these changes have bedded in and settled down, we\u2019ll provide an update on how these speed optimisations have affected our SERP rankings.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

6 months ago we deployed a series of improvements to the USdigital website, 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","protected":false},"author":5,"featured_media":3412,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[60],"yoast_head":"\nWebsite Speed Improvements - Optimising Images & Download Size<\/title>\n<meta name=\"description\" content=\"6 months ago we deployed a series of improvements to the USdigital website, focusing on improving website speed. That project is still ongoing.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.usdigital.co.uk\/blog\/website-speed-improvements-optimising-images-reducing-download-size\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Website Speed Improvements - Optimising Images & Reducing Download Size\" \/>\n<meta property=\"og:description\" content=\"6 months ago we deployed a series of improvements to the USdigital website, focusing on improving website speed. That project is still ongoing.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.usdigital.co.uk\/blog\/website-speed-improvements-optimising-images-reducing-download-size\/\" \/>\n<meta property=\"og:site_name\" content=\"USdigital\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-31T11:00:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-21T12:33:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.usdigital.co.uk\/wp-content\/uploads\/Screen-Shot-2019-04-23-at-15.57.47-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"555\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andy Clarke\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.usdigital.co.uk\/#website\",\"url\":\"https:\/\/www.usdigital.co.uk\/\",\"name\":\"USdigital\",\"description\":\"Innovative digital strategy\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.usdigital.co.uk\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.usdigital.co.uk\/blog\/website-speed-improvements-optimising-images-reducing-download-size\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/cdn.usdigital.co.uk\/wp-content\/uploads\/20230309115537\/Screen-Shot-2019-04-23-at-15.57.47-1.png\",\"contentUrl\":\"https:\/\/cdn.usdigital.co.uk\/wp-content\/uploads\/20230309115537\/Screen-Shot-2019-04-23-at-15.57.47-1.png\",\"width\":1000,\"height\":555,\"caption\":\"US Digital Website Homepage - Speed Optimisation\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.usdigital.co.uk\/blog\/website-speed-improvements-optimising-images-reducing-download-size\/#webpage\",\"url\":\"https:\/\/www.usdigital.co.uk\/blog\/website-speed-improvements-optimising-images-reducing-download-size\/\",\"name\":\"Website Speed Improvements - Optimising Images & Download Size\",\"isPartOf\":{\"@id\":\"https:\/\/www.usdigital.co.uk\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.usdigital.co.uk\/blog\/website-speed-improvements-optimising-images-reducing-download-size\/#primaryimage\"},\"datePublished\":\"2019-10-31T11:00:46+00:00\",\"dateModified\":\"2019-11-21T12:33:54+00:00\",\"author\":{\"@id\":\"https:\/\/www.usdigital.co.uk\/#\/schema\/person\/a993f6933f7850331658604f32d53c82\"},\"description\":\"6 months ago we deployed a series of improvements to the USdigital website, focusing on improving website speed. That project is still ongoing.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.usdigital.co.uk\/blog\/website-speed-improvements-optimising-images-reducing-download-size\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.usdigital.co.uk\/blog\/website-speed-improvements-optimising-images-reducing-download-size\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.usdigital.co.uk\/blog\/website-speed-improvements-optimising-images-reducing-download-size\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.usdigital.co.uk\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Website Speed Improvements – Optimising Images & Reducing Download Size\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.usdigital.co.uk\/#\/schema\/person\/a993f6933f7850331658604f32d53c82\",\"name\":\"Andy Clarke\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.usdigital.co.uk\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e24685b12816f070f7284bde908e6ef4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e24685b12816f070f7284bde908e6ef4?s=96&d=mm&r=g\",\"caption\":\"Andy Clarke\"},\"description\":\"Senior Web Developer at US Digital.\",\"url\":\"https:\/\/www.usdigital.co.uk\/author\/andyclarke\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Website Speed Improvements - Optimising Images & Download Size","description":"6 months ago we deployed a series of improvements to the USdigital website, focusing on improving website speed. That project is still ongoing.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.usdigital.co.uk\/blog\/website-speed-improvements-optimising-images-reducing-download-size\/","og_locale":"en_GB","og_type":"article","og_title":"Website Speed Improvements - Optimising Images & Reducing Download Size","og_description":"6 months ago we deployed a series of improvements to the USdigital website, focusing on improving website speed. That project is still ongoing.","og_url":"https:\/\/www.usdigital.co.uk\/blog\/website-speed-improvements-optimising-images-reducing-download-size\/","og_site_name":"USdigital","article_published_time":"2019-10-31T11:00:46+00:00","article_modified_time":"2019-11-21T12:33:54+00:00","og_image":[{"width":1000,"height":555,"url":"https:\/\/www.usdigital.co.uk\/wp-content\/uploads\/Screen-Shot-2019-04-23-at-15.57.47-1.png","type":"image\/png"}],"twitter_card":"summary","twitter_misc":{"Written by":"Andy Clarke","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/www.usdigital.co.uk\/#website","url":"https:\/\/www.usdigital.co.uk\/","name":"USdigital","description":"Innovative digital strategy","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.usdigital.co.uk\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"ImageObject","@id":"https:\/\/www.usdigital.co.uk\/blog\/website-speed-improvements-optimising-images-reducing-download-size\/#primaryimage","inLanguage":"en-GB","url":"https:\/\/cdn.usdigital.co.uk\/wp-content\/uploads\/20230309115537\/Screen-Shot-2019-04-23-at-15.57.47-1.png","contentUrl":"https:\/\/cdn.usdigital.co.uk\/wp-content\/uploads\/20230309115537\/Screen-Shot-2019-04-23-at-15.57.47-1.png","width":1000,"height":555,"caption":"US Digital Website Homepage - Speed Optimisation"},{"@type":"WebPage","@id":"https:\/\/www.usdigital.co.uk\/blog\/website-speed-improvements-optimising-images-reducing-download-size\/#webpage","url":"https:\/\/www.usdigital.co.uk\/blog\/website-speed-improvements-optimising-images-reducing-download-size\/","name":"Website Speed Improvements - Optimising Images & Download Size","isPartOf":{"@id":"https:\/\/www.usdigital.co.uk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.usdigital.co.uk\/blog\/website-speed-improvements-optimising-images-reducing-download-size\/#primaryimage"},"datePublished":"2019-10-31T11:00:46+00:00","dateModified":"2019-11-21T12:33:54+00:00","author":{"@id":"https:\/\/www.usdigital.co.uk\/#\/schema\/person\/a993f6933f7850331658604f32d53c82"},"description":"6 months ago we deployed a series of improvements to the USdigital website, focusing on improving website speed. That project is still ongoing.","breadcrumb":{"@id":"https:\/\/www.usdigital.co.uk\/blog\/website-speed-improvements-optimising-images-reducing-download-size\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.usdigital.co.uk\/blog\/website-speed-improvements-optimising-images-reducing-download-size\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.usdigital.co.uk\/blog\/website-speed-improvements-optimising-images-reducing-download-size\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.usdigital.co.uk\/"},{"@type":"ListItem","position":2,"name":"Website Speed Improvements – Optimising Images & Reducing Download Size"}]},{"@type":"Person","@id":"https:\/\/www.usdigital.co.uk\/#\/schema\/person\/a993f6933f7850331658604f32d53c82","name":"Andy Clarke","image":{"@type":"ImageObject","@id":"https:\/\/www.usdigital.co.uk\/#personlogo","inLanguage":"en-GB","url":"https:\/\/secure.gravatar.com\/avatar\/e24685b12816f070f7284bde908e6ef4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e24685b12816f070f7284bde908e6ef4?s=96&d=mm&r=g","caption":"Andy Clarke"},"description":"Senior Web Developer at US Digital.","url":"https:\/\/www.usdigital.co.uk\/author\/andyclarke\/"}]}},"_links":{"self":[{"href":"https:\/\/www.usdigital.co.uk\/wp-json\/wp\/v2\/posts\/3735"}],"collection":[{"href":"https:\/\/www.usdigital.co.uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.usdigital.co.uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.usdigital.co.uk\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.usdigital.co.uk\/wp-json\/wp\/v2\/comments?post=3735"}],"version-history":[{"count":7,"href":"https:\/\/www.usdigital.co.uk\/wp-json\/wp\/v2\/posts\/3735\/revisions"}],"predecessor-version":[{"id":3749,"href":"https:\/\/www.usdigital.co.uk\/wp-json\/wp\/v2\/posts\/3735\/revisions\/3749"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.usdigital.co.uk\/wp-json\/wp\/v2\/media\/3412"}],"wp:attachment":[{"href":"https:\/\/www.usdigital.co.uk\/wp-json\/wp\/v2\/media?parent=3735"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.usdigital.co.uk\/wp-json\/wp\/v2\/categories?post=3735"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.usdigital.co.uk\/wp-json\/wp\/v2\/tags?post=3735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}