Skip to Content
Main Content

Hiker Looking Out Over Mountains

9 Minute Read | July 31, 2023

Improve Website Performance with Page Speed Insights from Google Lighthouse

Updated: July 31, 2023
Originally Published: June 6, 2019

 

In November of 2018, Google announced that Lighthouse would drive PageSpeed Insights. Lighthouse, an open-source, automated tool built into Chrome Developer Tools, analyzes performance metrics from lab and field data to return a performance score and a checklist of improvement opportunities. New in 2023, PageSpeed Insights includes links that are shareable for 30 days with a timestamp denoting the time of analysis.

Faster interaction times can improve your site ROI. Lighthouse audits highlight content and/or scripts that impede end-users interaction with visible content on the webpage. As the user begins to read or interact with the visible content, additional content and scripts continue to load or run in the background.

How Do Many Websites Score?

An analysis in June 2018 of the Lighthouse performance scores of 70 leading retailers found that most of them operate slow websites. The average score was a 22.1 out of 100. B&H Photo scored 59, to top the list, while several sites scored a zero.

More recently, February 2023 statistics from Forbes.com show that 40% of users will leave a page that doesn't load in less than 2 seconds, costing retailers $2.6 billion U.S. dollars in sales each year.

How to Test Your Site

To run a test with Lighthouse, load the web page into your Chrome browser and open the Developer Tools panel with the keyboard shortcut Command+Option+I (Mac) or Control+Shift+I (Windows, Linux). Alternatively, go through the Chrome menu under More Tools, under the Audits tab, click Run Audits.

Lighthouse tests a single page at a time. For a more comprehensive look at the status of your site, run the test on multiple pages with different content types. Include key conversion pages, such as signups and shopping carts. Remember that different network conditions and external resources may cause a site’s score to vary in subsequent tests. Run Lighthouse tests from a hosted service to improve consistency.

Newer tools allow you to run bulk page speed tests against 100% of site URLs at once.

About the Results

Below are the results of the developers.google.com site as audited for performance by Lighthouse against a Simulated Fast 3G connection. Don’t let the red, orange, and green color scheme mislead you -- Opportunities are not Errors. This report sheds light on ways to improve site performance. Caution: Some improvements come at the cost of significant implementation and/or maintenance effort, sometimes with little potential ROI.

Out of 100 possible points,

  • Good sites score over 75;
  • Average sites run 45-74;
  • Poor sites range from 44 to 0.
  • Only results under Metrics contribute to the score.

Audits under Opportunities and Diagnostics do not impact the overall score. See the Lighthouse Scoring Guide for more detail.

An example of a Lighthouse report

What Can You Do to Improve Site Scores?

Defer Off-Screen Images

Optimize image files and sizes as your first and most effective way to improve site speed. Next, if your site includes many or large images or videos, lazy-load assets that are not critical to the first screen view. Lazy loading allows for faster perceived load time and fewer downloads to the end-user.

Minimize Use of Third-Party Scripts and Reduce JavaScript execution time

Limit third-party scripts to those that produce significant ROI. According to the Google developers’ site, “Third-party scripts are a predominant cause of performance slowdowns and are often caused by resources outside of your control.”

Examples of third-party scripts:

  • Social sharing buttons (e.g. Twitter, Facebook, G+)
  • Video player embeds (e.g. YouTube, Vimeo)
  • Advertising iframes
  • Analytics & metrics scripts
  • A/B testing scripts for experiments
  • Helper libraries, such as date formatting, animation and functional libraries.

Maintain these tools and services on your site only if they add enough value to balance the performance cost. Confirm that any third-party scripts are minified and otherwise performance-optimized though use of such attributes as async, defer, preconnect and dns-prefetch.

‘Opportunities’ That are Difficult to Implement and May Not Balance Against ROI

Efficiently Encode and Size Images Properly

Warnings will alert you to unoptimized images. Again, optimizing your images is your best defense against poor site performance and long load times. However, to fully clear this “opportunity” from the audit results, the site would need to use either the <picture> element and or <img srcset>, which means storing multiple versions of an image or employing third-party image optimization services and CDNs.

  • Maintaining multiple versions of every image can be challenging for content creators.
  • Content creators must understand how individual images and their containers change across screen sizes and must code for appropriate image sizes.
  • Third-party image optimization services add significant cost to your project.

