How to Improve WordPress Core Web Vitals

Here is my sharing for WordPress Penang meet up & WordPress Hong Kong meet up. Whatever I’m sharing is very simple laymen term for new user to understand. For advanced user, may watch this video.

How to Speed Up WordPress Performance for Page Speed Insights

My idea is simple. Less is MORE.

Speed Optimization
is Not Difficult

You just need to focus 1 thing.

Keep page SMALL size.
Keep everything minimal.

How to optimize for First Contentful Paint (FCP) / First input Delay (FID)

1. Time To First Byte (TTFB) – use FAST web hosting
2. Setup Cache – Swift Performance Pro / FlyingPress / Cache Enabler
3. Inline the background image – CSS / Kadence Blocks
4. Remove non-critical CSS/JS – perfmatters / Asset Cleanup
5. Minify & Optimise CSS – Swift Performance Pro / FlyingPress /Autoptimize
6. Generate Critical and Used CSS – Swift Performance Pro / FlyingPress / Autoptimize (with 3rd party service)
7. Preload CSS – Blocksy / Kadence theme
8. Defer JavaScript – Swift Performance Pro / FlyingPress / Async JavaScript
9. Defer Inline JavaScript – Swift Performance Pro / FlyingPress / Autoptimize
10. Delay 3rd party JavaScript – Swift Performance Pro / FlyingPress
11. Self-host Google Font – Swift Performance Pro / FlyingPress or use System Font Stack
12. Preload / prefetch DNS Queries – perfmatters / Swift Performance Pro
13. Use CDN – Bunny

How to optimize for Largest Content Paint (LCP)

1. Reduce element
2. Don’t use slider
3. Don’t use video background
4. Image with correct dimensions
5. Optimize the images – EWWW / ShortPixel
6. Use WebP format – EWWW / ShortPixel / WebP Express
7. Use lightweight graphic – SVG
8. Inline & lazy load the background image – CSS / Kadence Blocks
9. Fast Hosting like Rocket.net

How to optimize for Cumulative Layout Shift (CLS)

1. Image with correct dimensions
2. Ads, embeds and iframe with dimensions
3. Self-host Google Font – Swift Performance Pro / FlyingPress or use System Font Stack
4. Preload Fonts – Swift Performance Pro / FlyingPress / perfmatters
5. Image add width & height attributes Swift Performance Pro / FlyingPress

If you find it hard to understand, here are something you need to do on your WordPress website to to fix Core Web Vitals poor URL.

Every site is different
You need to keep optimise to get Good Score

Optimize for Core Web Vitals – From Google

If you are advance user, you may watch this video from Google

Photo by toine G on Unsplash