Since there are countless information regarding the new Google Page Experience update, it seems that almost all insights are rather confusing for the average WordPress website owner regarding how to optimize for Google Core Web Vitals. Here’s my attempt to simplify it.
What is Core Web Vitals
As you can see in the above image, core web vitals are part of page experience signals which is also built upon other Google ranking signals. Hence the importance of optimizing your WordPress site. Requirements for having Good Page Experience improving crucial web elements that are now vital to have are:
- Largest Contentful Paint (LCP) is to do with performance and web page loading
- Cumulative Layout Shift (CLS) measures visual stability
- First Input Delay (FID) is all about interactivity
How to Fix Largest Contentful Paint Longer Than 4 seconds
The way you would remedy a web site loading slow is by giving it an overall tune-up. Since there are many different website setups, I’m only going to share tips and insights for you to consider. Simply attend to the ones you can do as others will require experienced professionals like RankYa (because even 99% of SEO’s or Web Developers may not be able to accomplish all that can be done for website optimization for Google).
- Optimize images (see video tutorial for optimizing images for Page Experience by RankYa)
- minify CSS JS files
- Identify and load critical assets (also critical path CSS) first (or asynchronous load these resources) (for non-critical CSS place in before end of HTML body tag)
- Improve server response time (TTFB) Upgrade web server
- Consider using Content Delivery Network (if target audience is located globally) (if not choose server as close to your local business location as possible)
- Serve static assets with an efficient cache policy (understand the security implication of caching when using Cache or Performance plugins)
- Re-evaluate using WordPress Plugins because some may actually slow your server instead of speeding it up
- Delete unused Theme Folders
- Stop using Child Themes (as you are loading additional resources (for example: parent CSS file as well as child-theme CSS file))
- Consider using cross origin resource sharing (CORS)
- Optimize .htaccess file
- Optimize phpMyAdmin Database tables (some plugins you’ve deleted do NOT delete their database tables, thus, manually identify and delete them)
- Remove PHP comments from wp-config.php file
- Edit wp-config.php file to reduce revision saves (see code below)
define('WP_POST_REVISIONS', 7); // will only save 7 times (change number according to your setup)
Speculative Optimization Techniques (as in preload, prefetch, preconnect, prerender) Example
Understand what these do and their security implications before using them
<link rel="prerender" href="://www.example.com">
<link rel="dns-prefetch" href="://ajax.googleapis.com" />
<link rel="preconnect" href="://fonts.googleapis.com" crossorigin />
<link rel="preload" as="script" href="nameofscript.js">
<link rel="preload" as="style" href="nameofstyle.css">
<link rel="preload" as="font" type="font/woff2" href="font.woff2" crossorigin>
How to Fix First Input Delay Longer Than 100 Milliseconds
- Only send the code that your users need (that means identify and remove or split the code)
- Minify and compress your code
- Remove unused code
- Reduce network trips by caching your code with the PRPL pattern
What is PRPL Pattern?
- Push (or preload) the most important resources (for example, preload as="style" CSS, and as="font" external web fonts, as="script" for scripts)
- Pre-cache remaining assets
- Lazy load other routes and non-critical assets (simply make sure your HTML img tag has loading:lazy attribute (do NOT use plugins for this)
How to Fix a Cumulative Layout Shift More Than 0.1 Second on WordPress
This will depend on the content and the Theme you are using. First see what cumulative layout shift is, then, use width and height attributes on those elements. Then, consider using placeholder with proper CSS values (for example: min-width:610px and height:100px and make the background-color: sameColorAsWhatEverBackgroundColorOfCLSElement, also, check element before/after the shifting element, double check any CSS background images (as the load time may differ (perhaps consider using gradient colors instead of background url image), check CSS transitions. For web fonts: only use minimum external webfonts, if you can, preconnect link with crossorigin, you can even try font-display:optional property instead of font-display: swap).
WordPress Comment Form is also causing Cumulative Layout Shift issues with Google Core Web Vitals. If this is the case on your WordPRess site, comment back using the form below (or email) for a fix.
Above insights are the only way to optimize for Google’s core web vitals part of page experience update. But remember, page experience algorithm is built upon other ranking signals, that means, check out search engine optimization tutorials by RankYa to stay ahead in google rankings.
Once you attend to these optimization techniques and fixes, you’ll see automatically improved Google rankings for your WordPress site.