{"id":2018073,"date":"2021-03-28T14:10:00","date_gmt":"2021-03-28T14:10:00","guid":{"rendered":"https:\/\/wpx.net\/blog\/?p=2018073"},"modified":"2023-11-30T09:12:15","modified_gmt":"2023-11-30T09:12:15","slug":"core-web-vitals-explained-for-non-technical-humans","status":"publish","type":"post","link":"https:\/\/wpx.net\/blog\/core-web-vitals-explained-for-non-technical-humans\/","title":{"rendered":"Core Web Vitals Explained For Non-Technical Humans"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"WPX.net - What We Stand For\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/drQUYGBgts0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"May_2021_Let_The_Panic_Attacks_Begin%E2%80%A6\"><\/span>May 2021, Let The Panic Attacks Begin&#8230;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Back in 2020, Google&nbsp;<a href=\"https:\/\/developers.google.com\/search\/blog\/2020\/05\/evaluating-page-experience\" target=\"_blank\" rel=\"noreferrer noopener\">announced<\/a>&nbsp;that something called \u2018Core Web Vitals\u2019 would be a ranking factor for Google search results from May 2021 onwards.<\/p>\n\n\n\n<p><strong>This announcement caused quite a ruckus among some Webmasters desperate to make sure that:<\/strong><\/p>\n\n\n\n<p>[a] a poor Core Web Vitals score for their site wouldn\u2019t drag it down in the Google rankings, and,<\/p>\n\n\n\n<p>[b] if a good&nbsp;Core Web Vitals score COULD help Google rankings, then they wanted to take advantage of that new development.<\/p>\n\n\n\n<p><strong>Underlying that concern I believe is the doubtful assumption that Core Web Vitals would be a MAJOR new rankings signal, when in fact Google has&nbsp;<\/strong><a href=\"https:\/\/www.searchmetrics.com\/glossary\/ranking-factor\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>at least 200 ranking factors<\/strong><\/a><strong>&nbsp;in their current algorithm.<\/strong><\/p>\n\n\n\n<p>Only the key people at Google know how much weight any of those 200+ ranking factors have in the Google search algorithm, including the new Core Web Vitals factor.<\/p>\n\n\n\n<p><strong>That doesn\u2019t mean we should ignore Core Web Vitals, far from it, but we should also keep it in perspective.<\/strong><\/p>\n\n\n\n<p>At the heart of&nbsp;Core Web Vitals&nbsp;is the noble attempt to get website owners across the world to clean up their act in terms of site usability, loading speed, and mobile optimization.<\/p>\n\n\n\n<p><strong>To create a good visitor experience, you should be following best practices anyway (discussed below) but with the focus on these Core Web Vitals measurements, there are a few extra steps to cover.<\/strong><\/p>\n\n\n\n<p>We will get to those.<\/p>\n\n\n\n<p>But basically, Google wants to test your website and specific pages within it by THREE main measurements, things they call&nbsp;First Contentful Paint,&nbsp;First Input Delay, and&nbsp;<strong>Cumulative Layout Shift<\/strong>, all unnecessarily complicated terms to describe pretty simple stuff.<\/p>\n\n\n\n<p>In a moment, we will dig into what those terms actually mean but this is the kind of \u2018helpful\u2019 advice given by the&nbsp;<a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google Page Speed Insights tool<\/a>&nbsp;\u2013 this was some of the advice given for optimizing <strong>google.com<\/strong> (more on that below), yes the page that looks like this and in my testing, never achieves 100\/100 on Mobile \u2013 more like 89\/100 to 97\/100:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"757\" height=\"239\" src=\"https:\/\/blog.wpx.net\/wp-content\/uploads\/2021\/03\/google2.jpg\" alt=\"\" class=\"wp-image-1506826\" srcset=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/google2.jpg 757w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/google2-300x95.jpg 300w\" sizes=\"auto, (max-width: 757px) 100vw, 757px\" \/><\/figure>\n\n\n\n<p>According to their own tool, Google needs to fix, among other things, these issues on Google.com:<\/p>\n\n\n\n<p><strong>\u201cPolyfills and transforms enable legacy browsers to use new JavaScript features.\u201d&nbsp;<\/strong><\/p>\n\n\n\n<p>\u201cFor your bundled JavaScript, adopt a modern script deployment strategy using module\/no module feature detection to reduce the amount of code shipped to modern browsers, while retaining support for legacy browsers.\u201d<\/p>\n\n\n\n<p><strong>\u201cLeverage the font-display CSS feature to ensure text is user-visible while web fonts are loading.\u201d<\/strong><\/p>\n\n\n\n<p>\u201cConsider instrumenting your app with the User Timing API to measure your app\u2019s real-world performance during key user experiences.\u201d<\/p>\n\n\n\n<p>I will dig into this more on other huge sites with terrible scores below but if Google can\u2019t get 100\/100 on its own tool on a simple page with 1 logo and 1 form field, should Google be using this as a ranking signal?<\/p>\n\n\n\n<p><strong>Worst of all, non-technical site owners are going to struggle to fix any of these types of issues on their site without some Web developer help so Google has just added a lot more complexity to Web entrepreneurship, particularly for non-technical solopreneurs, the core audience of&nbsp;<a href=\"https:\/\/wpx.net\/\" target=\"_blank\" rel=\"noreferrer noopener\">WPX<\/a>.<\/strong><\/p>\n\n\n\n<p>Let\u2019s also add one more ingredient to this already difficult recipe: Desktop scores.<\/p>\n\n\n\n<p>Back in July 2019, Google&nbsp;<a href=\"https:\/\/developers.google.com\/search\/mobile-sites\/mobile-first-indexing\" target=\"_blank\" rel=\"noreferrer noopener\">switched to something called Mobile First indexing<\/a>&nbsp;and ranking so it indexes and ranks all sites across the Web based on the mobile version of a site, not the desktop version.<\/p>\n\n\n\n<p>So do desktop scores on the Google Page Speed Insights tool actually matter?<\/p>\n\n\n\n<p><strong>It\u2019s also a pity that Google chooses to measure mobile website performance with the assumption that&nbsp;<a href=\"https:\/\/github.com\/GoogleChrome\/lighthouse\/blob\/master\/docs\/throttling.md\" target=\"_blank\" rel=\"noreferrer noopener\">the user has a 3G or slow 5-year-old 4G phone<\/a>&nbsp;though they make that information pretty hard to find \u2013 apparently, site owners are now responsible for visitors accessing their site with terrible hardware!<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_Can_You_Measure_Your_Sites_%E2%80%98Core_Web_Vitals\"><\/span>How Can You Measure Your Site&#8217;s &#8216;Core Web Vitals&#8217;?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Keep in mind that&nbsp;<a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google\u2019s Page Speed Insights tool<\/a>&nbsp;measures single individual pages and NOT a whole website. You may get a great score on one page of your website and terrible scores on others.<\/p>\n\n\n\n<p>Click&nbsp;<a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>&nbsp;for that tool.<\/p>\n\n\n\n<p>For a whole website overview, check your dashboard inside the&nbsp;<a href=\"https:\/\/search.google.com\/search-console\/core-web-vitals\" target=\"_blank\" rel=\"noreferrer noopener\">Google Search Console<\/a>, assuming you have connected your website to that free tool!<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"603\" src=\"https:\/\/blog.wpx.net\/wp-content\/uploads\/2021\/03\/google-search-console-tk.jpg\" alt=\"\" class=\"wp-image-1506803\" srcset=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/google-search-console-tk.jpg 1200w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/google-search-console-tk-300x151.jpg 300w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/google-search-console-tk-1024x515.jpg 1024w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/google-search-console-tk-768x386.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Whats_This_Thing_Called_%E2%80%98Largest_Contentful_Paint_LCP\"><\/span>What&#8217;s This Thing Called &#8216;Largest Contentful Paint (LCP)&#8217;?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>This is just a fancy way of saying, how quickly does most of a webpage load for a normal human visitor to that page.<\/p>\n\n\n\n<p><strong>According to Google, <u>2.5 seconds<\/u> or below is the ideal for a green or \u2018Good\u2019 rating here.<\/strong><\/p>\n\n\n\n<p>My own personal site at&nbsp;<a href=\"https:\/\/terrykyle.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">terrykyle.com<\/a>&nbsp;(hosted on WPX, of course) is currently showing this \u2018Largest Contentful Paint\u2019 score on Desktop (0.6 seconds) \u2013 all documented scores below were correct at the time of writing but I encourage you to test these sites yourself&nbsp;<a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"652\" src=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/my-lcp-on-gpsi.jpg\" alt=\"\" class=\"wp-image-1506734\" srcset=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/my-lcp-on-gpsi.jpg 1200w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/my-lcp-on-gpsi-300x163.jpg 300w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/my-lcp-on-gpsi-1024x556.jpg 1024w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/my-lcp-on-gpsi-768x417.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p>and on Mobile (2.3 seconds), I will explain the difference shortly in the way Google measures it:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"699\" src=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/my-mobile-lcp-on-gpsi.jpg\" alt=\"\" class=\"wp-image-1506733\" srcset=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/my-mobile-lcp-on-gpsi.jpg 1200w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/my-mobile-lcp-on-gpsi-300x175.jpg 300w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/my-mobile-lcp-on-gpsi-1024x596.jpg 1024w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/my-mobile-lcp-on-gpsi-768x447.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p>But I have my doubts about Google\u2019s measurement tools so I tested some mega sites with their tool \u2013 just because it\u2019s Google\u2019s tool doesn\u2019t mean that it\u2019s perfect, they have produced&nbsp;<a href=\"https:\/\/killedbygoogle.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">many duds<\/a>&nbsp;among their stellar successes.<\/p>\n\n\n\n<p>We can see below that YouTube, the 2nd most visited site in the world, does NOT get a Good sub-2.5 second score here, even though this site loads instantly on almost any device (the overall performance grade of 35\/100 also sucks):<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"660\" src=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/youtube0002.jpg\" alt=\"\" class=\"wp-image-1506735\" srcset=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/youtube0002.jpg 1200w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/youtube0002-300x165.jpg 300w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/youtube0002-1024x563.jpg 1024w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/youtube0002-768x422.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p>Same dealio for the Google Play Store on Mobile testing, a site that hosts 3 million+ apps for Android and, like YouTube, would have an almost limitless budget for site optimization, which also loads instantly on any device, test it for yourself:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"726\" src=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/play-store-metrics.jpg\" alt=\"\" class=\"wp-image-1506742\" srcset=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/play-store-metrics.jpg 1200w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/play-store-metrics-300x182.jpg 300w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/play-store-metrics-1024x620.jpg 1024w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/play-store-metrics-768x465.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p>So a 2.9 second First Contentful Paint timing which \u201cneeds improvement\u201d, according to this tool, even though the site loads instantly on any device as does the site below, Apple.com<\/p>\n\n\n\n<p><strong>Yes, the same company that invented the iPhone and also has a few dollars to spare for site speed optimization gets a&nbsp;First Contentful Paint score of 3.7 seconds by one measure and 7.1 seconds by another \u2013 is this the same tool that Google will be using to judge the performance of Web pages (partly) for ranking purposes?<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"737\" src=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/apple-scores.jpg\" alt=\"\" class=\"wp-image-1506768\" srcset=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/apple-scores.jpg 1200w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/apple-scores-300x184.jpg 300w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/apple-scores-1024x629.jpg 1024w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/apple-scores-768x472.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Lets_Move_On_To_the_First_Input_Delay_FID\"><\/span>Let&#8217;s Move On To the First Input Delay (FID).<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Next up we have something called \u2018First Input Delay\u2019 which just means how long it take for a visited webpage to be usable for entering information, such as filling in login information, or clicking on things.<\/p>\n\n\n\n<p>To land in the \u2018Good\u2019 range, Google says that this should be <strong>100 milliseconds or less<\/strong>.<\/p>\n\n\n\n<p>If you remember the YouTube example above, Google\u2019s tool said that the webpage took almost 3 seconds to have most of the content loaded but it only took 18 milliseconds to become interactive, getting a green tick in the process.<\/p>\n\n\n\n<p><strong>18 milliseconds is extremely fast and 2.7 seconds for a reported page load time is pretty mediocre overall YouTube.com only scored a 35\/100 on Mobile, those 2 results seem contradictory to me, maybe it\u2019s just me:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"660\" src=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/youtube0002.jpg\" alt=\"\" class=\"wp-image-1506735\" srcset=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/youtube0002.jpg 1200w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/youtube0002-300x165.jpg 300w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/youtube0002-1024x563.jpg 1024w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/03\/youtube0002-768x422.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"And_Whats_The_Dealio_On_%E2%80%98Cumulative_Layout_Shift_CLS\"><\/span>And What&#8217;s The Dealio On &#8216;Cumulative Layout Shift (CLS)&#8217;?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>When a Web page is loading on your mobile, often the elements of the page move around a fair bit as it spools up and when you mean to click on one link, you accidentally click on the wrong link and then get taken somewhere you didn\u2019t want to go.<\/p>\n\n\n\n<p><strong>It\u2019s less of an issue on a laptop or desktop but can be annoying on a smartphone.<\/strong><\/p>\n\n\n\n<p>To encourage better practice in this regard, Google\u2019s Core Web Vitals also measures what they call <strong>Cumulative Layout Shift<\/strong>.&nbsp;<\/p>\n\n\n\n<p>According to Google, a score of 0.1 or better (higher, not lower) is the target, which is not a time measure but just a number score.<\/p>\n\n\n\n<p><strong>Interestingly, with a score of 0.35, Google\u2019s own YouTube didn\u2019t do well here (see above image).<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Will_These_%E2%80%98Core_Web_Vitals_Be_The_Main_Ranking_Factor_On_Google_Now\"><\/span>Will These &#8216;Core Web Vitals&#8217; Be The Main Ranking Factor On Google Now?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>That\u2019s very unlikely but nobody outside of Google knows exactly how much weight is applied to any of the 200+ ranking factors in Google\u2019s current and ever-evolving algorithm.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Are_There_Any_Other_Ways_That_Google_Is_Measuring_My_Site\"><\/span>Are There Any Other Ways That Google Is Measuring My Site?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Yes.<\/p>\n\n\n\n<p>You should also be mindful of making sure that your site is <strong>mobile-friendly<\/strong>, has a <strong>valid SSL certificate<\/strong> installed, and <strong>annoying popups<\/strong> should be avoided or kept to a minimum.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Was_My_Quick_Test_With_An_Empty_WP_Install_Revealed\"><\/span>What Was My Quick Test With An Empty WP Install Revealed?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>I find that a very useful way to quickly diagnose any performance problems (plugins, hosting, etc) is to install an empty default WP on a test subdomain in the same hosting account as your main site\/s.<\/p>\n\n\n\n<p>In this case, I am using <strong>test.terrykyle.com<\/strong>&nbsp;on one of our UK servers at WPX.<\/p>\n\n\n\n<p>Even though the WordPress organization (Automattic) has gotten some flak over their (perceived or real) indifference to this Core Web Vitals change from Google, my empty WP default test site achieved a near-perfect score \u2013 only 2 plugins live (W3TC for our own CDN integration and Really Simple SSL), all others deleted.<\/p>\n\n\n\n<p>Here are the scores \u2013 <strong>99\/100<\/strong> on mobile (note that scores can vary by as much as 20 points on each scan, even if the page is unchanged, who knows which score Google will use as a ranking signal then!):<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"723\" src=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/test00001.jpg\" alt=\"\" class=\"wp-image-1506874\" srcset=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/test00001.jpg 1200w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/test00001-300x181.jpg 300w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/test00001-1024x617.jpg 1024w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/test00001-768x463.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p>and <strong>100\/100<\/strong> on Desktop:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1573\" height=\"959\" src=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/test00002.jpg\" alt=\"\" class=\"wp-image-1506878\" srcset=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/test00002.jpg 1573w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/test00002-300x183.jpg 300w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/test00002-1024x624.jpg 1024w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/test00002-768x468.jpg 768w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/test00002-1536x936.jpg 1536w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/test00002-1200x732.jpg 1200w\" sizes=\"auto, (max-width: 1573px) 100vw, 1573px\" \/><\/figure>\n\n\n\n<p>I then added the free Elementor plugin (the Elementor page builder gets plenty of blowback for being too heavy) but the scores remained exactly the same, namely 99\/100 or 100\/100 depending on the scan on Mobile and 100\/100 on Desktop.<\/p>\n\n\n\n<p>I then added 10 well-optimized, 1,200-pixel wide images to the site homepage and this is the result on the desktop (not massively affected -100\/100 down to <strong>86\/100<\/strong>):<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"711\" src=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/10pics-desktop.jpg\" alt=\"\" class=\"wp-image-1506985\" srcset=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/10pics-desktop.jpg 1200w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/10pics-desktop-300x178.jpg 300w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/10pics-desktop-1024x607.jpg 1024w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/10pics-desktop-768x455.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p>but on Mobile \u2013 still way higher than YouTube, the Google Apps Store or Apple.com though \u2013 down to <strong>69\/100<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"674\" src=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/10pics-mobile.jpg\" alt=\"\" class=\"wp-image-1506984\" srcset=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/10pics-mobile.jpg 1200w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/10pics-mobile-300x169.jpg 300w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/10pics-mobile-1024x575.jpg 1024w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/10pics-mobile-768x431.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p>I then added just ONE \u2013 badly UNoptimized image (almost 2 Mb) to the page using the free Elementor page builder and the Desktop went down to <strong>84\/100<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"705\" src=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/unoptimized-desktop.jpg\" alt=\"\" class=\"wp-image-1506991\" srcset=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/unoptimized-desktop.jpg 1200w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/unoptimized-desktop-300x176.jpg 300w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/unoptimized-desktop-1024x602.jpg 1024w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/unoptimized-desktop-768x451.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p>and Mobile went to <strong>61\/100<\/strong> from 69\/100 with only optimized images:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"685\" src=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/unoptimized-mobile.jpg\" alt=\"\" class=\"wp-image-1506990\" srcset=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/unoptimized-mobile.jpg 1200w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/unoptimized-mobile-300x171.jpg 300w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/unoptimized-mobile-1024x585.jpg 1024w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2021\/04\/unoptimized-mobile-768x438.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p>That was a quick and extremely basic test but gives you an idea of how WordPress performs before we site owners start loading it up with stuff: page builders, plugins, scripts, unoptimized images, popups, etc.<\/p>\n\n\n\n<p>The simpler and lighter the page is, the better, even if the Web is generally going in the opposite direction!<\/p>\n\n\n\n<p><strong>FOUR IMPORTANT TEST NOTES:<\/strong><\/p>\n\n\n\n<p><strong>NOTE 1:<\/strong><\/p>\n\n\n\n<p>Results always vary a little to a LOT with each scan on the&nbsp;Google Page Speed Insights&nbsp;tool (think 10 to 30 points), that seems to be normal.<\/p>\n\n\n\n<p><strong>NOTE 2:<\/strong><\/p>\n\n\n\n<p>If you are testing like this, bear in mind that caching at a site, server or CDN level might still be showing the older, un-updated version of your test page so double-check that.<\/p>\n\n\n\n<p><strong>NOTE 3:<\/strong><\/p>\n\n\n\n<p>Personally, I optimize images by resizing them to the column width of the page, e.g. 1,200 pixels in this case, AND converting them to .jpeg format (until WP natively supports WebP) AND saving them at 50% quality in paint.net \u2013 most images appear unchanged at that quality level to the human eye but the file size will be massively reduced.<\/p>\n\n\n\n<p>In my view, image optimization should be done like that when a new page is created and not lazily handed off to some image-file-crushing plugin or 3rd party service.<\/p>\n\n\n\n<p><strong>NOTE 4:<\/strong><\/p>\n\n\n\n<p>On the Google Page Speed Insights tool, it is the so-called <strong>Field Data<\/strong> from the&nbsp;Chrome User Experience Report that will be factored into Google rankings and not <strong>Lab Data<\/strong>.<\/p>\n\n\n\n<p>Site changes could also take up to 28 days to be reflected in Field Data too.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_To_Optimize_For_Core_Web_Vitals\"><\/span>How To Optimize For Core Web Vitals?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Short of hiring a good front-end Web developer to tackle some of the recommendations from Google\u2019s tool, these 5 steps should help you get (much) higher Core Web Vitals scores:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>High-speed hosting, like WPX\u2019s independently verified&nbsp;<a href=\"https:\/\/www.matthewwoodward.co.uk\/blogging\/fastest-wordpress-hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>: superfast new SSD servers, UNDERloaded with hosting accounts, using our own custom CDN (Content Delivery Network) with 26 global endpoints<\/strong><\/li>\n\n\n\n<li>Audit your plugins and scripts \u2013 only run what you are actually using and delete the rest<\/li>\n\n\n\n<li><strong>Optimize all images, see my 50% JPEG paint.net step above, it massively reduces file size<\/strong><\/li>\n\n\n\n<li>Keep pages relatively short and simple \u2013 all of the heatmap tracking of sites that I have ever done shows a huge falloff as more and more scrolling is required, yes you can have long pages but is anybody actually reading them?<\/li>\n\n\n\n<li><strong>Check your site on different mobile devices, especially when you make design or layout changes, and don\u2019t assume that just because your site looks gorgeous on your 17\u2033 laptop, it looks OK on an iPhone SE.<\/strong><\/li>\n\n\n\n<li>Monitor your Core Web Vitals in Google Search Console for usable recommendations (some\/many aren\u2019t)<\/li>\n\n\n\n<li><strong>Join relevant Facebook Groups where other site owners and Webmasters share their results about optimizing for the evolving Core Web Vitals metrics<\/strong><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Matt_Diggitys_Perspective\"><\/span>Matt Diggity&#8217;s Perspective?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Well-known affiliate marketing SEO,&nbsp;<a href=\"https:\/\/diggitymarketing.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Matt Diggity<\/a>&nbsp;(also a long-term WPX customer) gives his thoughts on Google\u2019s Core Web Vitals here \u2013 sidenote: I interviewed Matt about a major turning point in his life for my InflectionPoint.life project&nbsp;<a href=\"https:\/\/inflectionpoint.life\/matt-diggity\/\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Core Web Vitals Explained: How To Fix Site Optimization Issues\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/_FpAvQkjlco?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>If you\u2019re looking for a much more detailed, technical guide, this video from the Google Chrome Developers channel on YouTube is helpful:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Optimize for Core Web Vitals\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/AQqFZ5t8uNc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--2\"><a class=\"wp-block-button__link has-palette-color-8-background-color has-text-color has-background has-border-color has-text-align-center wp-element-button\" href=\"https:\/\/wpx.net\/cart\/wordpress-hosting\/\" style=\"border-color:#fb5718;border-width:1px;border-radius:25px;color:#fb5718\" target=\"_blank\" rel=\"noreferrer noopener\">View Our Plans<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>May 2021, Let The Panic Attacks Begin&#8230; Back in 2020, Google&nbsp;announced&nbsp;that something called \u2018Core Web Vitals\u2019 would be a ranking factor for Google search results from May 2021 onwards. This announcement caused quite a ruckus among some Webmasters desperate to make sure that: [a] a poor Core Web Vitals score for their site wouldn\u2019t drag [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2018163,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"cybocfi_hide_featured_image":"","footnotes":""},"categories":[87],"tags":[],"ppma_author":[103],"class_list":["post-2018073","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-performance"],"blocksy_meta":[],"authors":[{"term_id":103,"user_id":1,"is_guest":0,"slug":"wpx_blog3826","display_name":"Terry Kyle","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/9819e4a6f61650acc8fb4bcf3113de879a44c80a9cac414c99dc514ff0800331?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/posts\/2018073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/comments?post=2018073"}],"version-history":[{"count":4,"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/posts\/2018073\/revisions"}],"predecessor-version":[{"id":2018085,"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/posts\/2018073\/revisions\/2018085"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/media\/2018163"}],"wp:attachment":[{"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/media?parent=2018073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/categories?post=2018073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/tags?post=2018073"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/ppma_author?post=2018073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}