Best Free SEO Tools in 2026

Prerequisites

Before you start optimizing, make sure you have:

• Google Search Console access for your site (to view the Core Web Vitals report under "Experience")
• Google PageSpeed Insights — free, no account required (pagespeed.web.dev)
• Chrome DevTools — built into every Chrome browser (press F12)
• Access to your hosting environment — you'll need to modify server configuration, HTML, CSS, and potentially JavaScript
• A staging or development environment — never test performance changes directly in production

Optional but recommended:

• A CDN like Cloudflare or Fastly
• A real user monitoring (RUM) tool like DebugBear or SpeedCurve for ongoing tracking

Step 1: Diagnose Your Current Core Web Vitals

Before fixing anything, establish your baseline.

Run a PageSpeed Insights Audit

Go to PageSpeed Insights and enter your URL. You'll see two data sets:

• Field Data (from the Chrome User Experience Report): Real user metrics collected over the previous 28 days. This is what Google actually uses for rankings.
• Lab Data (from Lighthouse): Simulated metrics from a controlled environment. Useful for debugging but not used directly for ranking.

Focus on the field data first. If you see "not enough data," your site doesn't have enough Chrome traffic to generate a CrUX report. In that case, rely on lab data and RUM tools until field data becomes available.

Check Google Search Console

Navigate to Experience → Core Web Vitals. This report groups your URLs by status:

• Good: Passing all three metrics
• Needs Improvement: Borderline on one or more metrics
• Poor: Failing one or more metrics

Click into each group to identify which specific URLs and metrics are problematic.

Try Google Search Console →

The Thresholds You Need to Hit

All thresholds are measured at the 75th percentile of page loads — meaning 75% of your visitors need to experience a score at or below the threshold.

Step 2: Fix Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest visible element — usually a hero image, video thumbnail, or heading text block — to fully render. It's the single metric most sites struggle with.

2a. Identify Your LCP Element

In Chrome DevTools, open the Performance panel, record a page load, and look for the "LCP" marker in the timeline. It will highlight exactly which element is your largest contentful paint.

Common LCP elements include:

• Hero images
• Featured product images
• Large heading text blocks
• Background images set via CSS
• Video poster images

2b. Optimize Images

Images are the LCP element on roughly 80% of pages. Here's the checklist:

Use modern formats. Convert images to WebP or AVIF. AVIF offers 20-50% better compression than WebP for photographic content.

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

Set explicit dimensions. Always include width and height attributes on tags. This also prevents CLS (more on that later). Use fetchpriority="high" on your LCP image. This tells the browser to prioritize downloading it immediately.

<img src="hero.webp" alt="Hero" fetchpriority="high" width="1200" height="600">

Preload the LCP image if it's referenced in CSS or loaded dynamically:

<link rel="preload" as="image" href="hero.webp" type="image/webp">

Don't lazy-load your LCP image. This is a common mistake. Lazy loading delays images until they're near the viewport — exactly the opposite of what you want for the element that defines your LCP.

2c. Reduce Server Response Time (TTFB)

If your server takes over 600ms to respond, LCP will almost certainly fail.

• Use a CDN to serve content from edge servers close to your users
• Enable server-side caching — implement full-page caching for static or semi-static pages
• Upgrade hosting if you're on shared hosting. A managed VPS or edge-compute platform (Vercel, Cloudflare Workers) makes a significant difference
• Optimize database queries — especially relevant for WordPress and other CMS-based sites

2d. Eliminate Render-Blocking Resources

CSS and synchronous JavaScript in the block rendering. Fix this by:

• Inlining critical CSS — extract the CSS needed for above-the-fold content and inline it directly in
• Deferring non-critical CSS using media="print" with an onload handler
• Adding defer or async to non-essential