What is Page Speed
Page Speed is a general term for the time it takes a web page and its individual components to load. It includes several metrics: Time to First Byte (TTFB), First Contentful Paint (FCP), Largest Contentful Paint (LCP), and others.
Google added page load speed to its ranking algorithm in 2010 for desktop and in 2018 for mobile devices (the Speed Update). In 2021, Core Web Vitals—a more specific set of speed metrics—became official ranking factors.
Why Page Speed matters
SEO rankings: Slow sites rank lower, all else being equal.
Conversions: According to Google, every 0.1 seconds of delay reduces conversions by 1%. Amazon: a 100 ms delay = -1% in sales.
User behavior metrics: 53% of mobile users leave a site if it takes more than 3 seconds to load.
Indexing: Faster sites get a larger crawl budget, allowing search engines to index more pages.
Key speed metrics
| Metric | Good | Description |
|---|---|---|
| TTFB | up to 800 ms | Time to the first byte from the server |
| FCP | up to 1.8 s | First content element |
| LCP | up to 2.5 s | Largest visible element |
| TBT | up to 200 ms | Main thread blocking time |
| CLS | up to 0.1 | Visual stability |
How to improve page speed
Image optimization
Images are the main cause of slow loading:
<!-- Ленивая загрузка -->
<img src="photo.jpg" loading="lazy" alt="Описание" width="800" height="600" />
<!-- Современные форматы -->
<picture>
<source srcset="photo.webp" type="image/webp" />
<img src="photo.jpg" alt="Описание" />
</picture>- Use WebP or AVIF (20-50% smaller than JPEG)
- Specify width and height to prevent CLS
- Use lazy loading for images below the fold
Caching
# Nginx — кеш статики на год
location ~* \.(js|css|png|jpg|ico|woff2)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}Resource minification
# Минификация CSS и JS уменьшает размер на 15-30%
npm run build # Next.js минифицирует автоматическиCDN (Content Delivery Network)
A CDN serves static resources from servers close to the user. Cloudflare, Fastly, and StackPath reduce loading time by 30-70% for geographically distributed users.
Data compression
# Gzip
gzip on;
gzip_types text/css application/javascript application/json;
# Brotli (лучше Gzip)
brotli on;
brotli_types text/css application/javascript;Critical CSS
<!-- Встраиваем критический CSS в head -->
<style>
/* Только то что нужно для первого экрана */
body { font-family: sans-serif; margin: 0; }
header { background: #333; color: white; }
</style>
<!-- Остальной CSS загружаем асинхронно -->
<link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />Check speed with reChecker
Use the Full Site Check for a comprehensive performance analysis. The tool will show:
- Core Web Vitals (LCP, INP, CLS)
- Server response time (TTFB)
- Page size and number of requests
- Optimization recommendations
FAQ
Are PageSpeed Insights and real-world data the same thing? No. PageSpeed Insights shows two sets of data: lab data (Lighthouse, controlled conditions) and field data (CrUX, real users over 28 days). Field data matters for SEO.
What is the minimum PageSpeed score for good SEO? Google does not disclose threshold values. As a guideline: 75+ for mobile and 85+ for desktop. However, the specific CWV metrics (LCP, INP, CLS) matter more than the overall score.
How long does it take to improve speed? Basic optimizations (compression, caching, image formats) take effect as soon as they are deployed. Search engines will take the improvements into account after 28 days (the CrUX data update cycle).