{"id":21540,"date":"2018-07-18T08:31:31","date_gmt":"2018-07-18T07:31:31","guid":{"rendered":"https:\/\/fifteen-staging.fifteen.dev\/blog\/an-introduction-to-google-lighthouse\/"},"modified":"2023-01-30T17:35:47","modified_gmt":"2023-01-30T17:35:47","slug":"an-introduction-to-google-lighthouse","status":"publish","type":"post","link":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-google-lighthouse\/","title":{"rendered":"An Introduction to Google Lighthouse"},"content":{"rendered":"<div class=\"entry-content\"><p>We all know the feeling when you land on a web page, and the images start loading in like a Star Wars rolling credit sequence. Or when the page is stuck on a plain white sheet. You\u2019re telling yourself&#8230; I can do better than this. Sound familiar?<\/p>\n<p>According to a study done by <a href=\"https:\/\/neilpatel.com\/blog\/loading-time\/\">Kissmetrics<\/a>, 47% of users expect a website to load in less than 2 seconds. On top of this, 40% will leave a site if it takes more than 3 seconds. Now that\u2019s a scary statistic, but with Google introducing its new optimisation tool, Google Lighthouse, could it be the new solution for improving the quality of websites?<\/p>\n<h2>What is Google Lighthouse?<\/h2>\n<p>Google lighthouse is an open-source tool with the intention of improving the quality of web pages. It does this by looking at the assets, code and server of a website by performing an audit, then feeding back methods to improve.<\/p>\n<p>After running a scan on a website, you are given a feedback sheet which breaks down the website into the following sections:<\/p>\n<div class=\"page\" title=\"Page 1\">\n<div class=\"section\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<ul>\n<li>Performance<\/li>\n<li>Progressive Web App<\/li>\n<li>Accessibility<\/li>\n<li>Best Practises<\/li>\n<li>SEO<\/li>\n<\/ul>\n<p class=\"p1\"><span class=\"s1\">The screenshots below are taken from a random website online which was launched 18 months ago.<\/span><\/p>\n<\/div>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-16396\" src=\"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/07\/Google-Lighthouse-Bad-Score.png\" alt=\"Google Lighthouse Bad Score\" \/><\/p>\n<p>&nbsp;<\/p>\n<p class=\"p1\"><span class=\"s1\">At first glance, this may seem like a pretty poor score, but consider this; Lighthouse is <i>very <\/i>critical of your website and achieving a solid 100 on all 5 topics would be near to impossible, so aiming for green is more of a realistic goal.<\/span><\/p>\n<\/div>\n<div class=\"page\" title=\"Page 1\">\n<div class=\"section\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<h3>How do I use it?<\/h3>\n<div class=\"page\" title=\"Page 1\">\n<div class=\"section\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<p>You can use google lighthouse yourself by installing the chrome extension and activate it by clicking the small little icon in your browser tray for any website (including local websites). Alternatively, Google has other ways of introducing a Lighthouse workflow:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"page\" title=\"Page 2\">\n<div class=\"section\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<ul>\n<li>From the command line. Automate your Lighthouse runs via shell scripts.<\/li>\n<li>As a Node module. Integrate Lighthouse into your continuous integration systems.<\/li>\n<\/ul>\n<h2>The Breakdown<\/h2>\n<p>Here&#8217;s a breakdown of what some of the metrics in Lighthouse mean.<\/p>\n<\/div>\n<h3>Performance<\/h3>\n<p class=\"p1\"><span class=\"s1\">You can see that Lighthouse has listed the items in order of having an adverse impact on the site, such as items 1 to 5 due to their load time. The great thing about Google&#8217;s lighthouse is you can expand each of these pointers and for more information on how to improve.<\/span><\/p>\n<h4>Lazy Loading<\/h4>\n<p>Defer off-screen images is a simple fix to do, which will have a significant impact on the site. You can use a lazy loading library to help you fix this, one, in particular, we like to use is https:\/\/github.com\/verlok\/lazyload as it is easy to set up, and you can even lazy load background images. Follow the documentation for setup. If you\u2019re a little less technical, you could also find a WordPress plugin which could be installed into your site.<\/p>\n<p>After configuring the whole site to lazy load images and re-running lighthouse for the entire site, we can see the improvements here:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-16400\" src=\"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/07\/Screen-Shot-2018-07-18-at-10.16.25.png\" alt=\"Good Results Google Lighthouse\" \/><\/p>\n<p>So lazy loading images are something that has a significant effect on your website and is one of the items which can pull down your scores the most.<\/p>\n<h4>The New Web Image Formats<\/h4>\n<p>Lighthouse wants you to use the new type of image formats in your web apps, which include the new JPEG 2000, JPEG XR, and WebP formats. The purpose of these formats, in a nutshell, it&#8217;s to offer \u2018more bang per buck\u2019 per memory bit over its rivals such as traditional jpeg methods. The problem is though that these image formats are not even supported themselves, take a look at this overview on<a href=\"https:\/\/caniuse.com\/#feat=jpeg2000\"> JPEG 2000 browser compatibility<\/a>.<\/p>\n<p>This begs the question whether we should even be considering supporting the new web formats as the number of fall-backs we have to do to get images to display in all major browsers is not worth the work. However, one thing to consider is the fact that\u00a0 Lighthouse will penalise you quite heavily.<\/p>\n<h4>Traditional Optimisation Formats<\/h4>\n<p>It\u2019s important to remember that Lighthouse isn\u2019t here to introduce a whole new set of methods for making your website faster. It does still look at optimisation methods such as Render Blocking Content and Proper Sized Images which we are all familiar with thanks to likes of<a href=\"https:\/\/gtmetrix.com\/\"> GTMetrix<\/a> and <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\">Google Page Insights<\/a> so accommodating for these improvements should be relatively trivial for you.<\/p>\n<h3>Accessibility<\/h3>\n<p>With Lighthouse, there\u2019s now a focus on accessibility for users which means we\u2019re all going to have to be even better at our image alt tags then we already were&#8230; if only. There\u2019s a whole load of other aspects which factor into how accessible your site is, which can be beneficial to your site regardless of Lighthouse support. But, 90% of the time these issues are site specific depending on what HTML elements you\u2019re using, and of course, your websites target audience, for example, do disabled people primarily use it?<\/p>\n<h3>Device Throttling<\/h3>\n<p>Another significant feature for Lighthouse is its device throttling, what this means is that by default Lighthouse will complete the scan of your website on a Nexus 5 on a fast 3G connection; which is very interesting as a lot of the research Google do on mobile site speed is with a Nexus 5. This means if you adhere to Lighthouse performance score on a simulated Nexus 5 then you are optimising for the same settings Google appears to favour when judging a website\u2019s mobile site speed.<\/p>\n<h2>In Conclusion<\/h2>\n<p>With Lighthouse the question is; does it deliver where services such as GTMetrix do not? Yes, it does. It\u2019s capable of doing vivid and comprehensive scans of your whole website delving into aspects including performance and accessibility while utilising some device throttling simulation to give more realistic results than the conventional method of scanning your website. It\u2019s a powerful tool, that\u2019s free, and if you take the time to understand and introduce into your workflow, it could be a better solution to your website optimisation tool package.<a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\/\"> Why not give your website a scan?<\/a><\/p>\n<\/div>\n<p>If you&#8217;re looking for help with how to optimise your site with Google Lighthouse which has additional benefits of combatting mobile first-indexing then it&#8217;s worth having a<a href=\"https:\/\/www.fifteendesign.co.uk\/contact\/\"> chat with us today<\/a>.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"We all know the feeling when you land on a web page, and the images start loading in like a Star Wars rolling credit sequence. Or when the page is stuck on a plain white sheet. You\u2019re telling yourself&#8230; I can do better than this. Sound familiar? According to a study done by Kissmetrics, 47% [&hellip;]","protected":false},"author":53,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-21540","post","type-post","status-publish","format-standard","hentry","category-news"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>An Introduction to Google Lighthouse - Fifteen<\/title>\n<meta name=\"description\" content=\"Easy to understand guide about all the metrics within Google Lighthouse and what they mean for your website.\" \/>\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.fifteendesign.co.uk\/blog\/an-introduction-to-google-lighthouse\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"An Introduction to Google Lighthouse\" \/>\n<meta property=\"og:description\" content=\"Easy to understand guide about all the metrics within Google Lighthouse and what they mean for your website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-google-lighthouse\/\" \/>\n<meta property=\"og:site_name\" content=\"Fifteen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/FifteenDesign\" \/>\n<meta property=\"article:published_time\" content=\"2018-07-18T07:31:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-30T17:35:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/07\/Google-Lighthouse-Bad-Score.png\" \/>\n<meta name=\"author\" content=\"Sam Doyle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sam Doyle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"An Introduction to Google Lighthouse - Fifteen","description":"Easy to understand guide about all the metrics within Google Lighthouse and what they mean for your website.","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.fifteendesign.co.uk\/blog\/an-introduction-to-google-lighthouse\/","og_locale":"en_GB","og_type":"article","og_title":"An Introduction to Google Lighthouse","og_description":"Easy to understand guide about all the metrics within Google Lighthouse and what they mean for your website.","og_url":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-google-lighthouse\/","og_site_name":"Fifteen","article_publisher":"https:\/\/www.facebook.com\/FifteenDesign","article_published_time":"2018-07-18T07:31:31+00:00","article_modified_time":"2023-01-30T17:35:47+00:00","og_image":[{"url":"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/07\/Google-Lighthouse-Bad-Score.png","type":"","width":"","height":""}],"author":"Sam Doyle","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Sam Doyle","Estimated reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-google-lighthouse\/#article","isPartOf":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-google-lighthouse\/"},"author":{"name":"Sam Doyle","@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/225efe9d507c30e4cfedd9db29c618f2"},"headline":"An Introduction to Google Lighthouse","datePublished":"2018-07-18T07:31:31+00:00","dateModified":"2023-01-30T17:35:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-google-lighthouse\/"},"wordCount":1030,"commentCount":0,"image":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-google-lighthouse\/#primaryimage"},"thumbnailUrl":"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/07\/Google-Lighthouse-Bad-Score.png","articleSection":["News"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-google-lighthouse\/","url":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-google-lighthouse\/","name":"An Introduction to Google Lighthouse - Fifteen","isPartOf":{"@id":"https:\/\/www.fifteendesign.co.uk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-google-lighthouse\/#primaryimage"},"image":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-google-lighthouse\/#primaryimage"},"thumbnailUrl":"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/07\/Google-Lighthouse-Bad-Score.png","datePublished":"2018-07-18T07:31:31+00:00","dateModified":"2023-01-30T17:35:47+00:00","author":{"@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/225efe9d507c30e4cfedd9db29c618f2"},"description":"Easy to understand guide about all the metrics within Google Lighthouse and what they mean for your website.","breadcrumb":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-google-lighthouse\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-google-lighthouse\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-google-lighthouse\/#primaryimage","url":"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/07\/Google-Lighthouse-Bad-Score.png","contentUrl":"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/07\/Google-Lighthouse-Bad-Score.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-google-lighthouse\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fifteendesign.co.uk\/"},{"@type":"ListItem","position":2,"name":"An Introduction to Google Lighthouse"}]},{"@type":"WebSite","@id":"https:\/\/www.fifteendesign.co.uk\/#website","url":"https:\/\/www.fifteendesign.co.uk\/","name":"Fifteen","description":"Creative. Digital. Marketing.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fifteendesign.co.uk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/225efe9d507c30e4cfedd9db29c618f2","name":"Sam Doyle","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/705b2bbe1c8c8f0764afb5a35b0d21a15112491f97414856494078ee8d5faf9f?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/705b2bbe1c8c8f0764afb5a35b0d21a15112491f97414856494078ee8d5faf9f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/705b2bbe1c8c8f0764afb5a35b0d21a15112491f97414856494078ee8d5faf9f?s=96&d=mm&r=g","caption":"Sam Doyle"},"url":"https:\/\/www.fifteendesign.co.uk\/blog\/author\/samd\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts\/21540","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/users\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/comments?post=21540"}],"version-history":[{"count":0,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts\/21540\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/media?parent=21540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/categories?post=21540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/tags?post=21540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}