Core Web Vitals Optimization Guide

How should we start?

 Check Initial speed, (test on google page speed insight, GTMetrix, Search Console)
 Take necessary screenshots / or create a loom video explaining the problems
 Create a speed optimization log (google doc works best)
 Take a complete site backup (using all in one wp migration plugin)
 Start by optimizing the images 
o Enable .webp image upload feature 
o Optimize the large images 
 Optimize size (Photoshop / Paint) *don’t use paint to resize transparent
png image
 Optimize the size using Shortpixel (use loss/lossless as needed)
 Add width/height as suggested by Core Web Vitals
 Don’t let any images be unoptimized.
 Enable lazy loading (below the fold images)
 Enable Cache and Minification (Assets optimization)
 Install wp-rocket 🚀 plugin / followed by Perfmatters (w3tc, wp super cache,
nitro pack, wp fastest cache)
 Configure both plugins properly to avoid any conflicts 
 Now test the speed (check the browser console for any errors/warnings related to
js)
 Make sure all the files are minified/cached
 Exclude jQuery file from minification/ combine / caching
/wp-includes/js/jquery/jquery.min.js
/wp-includes/js/jquery/jquery-migrate.min.js
 Defer Javascript (
 Delay Javascript (https://perfmatters.io/docs/delay-javascript/) 
 If the site uses Cloudflare configure it on wprocket settings 
 Enable Google Analytics 
 Work on Font Optimization (use perfmatters) 
 Font Preload (only if needed/ else it will affect the score negatively)
 Font Display Swap
 Font Loading Locally (Google Fonts)
 Evaluate third party Scripts and delay their loading (use perfmatters)
ref : https://perfmatters.io/docs/delay-javascript/ 
 Plugins Optimization
 Check all the plugins to list unused plugins (take client’s help)
 Get rid of unused plugins
 Database Optimization
 Optimize database using wp optimize plugin (make sure to take a db backup
first)
 Cleanup database (to clean the remaining database tables from the removed
plugin)
 Cleanup autoload data from the database
 Preload (ref : https://perfmatters.io/docs/preload/) 
 Preload key requests (Fonts) (use perfmatters)
 Render-blocking resources (CSS/JS)
  Preconnect (carefully, don’t preconnect unused resources, it will have a negative
impact)
 Check the sites/host/domains carefully
 Don’t preload fonts, after loading them locally
 Server Optimization 
 Enable gzip
 Enable Latest PHP version

Reference Videos:
Optimize third party scripts and fonts
https://www.loom.com/share/a6bdc75cc9774774a83e515ae16cd23b

Avoid unwanted optimization

 Preconnect (Only those that are used by the website)

//** *Enable upload for webp image files.*/

function webp_upload_mimes($existing_mimes) {
    $existing_mimes['webp'] = 'image/webp';
    return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');

//** * Enable preview / thumbnail for webp image files.*/

function webp_is_displayable($result, $path) {
    if ($result === false) {
        $displayable_image_types = array( IMAGETYPE_WEBP );
        $info = @getimagesize( $path );

        if (empty($info)) {
            $result = false;
        } elseif (!in_array($info[2], $displayable_image_types)) {
            $result = false;
        } else {
            $result = true;
        }
    }

    return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);