If you are running websites then you must logged in to your Google search console. At this platform we get a menu called core web vital which measures the your webpage insights including pagespeed and finds shortcomings. Here are the core web vitals terminologies that we will learn in this blog and how to handle this.
Terminology from Google's PageSpeed Insights, which analyzes the content of a webpage and provides suggestions to make that page faster. Here’s a breakdown of what each suggestion means:
1. Properly size images: This means that some images on your website are larger than they need to be. Reducing the image size to the dimensions that are actually used on the page can save loading time and bandwidth.
2. Defer off-screen images: Some images are loading even though they are not immediately visible to the user. Implementing lazy loading can help delay the loading of these images until they are about to enter the viewport.
3. Image elements do not have explicit width and height: This suggests adding explicit width and height attributes to your images. Doing so helps the browser allocate the correct amount of space on the page while the images are still loading, improving the user experience.
4. Minify JavaScript: Minifying JavaScript files means removing unnecessary characters (like whitespace, comments, and line breaks) from the code to reduce file size and speed up loading times.
5. Serve static assets with an efficient cache policy: This means that some static resources (like images, CSS, JavaScript files) could benefit from a better caching policy. By setting appropriate cache headers, you can reduce the need for the browser to download these files again on subsequent visits, thus speeding up page load times.
6. Ensure text remains visible during webfont load: When custom fonts are loading, some text might be invisible or look different than intended. The suggestion is to use CSS properties (like font-display) to control how fonts are displayed.
7. Efficiently encode images: This suggests using better image formats or compression techniques to reduce file size without significantly impacting quality.
8. Avoid document.write(): The use of document.write() is discouraged because it can delay page rendering, especially if used to insert scripts.
9. Reduce unused CSS: There is some CSS code that is not being used on your pages. Removing this unused CSS can reduce file sizes and speed up load times.
10. Avoid enormous network payloads: This indicates that the overall size of the resources downloaded is large. Reducing file sizes, compressing files, or splitting content into smaller chunks can help.
11. Avoid an excessive DOM size: The document object model (DOM) has too many elements. Simplifying the structure of your HTML can improve performance and reduce the complexity of your webpage.
Additional opportunities to improve your website's performance.
Here’s what each suggestion means:
1. Initial server response time was short: This indicates that your server is responding quickly, which is good for performance. The root document took 290 milliseconds to load, which is a positive indication.
2. Avoid large layout shifts: Layout shifts happen when elements on your page move around as it loads, which can be disruptive to users. There were three layout shifts found. To avoid this, make sure elements have size attributes defined and load content in a way that prevents unexpected movement.
3. User Timing marks and measures: These are custom timing events that you can define to measure the performance of your site in a specific way. There are two user timings mentioned, indicating your site may already have some custom performance measures in place.
4. Avoid non-composited animations: One animated element was found that requires layout changes. Non-composited animations (like those that animate layout properties) can cause reflows and repaints, slowing down the page. Using animations that don't require layout changes (like opacity or transform) will improve performance.
5. Avoid chaining critical requests: This suggests that there are nine chains of requests that depend on each other. Reducing or eliminating these dependencies can help improve loading times, as critical resources will be available sooner.
6. JavaScript execution time: This shows that JavaScript execution is taking 0.7 seconds. Optimizing JavaScript to reduce execution time can help speed up your page. This might involve reducing the size of JavaScript files, removing unnecessary scripts, or deferring non-critical scripts.
7. Minimize third-party usage: Third-party code (e.g., scripts from ads, trackers, or social media plugins) can slow down your site. This recommendation suggests reducing third-party usage to improve performance, as some third-party code blocked the main thread for 10 milliseconds.
8. Avoid long main-thread tasks: This recommendation notes that there are two long tasks running on the main thread, which could affect performance. Long tasks block the main thread and prevent the browser from responding to user interactions, slowing down the overall experience. Breaking down long tasks into smaller, asynchronous tasks can improve responsiveness.
By addressing these issues, you can enhance the loading speed and user experience of your website.
To improve your page performance, consider addressing each of these issues by following the recommendations provided by PageSpeed Insights.
Several diagnostics and performance issues for the mobile version of your website. Here’s what each point means:
1. Minimize main-thread work (13.8 s): This suggests that tasks on the main thread (such as JavaScript execution, layout rendering, and more) are taking too long, resulting in a slower page load time and reduced interactivity. Reducing the amount of JavaScript and optimizing how tasks are handled on the main thread can improve performance.
2. Reduce the impact of third-party code: Third-party code, such as ads, social media widgets, or analytics scripts, can block the main thread, affecting performance. In this case, third-party code blocked the main thread for 1,610 milliseconds. To improve performance, consider reducing the amount of third-party code or optimizing how it loads.
3. Reduce JavaScript execution time (3.9 s): The total time taken by JavaScript to execute is 3.9 seconds, which is relatively high. Reducing the amount of JavaScript that runs on page load or deferring non-critical JavaScript can help decrease this time.
4. Eliminate render-blocking resources: This indicates that there are resources (such as CSS or JavaScript) that block the rendering of your page. Render-blocking resources can delay the display of your webpage's content. Removing or deferring these resources can improve load times. In this case, eliminating these could save up to 600 milliseconds.
5. Largest Contentful Paint element (3,010 ms): This metric measures how long it takes for the largest content element (such as an image or text block) to be fully rendered on the screen. The suggested improvement indicates that it took 3,010 milliseconds to load, which might be longer than ideal. Optimizing the loading of this element, such as compressing images or improving server response time, can reduce this time.
6. Reduce unused JavaScript (Potential savings of 444 KiB): This suggests there is a significant amount of JavaScript on your page that is not being used. Removing unused JavaScript can reduce file size and improve loading and execution times, resulting in better performance.
7. Avoid an excessive DOM size: This means that your document object model (DOM) is too large, with 1,049 elements. A large DOM size can slow down performance because it takes more time for the browser to parse, process, and render the page. Simplifying the structure of your HTML can help.
8. Image elements do not have explicit width and height: Just like in the earlier screenshot, adding explicit width and height attributes to images helps allocate the correct space during page load, improving user experience and performance.
9. Minify JavaScript (Potential savings of 3 KiB): This suggests that some JavaScript files could be minified to reduce file size by removing unnecessary characters, such as whitespace and comments. Minifying JavaScript can help speed up load times.
Addressing these issues by optimizing code, reducing unnecessary elements, and ensuring efficient loading practices can significantly enhance your website's performance on mobile devices.
6. Optimising FCP
First Contentful Paint (FCP) measures how long it takes for the first piece of content (like text, images, or graphics) to appear on the screen after a user navigates to a webpage. Optimizing FCP is crucial because it provides the user with visual feedback that the page is loading.
To optimize FCP, consider the following strategies:
1. Reduce Server Response Time
Use a fast web server: Choose a hosting provider and server infrastructure optimized for quick response times.
Enable caching: Use server-side caching for static resources to reduce the time it takes to fetch these resources.
Optimize your database: Reduce the complexity of database queries and ensure the database is optimized for faster data retrieval.
Use a Content Delivery Network (CDN): CDNs store copies of your site’s static assets in multiple geographic locations, reducing the physical distance between your server and your users, which speeds up resource loading.
2. Minimize Render-Blocking Resources
Defer or async JavaScript: By deferring or asynchronously loading JavaScript that is not critical for rendering, you prevent it from blocking the loading of content.
Inline critical CSS: Load only the CSS required to render above-the-fold content inline in the <head> of your HTML document. This reduces the need for the browser to fetch additional CSS files before rendering.
3. Optimize CSS
Reduce CSS file size: Remove unused CSS, and minify CSS files to decrease their size.
Avoid CSS imports: Instead of using @import to include CSS files, use <link> tags in the HTML <head>, as this reduces the blocking nature of CSS imports.
Use media attribute for non-critical CSS: For styles that are only required for specific devices or conditions, use the media attribute to defer loading until needed.
4. Optimize Images and Other Media
Use appropriately sized images: Ensure images are no larger than necessary for their display size and use responsive images (srcset) to serve the correct size for different devices.
Compress images: Use image compression techniques or tools like ImageOptim, TinyPNG, or WebP to reduce file sizes without significant quality loss.
Defer off-screen images: Implement lazy loading for images and iframes that are not immediately visible to users.
5. Minimize Critical Request Depth
Reduce the number of resources loaded on the first load: Each additional file increases the time required for the browser to fetch and render content. By reducing the number of HTTP requests, you can speed up FCP.
Preload critical assets: Use <link rel="preload"> to prioritize the loading of important resources (e.g., fonts or essential JavaScript) so that they are available more quickly.
6. Optimize Font
Use font-display: swap: This CSS property ensures that text is visible using a fallback font while the custom font is loading, reducing the chance of invisible text during load.
Preload important fonts: Preloading essential fonts can help them load faster and reduce delays in rendering text.
7. Optimize and Minify JavaScript
Minimize JavaScript payloads: Remove unnecessary JavaScript or split large files into smaller chunks to reduce the amount of code that blocks the page load.
Avoid heavy JavaScript libraries: Use lightweight alternatives to popular libraries like jQuery or lodash, or include only the parts of the libraries that are needed.
8. Use a Performance Budget
Set limits for assets: Decide on performance thresholds for resources like JavaScript, CSS, and images to ensure that new content does not negatively impact FCP.
9. Optimize HTML and Use HTTP/2
Use HTTP/2: HTTP/2 allows multiple resources to be loaded concurrently over a single connection, which can speed up the loading process.
By implementing these strategies, you can improve the First Contentful Paint (FCP) metric, leading to a faster, more responsive experience for your users.
Post a Comment