{"id":8050,"date":"2021-09-14T10:34:37","date_gmt":"2021-09-14T07:34:37","guid":{"rendered":"https:\/\/www.evenzia.com\/?p=8050"},"modified":"2021-09-14T10:34:37","modified_gmt":"2021-09-14T07:34:37","slug":"how-to-use-google-lighthouse-to-improve-site-speed","status":"publish","type":"post","link":"https:\/\/www.evenzia.com\/fr\/how-to-use-google-lighthouse-to-improve-site-speed\/","title":{"rendered":"How to Use Google Lighthouse to Improve Site Speed"},"content":{"rendered":"\n<p>According to Google,&nbsp;<a href=\"https:\/\/www.thinkwithgoogle.com\/marketing-strategies\/app-and-mobile\/mobile-page-speed-new-industry-benchmarks\/\" rel=\"nofollow noopener\" target=\"_blank\">your bounce rate can increase by 123%<\/a>&nbsp;if your page load speed increases from 1 second to 10 seconds.&nbsp;<\/p>\n\n\n\n<p>Luckily, the tech giant has since offered a suite of valuable tools to help you improve your page load speed and overall user experience. One such tool is Google Lighthouse.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-google-lighthouse\">What Is Google Lighthouse?<\/h2>\n\n\n\n<p>Google Lighthouse is a free tool designed to help improve website performance. It\u2019s open-source software so that anyone can use it on any webpage.<\/p>\n\n\n\n<p>The tool audits the accessibility and SEO of your webpage, with a particular focus on core web vitals.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-are-core-web-vitals\">What Are Core Web Vitals?<\/h3>\n\n\n\n<p>Core Web Vitals are a set of metrics Google developed to measure web pages\u2019 page speed and overall user experience. In 2021, Google introduced the Core Web Vitals algorithm update that measures a website\u2019s Core Web Vitals metrics.&nbsp;<\/p>\n\n\n\n<p>These metrics have become increasingly important for website owners that want to provide a good user experience and rank higher on Google.&nbsp;<\/p>\n\n\n\n<p>The three key Core Web Vitals are:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Largest Contentful Paint (LCP):&nbsp;<\/strong>how long it takes for the largest content to load above the fold.&nbsp;<a href=\"https:\/\/www.semrush.com\/blog\/lcp\/\" rel=\"nofollow noopener\" target=\"_blank\">Learn more about LCP with our complete guide.<\/a><\/li><li><strong>First Input Delay (FID):<\/strong>&nbsp;how long it takes for a page to respond after user interaction.&nbsp;<a href=\"https:\/\/www.semrush.com\/blog\/fid-tbt-explained\/\" rel=\"nofollow noopener\" target=\"_blank\">Check out our guide to FID.<\/a><\/li><li><strong>Cumulative Layout Shift (CLS):&nbsp;<\/strong>how much of the content moves as the page loads.&nbsp;<a href=\"https:\/\/www.semrush.com\/blog\/what-is-cls\/\" rel=\"nofollow noopener\" target=\"_blank\">Read more about CLS here<\/a>.<\/li><\/ol>\n\n\n\n<p><strong>Recommended reading:&nbsp;<a href=\"https:\/\/www.semrush.com\/blog\/core-web-vitals\/\" rel=\"nofollow noopener\" target=\"_blank\">Core Web Vitals: A Guide to Improving Page Speed<\/a><\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-you-can-check-with-google-lighthouse\">What You Can Check with Google Lighthouse<\/h3>\n\n\n\n<p>You can measure your Core Web Vitals using Google Lighthouse. The tool audits your site based on the&nbsp;average device and connection a user has. However, you can specify the device and relationship you want the tool to emulate for your tests. The results from these tests will help you know which stages of page load you need to optimize to provide a good user experience.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-use-google-lighthouse\">How to Use Google Lighthouse<\/h2>\n\n\n\n<p>You can run Google Lighthouse with the Chrome browser (in the Devtools) or as&nbsp;<a href=\"https:\/\/chrome.google.com\/webstore\/detail\/lighthouse\/blipmdconlkpinefehnmjammfjpmpbjk?hl=en\" rel=\"nofollow noopener\" target=\"_blank\">a Chrome extension.&nbsp;<\/a><\/p>\n\n\n\n<p>After running the audit of your webpage, Lighthouse will generate a report on 5 different areas:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Performance&nbsp;<\/strong>includes elements that slow your page down, including images and resources.<\/li><li><strong>Accessibility&nbsp;<\/strong>audits how accessible your content is to users, including the use of assistive technology.&nbsp;<\/li><li><strong>Best Practices<\/strong>&nbsp;identifies any web development element that does not follow current guidelines and best practice.<\/li><li><strong>SEO&nbsp;<\/strong>highlights the most essential SEO issues with the webpage but is not comprehensive.<\/li><li><strong>Progressive Web App&nbsp;<\/strong>indicates your web application\u2019s performance and problems with implementation.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.semrush.com\/cdn-cgi\/image\/width=1010\/blog\/uploads\/media\/12\/fc\/12fc5efc8f92eb88e0001e741c9e01e3\/H5gP5tM6dUDpF73S7pJxGJe-TaDVUPnaPcXNuzWS93NurDadh-CLDJVoU-4rwX1cBTlawR4YwmfonqMbglsgXAYxXV-KfirO6hCE9G1LEN3wyqx7NyLxCP0GIt9JZEGg28DNpNad%3Ds0.png\" alt=\"google lighthouse\"\/><figcaption>Screenshot:<a href=\"https:\/\/medium.com\/ionicfirebaseapp\/lighthouse-an-open-source-automated-tool-for-improving-the-quality-of-your-progressive-web-apps-524ae8f33be4\" rel=\"nofollow noopener\" target=\"_blank\">Ionic Firebase App<\/a><\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"how-to-use-lighthouse-in-chrome-devtools\">How to Use Lighthouse in Chrome Devtools<\/h4>\n\n\n\n<p>In your Chrome browser, you can run a Google Lighthouse audit from the Chrome Devtools.&nbsp;<\/p>\n\n\n\n<p>To access it, you will need to:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.semrush.com\/cdn-cgi\/image\/width=1010\/blog\/uploads\/media\/ab\/77\/ab7761f2e4fc1dd2402cec2c433a103f\/flBYs1btrHJ9iRLy2bHj16a_Sta-fejtp99A-I0mceSotJvTAaar6Okq45X2Tv3iTk-rVgUduxrNYLxzWkDL6XxdLNrxBLA56Klp31R9rIeye3QMz6nHt5SsCH87XzQ52aX4i6D0%3Ds0.png\" alt=\"google lighthouse\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.semrush.com\/cdn-cgi\/image\/width=1010\/blog\/uploads\/media\/41\/1c\/411c2c003685cf90797e9edb2277ac28\/CCyCOEGPPtiEZOgq17JAowWkEU-exEJzhxpuJsh6agVJD9LF4Xou8kaibQBXBal7yDnvEcHzerStqHUYdZexVAGimKtLnJ--KRpGGRc4GvQFu5F6LB4aTvzetXMk-hxAjTUrWLnu%3Ds0.png\" alt=\"google lighthouse\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\"><li>Download and install&nbsp;<a href=\"https:\/\/www.google.com\/chrome\/browser\/desktop\/\" rel=\"nofollow noopener\" target=\"_blank\">Google Chrome for Desktop<\/a>&nbsp;(if you don\u2019t already have it).<\/li><li>Visit the webpage you want to audit in Google Chrome.<\/li><li>Right-click anywhere on the page, and select&nbsp;<strong>Inspect.<\/strong><\/li><li>The Inspect feature will open a panel at the bottom of or to the right of the webpage. Select Lighthouse from the panel\u2019s toolbar. (If you can\u2019t find the Lighthouse option, click on the two arrows at the end of the toolbar.)<\/li><li>The panel will open to the Lighthouse tool. Select Generate report.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.semrush.com\/cdn-cgi\/image\/width=1010\/blog\/uploads\/media\/7c\/fc\/7cfcd24d7755a7b3ac7318e1e0ff78ab\/LqKo77oQGnwG0SwC1gnc8nRJCHsDlPd31w4oSQvNAhmLVp-kaiFdX326Pk6FoR3yI_TumFKFxbeRMcFsXh6afOVgjpPEILnDrGUqHzHtgRzJMaCwDjNSAUkt5CKPBTI2_Lua4EJC%3Ds0.png\" alt=\"google lighthouse\"\/><\/figure>\n\n\n\n<p>To access Lighthouse with Chrome Devtools, try these 3 steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Open the Chrome browser, then open the menu by selecting the three vertical dots to the right of your address bar.&nbsp;<\/li><li>Select&nbsp;<strong>More Tools.<\/strong><\/li><li>Select&nbsp;<strong>Developer Tools.<\/strong><\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.semrush.com\/cdn-cgi\/image\/width=1010\/blog\/uploads\/media\/8b\/fe\/8bfe3d7d8d5cdd7ca94fd5f80661d3b6\/Ppenv7Qxj9l4RUtLwy7Tg41DvfSJllwtnOXLmffK87RV_FoF_EjwZIt5r9Yy3JhKm6pjuNT-XFUPxKqUVG-IHtz9UdcCjCCt4Vp3O4vzGBjCMcO3YhGla3D2UOHprGCwkPK9uJ5B%3Ds0.png\" alt=\"google lighthouse\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"how-to-use-lighthouse-as-a-chrome-extension\">How to Use Lighthouse as a Chrome Extension<\/h4>\n\n\n\n<ol class=\"wp-block-list\"><li>Download&nbsp;<a href=\"https:\/\/www.google.com\/chrome\/browser\/desktop\/\" rel=\"nofollow noopener\" target=\"_blank\">Google Chrome for Desktop<\/a>.<\/li><li>Vist the Chrome Webstore.<\/li><li>Download and install the&nbsp;<a href=\"https:\/\/chrome.google.com\/webstore\/detail\/lighthouse\/blipmdconlkpinefehnmjammfjpmpbjk\" rel=\"nofollow noopener\" target=\"_blank\">Lighthouse Chrome Extension<\/a>.<\/li><li>Restart your browser.<\/li><li>Click the lighthouse symbol in your address bar.<\/li><li>Select Generate Report.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.semrush.com\/cdn-cgi\/image\/width=1010\/blog\/uploads\/media\/c0\/37\/c0379741aa105276c34ef81f8eaa5886\/XJYFQUHlYyUlqTTgzrNcicbrpigoSg7KQTeyiur8QB6v6qltEHdg3TIG8dX3SMaW40ZyWrGHFYkwC-k5PWSbSuRQNYa0UabUl_tNng1UQguqadF9IcAHNvpUV0rgpBaqlmnV8Yqi%3Ds0.png\" alt=\"google lighthouse\"\/><figcaption>Screenshot:<a href=\"https:\/\/medium.com\/ionicfirebaseapp\/lighthouse-an-open-source-automated-tool-for-improving-the-quality-of-your-progressive-web-apps-524ae8f33be4\" rel=\"nofollow noopener\" target=\"_blank\">Ionic Firebase App<\/a><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-is-the-difference-between-lighthouse-and-pagespeed-insights\">What Is the Difference Between Lighthouse and PageSpeed Insights?<\/h3>\n\n\n\n<p>In addition to Lighthouse, Google also offers another auditing tool, the PageSpeed Insights tool. This tool scores your webpage\u2019s speed and provides a list of improvements.&nbsp;<\/p>\n\n\n\n<p>Both tools audit similar aspects of your webpage, including page speed and Core Web Vitals. However, Page Speed Insights only focuses on improving your webpage\u2019s speed, while Lighthouse covers multiple aspects of your webpage.&nbsp;<\/p>\n\n\n\n<p>We advise using both tools to improve your page speed and Core Web Vitals metrics.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"how-to-use-pagespeed-insights\">How to Use PageSpeed Insights<\/h4>\n\n\n\n<p>To use PageSpeed Insights, you need to:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Visit&nbsp;<a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\" rel=\"nofollow noopener\" target=\"_blank\">PageSpeed Insights<\/a>.<\/li><li>Copy and paste the URL of your webpage.<\/li><li>Click&nbsp;<strong>Analyze.&nbsp;<\/strong><\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.semrush.com\/cdn-cgi\/image\/width=1010\/blog\/uploads\/media\/d1\/77\/d177cc1bb85cd5a41a80a3b2c586291b\/Screen%20Shot%202021-09-13%20at%203.31.19%20PM.png\" alt=\"google lighthouse\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"other-ways-to-improve-your-website\">Other Ways to Improve Your Website<\/h2>\n\n\n\n<p>When it comes to tracking your Core Web Vitals, the more information you have, the better. You can always pair the data you gather from Lighthouse, Page Speed Insights, and other Google tools with third-party auditing apps.<\/p>\n\n\n\n<p>The&nbsp;<a href=\"http:\/\/semrush.com\/siteaudit\" rel=\"nofollow noopener\" target=\"_blank\">Site Audit tool<\/a>&nbsp;audits your site\u2019s technical SEO, including site speed and performance. The Core Web Vitals thematic report displays your Lighthouse data in an easy-to-read format including a list of analyzed pages. You can edit the list directly to add or remove pages for a new score.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.semrush.com\/cdn-cgi\/image\/width=1010\/blog\/uploads\/media\/b9\/aa\/b9aab50dfe44dc20cae869e71ffd0884\/2vaPRGjvGWjnmtokhDe5Jlw1mv0gklRbYKrYJ_ezRiV-w6laMfegc7jw3dvv-4Mgn2LnE8EW7oZ8q2XeKcH_pdwbwncNtdZQ6VxnNtwAE8xFzXP-Q1qeVSAnq8ql6wUzHD6FqmKl%3Ds0.png\" alt=\"google lighthouse\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.semrush.com\/cdn-cgi\/image\/width=1010\/blog\/uploads\/media\/3a\/47\/3a47ec7c2783917e8b215fca462718b8\/kWrvs_sixN7m2VSmi2FxZRnvM2ZJqWFnA33eXdzgPpJTbHJ55HCaw7Ef75s6WUgqmVNfBmB4s8VW9lb_cR45eWrBCcTK9ZJ5inJTqnt2nT4FxJ1yQg-kAx02V77Sg8OnLQ5NWiBI%3Ds0.png\" alt=\"google lighthouse\"\/><\/figure>\n\n\n\n<p>For a general overview of your site\u2019s performance, select the Site Performance thematic report from the Site Audit overview report:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.semrush.com\/cdn-cgi\/image\/width=1010\/blog\/uploads\/media\/ca\/25\/ca254ae268fbda5c09a66162781d6a8d\/YWe2IE-fCXnk0G72OJhFCDAAhAYNnftAMHcODvxfaeDgBJu8pBgieAgv9HqfyDJXznEng7LfW5K38ls49kQgjLxi21mcvkQIo3SYrJbK264pxkW662TIM3ACehhQ2DSxWOVsG17a%3Ds0.png\" alt=\"google lighthouse\"\/><\/figure>\n\n\n\n<p>This thematic report provides an overall site performance score, as well as the average page load speed:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.semrush.com\/cdn-cgi\/image\/width=1010\/blog\/uploads\/media\/dc\/98\/dc98c1b53622701700fbe2eda6a7c247\/xmwIJrRX1YzMnwWUqGvUb3UNM6N7absWajK7gfKC4rWUxmGTzlJtQAyn1IBzig4D6ut72eUkxDNAbOmDMJUEsQPncb--BrbCn-9tmVGG33cXzef_4FwC52pPECjTEnt0NrDf4bKi%3Ds0.png\" alt=\"google lighthouse\"\/><\/figure>\n\n\n\n<p>You can use the Performance Issues table to review any site issues currently impacting your site performance. Select Learn more to read more about each issue and how to fix it.<\/p>\n\n\n\n<p>To get started with the Site Audit tool:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.semrush.com\/cdn-cgi\/image\/width=1010\/blog\/uploads\/media\/8b\/6e\/8b6ef882b7e856335a5033be77ca9b89\/6ojxSFRJKhsHXF7w-zJaQ1sUHEIqg6yaUEBbGQCxnrDIHBWcvfsMo9MmLaLH9YYqY-NvXpSPVgsyqNX3BAzNp0pjuuCB8FkssM1OnhF0W9AqCfhfQReyOfUPuNo-7VizdfDsZfKW%3Ds0.png\" alt=\"google lighthouse\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.semrush.com\/cdn-cgi\/image\/width=1010\/blog\/uploads\/media\/74\/a3\/74a37b06d960499b3dbfdb677dc66212\/i5nwS83GPasmmqza4OuUINcQ0WOp6nbJhv1L18SNc20qHZ9k154bT8ZzsNBafJtw5E6PeoCeS6zXEFCHe1gvl23gdoGbSQTxL_h8Y5aqfC50vVjR7ddfdFXkAZX6WuutLRr-nf3k%3Ds0.png\" alt=\"google lighthouse\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.semrush.com\/cdn-cgi\/image\/width=1010\/blog\/uploads\/media\/7d\/06\/7d06b558e9e6a3ea2fe6a33df64075c3\/zMKSh4TEPW5OgORdI2-WpCMoxqzFMVgxZrnq5XB7R2xJUoEMQXfMgrvy1pylAYDiPeFisNJ1lrx30g4T__HkvjYyVE-iGRgXIwxQSGV_AvzH8uCnOMABmwlUwdsgTdotzY_9E7rj%3Ds0.png\" alt=\"google lighthouse\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\"><li>Log into your&nbsp;<a href=\"https:\/\/www.semrush.com\/login\/\" rel=\"nofollow noopener\" target=\"_blank\">Semrush account<\/a>. If you don\u2019t have an existing account, you can create a free account.<\/li><li>From the toolbar, select Projects under Management to view your project(s):<\/li><li>Click on your preferred project, then select Site Audit from the project dashboard.<\/li><li>The tool will prompt you to configure your audit settings. You\u2019ll be able to set the audit\u2019s crawl scope, disallow URLs, and add additional website login information.<\/li><li>Select&nbsp;<strong>Start Site Audit.<\/strong><\/li><\/ol>\n\n\n\n<p><strong>Recommended reading:&nbsp;<a href=\"https:\/\/www.semrush.com\/blog\/core-web-vitals-update-initial-impact\/\" rel=\"nofollow noopener\" target=\"_blank\">2021 Core Web Vitals Update: Assessing the Initial Impact<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"summary\">Summary<\/h2>\n\n\n\n<p>Page speed is as important to Google as it is to your users. Poor page load speed can hurt your bounce rate and, to an extent, how you rank organically.<\/p>\n\n\n\n<p>Google Lighthouse helps you audit web pages and identify specific areas to improve your page load speed and overall user experience. Pair Lighthouse with Google\u2019s other Devtools or similar site auditing apps for a comprehensive review of your site\u2019s performance.<\/p>\n\n\n\n<p>Source: https:\/\/www.semrush.com\/blog\/google-lighthouse\/<\/p>\n","protected":false},"excerpt":{"rendered":"<p>According to Google,&nbsp;your bounce rate can increase by 123%&nbsp;if your page load speed increases from 1 second to 10 seconds.&nbsp; Luckily, the tech&hellip;<\/p>\n","protected":false},"author":1,"featured_media":8051,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8050","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/www.evenzia.com\/fr\/wp-json\/wp\/v2\/posts\/8050","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.evenzia.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.evenzia.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.evenzia.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.evenzia.com\/fr\/wp-json\/wp\/v2\/comments?post=8050"}],"version-history":[{"count":1,"href":"https:\/\/www.evenzia.com\/fr\/wp-json\/wp\/v2\/posts\/8050\/revisions"}],"predecessor-version":[{"id":8052,"href":"https:\/\/www.evenzia.com\/fr\/wp-json\/wp\/v2\/posts\/8050\/revisions\/8052"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.evenzia.com\/fr\/wp-json\/wp\/v2\/media\/8051"}],"wp:attachment":[{"href":"https:\/\/www.evenzia.com\/fr\/wp-json\/wp\/v2\/media?parent=8050"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.evenzia.com\/fr\/wp-json\/wp\/v2\/categories?post=8050"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.evenzia.com\/fr\/wp-json\/wp\/v2\/tags?post=8050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}