Table of Contents
- 1 (August) CrUX/ Chrome UX Report Dashboard-
- 2 Google Search Console Report
- 3 Reasons behind the Core Web Vitals Assessment failure in PSI
- 4 Self-host/ sub-domain vs 3rd parties comparisons
- 5 Importance of RUM solution
- 6 Fixes & Comparisons-
- 7 Charts over the time
- 8 Lesson I learned
- 9 What’s Next
- 10 Alternative
- 11 Adoption
- 12 Plugin Recommendations (Affiliate links):
- 13 Reference
- 14 More information:
- 15 Conclusions
- 16 (September) CrUX/ Chrome UX Report Dashboard-
- 17 Support
I noticed my Core Web Vitals (CWV) issues way back in June. Whatever optimization I have learned in the past few years, I have applied everything & we can see the improvement in the images below.
Want to know How I pass the Core Web Vitals Assessment? Just follow along, and you will learn how I did it and how I made mistakes so you can take precautions and never do it.
(August) CrUX/ Chrome UX Report Dashboard-
The CrUX Dashboard is built with a Data Studio feature called Community Connectors. This connector is a pre-established link between the raw CrUX data on BigQuery and the visualizations of Data Studio. It eliminates the need for users of the dashboard to write any queries or generate any charts. Everything is built for you; all you need is to provide an origin and a custom dashboard will be generated for you.
Here is my CrUX dashboard for my origin, if you want to see your CruX. You can head over to Page Speed Compare.
First Contentful Paint (FCP) –
Larget Contentful Paint (LCP)
Cumulative Layout Shift (CLS)
As you can see I have no issue with Google Search Console – Core Web Vitals and Page experience report but the page speed Insights – field data is telling me something.
Google Search Console Report
Core Web Vitals Report
Page Experience Report
Reasons behind the Core Web Vitals Assessment failure in PSI
FCP
To improve my LCP performance, I inline 2 relatively small JS ( web vitals JS initiator and lite-youtube js) and stylesheets. This way my LCP image loads earlier in the waterfall chart but when I implement this method, in a few days, the FCP performance starts to degrade and gets worse and even the Page Speed Insights (PSI) lab test starts to report there is an unnecessary pre-connect to YouTube CDN from inline JS which add unnecessary milliseconds to my FCP performance.
CLS
- I was experimenting CSS clamp function on my heading tags and for some reason, it was causing Layout shifts. ( I might be wrong here)
- New up-to-date styles on margin, section width, etc were missing in the critical CSS generation process.
LCP
FYI: While I was using the Cloudinary plugin, I use the rel=”preconnect” to preconnect the Cloudinary domains, remove the loading=”lazy” attribute & add the fetchpriority=”high” priority hints to my featured image.
Even though I still suffer and never improve my LCP metrics because of the added connection time made by the Cloudinary. (See more details in comparisons).
I love using Cloudinary as my image & video CDN. As you can see my featured image/ hero image is the largest element painted on the viewport (LCP) according to the CWV report & webpagetest result👇 and my Image CDN is the biggest culprit in slowing down my LCP performance.
Self-host/ sub-domain vs 3rd parties comparisons
According to the webpagetest test run by CSS Wizardry, the time spent resolving a new origin added 509ms to the overall time spent downloading the LCP image and when I tested it on my own it added 524ms.
CSS Wizardry
As per the CSS wizardry webpagetest test, it also added around 509ms Total Connection Time.
With Cloudinary
Delivering images from Cloudinary added 524ms in Total Connection Time accordingly toWebpagetest.
Sub-Domain/ CNAME integration
I am currently using Autoptimize with Shortpixel Adaptive image service integration to deliver avif images when browser supported.
ShortPixel Adaptive AI sub-domain integration with Autoptimize plugin added 0ms just like self-hosted, you can see the webpagetest result in details views.
Self-hosted image
Self-hosted image added 0ms in Total Connection Time, you can see the webpagetest results in the details view.
You can see from the above comparisons, self-hosted images outperform image CDN even though it provides amazing features like-
- Serve Next-Gen images format without creating multiple image formats.
- Compressing images on the fly without optimizing manually. If you test some of my posts, you will see some of my feature images are not optimized before then I was heavily dependent on Cloudinary.
I am not criticizing the service at all. While I was using it, I get all the advantages that CDN provides and now I am doing everything manually like compressing.
Importance of RUM solution
Web Vitals JS
I have been using web-vitals JS libraries for over a year to monitor and collect Core Web Vitals metrics daily. When I set up the libraries, I send the debug identifiers to Google Analytics 4 to BigQuery and then Data Studio to analyze and visualize the data because of this I know exactly which selectors cause the layout shift & which is the largest element painted on the viewport.
This web vitals JS libraries version I am currently using doesn’t support other optional metrics like INP, FCP, and TTFB.
See the images below 👇that is the Core Web Vitals Report I created.
With these insights from the CWV Report and a combination of lab data testing tools. Identifying, analyzing & fixing the issues is easier compared to those who do not set up any RUM solution.
# Ready to start identifying and monitoring your real user experience with the web-vitals JS libraries? Follow the web.dev article on how to set it up – Debug Performance issues with web-vitals js
# If you want an advanced version, you can follow Tony McCreath’s article on Web Site Advantage Core Web Vitals Tracking
Cloudflare’s Browser Insights
If you’re using Cloudflare’s Browser insights, you have already collected lots of data from real users. I set it up for more than a week and have similar results with the web vitals JS setup.
Fixes & Comparisons-
You will not see this field data in CrUX Dashboard because I fixed the issues in late August. You will be able to see it in the next CrUX update i.e. September and all the metrics are improving.
- To improve LCP performance: I deliver my images with the help of Autoptimize Shortpixel Adaptive AI integration & then with the rel=”preload” hints to preload my feature image. So, browsers put the request in higher priority.
Comparisons of Largest Contentful Paint (LCP)
- To fix the CLS issues: I included the up-to-date CSS in the critical CSS process. First, generate the used CSS with the Chrome extension I recommend in my removed unused CSS article, and then in the second step, I regenerate Critical CSS with the online Critical Path CSS Generator and inject the CSS into the head tag of the page.
Comparisons of Cumulative Layout Shift (CLS)
- To improve my FCP performance, I remove most of the redundant CSS like the !important CSS, and duplicate style, removing the unnecessary preconnect call by the Lite-YouTube embedded JS.
//Before
initImagePlaceholder() {
LiteYTEmbed.addPrefetch('preconnect', 'https://i.ytimg.com/');
const posterUrlWebp = `https://i.ytimg.com/vi_webp/${this.videoId}/${this.posterQuality}.webp`;
const posterUrlJpeg = `https://i.ytimg.com/vi/${this.videoId}/${this.posterQuality}.jpg`;
this.domRefImg.fallback.loading = this.posterLoading;
this.domRefImg.webp.srcset = posterUrlWebp;
this.domRefImg.jpeg.srcset = posterUrlJpeg;
this.domRefImg.fallback.src = posterUrlJpeg;
this.domRefImg.fallback.setAttribute('aria-label', `${this.videoPlay}: ${this.videoTitle}`);
this.domRefImg?.fallback?.setAttribute('alt', `${this.videoPlay}: ${this.videoTitle}`);
}
// After
initImagePlaceholder() {
const posterUrlWebp = `https://i.ytimg.com/vi_webp/${this.videoId}/${this.posterQuality}.webp`;
const posterUrlJpeg = `https://i.ytimg.com/vi/${this.videoId}/${this.posterQuality}.jpg`;
this.domRefImg.fallback.loading = this.posterLoading;
this.domRefImg.webp.srcset = posterUrlWebp;
this.domRefImg.jpeg.srcset = posterUrlJpeg;
this.domRefImg.fallback.src = posterUrlJpeg;
this.domRefImg.fallback.setAttribute('aria-label', `${this.videoPlay}: ${this.videoTitle}`);
this.domRefImg?.fallback?.setAttribute('alt', `${this.videoPlay}: ${this.videoTitle}`);
}
Comparison of First Contentful Paint (FCP)
Charts over the time
Daily Data collected from Page Speed Insights Field data report
First Contentful Paint (FCP)
Largest Contentful Paint (LCP)
Cumulative Layout Shift (CLS)
Lesson I learned
- When fixing Core Web Vitals issues, people miss the Server Response time or Time for First Byte (TTFB) metrics because it is optional but if you see it properly TTFB plays a huge role, if it fluctuates a bit it can affect your Largest Contentful Paint (LCP), and First Contentful Paint (FCP) metrics even when you fully optimize your website.
- Serving and delivering LCP image/ critical images on different origins or 3rd parties domains is a bad idea because this adds unnecessary time spent downloading the LCP image/ critical images. This also applies to other static resources too so better reduces unnecessary network calls. You can see the results in comparison.
- If you’re changing/updating the style just make sure you regenerate Critical CSS on that specific page or if you’re updating on a single post template, consider regenerating Critical CSS for all the pages. This makes sure the Critical CSS is included in the process. If you’re using CDN to deliver your assets, consider preconnect to those origins. This can helps FCP’s performance
- Unnecessary, do not inline your CSS and JS to avoid the warnings and for the page speed score (watch the HTTP 203 YouTube video below). I saw lots of tutorials recommending this terrible approach. It is valid even if I did so with a relatively small JS and I saw a huge impact on my INP performance. You will not be able to see the effects on any lab data testing tools but it can affect your real user’s performance like rendering performance, INP, FCP, etc.
- Always try to reduce early 3rd parties domain calls.
What’s Next
For my images, I haven’t decided whether to deliver them from Cloudinary. I will test the plugin properly in the localhost environment or staging site and then reconfigure the plugin.
A mistake I made was when I uninstalled the plugin I didn’t realize Cloudinary has the option to deliver images from an origin server. I should have tested the feature. If it doesn’t work next time, I will try alternative services and plugins.
UPDATE
I reconfigured and tested the Cloudinary plugin yesterday i.e 5th of October on my staging site and it didn’t work.
To serve the image from a sub-domain or CNAME, I have to purchase their Advanced Plan which I can’t afford.
Right now, I am using Shortpixel Adaptive AI (delivered image with Autoptimize plugins) with 4.99USD/month
Alternative
If my website’s single post template has lots of components like motion effects (sticky header, parallax effects), sticky sidebar, sliders, gallery, etc then there is no point in using the alternative solution. As you can see from my article, my design is just basic and there is no point in adding all the features that will slow down my site performance.
My friend Massimo Villa raised a question when I requested him to review my article.
“Since you use Elementor on your site, why do you use Lite-YouTube instead of the native facade (“overlay”) feature replacing YouTube player with local image placeholder?“
Lite-YouTube JS VS Elementor Video
My website is built with Elementor (Affiliate) and it has its own Video Widget that supports YouTube, Vimeo, Dailymotion & Self-Hosted Video, and other amazing features like Lazy-loading, facade (“image overlay”) as Massimo Villa suggested.
Here is why I choose Lite-YouTube over the Elementor video widget-
- Performance – Lite-youtube JS is only 3.3KB whereas Elementor video can go over 70 to 80KB in page size because of dependencies.
- Lite-Youtube is just a vanilla web component where Elementor video is dependent on jQuery, frontend, frontend.modules, and whole lots of JS.
Image CDN
Here are some of the 3rd parties services that offer CNAME/ sub-domains like
- FlyingProxy (It is integrated with Cloudflare Enterprise)
- Webp express plugin preloading <picture> tag is trickier than <img> tag.
- Cloudflare Pro
- Shortpixel Adaptive AI
- Bunny Optimizer
- Imgix
Adoption
Currently, I am using the Autoptimize plugin with Shortpixel Adaptive AI integration to deliver images and serve in an avif image format when browsers support it.
To preload the featured image, I use the Autoptimize metabox which you can enable in Misc Options – Enable configuration per post/ page.
Plugin Recommendations (Affiliate links):
All the plugins I recommend below have the feature for generating critical CSS, removing unused CSS, the ability to compress images, and serving in Next-Gen image format automatically such as-
- FlyingPress
- Wp Rocket
- SwiftPerformance
- Perfmatters
- Autoptimize + RapidLoad + Critical CSS API + Shortpixel Adaptive AI (This is great if you already have caching enabled on your server and you don’t want any conflict)
Reference
- Optimizing Largest Contentful Paint- CSSWizardry
- Web-Vitals JS libraries – Github
- Measure and debug performance with Google Analytics 4 and BigQuery- web.dev.
- 3rd parties RUM solution -Philip Walton
- Web Almanac – Performance chapter
More information:
Conclusions
It took me a few days to see the results in Pagespeed Insights – Field Data report after I fixed the issues because I had to aggregate data for all user experiences on my origin, not for the URL of the page.
If you still don’t have Field Data because you don’t get enough visits. I still recommend setting up the Core Web Vitals Report or any RUM solution I recommend in the tutorials I linked because RUM solutions will give you more insights into how your real users are experiencing when they visit your website than what you get from any lab data tools.
Suppose you are doing it for a client’s website or your website. I highly recommend setting up any RUM solution because it is easy to debug and identify the root causes. And you don’t have to give excuses later to your clients when they complain about your credibility.
Now tell me, how long will it take for you to fix the Core Web Vitals Assessment?
Let me know the answer in the comment below.
(September) CrUX/ Chrome UX Report Dashboard-
First Contentful Paint Metrics
Largest Contentful Paint Metrics
Cumulative Layout Shift Metrics