Defer Unused CSS

Google recommends that you wait to load any assets, including the site’s visual styles, for any content that is not immediately visible on-screen “above the fold”. This is very difficult to manage when content shown “above the fold” can change with screen size. Also, if your site has dynamic and frequently-changing content, deferring unused CSS requires coding by a developer with each content change – a fact at odds with the purpose of your CMS. That said, if you have CSS that you know is always safe to deferred, it’s possible to preload these files and add them via JavaScript after the initial page render. Built-in features of Titan 6.9.5 handle this type of preloading and deferring.

Ensure Text Remains Visible During Webfont Load

Commonly used, free Google fonts do not natively support this suggestion. However, fonts can be served locally and coded to meet this suggestion. In this case, the user may see a flash of unstyled text, meaning the text will flash from the fallback font to the branded font when the latter has loaded. This flash can be unsettling for the user and might shift the layout.

Summary

Site audits can be helpful tools for exposing glaring content errors (especially unoptimized images) and by highlighting opportunities to maximize your site’s performance. But don’t get too caught up with audit scores. Your perfect score balances your users’ needs and business needs.

If you need assistance optimizing your website for improved page speed, reach out. Our expert website design and development team is here to help!

Authored By

Sydney Shimko

Sydney Shimko

Front End Development Practice Lead

hand-drawn owl

Get Expert Tips

