Update from 02/07/2021: The FID in practice
In the latest update of the CWV Industry Index, we looked at companies from the automotive industry and ministries in terms of First Input Delay (FID) over the period KW 13 to KW 26. FID measures the time between user interaction and when the browser responds to that interaction. Find out the results below.
Slow load times are bad for the user experience
Slow load times are suboptimal for the user experience, and that isn't good for business. Suppose the user is annoyed by the fact that it takes what feels like an eternity for the first name to appear in the form after typing finally, or if nothing happens when scrolling, they will leave the page with a lasting, negative impression. To measure the time between user interaction and when the browser responds to that interaction, Google established First Input Delay (FID) as part of Core Web Vitals.
Digression: What is Total Blocking Time (TBT)?
TBT measures the total time between First Contentful Paint (FCP) and Time to Interactive (TTI).
Not a Core Web Vital, but a new metric in Lighthouse Report v6.
It can be used to evaluate FID, as long First Input Delays typically occur during TBT (page content is partially rendered but is not yet reliably interactive)
Common causes of bad FID in practice
Legacy problems: scripts are loaded but not used anywhere
Scripts (especially tracking, e.g. Tag Manager) are loaded multiple times
Tag Manager is loaded "first" according to "Google recommendation"
How do I identify the FID on my page?
Identifying First Input Delays (FIDs) is often a challenge in practice because
not all users will interact with the site on every visit
not all interactions are relevant to the FID
First Inputs of some users occur at "bad times" (when the Main Thread is busy for a more extended period)
First inputs of other users occur at "good times" (when the main thread is completely inactive)
This means that some users have no FID values, some have low FID values, and others probably have high FID values. To optimize FIDs on the page, there are several ways.
➡ Biggest Lever: Identify Long Tasks (Long Tasks ≥ 50 ms).
Quick Tips: How do I optimize the FID?
✓ Reduce the impact of third-party code
✓ Keep the number of requests and transfers low
✓ Minimize main thread work
Core Web Vitals become the new ranking factor
diva-e makes your website fit for the Core Web Vitals
With the Core Web Vitals, Google is focusing even more on quality assurance of the user experience as of June 2021 (formerly May 2021). The Core Web Vitals (CWVs) explicitly deal with user experience and are more significant than an improvement in page speed. diva-e helps you quickly identify how to find the CWVs on your website and optimize them as efficiently as possible.
Google's Core Web Vitals are user-centric metrics for measuring the technical performance of a website. Google is now taking a closer look at the user experience of a website and analyzing the loading process of a page, its interactivity and visual stability. diva-e recommends that you don't immediately fall into actionism because of the new features, but instead carefully examine which adjustment screws you can turn first and most efficiently. Furthermore, diva-e integrates CWV into a holistic search engine and content optimization.
Cumulative Layout Shift
CLS quantifies how much the content of a page shifts visually during the loading phase. This is because the user experience suffers when page elements are arranged differently. One option is to insert size attributes for images and video elements. It's also essential to never place content on top of existing content - except in response to user interaction.
Largest Contenful Paint
This is when the primary/most important content is loaded and becomes visible to the user during page loading. diva-e helps you identify and optimize the most prominent element. Instant loading with PRPL patterns, removing unused code or optimizing images and web fonts, for example, can help.
First Input Delay
The diva-e Core Web Vitals industry index: UX expertise meets SEO know-how
There are already little tricks you can use to make your website fit for the Google update. diva-e measures your Core Web Vitals with Speed Tools and recommends how to use the optimization potential of your website smartly. In the diva-e Core Web Vitals industry index, we have summarized and analyzed the performance of 13 industries concerning the Core Web Vitals Cumulative Layout Shift (CLS), Largest Contentful Paint (LCP) as well as First Input Delay (FID) from week13 2021. After the first cycle of 28 days, we can now present the first industry average results. We will update these regularly.
Four steps to the diva-e industry index
Step 1: Industry selection
In the first step, 13 standard, high-frequency industries - B2C and B2B - were used for the index comparison. Within these industries, we selected a range of three to nine competitors based on various criteria such as annual turnover, number of members, users and customers, population, etc.:
Health forums and magazines
Step 2: Tool selection
The second step was to consider how best to collect the generated data on the Core Web Vitals. To automate data generation, the SEO experts decided in favor of the API connection of Google Tools to the data-driven SEO software OneProSEO after comparing various tools such as Screaming Frog, Page Speed Insights and Lighthouse.
Step 3: Data collection
After selecting the industry and tools, the SEO experts were faced with the tools only provide lab data, which is not very meaningful for the project. The challenge here was, therefore, to obtain appropriate field data. Since at least 60 interactions of a user are necessary for measurable field data, the numbers from the start, category and detail page were reduced to the values of the start page. After making the appropriate API adjustments, the team started measuring the field data every week in week 13.
Step 4: Preparation
In the fourth and final step, the data collected over at least 28 days were processed and converted into a graphical representation. This provides the experts with average values for competitors within an industry and average values for the industry in comparison. These are displayed here and updated regularly.
Utilize optimization potential smartly: With the diva-e SEO experts
diva-e's SEO experts match client expectations with the most effective optimization options. Even if the three Core Web Vitals perform ideally, it does not mean at the same time that your website will also immediately conquer the ranking. The website must still meet basic technical SEO requirements and provide quality content.
diva-e continues to keep an eye on your search engine optimization and focuses on the Core Web Vitals in parallel. After all, the digital experts can additionally push the user-friendliness of your site and collect positive user signals together with you.
Are you fit for the Google update?
Whether SEO, PPC or content - all news & must reads are available in our SEARCH newsletter - only available in German
Update from 27/04/2021
Comparison portals perform best with e-commerce stores and banks, while city portals and websites in the automotive sector lag behind.
In comparing sectors over a period of 28 days, comparison portals also perform best here, with the pharmaceutical industry and travel portals trailing behind. Nevertheless, all thirteen sectors are in the good to medium range.
Only the sectors mail providers, ministries, news and travel portals are in the middle range, and all other sectors perform well.
Update from 21/05/2021
In the CWV Industry Index update from week 20, we picked out the banking and insurance sectors and looked at the values from week 13 to week 20. The result: one company from each industry performed significantly worse than the competition. Find out why this is the case and how you can fix or avoid these mistakes here. Or alternatively:
Common causes of a bad CLS
The following errors can cause a layout shift:
Images without dimensions
Embedding iframes or ads without dimensions
Dynamically injected content
Web fonts that cause FOIT / FOUT
Possible measures for improvement
✓ Always include size attributes for images and video elements.
✓ "Reserve" required space (e.g., CSS aspect ratio boxes) so that the browser can allocate the correct slot in the document when it loads
✓Never insert content on top of existing content, except in response to user interaction.
CLS Tip of the Week: Reserve fixed sizes for elements
The header image is often responsible for a high CLS value when it is loaded later. This ensures that all other elements are pushed down in the initial viewport of the page.
So the div that encloses the header element should be given fixed size. Or rather: all aspects that hold these "embedded elements" can be given the width and height specification via CSS so that the required space can be "reserved" by the browser and there is no twitching - layout shift - of the page.
Update from 11/06/2021
In the latest update of the CWV Industry Index, we picked out the mail providers and travel portals industries and looked at the Largest Contentful Paint (LCP) values over the period KW 13 to KW 23. LCP describes the point at which the most critical content is loaded and visible during the page load. Here, the faster the content is loaded, the better. The result from the industry comparison: one company from each industry performs significantly worse than the competition. You can find out why this is the case and how to correct or avoid these errors here.
Common causes of poor LCP in practice.
The following errors can cause long content loading times:
Correct dimension is missing (maximum extent displayed).
Image files are not compressed
No use of preload
Possible measures for improvement
✓ Use instant loading with PRPL pattern:
Push (or preload) the most important resources
Rendering of the initial route as early as possible
Pre-caching of remaining assets
Lazy load of other, non-critical assets and routes.
✓ Optimize CSS (remove unused code)
✓ Optimize images (Smart Crop)
✓ Optimize web fonts