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:
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.
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.
