{"id":5616,"date":"2020-12-23T13:31:50","date_gmt":"2020-12-23T13:31:50","guid":{"rendered":"https:\/\/shortpixel.com/blog\/?p=5616"},"modified":"2021-12-05T07:57:35","modified_gmt":"2021-12-05T07:57:35","slug":"how-shortpixel-can-improve-the-core-web-vitals-lcp-fid-cls","status":"publish","type":"post","link":"https:\/\/shortpixel.com\/blog\/how-shortpixel-can-improve-the-core-web-vitals-lcp-fid-cls\/","title":{"rendered":"How ShortPixel can improve the Core Web Vitals &#8211; LCP, FID, CLS"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"778\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2020\/12\/Screenshot-20201220-180510-1024x778.jpg\" alt=\"\" class=\"wp-image-5622\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2020\/12\/Screenshot-20201220-180510-1024x778.jpg 1024w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2020\/12\/Screenshot-20201220-180510-300x228.jpg 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2020\/12\/Screenshot-20201220-180510-768x583.jpg 768w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2020\/12\/Screenshot-20201220-180510.jpg 1111w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<!--more-->\n\n\n\n<p>Quoting Google,<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.<\/em><\/p><p><em>Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable&nbsp;<\/em><a href=\"https:\/\/web.dev\/user-centric-performance-metrics\/#how-metrics-are-measured\" target=\"_blank\" rel=\"noopener\"><em>in the field<\/em><\/a><em>, and reflects the real-world experience of a critical&nbsp;<\/em><a href=\"https:\/\/web.dev\/user-centric-performance-metrics\/#how-metrics-are-measured\" target=\"_blank\" rel=\"noopener\"><em>user-centric<\/em><\/a><em>&nbsp;outcome<\/em><\/p><\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>In plain English, the <a rel=\"noreferrer noopener\" aria-label=\"Core Web Vitals (opens in a new tab)\" href=\"https:\/\/web.dev\/vitals\/\" target=\"_blank\">Core Web Vitals<\/a> are 3 metrics that Google uses to measure how good the user experience is on your website. These 3 metrics are:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Largest Contentful Paint (<strong>LCP<\/strong>)<\/li><li>First Input Delay (<strong>FID<\/strong>)<\/li><li>Cumulative Layout Shift (<strong>CLS<\/strong>)<\/li><\/ul>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/developers.google.com\/search\/blog\/2020\/11\/timing-for-page-experience\" target=\"_blank\">Starting May 2021<\/a>, these 3 metrics will be used by Google to rank your site on the search engine (although you should remember that&nbsp;<strong><a rel=\"noreferrer noopener\" href=\"https:\/\/help.shortpixel.com\/article\/347-about-gtmetrix-pagespeed-insights-and-other-website-speed-testers\" target=\"_blank\">content is still the king<\/a><\/strong>).<\/p>\n\n\n\n<p>You may be wondering: Can ShortPixel help me with the LCP, FID or CLS? Is ShortPixel affecting my Core Web Vitals?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Largest Contentful Paint (LCP)<\/h2>\n\n\n\n<p>The <a href=\"https:\/\/web.dev\/lcp\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"LCP (opens in a new tab)\">LCP<\/a> measures <strong>how much time your website takes to display&nbsp;the largest&nbsp;image or text block&nbsp;visible within the viewport<\/strong>. It is important to know that &#8220;large&#8221; is not the same as &#8220;heavy&#8221;; the LCP measures the size the element takes within the viewport, not the kilobytes or megabytes.<\/p>\n\n\n\n<p>Knowing that, <strong>ShortPixel will be able to help you reduce the LCP<\/strong> <strong>if your largest element is an image<\/strong>. If that&#8217;s the case, simply reduce its size using our image optimization tools and then it will load faster, which in turn will lower your LCP.<\/p>\n\n\n\n<p>You can check what&#8217;s your largest element using the developer tools included in your browser. Webenso have a pretty short and useful guide about <a rel=\"noreferrer noopener\" aria-label=\"how to detect the LCP (opens in a new tab)\" href=\"https:\/\/webenso.com\/how-to-find-the-lcp-largest-contentful-paint-html-element\/\" target=\"_blank\">how to detect the LCP<\/a>.<\/p>\n\n\n\n<p>Please notice that the LCP may also be affected by your hosting provider, your CDN and\/or how your website is built. For example, if you have a <strong>slow server response time<\/strong> and your theme is bloated (using a page builder doesn&#8217;t help!), you will get a poor LCP even if you reduce your images sizes by a lot.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">First Input Delay (FID)<\/h2>\n\n\n\n<p>The <a rel=\"noreferrer noopener\" aria-label=\"FID (opens in a new tab)\" href=\"https:\/\/web.dev\/fid\/\" target=\"_blank\">FID<\/a> measures again time. Specifically,<strong> the time from the moment when your visitors interact with a page, to the moment when the browser is able to respond to that interaction<\/strong>. We are sure you&#8217;ve experienced that frustrating situation where the website looks like it loaded but you cannot scroll or click on anything yet; that&#8217;s the delay the FID tracks.<\/p>\n\n\n\n<p>This time when everything appears to be unresponsive is caused by the browser itself, when its <a rel=\"noreferrer noopener\" aria-label=\"main thread (opens in a new tab)\" href=\"https:\/\/web.dev\/mainthread-work-breakdown\/\" target=\"_blank\">main thread<\/a> is busy parsing and executing (mainly) all the JavaScript code that your website contains. The bigger and the more numerous your JavaScript resources are, the more they will affect your FID.<\/p>\n\n\n\n<p>There are numerous ways to improve your FID, although, in this occasion, ShortPixel will not be the answer to this. The explanation is simple:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>If you are using <a rel=\"noreferrer noopener\" aria-label=\"ShortPixel Image Optimizer (opens in a new tab)\" href=\"https:\/\/wordpress.org\/plugins\/shortpixel-image-optimiser\/\" target=\"_blank\"><strong>ShortPixel Image Optimizer<\/strong><\/a> (SPIO) or any of our tools dedicated to physically optimize your image files, <strong>they have no effect in your browser<\/strong>, because they don&#8217;t function on page load.<\/li><li>If you use <strong><a rel=\"noreferrer noopener\" aria-label=\"ShortPixel Adaptive Images (opens in a new tab)\" href=\"https:\/\/wordpress.org\/plugins\/shortpixel-adaptive-images\/\" target=\"_blank\">ShortPixel Adaptive Images<\/a><\/strong> (SPAI), while it is true that it runs JavaScript code (from its file ai.min.js) on every page load, <strong>it is highly optimized and light-weight<\/strong>, so it will not affect your site in a noticeable way.<\/li><\/ul>\n\n\n\n<p>What you&#8217;ll need to do in this case is <a href=\"https:\/\/shortpixel.com/blog\/how-to-increase-your-wp-site-performance\/\">optimize your website<\/a> so it uses less resources.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cumulative Layout Shift (CLS)<\/h2>\n\n\n\n<p>This one is very easy to demonstrate, &#8220;thanks&#8221; to the awful experience many sites provide. Have you ever started reading an article and then the whole page moves down and an ad shows up? That&#8217;s called <strong>Layout Shifting<\/strong>. It&#8217;s even worse if you are about to click on a button or similar, and because of a Layout Shift you end up clicking on something you did not want to.<\/p>\n\n\n\n<p>The <a rel=\"noreferrer noopener\" aria-label=\"CLS (opens in a new tab)\" href=\"https:\/\/web.dev\/cls\/\" target=\"_blank\">CLS<\/a> ranks the <strong>visual stability<\/strong>. Quoting Google, &#8220;it measures the sum total of all individual&nbsp;<em>layout shift scores<\/em>&nbsp;for every&nbsp;<em>unexpected layout shift<\/em>&nbsp;that occurs during the entire lifespan of the page&#8221;. The actual number Google provides <a href=\"https:\/\/web.dev\/cls\/#layout-shift-score\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"results from a formula (opens in a new tab)\">results from a formula<\/a> involving a few parameters.<\/p>\n\n\n\n<p>Now, as with the FID, ShortPixel cannot provide a direct solution because <strong>ShortPixel<\/strong> <strong>does not affect the CLS score<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>On one hand, if you use <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/plugins\/shortpixel-image-optimiser\/\" target=\"_blank\"><strong>ShortPixel Image Optimizer<\/strong><\/a> (SPIO) or any of our tools dedicated to physically optimize your image files, remember that they only replace your physical files. They can&#8217;t and <strong>do not affect your frontend<\/strong>.<\/li><li>On the other hand, if you are using  <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/plugins\/shortpixel-adaptive-images\/\" target=\"_blank\">ShortPixel Adaptive Images<\/a><\/strong> (SPAI), when your images are being loaded, blank placeholders are added in their place. These placeholders have the exact size as the actual images, meaning that <strong>SPAI is not affecting the CLS<\/strong> either.<\/li><\/ul>\n\n\n\n<p>In conclusion, <strong>none of our solutions will affect your CLS<\/strong>. In this case, you should consult the issue with your theme or plugin(s) provider.<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5616","post","type-post","status-publish","format-standard","hentry","category-world-of-wordpress"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/5616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/comments?post=5616"}],"version-history":[{"count":6,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/5616\/revisions"}],"predecessor-version":[{"id":6215,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/5616\/revisions\/6215"}],"wp:attachment":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media?parent=5616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/categories?post=5616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/tags?post=5616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}