ammarmahdi.com online
YYC

Image optimization for WordPress: faster LCP, smaller pages

4 min read

The biggest single win on most WordPress sites is the images. They are the heaviest thing the browser downloads, and the largest one on screen is usually your LCP element, the number Google watches to decide whether your page feels fast. Fix the images and you improve page weight and LCP at the same time.

Three things matter, roughly in this order: serve a modern format, serve the right size, and load them in the right order. Here is how I handle each on WordPress.

Serve a modern format

Old sites are full of JPEGs and PNGs. Both are beaten by newer formats that look the same at a fraction of the size.

The catch is that WordPress will happily store a WebP, but it does not convert your existing library for you. You either upload the modern format yourself or use a plugin (or the official Performance Lab tooling) to generate WebP or AVIF versions on upload. Pick a sane quality, around 80, rather than re-saving at maximum and wondering why the file barely shrank.

Serve the right size

The most common waste I see is a 3000 pixel photo dropped into a 600 pixel slot. The browser downloads every one of those pixels and then throws most of them away.

WordPress already solves this if you let it. When you upload an image it generates several sizes and, in your templates, emits srcset and sizes so a phone downloads a small file and a desktop downloads a larger one. This breaks the moment a theme or page builder hardcodes the full-size URL instead of using the proper functions like wp_get_attachment_image. If the “thumbnails” in your page source are 2560 pixels wide, that is what is happening.

  • Set width and height on every image. WordPress needs them to build the responsive markup, and they stop the layout from jumping while the image loads. That second part is half of your CLS score.
  • Keep your registered image sizes sensible. Do not serve the 2560 pixel “large” size as your in-content default.
  • Resize before upload when you can. A photo straight off a phone camera can be 5MB. Nothing downstream fixes that as cheaply as not uploading 5MB in the first place.

Load them in the right order

Even correctly sized images hurt if they all load at once.

  • Lazy load everything below the fold. WordPress does this by default since 5.5 (2020), but only on img tags that already have width and height. Images missing those attributes load eagerly, so you lose the saving. One more reason to set dimensions.
  • Do not lazy load the LCP image. The hero, the first thing in view, should load as early as possible. Lazy loading your most important image is one of the most common self-inflicted LCP problems I find.
  • Tell the browser which image matters. Since 6.3, WordPress adds fetchpriority="high" to the image it guesses is your LCP element, which typically improves LCP by 5 to 10 percent. The guess is mechanical: the first image that is not lazy loaded and is larger than 50,000 square pixels. Page builders with background-image heroes or sliders often fall outside that rule, so check the rendered HTML and set the attribute yourself when WordPress gets it wrong.

Start here, then measure

None of this is exotic. The median page loads 16 to 18 images, and on most sites they are the single largest category of bytes. That is exactly why images are the place to start: the files are big, the fixes are mechanical, and you can see the difference in your LCP almost immediately.

Do the three in order. A modern format, the right size, loaded in the right sequence. Then clear the cache and re-run the page, because measuring is the only way to know it worked.

This is one piece of the larger picture. For the full playbook, see how to actually speed up a WordPress site, and for what LCP and CLS are actually measuring, Core Web Vitals for WordPress.