{"id":193888,"date":"2020-11-30T00:31:26","date_gmt":"2020-11-30T00:31:26","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=193888"},"modified":"2022-04-13T23:39:07","modified_gmt":"2022-04-13T23:39:07","slug":"check-wordpress-site-speed-gtmetrix-lighthouse","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/check-wordpress-site-speed-gtmetrix-lighthouse\/","title":{"rendered":"How To Check WordPress Site Speed With The New GTmetrix (Featuring Lighthouse)"},"content":{"rendered":"<p><a href=\"https:\/\/gtmetrix.com\/\" rel=\"noopener\" target=\"_blank\">GTmetrix<\/a> is now powered by Lighthouse, delivering page performance test results that better reflect the user&#8217;s perception of how fast their websites are loading.<\/p>\n<p>Any business that wants to stay in business knows it&#8217;s essential to have a fast-loading website. Websites that load quickly retain more visitors and perform better in <del>search engines<\/del> Google.<\/p>\n<p>We have written a number of articles on <a href=\"https:\/\/wpmudev.com\/blog\/speeding-up-wordpress\/\" target=\"_blank\" rel=\"noopener\">how to speed up WordPress<\/a> and <a href=\"https:\/\/wpmudev.com\/blog\/fixing-wordpress-page-speed-problems\/\" target=\"_blank\" rel=\"noopener\">fix WordPress page speed problems<\/a>\u00a0using\u00a0<a href=\"https:\/\/wpmudev.com\/blog\/free-speed-testing-tools\/\" target=\"_blank\" rel=\"noopener\">free page speed testing tools<\/a>.<\/p>\n<p>One of these tools is GTmetrix.<\/p>\n<figure id=\"attachment_193970\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-193970 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/11\/gtmetrix-test-01.jpg\" alt=\"GTmetrix test results\" width=\"600\" height=\"383\" \/><figcaption class=\"wp-caption-text\">The new GTmetrix report.<\/figcaption><\/figure>\n<p>The <a href=\"https:\/\/gtmetrix.com\/blog\/welcome-to-the-new-gtmetrix-powered-by-lighthouse\/\" rel=\"noopener\" target=\"_blank\">new GTmetrix report<\/a> is designed to help you assess the page\u2019s user experience and looks at both structure and <em>performance<\/em>, i.e. how well the page actually performs for users in areas like loading, interactivity, and visual stability.<\/p>\n<p>The main difference in the newly redesigned report is that GTmetrix has replaced its PageSpeed\/YSlow libraries with <a href=\"https:\/\/wpmudev.com\/blog\/how-to-improve-google-pagespeed-user-interaction-metrics-in-wordpress\/\" target=\"_blank\" rel=\"noopener\">Lighthouse<\/a>, the open-source tool from Google that is considered the industry standard in modern web performance data and metrics.<\/p>\n<p>In this post, we&#8217;ll look at:<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><strong><a href=\"#gtmetrix\">Using the New GTmetrix Tool<\/a><\/strong><\/li>\n<li><strong><a href=\"#web-vitals\">Using Core Web Vitals to Improve Your Search Engine Results<\/a><\/strong><\/li>\n<li><strong><a href=\"#hummingbird\">GTmetrix, Hummingbird, and Smush<\/a><\/strong><\/li>\n<li><strong><a href=\"#perfect-score\">Will You Score the Perfect 100?<\/a><\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2 id=\"gtmetrix\">Using the New GTmetrix Tool<\/h2>\n<p>GTmetrix is free to use for generating a basic yet very useful site loading speed report.<\/p>\n<p>Just head over to <a href=\"https:\/\/gtmetrix.com\/\" rel=\"noopener\" target=\"_blank\">GTmetrix.com<\/a> and enter your site or page URL, then click the test button.<\/p>\n<figure id=\"attachment_193988\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-193988 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/11\/gtmetrix-page-speed-test.png\" alt=\"GTmetrix Page Speed Test\" width=\"600\" height=\"355\" \/><figcaption class=\"wp-caption-text\">Enter the URL of the site or page you want to test.<\/figcaption><\/figure>\n<p>A report will be automatically generated after a few seconds.<\/p>\n<figure id=\"attachment_193989\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-193989\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/11\/gtmetrix-report.png\" alt=\"GTmetrix report.\" width=\"600\" height=\"369\" \/><figcaption class=\"wp-caption-text\">GTmetrix report.<\/figcaption><\/figure>\n<p>Previously, GTmetrix reports focused on how well your page was built for speed (i.e. its <em>structure<\/em>), but not how fast it loaded from your users&#8217; perspective. This resulted in sites sometimes achieving great PageSpeed\/YSlow scores and a slow Fully Loaded Time.<\/p>\n<figure id=\"attachment_193972\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-193972 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/11\/good-score-bad-loading-time.png\" alt=\"Good PS\/YS scores, Bad Fully loaded time.\" width=\"600\" height=\"352\" \/><figcaption class=\"wp-caption-text\">Does this site deliver a good or bad experience for users? (Source: GTmetrix blog.)<\/figcaption><\/figure>\n<p><em>Fully Loaded Time<\/em> (i.e. how long it takes for a page to completely load) has also become less useful as a metric for site performance as modern websites began to adopt more efficient page-loading strategies (e.g. client-side rendering).<\/p>\n<p>The new GTmetrix Report reflects how fast your page loads for users <em>and<\/em> how well it&#8217;s built for performance, using a new scoring system called the GTmetrix Grade.<\/p>\n<figure id=\"attachment_193983\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-193983\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/11\/gtmetrix-grade.png\" alt=\"GTmetrix grade.\" width=\"600\" height=\"180\" \/><figcaption class=\"wp-caption-text\">GTmetrix grade.<\/figcaption><\/figure>\n<p>This is based on a weighted grade comprised of new Performance and Structure Scores (70% Performance Score + 30% Structure Score) and the addition of new tabs, visualizations, graphs, and deeper insights.<\/p>\n<figure id=\"attachment_193971\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-193971\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/11\/GTmetrixTabs.gif\" alt=\"GTmetrix tabs.\" width=\"600\" height=\"409\" \/><figcaption class=\"wp-caption-text\">GTmetrix tabs.<\/figcaption><\/figure>\n<p>As mentioned earlier, what makes the new GTmetrix tool significantly different from its old <em>Legacy<\/em> report is that it has replaced PageSpeed\/YSlow with (Google-owned) Lighthouse analysis and performance data.<\/p>\n<p>This provides an assessment of webpages focused on the pages&#8217; user experience and tracks the timing of various milestones that users actually experience and care about, then scores each of these metrics in three key areas:<\/p>\n<ul>\n<li><strong>Loading Performance<\/strong> (55% of the total score). This comprises of the following metrics:\n<ul>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/improve-first-contentful-meaningful-paint\/\" target=\"_blank\" rel=\"noopener\">First Contentful Paint<\/a> (15%) &#8211; measures how much time has elapsed before the browser begins to display the first elements of your site.<\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/speed-index-wordpress\/\" target=\"_blank\" rel=\"noopener\">Speed Index<\/a> (15%) &#8211; shows you how quickly the contents of your page are being visibly populated.<\/li>\n<li><a href=\"https:\/\/web.dev\/lighthouse-largest-contentful-paint\/\" rel=\"noopener\" target=\"_blank\">Largest Contentful Paint<\/a> (25%) &#8211; measures how long the largest content element on your page (e.g. a featured image or heading text) takes to load on the users&#8217; viewport.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Interactivity<\/strong> (40% of the total score).\n<ul>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/how-to-improve-google-pagespeed-user-interaction-metrics-in-wordpress\/\" target=\"_blank\" rel=\"noopener\">Time to Interactive<\/a> (15%) &#8211; measures how long it takes before the user can reliably interact with the content on the page (e.g. click links, enter text into input fields, etc.)<\/li>\n<li><a href=\"https:\/\/web.dev\/lighthouse-total-blocking-time\/\" rel=\"noopener\" target=\"_blank\">Total Blocking Time<\/a> (25%) &#8211; measures the total amount of time that a page is blocked by scripts from responding to user input (e.g. mouse clicks, screen taps, or keyboard presses) during your page loading process.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Visual Stability<\/strong> (5% of the total score).\n<ul>\n<li><a href=\"https:\/\/web.dev\/cls\/\" rel=\"noopener\" target=\"_blank\">Cumulative Layout Shift<\/a> (5%) &#8211; Measures how much of your site&#8217;s content layout shifts as it loads (e.g. late-loading ads that negatively affect the user&#8217;s experience by pushing content down after it has already loaded).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<figure id=\"attachment_193981\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-193981 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/11\/gtmetrix-lighthouse-performance-data.png\" alt=\"GTmetrix Lighthouse performance data.\" width=\"600\" height=\"478\" \/><figcaption class=\"wp-caption-text\">GTmetrix now incorporates Lighthouse performance data.<\/figcaption><\/figure>\n<h2 id=\"web-vitals\">Using Core Web Vitals to Improve Your Search Engine Results<\/h2>\n<p>GTmetrix also displays another set of metrics in its reports called <em>Web Vitals<\/em>.<\/p>\n<figure id=\"attachment_193984\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-193984\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/11\/gtmetrix-web-vitals.png\" alt=\"GTmetrix Web Vitals.\" width=\"600\" height=\"170\" \/><figcaption class=\"wp-caption-text\">GTmetrix Web Vitals.<\/figcaption><\/figure>\n<p>Most site visitors aren&#8217;t as concerned about how long it takes for your entire site to load as they are about how soon they can start engaging with the content on the page you&#8217;re presenting them.<\/p>\n<p>As described on the feature&#8217;s information tooltip,<\/p>\n<blockquote><p>Web Vitals represent a small set of core metrics that indicate whether you&#8217;re delivering a fast and (what Google calls) a delightful experience to your visitors. Focus on these impactful metrics first before undertaking deeper optimizations.<\/p><\/blockquote>\n<p>Core Web Vitals comprise of three different metrics (see the previous section for brief descriptions):<\/p>\n<ul>\n<li><strong>Largest Contentful Paint (LCP)<\/strong> \u2013 GTmetrix recommends aiming for an LCP of 1.2 seconds or less for a good user experience,<\/li>\n<li><strong>Total Blocking Time (TBT) \u2013 <\/strong>GTmetrix recommends aiming for a TBT of 150 milliseconds or less.<\/li>\n<li><strong>Cumulative Layout Shift (CLS)<\/strong> \u2013 GTmetrix recommends aiming for a CLS score of 0.1 or less.<\/li>\n<\/ul>\n<p>Core Web Vitals, then, are an important indicator of how your site visitors perceive the performance of your website. These key metrics connect your site\u2019s performance to user experience and <a href=\"https:\/\/webmasters.googleblog.com\/2020\/11\/timing-for-page-experience.html\" rel=\"noopener\" target=\"_blank\">Google thinks they&#8217;re important enough to include as an SEO ranking factor<\/a> starting from May 2021.<\/p>\n<p>According to Google, Core Web Vitals will affect mobile and desktop results and play a significant role in determining whether or not your content appears in Top Stories.<\/p>\n<h2 id=\"hummingbird\">GTmetrix, Hummingbird, and Smush<\/h2>\n<p>If you use our <a href=\"https:\/\/wordpress.org\/plugins\/hummingbird-performance\/\" rel=\"noopener\" target=\"_blank\">Hummingbird<\/a> and <a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" rel=\"noopener\" target=\"_blank\">Smush<\/a> plugins to optimize WordPress speed and images, you should find the new GTmetrix reports&#8217; Lighthouse data and metrics to be more actionable after running our plugin scans.<\/p>\n<p>This is because our plugins and GTmetrix now both follow Google&#8217;s PageSpeed Insights recommendations, which are derived from Lighthouse data.<\/p>\n<p>Hummingbird&#8217;s scans and Smush&#8217;s settings mirror Google&#8217;s PageSpeed testing and automate many of its fixes and recommendations, while GTmetrix uses the latest API from Google Pagespeed Insights to create and compile its report.<\/p>\n<figure id=\"attachment_193996\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-193996 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/11\/hb-improvement-recommendations.png\" alt=\"Hummingbird Improvement Recommendations.\" width=\"600\" height=\"604\" \/><figcaption class=\"wp-caption-text\">GTmetrix reports are now closer to Hummingbird&#8217;s improvement recommendations, which follow Google PageSpeed Insights based on Lighthouse data.<\/figcaption><\/figure>\n<p>For more information on improving Google PageSpeed Insights recommendations, see our <a href=\"https:\/\/wpmudev.com\/docs\/wpmu-dev-plugins\/hummingbird\/#optimization-guide\" target=\"_blank\" rel=\"noopener\">Performance Optimization Guide<\/a> and these tutorials:<\/p>\n<ul>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/optimize-wordpress-speed-hummingbird\/\" target=\"_blank\" rel=\"noopener\">How to Optimize WordPress for Speed with Hummingbird<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/how-to-get-the-most-out-of-smush\/\" target=\"_blank\" rel=\"noopener\">How to Get the Most Out of Smush Image Optimization<\/a><\/li>\n<\/ul>\n<h2 id=\"perfect-score\">Will You Score The Perfect 100?<\/h2>\n<p>I don&#8217;t want to spoil the ending here for you, but you&#8217;ll probably never get that perfect 100!<\/p>\n<p>We&#8217;ve tried and discovered that there are many challenges when it comes to getting a perfect score on page speed test results.<\/p>\n<p>Here are some articles we&#8217;ve written about the challenges of optimizing WordPress sites for speed based on the recommendations of tools like GTmetrix, Google PageSpeed Insights, and others:<\/p>\n<ul>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/why-trying-to-get-95-on-google-pagespeed-insights-will-drive-you-mad\/\" target=\"_blank\" rel=\"noopener\">Why Trying to Get 95+ on Google PageSpeed Insights for Your WordPress Site Will Drive You Mad!<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/the-new-google-pagespeed-insights-a-perfect-100-is-now-super-easy\/\" target=\"_blank\" rel=\"noopener\">The New Google PageSpeed Insights: A Perfect 100 Is Now Super Easy<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/100-score-google-pagespeed-insights-not-happening\/\" target=\"_blank\" rel=\"noopener\">Why You&#8217;ll Never Get a 100 Google Pagespeed Insights Score<\/a><\/li>\n<\/ul>\n<p>Also, definitely check out our video series on improving WordPress performance:<\/p>\n<p><span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><span class=\"embed-youtube-lazy-id dev-hidden\">x2WSkG6-x74<\/span><\/span><\/p>\n<p>Scan your sites today and happy WordPress optimizing!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>GTmetrix is now powered by Lighthouse, delivering page performance test results that better reflect the user&#8217;s perception of how fast their websites are loading. Any business that wants to stay in business knows it&#8217;s essential to have a fast-loading website. Websites that load quickly retain more visitors and perform better in search engines Google. We [&hellip;]<\/p>\n","protected":false},"author":774618,"featured_media":193964,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[],"tutorials_categories":[],"class_list":["post-193888","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/193888","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/774618"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=193888"}],"version-history":[{"count":45,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/193888\/revisions"}],"predecessor-version":[{"id":224253,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/193888\/revisions\/224253"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/193964"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=193888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=193888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=193888"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=193888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}