🔥 🥳 Get your Wordpress Pagespeed optimized today for $99 🔥 🥳 Conditions apply.

How I improved and passed all Core Web Vitals of my WordPress website

Last updated on October 18, 2021 | By

Wpalpha.io is our project from a vast experience improving and building wordpress websites, and other platforms. 

With the upcoming Google Core Web Vitals, we remodeled all our stack of speed optimization and added everything as far we know to improve the Core Web Vitals.

The first step in bringing a near-perfect Pagespeed score and yet functional website(no blackhat stuff) is to focus on the best tools for getting high performance. We choose GeneratePress as the theme, for their focus on performance.

Using GeneratePress and WordPress built-in blocks brings a vast option on layouts, and with block re-usability functionality, it reduces friction to build a fast and reliable website ready to get leads.

Solving LCP

The first error on the Core Web Vitals we got was the LCP not passing. We reduced the image size(compressed), loaded it via CDN, used critical-css and preloaded it. But even, it didn’t pass. We then moved to an animated CSS header with a gradient background color. We believe the tradeoff here between using an image and not getting a pass on Core Web Vitals and our solution is better. 

Some examples for not using a header image and instead an animated css background can be seen on Brazilian startup Quinto Andar homepage:

quintoandar.com.br

You can see more about Quinto Andar performance on one of its software engineer blog posts about their work on their PWA(Progressive Web App): dev.to/Teekay/react-pwa-performance-study-case-111

Another example is from the Pagespeed page, which uses nothing on the background:

developers.google.com/speed/pagespeed/insights/?hl=en-Us

Even Upwork.com now is using a heavily compressed image on their header, and it seems to be focused on their Core Web Vitals, which now passes for mobile and desktop LCP. It didn’t pass before looking at their field data.

Solving CLS

GeneratePress seems to be CLS-ready if you don’t make any major changes to their theme.

We were not passing CLS in blog pages because we use custom hooks and were using the CSS styling on the hook, and the styling where loading later, causing a high CLS. We moved the styling to theme style.css and fixed it.

From our experience, high CLS (>0.1 seconds) on WordPress are caused mainly by Javascript code late re-placing elements, and incorrect styling, using large CSS code on theme settings or WordPress theme CSS editor.

FID

Using data from Cloudflare ‘Web Analytics’ shows that 100% of our FID are in the ‘Good’ category, below 100ms. Assuming those data are as equal as Field data from Chrome User Experience Report, we will also pass FID from all pages.

fid core web vitals

Conclusion

With google core Web Vitals, website owners may need to make choices over the website layout to get the Core Web Vitals search boost and stories appearance. Each client will be presented with the tradeoffs and will make their choice on the matter.

FireShot Capture 257 WebPageTest Test Result Dulles wpalpha.io 05 19 21 18 50 34 www.webpagetest.org
Core Web Vitals results from WebPageTest using a Moto G4 device from USA location