{"id":356,"date":"2021-02-25T12:31:40","date_gmt":"2021-02-25T12:31:40","guid":{"rendered":"https:\/\/crowdo.net\/blog\/?p=356"},"modified":"2023-11-28T13:52:46","modified_gmt":"2023-11-28T13:52:46","slug":"core-web-vitals","status":"publish","type":"post","link":"https:\/\/crowdo.net\/blog\/core-web-vitals\/","title":{"rendered":"(Google Update May 2021) Core Web Vitals Are Coming"},"content":{"rendered":"\n<p>Google isn\u2019t sleeping. In May 2021 they are going to release yet another update to its search algorithm &#8211;<strong> core web vitals become ranking signals.<\/strong><\/p>\n\n\n\n<p>We already discussed that Page Experience is going to have more and more influence on search results in the future.<\/p>\n\n\n\n<p>This update will concern the core web vitals, or the performance part of page experience.<\/p>\n\n\n\n<p>Let\u2019s discuss what this means for all of us and what can be done about it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"c2ad76eca927\">Page Experience : What Is It?<\/h2>\n\n\n\n<p>Page Experience is a mix of factors that define the overall experience of a user that has landed on a certain website. Note that this has nothing to do with the quality of your content. Your page experience may be awesome, but your content may still not rank well, or the other way around.&nbsp;<\/p>\n\n\n\n<p>As stated by Google, <a href=\"https:\/\/developers.google.com\/search\/blog\/2020\/05\/evaluating-page-experience\" target=\"_blank\" rel=\"noreferrer noopener\">page experience<\/a> is composed of the following factors:<\/p>\n\n\n\n<p>Mobile Friendly Factor &#8211; your web page should be properly optimized for mobile. This includes legible font \/ image\/ button sizes, no excessive JS, proper layout and other things as such.<\/p>\n\n\n\n<p><strong>Safe Browsing<\/strong> &#8211; this basically means that your website should not pose any risk to the user who visits it (virus, malware).<\/p>\n\n\n\n<p><strong>HTTPS<\/strong> &#8211; having SSL certificate installed and configured properly. We already noted many times that http is a no go these days.<\/p>\n\n\n\n<p><strong>No intrusive interstitials<\/strong> &#8211; those are all the elements that might prevent the user from accessing the information on the web page easily. Examples are pop-up windows and flashy ads.<\/p>\n\n\n\n<p><strong>Core Web Vitals<\/strong> (Loading, Interactivity Visual Stability) &#8211; these are (in Google\u2019s opinion) the cornerstone performance metrics of your website. Let\u2019s address out attention to each of those.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"027d05f533e3\">Core Web Vitals In a Bit More Detail<\/h2>\n\n\n\n<p>Core Web Vitals are composed of 3 key performance indicators:<\/p>\n\n\n\n<p><strong>Largest Contentful Paint (LCP)<\/strong> &#8211; the amount of time it takes for the main content of the web page to load. Ideally, it should be within 2.5 seconds.<\/p>\n\n\n\n<p><strong>First Input Delay (FID)<\/strong> &#8211; the amount of time it takes for the user to be able to interact with the web page\u2019s content (pressing a button, submitting a request etc.) Ideally, it should be within 150 milliseconds.<\/p>\n\n\n\n<p><strong>Cumulative Layout Shift (CLS) <\/strong>&nbsp;&#8211; the number of times users experience an unexpected shift in web page layout. Ideally, this metric should be less than 0.1. You probably have seen websites that switch their styles all of a sudden in the process of loading &#8211; well, that\u2019s exactly what we\u2019re talking about (also called Flash of unstyled text). You\u2019ve probably seen a lot of blog articles, where&nbsp; a paragraph of text suddenly goes up because the video\/image has been loaded underneath it, this is also an example of a poor CLS.&nbsp;&nbsp;<\/p>\n\n\n\n<p>All of the above metrics can be checked in either of the following tools by Google:<\/p>\n\n\n\n<p><a href=\"https:\/\/search.google.com\/search-console\/about\" target=\"_blank\" rel=\"noreferrer noopener\">Search Console<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noreferrer noopener\">PageSpeed Insights<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse#devtools\" target=\"_blank\" rel=\"noreferrer noopener\">Chrome Dev Tools<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"512\" height=\"188\" src=\"https:\/\/crowdo.net\/blog\/wp-content\/uploads\/2021\/02\/1x.png\" alt=\"\" class=\"wp-image-738\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"8084d9fb348f\">Core Web Vitals Google Update: Why Should You Care?<\/h2>\n\n\n\n<p>The update will take all of the core web vitals into account, and you can benefit from the update under certain circumstances.<\/p>\n\n\n\n<p>Most people though will likely see their rankings dropped..<\/p>\n\n\n\n<p>Google has stated that core web vitals will be included as a ranking signal, yet content quality will still be prioritized in search.<\/p>\n\n\n\n<p>What does it mean?<\/p>\n\n\n\n<p><strong>Scenario A:<\/strong> if you offer the best content, but your website is not perfectly optimized for core web vitals &#8211; you will still rank high.<\/p>\n\n\n\n<p><strong>Scenario B: <\/strong>if two or more websites offer content of similar quality, THEN core web vitals will be one of the deciding factors of which website ranks higher. And this will be the case for a lot of us!<\/p>\n\n\n\n<p>So if your niche is saturated with a lot of content, you most likely will see an impact from the update.<\/p>\n\n\n\n<p>There are lots of different things you can do to optimize your website, such as compressing your images, minifying your CSS\/JS, lazy loading assets etc.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.searchenginewatch.com\/2021\/01\/13\/core-web-vitals-report-28-ways-to-supercharge-your-site\/\" target=\"_blank\" rel=\"noreferrer noopener\">This article<\/a> touches upon the optimization tips in more detail.&nbsp;<\/p>\n\n\n\n<p>Right now we want to show you 2 case studies from our own website and blog to show that even 5 minutes of work can make a difference in your page speed score.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"0262850da1c5\">What Does It Mean for CMS Users?<\/h2>\n\n\n\n<p>Let\u2019s face it, most of us use a CMS for running a blog. Mostly WordPress, but also Drupal, Wix, Joomla and others. Those content management systems were not designed to suit core web vitals perfectly, and thus a lot of people will likely experience the following:<\/p>\n\n\n\n<p><em>My website runs fast, no one ever complained, yet my page speed score is somewhere in the orange zone.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"512\" height=\"269\" src=\"https:\/\/crowdo.net\/blog\/wp-content\/uploads\/2021\/02\/2x.png\" alt=\"\" class=\"wp-image-739\"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.searchenginejournal.com\/why-core-web-vitals-not-your-problem\/396768\/\" target=\"_blank\" rel=\"noreferrer noopener\">That doesn\u2019t mean there\u2019s something wrong with your CMS<\/a>. Google wasn\u2019t cooperating with WordPress developers to introduce their set of core web vitals. Hence, it is not surprising that these CMS systems aren\u2019t designed to perform well on these metrics.<\/p>\n\n\n\n<p>Is it fair that Google dictates the rules, that publishers and users (not developers) have to comply with? We don\u2019t think so, yet we can\u2019t do much about it other than adapting to the new reality of search, where core web vitals are important.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2383ed7d588b\">Case Study 1: How Did We Speed up Our WP-powered Blog?<\/h2>\n\n\n\n<p>Right now we\u2019re going to give you an example of how we managed to speed up our WordPress blog tremendously (the one you\u2019re at right now).<\/p>\n\n\n\n<p>Our case was quite simple, but we\u2019ll give more helpful tips as well!<\/p>\n\n\n\n<p>In order to test the core web vitals score, we\u2019re going to use the <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google PageSpeed Insights.<\/a><\/p>\n\n\n\n<p>So before we made a few tweaks, our blog was scoring 62\/100, which is not a great score. Mobile score was somewhere around 20, and this was absolutely terrible!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"512\" height=\"228\" src=\"https:\/\/crowdo.net\/blog\/wp-content\/uploads\/2021\/02\/3x.png\" alt=\"\" class=\"wp-image-740\"\/><\/figure>\n\n\n\n<p>Right now our blog scores 90+ on desktop and 60+ on mobile, which is much higher than average and much better than what we had before.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"512\" height=\"240\" src=\"https:\/\/crowdo.net\/blog\/wp-content\/uploads\/2021\/02\/4x.png\" alt=\"\" class=\"wp-image-741\"\/><\/figure>\n\n\n\n<p>So what did we do? Actually, not much.<\/p>\n\n\n\n<p>We tried to follow the best practices already, but something just wasn\u2019t working for us.<\/p>\n\n\n\n<p>As you know there are dozens of <a href=\"https:\/\/crowdo.net\/blog\/seo-wordpress-plugins\/\">WordPress optimization plugins<\/a> which kind of offer the same amount of functions (cache, lazy load, code minification and compression etc). Yet the way their algorithm works is different.<\/p>\n\n\n\n<p>The one we were using before was called <a href=\"https:\/\/pagespeed.ninja\" target=\"_blank\" rel=\"noreferrer noopener\">PageSpeed Ninja<\/a> &#8211; it\u2019s a free plugin that is actually integrated with PageSpeed Insights (hence, the name). For a free plugin it does a great job &#8211; we thought so..<\/p>\n\n\n\n<p>Obviously without the optimization plugin at all, our score would probably be somewhere in the red zone.<\/p>\n\n\n\n<p>Yet we switched to <a href=\"https:\/\/wp-rocket.me\" target=\"_blank\" rel=\"noreferrer noopener\">WP Rocket <\/a>(premium plugin)&#8230; and wow.&nbsp;<\/p>\n\n\n\n<p>I was impressed by the amount of difference that it made in our PageSpeed scores, as well as our own measurements.<\/p>\n\n\n\n<p>From all the plugins I\u2019ve had experience with &#8211; WP Rocket outperformed them all by a huge margin.<\/p>\n\n\n\n<p>Yet if something else works for you &#8211; go with that!<\/p>\n\n\n\n<p>The point is &#8211; don\u2019t be greedy and be ready to pay for a premium optimization plugin!<\/p>\n\n\n\n<p>What we found out is that free plugins that are meant to optimize your website are not doing nearly as well as the premium ones.&nbsp;<\/p>\n\n\n\n<p>And that\u2019s pretty much it. We changed our optimization plugin, and our performance and scores have really gone up (probably thanks to more advanced caching that WP Rocket offers).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"66a2be52fa9a\">Case Study 2: How Did We Speed Up Our Non-WP Website?<\/h2>\n\n\n\n<p>And now we are also going to show how we were able to speed up our non-WordPress website. The difference will not be as massive as with our blog, but a small difference is still a difference.<\/p>\n\n\n\n<p><strong>Full disclosure:<\/strong> technically, our website is far from perfect and we still have much work to do. Yet even in 5 minutes we were able to bump our PageSpeed score.<\/p>\n\n\n\n<p>So before we\u2019ve done the tweaks, our score was around 60 for desktop and it\u2019s a solid 70+, which is not great yet, but we\u2019re getting close \ud83d\ude42<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"512\" height=\"253\" src=\"https:\/\/crowdo.net\/blog\/wp-content\/uploads\/2021\/02\/5x.png\" alt=\"\" class=\"wp-image-742\"\/><\/figure>\n\n\n\n<p>A lot of things slow down your website, and excessive JavaScript is no exception.<\/p>\n\n\n\n<p>We are using Google Tag Manager to process all of our 3rd party scripts (such as Facebook Pixel).<\/p>\n\n\n\n<p>What we noticed is that we have a number of tags and scripts that we don\u2019t use, but they\u2019re still running in the background and slowing down our website!<\/p>\n\n\n\n<p>For example, we had a tag from Hotjar and other analytical tools on top of the universal Google Analytics tag.<\/p>\n\n\n\n<p>Is it a problem per se? No, the fact that we don\u2019t use these tools anywhere is the problem!<\/p>\n\n\n\n<p>We got rid of those scripts from the Tag Manager, and had already seen our PageSpeed Score going up 10 points straight away.<\/p>\n\n\n\n<p>You can simply open your tag manager and see if you have any unused\/ unnecessary scripts. Alternatively, you can check the weight of your JS code in Chrome Dev Tools and see whether you can do anything about it.<\/p>\n\n\n\n<p>Considering that it took us only 5 minutes to do\u2026 that was totally worth it!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"0f4ddeb6b1a5\">Conclusion<\/h2>\n\n\n\n<p>Whether we want it or not, we all have to go ahead and optimize our websites for core web vitals.<\/p>\n\n\n\n<p>Yet there are so many technical nuances that come into play.<\/p>\n\n\n\n<p>If you don\u2019t feel like figuring it out by yourself, consider checking out <a href=\"https:\/\/crowdo.net\/audit\">Crowdo Audit Service.<\/a><\/p>\n\n\n\n<p>Technical SEO assessment (including website performance) is included in every package.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Yet another Google Update! This time it&#8217;s core web vitals. Learn everything you need to know to optimize your website properly.<\/p>","protected":false},"author":2,"featured_media":1759,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/crowdo.net\/blog\/wp-json\/wp\/v2\/posts\/356"}],"collection":[{"href":"https:\/\/crowdo.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/crowdo.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/crowdo.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/crowdo.net\/blog\/wp-json\/wp\/v2\/comments?post=356"}],"version-history":[{"count":13,"href":"https:\/\/crowdo.net\/blog\/wp-json\/wp\/v2\/posts\/356\/revisions"}],"predecessor-version":[{"id":2253,"href":"https:\/\/crowdo.net\/blog\/wp-json\/wp\/v2\/posts\/356\/revisions\/2253"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/crowdo.net\/blog\/wp-json\/wp\/v2\/media\/1759"}],"wp:attachment":[{"href":"https:\/\/crowdo.net\/blog\/wp-json\/wp\/v2\/media?parent=356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/crowdo.net\/blog\/wp-json\/wp\/v2\/categories?post=356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/crowdo.net\/blog\/wp-json\/wp\/v2\/tags?post=356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}