PROJECTS
WordPress
500) but are then scaled down by CSS to a more
manageable size to fit a layout. This isn’t ideal
as it means the image is loaded in its full size
before being scaled down, which wastes time and
bandwidth. These will get flagged by PageSpeed
Insights. Use the suggestions from the tool to locate
these images and consider resizing the image closer
to the dimensions in which it will be displayed.Next-gen images
Most browsers now support the WebP image format,
which employs much more efficient compression
than .jpg and .png – it even supports transparency at
a cost of just 22 per cent more bytes, typically three
times smaller than a PNG. It’s easy to add support for
WebP to WordPress and convert images in the media
library to offer the format as an option to a user.Enable compression
Although it’s standard on most hosting setups,
there are still cases or servers out there not using
gzip compression. If this is flagged up, then the
best course of action is to contact the web hosting
company and ask for it to be enabled or consider
changing host entirely. A plugin can also be used to
attempt to force this setting on, which is covered
further into the tutorial.
On the example test website, the following issues
were flagged:Avoid enormous payloads
One of the most important metrics is the total page
size. This is the filesize of all loaded elements on a
page, such as images, video, CSS and any scripts that
are included. Using the drop-down tab, open the
drop-down section to find the largest elements on
the page. Avoid unnecessary videos on pages and if
the video is essential, consider ‘lazy loading’ so it is
not downloaded immediately.Compress images
Getting started on the actual optimisation; images
and video are usually the largest items on a page.
Eliminate unnecessary background videos and
ensure to encode video at a low bit-rate if it plays
automatically. Install the plugin EWWW Image
Optimizer from the WordPress plugin library. From
the Media library, a new bulk optimise option
becomes available.How to configure the settings
Before optimisation takes place, some adjustments
can be made to the plugin settings to ensure a
reasonable balance of performance against user
experience. Go to the Settings part of the plugin
from the WordPress Dashboard:Settings > EWWW Image Optimizer
Starting on the ‘Resize’ tab, add a max width and
max height of 2000 x 2000 unless the website is
specifically built to display high-res images. These
numbers are chosen to filter out any massive images
but shouldn’t trim any images appearing in the
normal layout.
Another option to consider is found back in the
settings and on the WebP tab, ticking both JPG/PNG
to WebP will create a WebP copy of all images during
the optimisation process and in most cases will
solve the ‘serve next gen images’ issue detected in
PageSpeed Insights.
The optimiser is now ready to run, head to:Media > Bulk Optimize
Scan for unoptimised images then click Bulk
Optimise. The process will take a moment, but when
done the size of each page and overall PageSpeed
score should be slightly better.
Resizing these images in an image editor or using
a CDN with automatic sizing will also fix this issue
and, while more expensive/time consuming, will
usually provide even better results.CACHING
Every time a user requests a page from a WordPress
website, the server hosting it needs to run through
the entire theme code from the header to the footer,
generating the parts that the user needs before
finally displaying in HTML to the user. When a
website is receiving many hits a second, these pages
are likely to render down to the exact same end code.
For this reason, there are many WordPress caching
plugins that generate the page once before storing
it away, then when a user arrives on the page again
they are sent the plain HTML version of the page,
bypassing the need to re-render it.Above The First
Meaningful Paint is the
first time the full ‘above the
fold’ content is loaded in its
styled and complete form.
The rest of the page can still
be loading but the user is
able to start browsing. This
image shows the above the
fold content found on the
web.dev website.