{"id":3682,"date":"2021-05-28T14:24:12","date_gmt":"2021-05-28T12:24:12","guid":{"rendered":"https:\/\/green-fields.pl\/ng\/?p=3682"},"modified":"2021-05-28T14:24:12","modified_gmt":"2021-05-28T15:24:12","slug":"core-web-vitals-fundamental-internet-indicators","status":"publish","type":"post","link":"https:\/\/green-fields.pl\/ng\/blog\/core-web-vitals-fundamental-internet-indicators\/","title":{"rendered":"Core Web Vitals - Fundamental Internet Indicators LCP, FID, CLS"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Core Web Vitals is a new Google ranking metric. It was announced in mid-2020 and is likely to have an impact on search results, just as Google's Penguin algorithm did in 2012 by removing spam from the web. Why do I make this reference? Because Core Web Vitals as a ranking factor appreciate high-quality websites: fast, efficient, secure, and stable. It will penalize those that are technically unoptimized, have poor UX, are overloaded with unnecessary code, and hosted on slow and unstable servers. <\/span><\/p>\n<p><em><span style=\"font-weight: 400;\">*To clarify, this mainly applies to large websites or extremely unoptimized pages. A typical site with a score of 60:80 on Page Speed, built on WordPress and indexed with site:100, is unlikely to experience any changes.<\/span><\/em><\/p>\n<p><span style=\"font-weight: 400;\">I believe it is the right moment to consider where your own domain and server are hosted (this was thoroughly explained in the article \"<a href=\"https:\/\/green-fields.pl\/ng\/blog\/how-to-check-where-a-domain-is-registered-and-who-it-belongs-to\/\">How to Check Where a Domain is Registered and Who it Belongs to<\/a>\"). Why? Because a \"slip-up\" with an unpaid invoice is quite common. This can result in website downtime and, consequently, a sharp drop in rankings. As mentioned earlier, stability is one of the most crucial ranking factors for Google's algorithms.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Core Web Vitals - what is it?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Core Web Vitals largely consists of the following indicators:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Loading: Largest Contentful Paint (LCP)\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Interactivity: First Input Delay (FID)\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Visual Stability: Cumulative Layout Shift (CLS)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Returning to the question of what CWV is: These are factors that combine user experience, proper and optimal website creation techniques, and improve browsing comfort by penalizing intrusive ads or \"jumping\" content. The pursuit of Core Web Vitals implementation should not come as a surprise, as the SEO industry has been talking about mobile-friendliness for years, which, in a broader sense, not only means responsiveness but also the use of optimal techniques to minimize loading time and save bandwidth. Why? <\/span><\/p>\n<p><span style=\"font-weight: 400;\">The internet on mobile phones is currently fast, and computing power is not at its lowest, but one crucial aspect must not be forgotten, which is the other side of the coin of CWV implementation - the Crawl Budget \ud83d\ude42 Wondering what the connection is? Let me explain. We need to look at the network from a global perspective (as of January 2, 2021, there were over 1.83 billion websites). This will easily help us understand that a fast and optimized website is a favor to users, but Google, in its own way, seeks to reduce the burden on its servers, which process billions of data during the day. Assuming that 10% of the network optimizes its pages according to the guidelines, the savings for Google would be astronomical. It's worth mentioning that Core Web Vitals indicators are available in Google Search Console.<\/span><\/p>\n<div id=\"attachment_3919\" style=\"width: 855px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/search-page-experience-summary.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-3919\" class=\"size-full wp-image-3919\" src=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/search-page-experience-summary.jpg\" alt=\"Search Page Experience - Summary\" width=\"845\" height=\"805\" srcset=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/search-page-experience-summary.jpg 845w, https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/search-page-experience-summary-300x286.jpg 300w, https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/search-page-experience-summary-768x732.jpg 768w\" sizes=\"auto, (max-width: 845px) 100vw, 845px\" \/><\/a><p id=\"caption-attachment-3919\" class=\"wp-caption-text\">Search Page Experience - Summary<\/p><\/div>\n<h2><span style=\"font-weight: 400;\">Largest Contentful Paint (LCP) - Key 2.5 seconds - Core Web Vitals indicators<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">In practice, LCP measures the time it takes for the largest element of the website to load. This could be an image, video, text, etc. The first 2.5 seconds are crucial; during this time, the website should be ready for the user without elements \"jumping\" around. The reasons for this have been mentioned above, but it's worth noting that these are just the most likely scenarios.<\/span><\/p>\n<div id=\"attachment_3920\" style=\"width: 855px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/largest-contentful-paint.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-3920\" class=\"size-full wp-image-3920\" src=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/largest-contentful-paint.png\" alt=\"Largest Contentful Paint - Core Web Vitals factors\" width=\"845\" height=\"300\" srcset=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/largest-contentful-paint.png 845w, https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/largest-contentful-paint-300x107.png 300w, https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/largest-contentful-paint-768x273.png 768w\" sizes=\"auto, (max-width: 845px) 100vw, 845px\" \/><\/a><p id=\"caption-attachment-3920\" class=\"wp-caption-text\">Largest Contentful Paint - Core Web Vitals factors<\/p><\/div>\n<p><span style=\"font-weight: 400;\">Some people might come up with the idea of buying a better hosting service instead of implementing expensive technical optimizations or commissioning a new website. Will such a solution work? Probably not, but at the time of writing this article, we have not conducted definitive tests yet. With a high degree of certainty, I can say that this approach may result in some improvements, but if the scripts are loaded from external sources with overloaded libraries, a fast server won't make much difference since an external factor comes into play. To put it in everyday terms, \"putting a Maluch (small car) engine in a Porsche won't make the Porsche fast, despite its aerodynamic shape.\" Special attention should be paid to implementing whole libraries just to create a slider or a clickable (zoomable) image, or, in the case of WordPress, installing 20 or more plugins.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Impact of Server\/Hosting on LCP<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">In the section directly related to LCP, I mentioned that a better server won't save a poorly designed website, and I stand by that with full responsibility. However, there are special cases where changing the server can significantly improve the situation. You might think, \"How is that possible?\" This mainly applies to websites that have been technically optimized correctly but still don't yield satisfying results. In such cases, attention should be paid to technical server solutions, and the question to ask is: am I using shared hosting or do I have a dedicated server? The answer is likely shared hosting. This is where the crux of the matter lies. If someone within the same server heavily utilizes their service, sends spam, etc., it will not only heavily burden the server but also provoke Google to impose penalties on the IP address, leading to sharp drops in rankings. The optimal solution is to use dedicated servers, but this comes with high costs - both in terms of purchase and maintenance.<\/span><\/p>\n<div id=\"attachment_3921\" style=\"width: 530px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/chatacteristics-of-a-good-hosting-service.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-3921\" class=\"size-full wp-image-3921\" src=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/chatacteristics-of-a-good-hosting-service.png\" alt=\"Characteristics of a Good Hosting Service\" width=\"520\" height=\"520\" srcset=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/chatacteristics-of-a-good-hosting-service.png 520w, https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/chatacteristics-of-a-good-hosting-service-300x300.png 300w, https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/chatacteristics-of-a-good-hosting-service-150x150.png 150w\" sizes=\"auto, (max-width: 520px) 100vw, 520px\" \/><\/a><p id=\"caption-attachment-3921\" class=\"wp-caption-text\">Characteristics of a Good Hosting Service<\/p><\/div>\n<p><span style=\"font-weight: 400;\">Above all, it is essential to choose a hosting service with responsive customer support, backed by numerous positive reviews, capable of handling technical issues, and, most importantly, capable of mitigating DDoS-type hacker attacks. Hosting providers nowadays frequently perform data backups for their clients and have tools that speed up data loading, such as LiteSpeed or REDIS in WordPress, as well as the HTTP\/2 protocol, which significantly accelerates website performance.<\/span><\/p>\n<div id=\"attachment_3922\" style=\"width: 2058px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/ddos-type-attack.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-3922\" class=\"size-full wp-image-3922\" src=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/ddos-type-attack.png\" alt=\"DDoS-type Attack\" width=\"2048\" height=\"1479\" srcset=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/ddos-type-attack.png 2048w, https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/ddos-type-attack-300x217.png 300w, https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/ddos-type-attack-1024x740.png 1024w, https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/ddos-type-attack-768x555.png 768w, https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/ddos-type-attack-1536x1109.png 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/><\/a><p id=\"caption-attachment-3922\" class=\"wp-caption-text\">DDoS-type Attack<\/p><\/div>\n<h3><span style=\"font-weight: 400;\">How to Optimize LCP:<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Fully optimize graphics, use modern and recommended formats such as WebP.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Optimize server response time.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Optimize and minify CSS styles and JS code.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">First Input Delay (FID) - Action Reaction - Core Web Vitals indicators<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">First Input Delay, or first input delay. In practice, this means the time it takes for a page to respond after a user interaction, such as clicking on a URL. What is measured here is the time from interaction to full page load.<\/span><\/p>\n<div id=\"attachment_3923\" style=\"width: 855px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/first-input-delay.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-3923\" class=\"size-full wp-image-3923\" src=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/first-input-delay.png\" alt=\"First Input Delay - Core Web Vitals factors\" width=\"845\" height=\"300\" srcset=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/first-input-delay.png 845w, https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/first-input-delay-300x107.png 300w, https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/first-input-delay-768x273.png 768w\" sizes=\"auto, (max-width: 845px) 100vw, 845px\" \/><\/a><p id=\"caption-attachment-3923\" class=\"wp-caption-text\">First Input Delay - Core Web Vitals factors<\/p><\/div>\n<h3><span style=\"font-weight: 400;\">How to Measure FID:<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">A good FID score is equal to or less than 100ms.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">A score needing improvement is between 101-300ms.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">A poor score requiring urgent attention is above 300ms.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">According to Google data, poorly optimized and overloaded JavaScript code greatly affects the low FID score. This is mostly relevant to ready-made solutions where a whole library is used to implement a single feature. The browser is blocked while analysing JavaScript code, resulting in delays in responding to user interactions.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">How to Optimize FID:<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Break down code into smaller actions, especially JavaScript code<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Use asynchronous loading<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Set and implement loading priority for content<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Move non-interface-related actions out of the main thread<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Cumulative Layout Shift (CLS) - Visual Stability - Core Web Vitals Indicators<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Cumulative Layout Shift (CLS) measures how much the page layout shifts on the screen due to unexpected events and behaviours. It refers to shifts not caused by user interactions but rather by programming issues.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Identifying what causes layout shift issues can often be done simply by refreshing the page. More detailed analysis can be performed using debugging tools.<\/span><\/p>\n<div id=\"attachment_3924\" style=\"width: 855px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/cumulative-layout-shift.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-3924\" class=\"size-full wp-image-3924\" src=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/cumulative-layout-shift.png\" alt=\"Cumulative Layout Shift - Core Web Vitals factors\" width=\"845\" height=\"300\" srcset=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/cumulative-layout-shift.png 845w, https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/cumulative-layout-shift-300x107.png 300w, https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/cumulative-layout-shift-768x273.png 768w\" sizes=\"auto, (max-width: 845px) 100vw, 845px\" \/><\/a><p id=\"caption-attachment-3924\" class=\"wp-caption-text\">Cumulative Layout Shift - Core Web Vitals factors<\/p><\/div>\n<h3><span style=\"font-weight: 400;\">CLS is rated on a scale:<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A score less than or equal to 0.1 is considered good, while a score above 0.25 is considered poor.<\/span><\/p>\n<div id=\"attachment_3925\" style=\"width: 908px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/cls-view-in-gsc-panel.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-3925\" class=\"size-full wp-image-3925\" src=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/cls-view-in-gsc-panel.png\" alt=\"CLS view in Google Search Console panel\" width=\"898\" height=\"336\" srcset=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/cls-view-in-gsc-panel.png 898w, https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/cls-view-in-gsc-panel-300x112.png 300w, https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/cls-view-in-gsc-panel-768x287.png 768w\" sizes=\"auto, (max-width: 898px) 100vw, 898px\" \/><\/a><p id=\"caption-attachment-3925\" class=\"wp-caption-text\">CLS view in Google Search Console panel<\/p><\/div>\n<h3><span style=\"font-weight: 400;\">Most Common Causes of CLS Issues:\u00a0<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Moving ads that are difficult to disable.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Images without dimensions (width; height), which is a common programming conflict when current Responsive Web Design (RWD) standards use percentage-based grids, and images should fill a &lt;div&gt; element with a specified size in media queries or grids like Bootstrap. In my opinion, this is a step backwards,Google prefers linearly given sizes, because it does not have to analyze the image itself and CSS code - it has everything given 'on a platter',<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">dynamic content, generated with JavaScript code<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">How to Optimize CLS:<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Avoid using inline styles.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">If your website contains ads, move them from the top of the page to the middle or bottom.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Embed elements in iframes within &lt;div&gt; or sections with specified dimensions.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Use images with dimensions specified in the code.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Core Web Vitals Simulator - Lighthouse Scoring Calculator<\/span><\/h2>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/googlechrome.github.io\/lighthouse\/scorecalc\/#FCP=2210&amp;SI=0&amp;LCP=0&amp;TTI=0&amp;TBT=0&amp;CLS=0&amp;FMP=0&amp;FCI=0&amp;device=mobile&amp;version=6\" target=\"_blank\" rel=\"nofollow noopener\">At this address<\/a>, there is a tool called Lighthouse Scoring Calculator that allows the simulation of data related to page speed and Core Web Vitals.<\/span><\/p>\n<div id=\"attachment_3926\" style=\"width: 1067px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/lighthouse-scoring-calculator-1.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-3926\" class=\"size-full wp-image-3926\" src=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/lighthouse-scoring-calculator-1.jpg\" alt=\"Lighthouse Scoring Calculator\" width=\"1057\" height=\"681\" srcset=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/lighthouse-scoring-calculator-1.jpg 1057w, https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/lighthouse-scoring-calculator-1-300x193.jpg 300w, https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/lighthouse-scoring-calculator-1-1024x660.jpg 1024w, https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/lighthouse-scoring-calculator-1-768x495.jpg 768w\" sizes=\"auto, (max-width: 1057px) 100vw, 1057px\" \/><\/a><p id=\"caption-attachment-3926\" class=\"wp-caption-text\">Lighthouse Scoring Calculator<\/p><\/div>\n<h2><span style=\"font-weight: 400;\">PageSpeed Insight<\/span><span style=\"font-weight: 400;\">\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">PageSpeed Insight measures the following data:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">PageSpeed Insight measurement data includes the following metrics:<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">First Contentful Paint (FCP)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Speed Index<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Largest Contentful Paint (LCP)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Time to Interactive (TTI)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Total Blocking Time (TBT)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Cumulative Layout Shift (CLS)<\/span><\/li>\n<\/ul>\n<div id=\"attachment_3927\" style=\"width: 693px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/pagespeed-isnight-measurement-metrics.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-3927\" class=\"size-full wp-image-3927\" src=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/pagespeed-isnight-measurement-metrics.png\" alt=\"PageSpeed Insight - Measurement Metrics\" width=\"683\" height=\"259\" srcset=\"https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/pagespeed-isnight-measurement-metrics.png 683w, https:\/\/green-fields.pl\/ng\/wp-content\/uploads\/sites\/20\/2021\/05\/pagespeed-isnight-measurement-metrics-300x114.png 300w\" sizes=\"auto, (max-width: 683px) 100vw, 683px\" \/><\/a><p id=\"caption-attachment-3927\" class=\"wp-caption-text\">PageSpeed Insight - Measurement Metrics<\/p><\/div>\n<h2><span style=\"font-weight: 400;\">First Contentful Paint (First rendering of content) - FCP<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">FCP measures the time it takes for the browser to display the first piece of DOM content after a user enters a page. It includes:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Server response time (TTFB)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Content loading time and rendering time<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Speed Index:<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Speed Index is used to measure the visual stability of content while the page is loading. Lighthouse records a video of the page loading and calculates progress between frames.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Opportunities to Improve Speed Index:<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Optimizing JavaScript code<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Optimizing graphics and using \"lazy loading\"<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Utilizing caching<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Time to Interactive (TTI):<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">TTI is the time it takes for the page to load to a point where users can interact with its visible elements.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Total Blocking Time (TBT):<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">TBT refers to the total time of blocking caused by loading resources. It has been replaced and replaced with First Input Delay (FID).<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Time to First Byte (TTFB):<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Time to First Byte is measured in microseconds and was intended to indicate the bottleneck in the page loading process. It measures the time from sending a request to the server until receiving the first byte of data. Although it is a popular way to measure page loading speed, it has nuances that can significantly slow down the process and are not necessarily caused by the server but by incorrect application\/website architecture. TTFB is not a suitable way to measure server performance; it is more suitable as a tool to measure page optimization.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Opportunities for TTFB Improvement:<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Optimizing and shortening server response time (TTFB)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Optimizing website architecture<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Implementing a Content Delivery Network (CDN)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Avoiding multiple redirects<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Tools for Measuring Core Web Vitals and Website Speed<\/span><\/h2>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"nofollow noopener\">Google PageSpeed Insights<\/a> - Paste the website URL and click \"ANALYZE\" to get a speed chart and technical issues related to code optimization.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.thinkwithgoogle.com\/intl\/en-gb\/marketing-strategies\/app-and-mobile\/mobile-tools-to-optimize-site-and-app\/\" target=\"_blank\" rel=\"nofollow noopener\">Test My Site with Think with Google<\/a> - Analyses mobile website speed. Paste the link and click \"enter.\" It also allows comparing the loading speed of your site with competitor sites.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/web.dev\/measure\/\" target=\"_blank\" rel=\"nofollow noopener\">web.dev<\/a> - Similar to Page Speed and Lighthouse, this tool checks interaction time, server response, and categories like 'Performance,' 'Accessibility,' 'Best Practices,' and 'SEO.' Web.dev also suggests how to speed up the website.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.webpagetest.org\/\" target=\"_blank\" rel=\"nofollow noopener\">WebPage Test<\/a> - Allows you to choose the location and browser type for conducting tests.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/tools.pingdom.com\/\" target=\"_blank\" rel=\"nofollow noopener\">Pingdom Website Speed Test<\/a> - A user-friendly tool that indicates loading time, blocking, DNS response, and provides location options.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/loadimpact.com\/\" target=\"_blank\" rel=\"nofollow noopener\">Load Impact<\/a> - Allows you to test website speed depending on the number of visiting users.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"nofollow noopener\">GTMetrix<\/a> - A highly functional tool for performing significant analyses, including generating PDF reports.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.dotcom-tools.com\/website-speed-test\" target=\"_blank\" rel=\"nofollow noopener\">DotCom<\/a> - Provides measurements for various locations.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Monitoring combines data from Page Speed and Lighthouse.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/performance.sucuri.net\/\" target=\"_blank\" rel=\"nofollow noopener\">Sucuri Load Time Tester<\/a> - Provides information about connection and first-byte download speed from various locations.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.uptrends.com\/tools\/website-speed-test\" target=\"_blank\" rel=\"nofollow noopener\">Website Speed Test Uptrends<\/a> - Presents general page loading time information.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Page Speed Insights - Typical Messages<\/span><\/h2>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Remove unused CSS code<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Minify CSS<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Defer image loading offscreen<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Display images in new-generation formats<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Avoid using passive event listeners to improve scroll performance<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Resize images<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Avoid multiple redirects<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Eliminate render-blocking resources<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Remove unused JavaScript<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Avoid very large network payloads<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Use efficient image formats<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Minimize main-thread work<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Ensure text remains visible during webfont load<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Preload key requests<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Serve static resources with efficient caching policies<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Reduce JavaScript execution time<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Avoid an excessive DOM size<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Avoid chaining critical requests<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Keep the number of requests and transferred data small<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Minify JavaScript<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Enable text compression<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Preconnect to required origins<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Use video formats for animations<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Avoid using document.write().<\/span><\/li>\n<\/ol>\n<h2><span style=\"font-weight: 400;\">Summary<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Core Web Vitals provide clear signals to website owners on what needs improvement. By using measurement tools like Page Speed or Lighthouse, we get almost \"ready-made\" information. Google, in an implicit way, encourages website optimization by improving their code, optimizing images, and using only necessary scripts on the page. This will likely lead to greater involvement of <a href=\"https:\/\/green-fields.pl\/ng\/offer\/website-positioning\/\">SEO specialists<\/a> in the website creation process. Currently, they are often overlooked, and developers prefer convenient and fast solutions, <a href=\"https:\/\/green-fields.pl\/ng\/blog\/ranking-of-internet-search-engines\/\">not necessarily optimal for search engines<\/a>. As a result, clients receive websites that function but have optimization results like anchors holding the site in SERPs, usually outside the top 10. Of course, there may be underlying reasons; non-optimized websites may need to invest in <a href=\"https:\/\/green-fields.pl\/ng\/offer\/google-ads-campaign\/\">Google Ads campaigns<\/a>, which will likely cost more than the optimized competition (Quality Score factor). As a result, Google will compensate for the additional time spent on indexing. After all, websites created for clients are meant to sell, not just exist on the web. It's worth considering Core Web Vitals from the design stage if we aim for our business to be visible and conversion costs to be minimized.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">[<strong>Update<\/strong>] The data regarding the scoring thresholds for Core Web Vitals indicators has been updated according to Google guidelines from February 17, 2021<\/span><\/p>\n<p><em>Author: \u0141ukasz Pietruszka<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Core Web Vitals is a new Google ranking metric. It was announced in mid-2020 and is likely to have an impact on search results, just as Google's Penguin algorithm did in 2012 by removing spam from the web. Why do I make this reference? Because Core Web Vitals as a ranking factor appreciate high-quality websites: [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":3928,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[14],"tags":[],"class_list":["post-3682","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo"],"acf":[],"_links":{"self":[{"href":"https:\/\/green-fields.pl\/ng\/wp-json\/wp\/v2\/posts\/3682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/green-fields.pl\/ng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/green-fields.pl\/ng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/green-fields.pl\/ng\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/green-fields.pl\/ng\/wp-json\/wp\/v2\/comments?post=3682"}],"version-history":[{"count":13,"href":"https:\/\/green-fields.pl\/ng\/wp-json\/wp\/v2\/posts\/3682\/revisions"}],"predecessor-version":[{"id":4155,"href":"https:\/\/green-fields.pl\/ng\/wp-json\/wp\/v2\/posts\/3682\/revisions\/4155"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/green-fields.pl\/ng\/wp-json\/wp\/v2\/media\/3928"}],"wp:attachment":[{"href":"https:\/\/green-fields.pl\/ng\/wp-json\/wp\/v2\/media?parent=3682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/green-fields.pl\/ng\/wp-json\/wp\/v2\/categories?post=3682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/green-fields.pl\/ng\/wp-json\/wp\/v2\/tags?post=3682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}