Understanding Core Web Vitals
Core Web Vitals are Google's page experience metrics that impact rankings. They measure loading speed, interactivity, and visual stability.
LCP (Largest Contentful Paint)
What: Time for largest content element to load
Good: < 2.5s
Poor: > 4.0s
FID (First Input Delay)
What: Time until page responds to first interaction
Good: < 100ms
Poor: > 300ms
CLS (Cumulative Layout Shift)
What: Visual stability (no sudden layout shifts)
Good: < 0.1
Poor: > 0.25
1. Image Optimization
Images are usually the largest elements on a page. Optimizing them dramatically improves load speed.
Compress Images
- Use WebP format (30% smaller than JPEG)
- Compress with tools like TinyPNG or Squoosh
- Target < 100KB for images
- Use responsive images with srcset
Implement Lazy Loading
Load images only when they enter the viewport:
<img src="image.jpg" loading="lazy" alt="Description">
Saves bandwidth and improves initial page load significantly.
2. Minify CSS, JavaScript & HTML
Remove unnecessary characters from code to reduce file sizes.
Minification Tools
- Build Tools: Webpack, Vite, Parcel (automatic minification)
- Online Tools: CSS Minifier, JavaScript Minifier
- WordPress: WP Rocket, Autoptimize plugins
Remove Unused CSS
Use PurgeCSS or similar tools to remove CSS you're not using. Can reduce CSS file size by 70-90%.
3. Browser Caching
Store static assets in visitor's browser to speed up repeat visits.
Set Cache Headers
Add to your .htaccess file:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
</IfModule>
4. Use a CDN
Content Delivery Networks serve your content from servers closest to your visitors.
Popular CDNs
- Cloudflare (Free tier available)
- Amazon CloudFront
- Fastly
- BunnyCDN
CDN Benefits
- 40-60% faster load times globally
- Reduced server load
- DDoS protection
- Automatic image optimization
5. Mobile Optimization
Mobile-first indexing means Google primarily uses mobile version for ranking.
Mobile Best Practices
- Use responsive design (viewport meta tag)
- Make buttons/links large enough to tap (44x44px minimum)
- Avoid Flash and other unsupported tech
- Test on real devices, not just browser dev tools
- Optimize for slower mobile networks (3G)
Testing Tools
Google PageSpeed Insights
Official Google tool showing Core Web Vitals scores and specific recommendations.
GTmetrix
Detailed waterfall charts showing exactly what's slowing down your site.
WebPageTest
Advanced testing with multiple locations and connection speeds.
Google Search Console
Core Web Vitals report shows real user data from Chrome users.