Module 6 · 6.3

English

Nederlands English Deutsch

Images, PHP and other speed gains

Module 6: Speed · Reading time: 9 minutes

Learning goal: After this lesson you'll be able to apply the biggest remaining speed gains and measure their effect.

Key concepts: image optimisation, WebP and AVIF, lazy loading, the LCP image, fetchpriority, PHP version, cleaning up the database (revisions, transients, autoload), WP-Cron, real cron, DISABLE_WP_CRON, external fonts, Heartbeat

Work in the right order

After a page cache (lesson 6.2), these are the gains that pay off the most, roughly in order of effort versus effect:

images sorted out;
an up to date PHP version;
fewer external components and heavy plugins;
a tidied up database;
scheduled tasks on a real cron.

Measure before and after each step (lesson 6.1), otherwise you won't know what helped. And do one thing at a time.

Images: the biggest gain in the browser

On most pages, images make up the largest part of what a visitor downloads. What you learned in lesson 4.4 pays off here:

Correct size: don't upload larger than needed and let WordPress offer smaller sizes via srcset.
Compression and format: WebP is usually considerably smaller than JPEG at the same quality; AVIF is often even smaller. A plugin can convert existing images and serve the smaller version to browsers that support it. Check whether the conversion happens on your own server or at an external service.
Lazy loading, but not for everything. WordPress automatically gives images loading="lazy", except for the first large image at the top. That image is often the LCP element (lesson 6.1): the largest piece of content the visitor sees first. If that's lazy loaded, the browser delays it and your LCP gets worse. That's why WordPress often gives the LCP candidate fetchpriority="high", so the browser fetches it first.

<img src="hero-1536x864.webp" width="1536" height="864"
     fetchpriority="high" alt="Werkplaats met fietsen op een rij">
<img src="team-768x512.webp" width="768" height="512"
     loading="lazy" alt="Het team voor de winkel">

A pitfall: some themes, page builders and optimisation plugins also apply lazy loading to the first image, or load the large image as a CSS background (which is discovered later). In PageSpeed Insights, the LCP section shows you which element it is and whether it's lazy loaded.

PHP: free speed

Every new major version of PHP is faster than the previous one, and WordPress websites benefit from this immediately, without changing anything on your website. Older versions also stop receiving security updates (lesson 8.4). If you upgrade, check that your plugins and theme support the new version, and ideally test it in staging first.

In the PHP settings, also look at:

OPcache: enabled by default with most hosting providers. One consequence: a changed PHP file can take a moment before PHP uses the new version.
memory_limit: too low causes errors on heavy pages; very high doesn't make your website faster.

External components and heavy plugins

Every component from another party is an extra connection and an extra wait: fonts from an external service, an embedded video, a chat widget, tracking codes, social media buttons, a map. Questions to ask per component:

Is it necessary? A video that almost nobody plays could instead be an image with a link.
Can it be done locally? You can usually host fonts on your own server (with a plugin or via theme.json for a block theme). That saves a connection and it's better for your privacy (lesson 9.3).
Can it be delayed? A chat widget or video could load only after a click.

For plugins, measuring with X-Ray (with hosting on CloudLinux) or a plugin such as Query Monitor (enable it temporarily, visible only to administrators) helps. These show which plugin costs the most database queries or time.

Cleaning up the database

A database grows with things you don't see:

Revisions (lesson 4.1): every saved version of every Page. Limit them with WP_POST_REVISIONS and clear out old ones.
Spam and trashed comments, and Posts in the Trash.
Transients: temporary data from plugins in wp_options, which sometimes isn't cleaned up.
Autoload: options in wp_options with autoload enabled are loaded all at once on every request. Plugins you removed long ago sometimes leave large amounts of data behind here. Site Health (lesson 5.4) warns you if the autoload data is very large.
Log tables from plugins (statistics, security logs, email logs) that are never cleared.

You can clean up with a cleanup plugin, with WP-CLI (wp transient delete --expired, wp post delete $(wp post list --post_type=revision --format=ids) --force), or with phpMyAdmin's optimise function for the tables themselves. Always make a backup first. Don't remove anything you don't recognise.

Scheduled tasks: WP-Cron

WordPress has tasks that need to run at a certain time: publishing a scheduled Post, checking for updates, running a backup plugin. This is called WP-Cron. By default, WP-Cron doesn't run on a clock, but on a visit: with every page request, WordPress checks whether a task is due. Two drawbacks:

With few visitors, tasks run too late (a scheduled Post only appears at the first visit after it was due).
With many visitors, the check happens very often, and a heavy task can slow down a visitor's page right at that moment.

Better: turn off WP-Cron on visits and let a real cron job on the server run it every five or ten minutes. In wp-config.php (above "stop editing"):

define( 'DISABLE_WP_CRON', true );

And in the cron screen of your hosting panel, add a task every 10 minutes:

*/10 * * * *  /usr/local/bin/php /home/gebruiker/domains/example.com/public_html/wp-cron.php >/dev/null 2>&1

The path to PHP and to your website differs per hosting provider; check your panel's documentation. Or use WP-CLI: wp cron event run --due-now. Afterwards, check in Site Health that no scheduled tasks are overdue.

Heartbeat and the Dashboard

While it's open, the WordPress Dashboard talks to the server every 15 to 60 seconds (the Heartbeat): for autosave, to report that someone else is editing the same Post, and for notifications. If you leave ten tabs with the Dashboard open all day, that's thousands of requests. Close tabs you're not using. Some cache plugins can slow down the Heartbeat; turning it off completely isn't necessary and breaks autosave.

Summary

After the page cache: images, PHP version, external components and plugins, database, cron. Measure before and after, one step at a time.
Lazy loading for everything except the large image at the top; that one should get fetchpriority="high" instead.
A newer PHP version is free speed, provided your plugins can keep up.
Clean up revisions, transients, spam and large autoload data, always with a backup.
Put WP-Cron on a real cron job with DISABLE_WP_CRON and a task in your panel.

Quiz

Exercise

Exercise A6.3: Lazy loading and sizes on your homepage. Enter your website's address. The tool reads the homepage and looks at the images: does the first large image lack loading="lazy" (and ideally have fetchpriority="high"), do the images further down have lazy loading, and what proportion of the images are WebP or AVIF?

Exercise D6.3: Before and after. Measure a page of your website three times in PageSpeed Insights (mobile) and note down the middle LCP, INP (or the lab value Total Blocking Time if there's no field data), CLS and the TTFB from exercise A6.1. Then carry out one improvement from this lesson (images, PHP version, removing an external component, cleaning up the database, or a real cron). Measure three times again and note the new values. Describe what you did and whether the difference is bigger than the normal variation between measurements.

Exercise D6.3: Before and after

You do this exercise yourself; no one checks it. Tick off what you've done and mark the exercise as done.

Three measurements before the improvement
One improvement implemented
Three measurements after the improvement

Median LCP, INP (or TBT), CLS and TTFB before and after

What did you improve?

Is the difference bigger than the fluctuation between the measurements?

Your ticks and notes only stay in this browser; we don't send them anywhere. If you're signed in, we only save in My courses that you've done the exercise.

Cookies at WebOké

Cookie settings

Necessary

Marketing