Core Web Vitals and Image SEO: Make Your Pages Fast

Core Web Vitals are three measurements Google uses to judge how a page feels to real visitors: how quickly the main content appears, how fast the page reacts when you tap something, and whether the layout jumps around while loading.

Their effect on rankings is real but modest. Great content on a slow page usually beats thin content on a fast one. Speed matters more for the people who do arrive: on mobile data, every extra second loses visitors before they see anything. On the small business sites I work on, the biggest cause of slow pages is almost always the same thing, images, so this guide covers both.

The three metrics

INP replaced an older metric, First Input Delay, in 2024. Google judges each metric at the 75th percentile of real visits, so most of your visitors need a good experience, not just the ones on fast phones.

Field data and lab data

PageSpeed Insights shows two kinds of results:

• Field data comes from real Chrome users over the last 28 days. This is what Google uses. Small sites may not have enough visitors to show it yet.
• Lab data is a test run on a simulated mid-range phone on a slow connection. It's useful for finding problems, but the score varies between runs.

Don't chase a perfect lab score of 100. Aim for good field data, or good lab metrics while you don't have field data yet. The Core Web Vitals report in Search Console groups your pages by the same thresholds.

Fixing LCP: show the main content sooner

The largest element is usually a hero image, a banner or a slider, so most LCP fixes are image fixes:

• Compress and resize the image (details below). A 4 MB photo straight from a phone camera is the most common culprit I see.
• Don't lazy-load the hero image. Lazy loading is great further down the page, but it delays the main image. Add fetchpriority="high" to it instead.
• Avoid sliders at the top. They load several large images at once and rarely help sales.
• Speed up the server. Cheap shared hosting can take more than a second just to start sending the page. A caching plugin, a CDN or better hosting fixes it.
• Reduce render-blocking files. Every CSS and JavaScript file in the <head> has to load before anything shows.

Fixing INP: respond faster

Slow responses come from too much JavaScript running on the phone:

• Remove plugins and scripts you no longer use: old chat widgets, sliders, duplicate tracking codes.
• Load chat, reviews and social feeds after the page is usable.
• Choose a lighter theme. Page builders that add a lot of code are a common cause of poor INP.

Fixing CLS: stop the layout jumping

• Set width and height on images and videos so the browser reserves space before they load.
• Reserve space for ads, banners and embeds. Content pushed down by an ad is a major cause of layout shift.
• Load web fonts carefully. Use font-display: swap and a similar fallback font so text doesn't jump.
• Don't insert bars above content after the page loads, such as a cookie notice that pushes everything down.

Image SEO: fast, findable images

Images show products, prove the quality of your work and can bring visitors from Google Images. Done badly, they're also the heaviest thing on the page. Eight habits cover almost everything.

1. Resize before you upload

A phone photo can be 4,000 pixels wide and several megabytes. Displayed at 800 pixels wide, the visitor downloads around five times more than needed. Resize to roughly the largest size the image is displayed at, then compress it. Free tools like Squoosh do both in the browser.

For responsive sites, srcset lets the browser choose the right size. WordPress and most platforms create these sizes automatically:

<img src="saree-800.webp" srcset="saree-400.webp 400w, saree-800.webp 800w, saree-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 800px" width="800" height="1000" alt="...">

2. Choose the right format

• WebP: smaller than JPG and PNG at similar quality and supported by every modern browser. The best default.
• AVIF: often smaller still. Many image CDNs serve it automatically.
• JPG: fine for photos when WebP isn't an option.
• PNG: for transparency or sharp text, like screenshots.
• SVG: for logos and icons, which stay sharp at any size.

3. Always set width and height

Without them, text jumps down as each image appears, which is exactly what CLS measures.

4. Lazy-load below the fold, not above

loading="lazy" waits until the visitor scrolls near an image. Use it for images further down the page, never for the first big image.

Rankdesk's blog follows these rules, and you can check them in your browser's developer tools. Each guide's cover image is a 1200 × 630 WebP with width and height set and fetchpriority="high", because it's the largest thing at the top. Cover images in the "Keep reading" cards at the bottom are lazy-loaded, because most visitors never scroll that far.

5. Write useful alt text

Alt text describes an image for people using screen readers and for search engines:

<img src="red-banarasi-silk-saree.webp" alt="Red Banarasi silk saree with gold zari border and pallu">

• Weak: alt="saree", alt="image1", alt="saree silk saree buy saree online surat"
• Good: alt="Green Kanjivaram silk saree with temple border"
• Good: alt="Waterproofing membrane being applied on a terrace in Bopal"

Describe what's in the image, specifically, in a short phrase. Include a keyword only when it naturally describes the picture. Decorative images, such as background patterns and dividers, get an empty alt="" so screen readers skip them.

6. Name files clearly

Rename IMG_20260912_143201.jpg to red-banarasi-silk-saree.jpg before uploading: lowercase words separated by hyphens. It's a small signal that costs nothing.

7. Put images next to relevant text

Google reads captions, headings and nearby paragraphs to understand an image. A product photo next to the product name and description is understood better than a gallery of unlabelled pictures.

8. Use real photos

Original photos of your products, team and finished work are more convincing than stock images. They're unique, so they can rank in Google Images on their own. For sharing on WhatsApp, set a 1200 × 630 share image (see the title and meta tag guide). On product pages, include images in your Product schema.

WordPress quick wins

1. Turn on a caching plugin.
2. Install an image plugin that converts uploads to WebP and resizes them.
3. Delete plugins you don't use.
4. Switch to a lightweight theme if yours relies on a heavy page builder.
5. Use a CDN, which good hosting often includes.

Measure, fix, measure again

1. Run your home page and main service or product pages through the Rankdesk SEO audit. It includes Google's PageSpeed results for mobile or desktop, lists the biggest fixes, and flags every image without alt text.
2. Fix the largest problem first, usually the hero image.
3. Test again. Lab results change right away. Field data in Search Console updates over the next four weeks as new visits replace old ones.

Test on mobile first. Most visitors to local business sites in India arrive on a phone, often on mobile data, and that's the experience Google measures.