Why Page Speed Is a Ranking Factor

Google has used page experience signals, including Core Web Vitals, as ranking factors since 2021. But speed is not just about rankings. It affects every aspect of how users interact with your site.

Bounce rate: Google research shows that 53% of mobile users abandon a page that takes more than 3 seconds to load.
Conversions: Even a 100-millisecond delay in load time can reduce conversion rates by measurable amounts.
Crawl efficiency: Slow servers waste crawl budget, meaning Google indexes fewer of your pages in a given time window.

Understanding Core Web Vitals

Core Web Vitals (CWV) are the specific metrics Google uses to evaluate page experience:

Metric	What It Measures	Good	Poor
LCP (Largest Contentful Paint)	Time to render the largest visible element	Under 2.5s	Over 4s
INP (Interaction to Next Paint)	Responsiveness to user interactions	Under 200ms	Over 500ms
CLS (Cumulative Layout Shift)	Visual stability during loading	Under 0.1	Over 0.25

You can measure these with PageSpeed Insights, Chrome DevTools, or the Chrome UX Report.

Image Optimization

Images typically account for over 50% of a page's total weight. Optimizing images is usually the single highest-impact change you can make.

Use Modern Formats

WebP and AVIF deliver 30-50% smaller files compared to JPEG and PNG at equivalent visual quality.

<picture>
  <source srcset="/images/hero.avif" type="image/avif" />
  <source srcset="/images/hero.webp" type="image/webp" />
  <img src="/images/hero.jpg" alt="Hero image" width="1200" height="630" />
</picture>

Serve the Right Size

Do not send a 2000px-wide image to a container that is only 400px wide. Use the srcset attribute to let the browser choose the appropriate size.

<img
  src="/images/article.jpg"
  srcset="/images/article-400.jpg 400w,
          /images/article-800.jpg 800w,
          /images/article-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
  alt="Article thumbnail"
  width="1200"
  height="630"
/>

Lazy Load Below-the-Fold Images

Images that are not visible in the initial viewport should be loaded only when the user scrolls near them.

<!-- Above the fold: load eagerly -->
<img src="/images/hero.jpg" alt="Main visual" fetchpriority="high" />

<!-- Below the fold: lazy load -->
<img src="/images/content.jpg" alt="Content image" loading="lazy" />

JavaScript and CSS Optimization

Reduce Unused JavaScript

Unused JavaScript is one of the biggest performance killers. Use the Coverage tab in Chrome DevTools to see how much of your JS is actually executed.

Key strategies include:

Tree shaking: Modern bundlers (webpack, Rollup, esbuild) automatically remove unused exports.
Code splitting: Load only the JavaScript needed for the current page. In Next.js, this happens automatically with dynamic imports.
Audit third-party scripts: Analytics, ads, chat widgets, and social embeds add up fast. Remove anything that is not providing clear value.

Optimize CSS Delivery

CSS is a render-blocking resource by default. The browser will not paint anything until all CSS is downloaded and parsed.

<!-- Inline critical CSS for above-the-fold content -->
<style>
  body { margin: 0; font-family: sans-serif; }
  .hero { min-height: 100vh; }
</style>

<!-- Load the rest asynchronously -->
<link rel="preload" href="/styles/main.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'" />

Defer Non-Critical Scripts

Use defer or async to prevent scripts from blocking HTML parsing.

<!-- defer: executes after HTML parsing, in order -->
<script src="/js/analytics.js" defer></script>

<!-- async: executes as soon as downloaded, order not guaranteed -->
<script src="/js/widget.js" async></script>

Server-Side Optimization

Use a CDN

A Content Delivery Network serves your content from edge servers geographically close to the user. This can reduce latency by 50-200ms or more, depending on the user's location relative to your origin server.

Popular CDN options include Cloudflare, Fastly, AWS CloudFront, and Vercel Edge Network.

Configure Browser Caching

Set long cache durations for static assets and use content-hashed filenames to bust the cache when files change.

# Nginx example
location ~* \.(jpg|jpeg|png|webp|avif|css|js|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

With hashed filenames (e.g., main.a1b2c3.js), browsers automatically fetch the new version when the hash changes.

Enable HTTP/2

HTTP/2 allows multiple requests over a single connection, eliminating the head-of-line blocking problem in HTTP/1.1. Most modern servers and CDNs support it out of the box.

server {
    listen 443 ssl http2;
    # ...
}

Enable Compression

Brotli and Gzip compression reduce the transfer size of text-based assets (HTML, CSS, JS) by 60-80%. Brotli offers better compression ratios than Gzip and is supported by all major browsers.

Understanding the Critical Rendering Path

The critical rendering path is the sequence of steps the browser takes to convert HTML, CSS, and JavaScript into pixels on the screen:

Download and parse HTML
Download and parse CSS (render-blocking)
Build the render tree
Calculate layout
Paint pixels

The key insight is that CSS blocks rendering. By inlining the CSS needed for the initial viewport and deferring the rest, you can dramatically reduce the time to first paint.

Preload Key Resources

Use <link rel="preload"> to tell the browser to download critical resources early.

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/images/hero.webp" as="image" />

Measurement Tools

You cannot improve what you do not measure. Use these tools regularly:

PageSpeed Insights: Lab and field data for Core Web Vitals
Chrome DevTools: Network, Performance, and Lighthouse panels
WebPageTest: Detailed waterfall analysis with multi-location testing
IndexReady: IndexReady checks your PageSpeed score and Core Web Vitals as part of a comprehensive SEO and GEO audit

FAQ

What PageSpeed score should I aim for?

Target 90 or above on mobile. However, remember that the score is a lab measurement. Real-world performance (field data from the Chrome UX Report) is what Google actually uses for ranking. A site can score 95 in the lab but still have poor field data if real users on slow networks experience delays.

Is converting images to WebP enough to fix speed issues?

WebP conversion helps, but it is only one piece of the puzzle. You also need proper sizing, lazy loading, responsive images, and a CDN. A single 5MB hero image converted to WebP might still be 2MB if you do not resize it.

What is the fastest way to improve speed on a WordPress site?

Start with these three steps: remove unused plugins, optimize images (use a plugin like ShortPixel or Imagify), and install a caching plugin (WP Super Cache or W3 Total Cache). Then consider switching to a lightweight theme and adding a CDN.

My TTFB is slow. What should I do?

A slow Time to First Byte (TTFB) indicates a server-side bottleneck. Common fixes include upgrading your hosting plan, optimizing database queries, enabling server-side caching (Redis or Memcached), and putting a CDN in front of your origin server.