6 min read
Core Web Vitals for Blogs: How to Score 100 on Lighthouse
Core Web Vitals are ranking factors. Learn how to optimize LCP, CLS, and INP to achieve perfect Lighthouse scores on your blog.
R
ruben
Core Web Vitals Explained
Google uses three metrics to assess page experience:
- LCP (Largest Contentful Paint) — How fast the main content loads. Target: under 2.5 seconds.
- INP (Interaction to Next Paint) — How responsive the page is to user input. Target: under 200ms.
- CLS (Cumulative Layout Shift) — How much the layout shifts during loading. Target: under 0.1.
Blog-Specific Optimizations
Images (Biggest LCP Impact)
- Use WebP or AVIF format (30-50% smaller than JPEG)
- Set explicit width/height to prevent CLS
- Lazy load below-fold images
- Preload the hero/featured image
- Use a CDN for image delivery
Fonts
- Use
font-display: swapto prevent invisible text - Preload your primary font file
- Limit to 2 font families maximum
- Self-host fonts instead of using Google Fonts CDN
JavaScript
- Minimize client-side JavaScript (target under 100KB)
- Defer non-critical scripts
- Use static generation (SSG) instead of client-side rendering
- Avoid layout-shifting ad scripts
The Headless Advantage
Headless CMS + static generation is the easiest path to perfect Lighthouse scores. Your blog pages are pre-rendered HTML with minimal JavaScript. Compare this to WordPress, where the average Lighthouse score is 45-65.
RankFlo + Next.js consistently achieves Lighthouse scores of 95-100 across all Core Web Vitals.