Ways to Improve Core Web Vitals of Your Website

            
            "/>
    

            

                                              
            
    
"/>
                                                      

      Shopify eCommerce Solution
       
  

            " onload="this.rel='stylesheet'" />" onload="this.rel='stylesheet'"/>" type="text/css"/>
              
            

Ways to Improve Core Web Vitals of Your Website Table of Content 1.What are the Core Web Vitals? 1.1.Tools 2. First Contentful Paint 2.1How to improve FCP? 3. Largest Contentful Paint (LCP) 3.1.How do images impact LCP? 3.1. How to optimize LCP? 4. Cumulative Layout Shift (CLS) 4.1.How to improve CLS? 4.2.Generic Points 5.Conclusion What are the Core Web Vitals? Core Web Vitals are a set of essential factors specifically observed by Google to check the global user experience of a web page. Core Web Vitals are formed with four measurements related to the page speed and user interaction. These include: First Contentful Paint, Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. To reflect real-time user experience, Core Web Vitals are applied to all web pages. These must be measured by all site owners and will be surfaced in all Google tools. Each Core Web Vital indicates a distinct side of the user experience. Core Web Vitals do not work alone, as there are many other measures. After making a lot of research, Google determined a new set called Web Vitals. It is a combination of existing and a new set of measures. The three Core Web Vitals are highly important, and Google specifically asks website owners to keep an eye out for these scores and improve them where they can. Figure: Core Web Vitals Data When you click on the open report in Mobile or Desktop, you can see the issues which caused a bad URL. And resolving those factors can lead you to the improvement of your URL. There are two types of errors generated in Core Web Vitals CLS issue more than 0.1s (desktop) LCP issue longer than 2.5s (desktop) You can see only 20 URLs in the Core Web Vitals report. After clicking on the “CLS issue more than 0.1s (desktop)”, then you can see which URL affected the CLS issue. We can discuss these issues in FCP, LCP, CLS, and FID section. You can see the issues that caused a bad URL by clicking on the open report in Mobile or Desktop. And resolving those issues can lead to an increase in the quality of your URL. Read More: 23 Advanced SEO Techniques To Dominate SERPs In 2020   Tools There are two tools used for URL improvements Page Speed Insights GT Metrix Page Speed Insights You can write this URL https://developers.google.com/speed/pagespeed/insights/ in your address bar Once you enter your URL in the textbox, click on the Analyze. After click on analyze, your report would get generated and you can simply check your URL if it is poor or good and where it needs an improvement. Here, this URL has turned out to be a good one. However, on the flip side, you can improve your URL considering the steps of the FCP, LCP, FID, and CLS sections. GTmetrix The GTmetrix works as similar as page speed insights but GTmetrix follows different algorithms for Core Web Vitals. You can write this URL https://gtmetrix.com/ in your address bar If you log in to the GTmetrix, you can compare your previous URL performance with recent URL performance. Now, enter that URL in the textbox and click on Analyze. You can see a generated report with various grades such as A, B, C, D, E. Here, this URL is on A-grade, which steps we can follow for the improvement for our URL, you can be following in the FCP, LCP, FID, and CLS section. As we can see this URL is of A grade. Now let’s discuss in detail the four improvement steps of Core Web Vitals i.e., First Contentful Paint (FCP) Largest Contentful Paint (LCP) First Input Delay (FID) Cumulative Layout Shift (CLS) First Contentful Paint (FCP) FCP means First Contentful Paint. FCP measures the browser's time to release the first piece of DOM content after a user navigates to your page. To improve speed and user-experience of the website, you have to work on CSS, JS, and HTML files. In simple terms, that's how long it takes for the browser to display any content to the user. How to improve FCP? Eliminate render-blocking CSS and JavaScript A web page is rendered by the browser after setting up many elements such as HTML, CSS, JavaScript, and HTML imports. The browser will first download all the elements from the web page, analyze them all, and then make the web page. The browser would have received the HTML content when the user requests for a web page, but will always be waiting for any other resources to load before rendering the page. It is called render-blocking resources. When a script or CSS file from an external source cannot be loaded, your page will stay blank and will not continue to load. Therefore, always ensure that decrepit sources are on your own domain and defer loading non-essential sources as much as possible. The scripts in the page header are by default read and executed before the page is constructed. It takes a lot of time and is often of no use at all. You can also delay the execution of these scripts to prevent them from blocking page loading. After that, you can easily pass the attribute 'defer' or 'async' to a script. Note that you only delay scripts that are not necessary to load the page. Reduce TTFB Time to first byte (TTFB) or server response time occurs between the server and the browser. It is the time it takes for the browser to receive the information requested by the server. It is divided into three stages: the request, the processing of the request, and the response. To reduce your TTFB, you can choose a fast hosting provider, using quality CDNs like Cloudflare, and enabling a cache at the website level. Minify CSS / JS If your CSS and JS are unminfied, your webpage performance would get decreased and also create a bad impact on your LCP. Figure: Unminified CSS When your page reloads and your CSS and JS are minified then it efficiently reduces your execution time and improves performance. When you have minified JS and CSS, you would observe reduced execution time with improved performance while page reloading. Figure: Minified CSS Here is the link to minify your Unminified CSS and JS. https://unminify.com/ Largest Contentful Paint (LCP) Largest Contentful Paint is the measure of how long it takes a website to show the user the most comprehensive and interactive on-screen content. This metric, according to Google, only considers content above the fold, or everything that appears without scrolling. There's one more thing to consider, and it has to do with the type of content that's being considered. The metric tracks a variety of content types, including images, videos, and text images; image tags; video thumbnails; background images with CSS; paragraph and heading text Looking for Trusted Custom Website Development Company For Your Business? CONNECT US   How do images impact LCP? Images are typically the largest elements to load on a page, which is why they deserve special attention. This is also why you have just seen some optimization tips for pictures. After all, they demand many browsers, which can sometimes lead to delays. You can use webp images instead of jpeg, jpg, png. If you are using webp so you can improve your LCP. Quick sites are unlikely to provide a poor user experience. LCP is the most important of the many concerns in this regard, according to Core Web Vitals. As a result, continue to monitor and focus on optimizations as needed. How to optimize LCP? It’s possible to optimize the Largest Contentful Paint. Tracking is a key part of the routine, but the improvements are working. Frequent tracking is important to make improvements. Take a look at some significant aspects of LCP Optimize image sizes Always use images with the right sizing. You can set specific dimensions for the image, either for the desktop or mobile version. Overloading, which can result in a high LCP, is avoided by using the recommended size. Use an image CDN A CDN service can make images load faster. ImageEngine is a tool that does all the image matching work, taking into consideration factors like device access, file size, and user location. Avoid JavaScript to load images If you load the images through JavaScript, you can remove this script. That helps to prevent any delay, keeping the LCP within the recommended average. First Input Delay (FID) First Contentful Paint (FCP) and Largest Contentful Paint (LCP) are two measures of how long it takes to visually paint content on a page. While important, paint times do not consider the responsiveness of the load: or the speed with which a page reacts to user interaction. First Input Delay (FID) is a Core Web Vitals setting that captures a user's first impression of a website's interactivity and responsiveness. It is the time between when a user interacts with a page for the first time and when the browser is capable of responding to that interaction. FID is a field measure that cannot be simulated in the lab. Actual user interaction is necessary to measure response time. The FID is recommended by Total Blocking Time (TBT) in the Page Speed Insights. The FID measures different things, if your TBT improves, your FID would also improve. The primary cause of a Poor FID is heavy JavaScript performance. Optimize the way JavaScript analyzes, compiles, and runs on your webpage will directly reduce FID. Heavy JavaScript execution The browser cannot respond to most user entries while it performs JavaScript on the main thread. In other words, the browser cannot respond to user interactions while the primary thread is occupied. This can be improved by: Break up Long Tasks Use a web worker Reduce JS execution time Cumulative Layout Shift (CLS) Cumulative Layout Shift or CLS is Google's Core Web Vitals page speed measure. CLS scores measure the visual stability of a webpage. A layout shift occurs each time a visible item changes position between rendered frames. How to improve CLS? You can fix your CLS by the following: Disable sticky headers that move content from top to bottom. You can always add size attributes to your images and video elements. This approach ensures that the browser can allot the right amount of space in the document when the image is loaded. "/> Never place content over existing content, except in response to user interaction. Generic Points There are some common points to improve your Core Web Vitals Lazy loading image If you do not set your image as lazy loading, it could create a poor impact on your FCP and LCP. The lazy loading image is the best feature to improve your FCP and LCP In the below example, how to use lazy load image on a page Example: Example: "/> Shopify eCommerce Solution Separate CSS/ JS CSS If you have used common CSS for all pages then it creates a bad impact on your FCP and LCP. Therefore, separate CSS from all the pages to improve your FCP and LCP. PurifyCSS is the best tool for Unused CSS. JavaScript If your JS is included in either the header page or footer page, it would create a bad impact on your FCP and LCP because some JS scripts are used for a specific page. Example If you have added bxslider js in the footer page, the execution time would increase, and performance decrease. Therefore, remove it from the footer page and add this JS when you use image sliding. Preload Stylesheet Links To improve the loading speed for a website, you can eliminate element rendering-blocking resource problem just by using rel = “preload” link tag. Thus, your CSS gets minified, and removes errors from Page Speed Insights. Example " onload="this.rel='stylesheet'" />" onload="this.rel='stylesheet'"/>" type="text/css"/> Conclusion In this blog, we have seen how to improve the Core Web Vitals of your website. In addition to the importance of Core Web Vitals, we have also discussed some generic points for improving the website performance.