3613914/Blog/Improve-Website-Performance-with-Google-Lighthouse9
<p><span class="h6">Updated: July 31, 2023<br /> Originally Published: June 6, 2019</span></p> <p>&nbsp;</p> <p>In November of 2018, <a href="https://webmasters.googleblog.com/2018/11/pagespeed-insights-now-powered-by.html" linktype="3" target="_blank">Google announced</a> that Lighthouse would drive <a href="https://pagespeed.web.dev/" linktype="3" target="_blank">PageSpeed Insights</a>. Lighthouse, an open-source, automated tool built into Chrome Developer Tools, analyzes performance metrics from lab and field data to return a performance score and a checklist of improvement opportunities. New in 2023, PageSpeed Insights includes links that are shareable for 30 days with a timestamp denoting the time of analysis.</p> <p>Faster interaction times can improve your site ROI. Lighthouse audits highlight content and/or scripts that impede end-users interaction with visible content on the webpage. As the user begins to read or interact with the visible content, additional content and scripts continue to load or run in the background.</p> <h2>How Do Many Websites Score?</h2> <p>An analysis in June 2018 of the <a href="https://www.practicalecommerce.com/70-leading-retailers-lighthouse-scores-revealed" linktype="3" target="_blank">Lighthouse performance scores of 70 leading retailers</a> found that most of them operate slow websites. The average score was a 22.1 out of 100. B&amp;H Photo scored 59, to top the list, while several sites scored a zero.</p> <p>More recently, February 2023 statistics from <a href="https://www.forbes.com/advisor/business/software/website-statistics/" linktype="3" target="_blank">Forbes.com</a> show that 40% of users will leave a page that doesn&#39;t load in less than 2 seconds, costing retailers $2.6 billion U.S. dollars in sales each year.</p> <h2>How to Test Your Site</h2> <p>To run a test with Lighthouse, load the web page into your Chrome browser and open the Developer Tools panel with the keyboard shortcut Command+Option+I (Mac) or Control+Shift+I (Windows, Linux). Alternatively, go through the Chrome menu under More Tools, under the Audits tab, click Run Audits.</p> <p>Lighthouse tests a single page at a time. For a more comprehensive look at the status of your site, run the test on multiple pages with different content types. Include key conversion pages, such as signups and shopping carts. Remember that different network conditions and external resources may cause a site&rsquo;s score to vary in subsequent tests. Run Lighthouse tests from a <a href="https://webpagetest.org/easy" linktype="3" target="_blank">hosted service</a> to improve consistency.</p> <p><a href="https://www.experte.com/pagespeed" linktype="3" target="_blank">Newer tools</a> allow you to run bulk page speed tests against 100% of site URLs at once.</p> <h2>About the Results</h2> <p>Below are the results of the developers.google.com site as audited for performance by Lighthouse against a Simulated Fast 3G connection. Don&rsquo;t let the red, orange, and green color scheme mislead you -- Opportunities are <em>not</em> Errors. This report sheds light on ways to improve site performance. Caution: Some improvements come at the cost of significant implementation and/or maintenance effort, sometimes with little potential ROI.</p> <p>Out of 100 possible points,</p> <ul> <li><em>Good</em> sites score over 75;</li> <li><em>Average</em> sites run 45-74;</li> <li><em>Poor</em> sites range from 44 to 0.</li> <li>Only results under Metrics contribute to the score.</li> </ul> <p>Audits under Opportunities and Diagnostics do not impact the overall score. See the <a href="https://developers.google.com/web/tools/lighthouse/v3/scoring" linktype="3" target="_blank">Lighthouse Scoring Guide</a> for more detail.</p> <p><img alt="An example of a Lighthouse report" loading="lazy" src="/Northwoods-2020/Blogs/AuditingWebsitePerformancewithLighthouse1.png?Large" /></p> <h2>What Can You Do to Improve Site Scores?</h2> <h4>Defer Off-Screen Images</h4> <p>Optimize image files and sizes as your first and most effective way to improve site speed. Next, if your site includes many or large images or videos, lazy-load assets that are not critical to the first screen view. <a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading" linktype="3" target="_blank">Lazy loading</a> allows for faster perceived load time and fewer downloads to the end-user.</p> <h4>Minimize Use of Third-Party Scripts and&nbsp;Reduce JavaScript execution time</h4> <p>Limit third-party scripts to those that produce significant ROI. According to the Google developers&rsquo; site, &ldquo;Third-party scripts are a predominant cause of performance slowdowns and are often caused by resources outside of your control.&rdquo;</p> <p>Examples of third-party scripts:</p> <ul> <li>Social sharing buttons (e.g. Twitter, Facebook, G+)</li> <li>Video player embeds (e.g. YouTube, Vimeo)</li> <li>Advertising iframes</li> <li>Analytics &amp; metrics scripts</li> <li>A/B testing scripts for experiments</li> <li>Helper libraries, such as date formatting, animation and functional libraries.</li> </ul> <p>Maintain these tools and services on your site only if they add enough value to balance the performance cost. Confirm that any third-party scripts are minified and otherwise performance-optimized though use of such attributes as async, defer, preconnect and dns-prefetch.</p> <h2>&lsquo;Opportunities&rsquo; That are Difficult to Implement and May Not Balance Against ROI</h2> <p><!--EndFragment --></p> <h4>Efficiently Encode and Size Images Properly</h4> <p>Warnings will alert you to unoptimized images. Again, optimizing your images is your best defense against poor site performance and long load times. However, to fully clear this &ldquo;opportunity&rdquo; from the audit results, the site would need to use either the &lt;picture&gt; element and or &lt;img srcset&gt;, which means storing multiple versions of an image or employing third-party image optimization services and CDNs.</p> <ul> <li>Maintaining multiple versions of every image can be challenging for content creators.</li> <li>Content creators must understand how individual images and their containers change across screen sizes and must code for appropriate image sizes.</li> <li>Third-party image optimization services add significant cost to your project.</li> </ul> <h4>Defer Unused CSS</h4> <p>Google recommends that you wait to load any assets, including the site&rsquo;s visual styles, for any content that is not immediately visible on-screen &ldquo;above the fold&rdquo;. This is very difficult to manage when content shown &ldquo;above the fold&rdquo; can change with screen size. Also, if your site has dynamic and frequently-changing content, deferring unused CSS requires coding by a developer with each content change &ndash; a fact at odds with the purpose of your CMS. That said, if you have CSS that you know is always safe to deferred, it&rsquo;s possible to preload these files and add them via JavaScript after the initial page render. Built-in features of Titan 6.9.5 handle this type of preloading and deferring.</p> <h4>Ensure Text Remains Visible During Webfont Load</h4> <p>Commonly used, free Google fonts do not natively support this suggestion. However, fonts can be served locally and coded to meet this suggestion. In this case, the user may see a flash of unstyled text, meaning the text will flash from the fallback font to the branded font when the latter has loaded. This flash can be unsettling for the user and might shift the layout.</p> <h2>Summary</h2> <p>Site audits can be helpful tools for exposing glaring content errors (especially unoptimized images) and by highlighting opportunities to maximize your site&rsquo;s performance. But don&rsquo;t get too caught up with audit scores. <em>Your</em> perfect score balances your users&rsquo; needs and business needs.<br /> <br /> <em>If you need assistance optimizing your website for improved page speed, <a href="/Contact-Us" linktype="2" target="_self">reach out</a>. Our expert website design and development team is here to help!</em></p>
/Northwoods-2020/Hero-Images/Hiker-Looking-Out-Over-Mountains.pngHiker Looking Out Over MountainsSite audits can be helpful tools for exposing glaring content errors (especially unoptimized images) and by highlighting opportunities to maximize your site’s performance. https://nwsdigital.me/3Y98Vlt @northwoods #websites #Lighthouse #pagespeedSydney Shimko/Northwoods-2020/People/Sydney-Shimko.jpgThe author in front of a log cabin wall with soft, warm lightinghttps://ctt.ac/iuaD3<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script><script>hbspt.forms.create({ region: "na1", portalId: "23630176", formId: "40c5bbae-05a2-42ea-94dd-1662181fd56e" });</script>/Northwoods-2020/Blogs/Social-Media-Cards/Improve-Website-Performance-with-Google-Lighthouse---Social-Card.jpg?LargeImprove Website Performance with Page Speed Insights from Google Lighthouse2023-07-31T00:00:00/Northwoods-2020/Blogs/Social-Media-Cards/Improve-Website-Performance-with-Google-Lighthouse---Social-Card.jpgGoogle's Lighthouse tool exposes glaring content errors and highlights opportunities to maximize your website's speed load performance, helping to improve ROI. Here's how to find out your Lighthouse score and tips for how to improve it.362219/People/Sydney-ShimkoSydneyShimkoFront End Development Practice Lead<p>Sydney is a skilled UX developer who seamlessly blends the aesthetics of thoughtful design with responsive, semantic code. With a passion for delivering top-notch solutions, she negotiates constant change in the field of front end development and ensures functionality across an ever-growing variety of devices and screen sizes. Sydney is also Northwoods&rsquo; go-to web accessibility expert, and she strives to deliver creative, efficient solutions that improve usability for everyone. When not crafting exceptional websites, Sydney is an avid mountain biker, road cyclist, and coffee enthusiast and serves as co-head coach to the Shorewood Mountain Bike Team.&nbsp;</p>Sydney Shimko/Northwoods-2020/People/Sydney-Shimko.jpgSydney ShimkoAdd-In Type - NWS Data ModulesCategory - NWS Data ModulesCommittee - NWS Data ModulesDivision - NWS Data ModulesEvent Audience - NWS Data ModulesEvent Service - NWS Data ModulesEvent Type - NWS Data ModulesLocality - NWS Data ModulesModule - NWS Data ModulesNWS Data ModulesTopic - NWS Data ModulesPackage Type - NWS Data ModulesPersonID - NWS Data ModulesSydney ShimkoProductVersion - NWS Data ModulesRecorded Webinar TopicsRegion - NWS Data ModulesSite Display - NWS Data ModulesSkillLevel - NWS Data ModulesTopic - NWS Data ModulesVideoAudience - NWS Data ModulesVideoClassification - NWS Data ModulesVideoStatus - NWS Data ModulesTeamAll StaffDesignersDevelopersAdd-In Type - NWS Data ModulesCategory - NWS Data ModulesCommittee - NWS Data ModulesDivision - NWS Data ModulesEvent Audience - NWS Data ModulesEvent Service - NWS Data ModulesEvent Type - NWS Data ModulesLocality - NWS Data ModulesModule - NWS Data ModulesNWS Data ModulesTopic - NWS Data ModulesData & AnalyticsUX & Website DesignWebsite DevelopmentPackage Type - NWS Data ModulesPersonID - NWS Data ModulesSydney ShimkoProductVersion - NWS Data ModulesRecorded Webinar TopicsRegion - NWS Data ModulesSite Display - NWS Data ModulesNWS DigitalSkillLevel - NWS Data ModulesTopic - NWS Data ModulesVideoAudience - NWS Data ModulesVideoClassification - NWS Data ModulesVideoStatus - NWS Data Modules02024-02-20T11:23:36.40300