Tweak Wordpress for improved performance & Lighthouse scores

Photo by Carlos Muza on Unsplash

Wordpress ships with a lot of features that are often unnecessary to our requirements act as bloat on performance.

The performance of a web-page is generally measured by the Lighthouse Score, developed by google which analyses a web-page along with multiple guidelines and provides a metric on how well the web-page performs on a user’s device.

The Lighthouse score is more rigorous than the legacy PageSpeed score, as it considers loading the entire web-page rather than just the load-time metrics, making it necessary to remove bloat, optimise assets load-time, & reduce load-time.

With minor configurations, the performance can be improved over two-folds, impacting the user experience and SEO. The following are few features that may be disabled with near-to-none impact on usability but high impact over performance scores.

1. Wordpress Emoji — While WordPress includes universal-emoji support, it causes the addition of a CSS style-sheet & a JavaScript import which impacts the page-load and causes lower performance metrics.
   Disabling it is highly recommended and can easily be done so by either using a plugin (e.g. Disable Emojis) or adding relevant code snippets in your WordPress theme.
2. Gutenberg Editor — Gutenberg Editor may provide with you a fancy way to write, but it comes with an additional cost of CSS style-sheet & JavaScript snippets.
   Disabling Gutenberg is often a weighted choice but is suggested to do so, which can be done by enabling Classic Editor or using Disable Gutenberg.
3. Jetpack — Jetpack provides an arsenal of features that make the editor's life a lot easier. Relying on WP Rest API & inserting its own CSS style-sheets and JavaScript imports, Jetpack negatively impacts the web-page's performance.
   It is simpler to remove Jetpack from your installation otherwise, the advanced settings can be accessed by visiting /wp-admin/admin.php?page=jetpack_modules & disabling all modules (especially the custom Jetpack tracking).

Jetpack Modules Page

Optimise Images

Images take up a major chunk of page-load time of a website & it is necessary to ensure the Images are appropriately-sized, lightweight, & are loaded when necessary. One basic principle is to always use a compressed lossy JPEG instead of a lossless PNG.

EWWW Image optimizer (or Smush) — I personally prefer EWWW Image Optimizer over Smush because of easier configuration & it allows conversion of PNG to JPG upon upload itself & manual setting of image quality, but either can be used for same affects.

Enable PNG to JPG Conversion to keep Images lightweight

Manually setting JPG quality & enabling Scheduled Optimisation

PNG to JPG — Adding Image optimisation plugins allow optimisation during initial upload of Image, but do not handle pre-existing images in the system
PNG to JPG plugin can be used to bulk convert legacy images.

Convert Existing PNGs to JPEG through PNG to JPG plugin. Make sure to regenerate thumbnails after this action.

Regenerate Plugins — If images were manually manipulated the thumbnails need to be regenerated, which can be done easily though Regenerate Thumbnails plugin.

Regenerate thumbnails for your Images after manual invention on Images to ensure everything stays updated.

Native Lazyload — Ever since Chrome and modern browsers added in-built support for lazy-loading images (details here), guys at Google helped release a lightweight zero-configuration Native Lazyload plugin for Wordpress, which hits the exact right nodes.
Do make sure to disable other lazy-load features while using Native Lazyload plugin provided by other existing plugins.

Native Lazyload makes sure that the images in the view are only ones that are loaded.

Lazy-load CSS background-images — With standard Images being taken care of, sometimes a Wordpress theme employs adding images through CSS & can not be directed lazy-loaded.
To handle such scenarios, just drop the following snippet into your WordPress theme & you’re good to go!

This snippet is overkill & targets all DOM elements. Specific background elements can be handled by replacing `*` with appropriate CSS-selector.

Turn off unnecessary JavaScript and CSS

With standard configuration and improvements out of the way, now it is up to the WordPress administrator to actually go through and confirm nothing extraneous is served to the user.

The Webcraftic Assets Manager does and amazing job at that, by showing what exactly is loaded up on a web-page.
The details can be access by opening the relevant page, and picking Asset Management from the admin-toolbar, and anything that seems unnecessary can simply be disabled.

Asset Manager on Admin Toolbar present on Blog Page.

Description of all served assets on a webpage, and power to block anything extraneous

Many plugins like Jetpack, & Google Analytics plugins inject more than necessary JavaScript and make your web-page bloat.
Ideal alternative to this would be to use google-tags for tracking purposes and using GA Google Analytics plugin to drop limited tracking JavaScript.

Enable PWA & AMP

The aforementioned will improve what you already have, but adding a few features will give you a little boost by dropping your bounce rate, increasing your visibility, and improving user-experience.
The following are a few plugins that Google helped release into Wordpress Ecosystem, which is highly recommended to be used.

1. AMP — Released by Google more than 2 years ago, “Accelerated Mobile Pages” provide a significant boost one’s visibility on Google’s Search Page and a warm welcome for new users on your platform. Enabling the same for your Wordpress site is nothing more than a simple drop in the plugin.
2. PWA — Providing a better experience to returning user-base, enabling PWA allows push-notifications, longer caching of assets & web-pages themselves!.
   A few neat features are also enabled if you make use of PWA like changing the colour of the browser header-bar to match your site’s theme colour, or allowing users to install your website as an app on their homepage which has limited offline functionality!.
3. Quicklink for WordPress — A lesser-known feature helped by Google, enabling Quicklinks instructs your user’s browser to pre-fetch the next blog items listed on the current page. This makes the transition to the next item almost seamless and helps in a reduced bounce rate.

Other Recommended Plugins

After improving the content of your web-page, it is needed to ensure that the web-page is delivered in designated time-frame or it shall severely impact your performance score.

1. W3TC — W3 Total Cache boasts a stockpile of features which may seem very technical in the first view, but is a simple plugin which allows page-cache & Php opcode cache for faster generation of the web-page.
   It also supports the minification of JavaScript and CSS assets (Autoptimize plugin can be used to support this feature).
2. Wordfence — Wordpress is a favourite platform for attackers and is necessary to maintain a general sense of security around your website. Wordfence plugins add an excellent suite of security features ranging from limited login attempts to block spambots.
3. WP Crontrol — For the more tech-savvy, if you feel your Wordpress installation is not working as well as it did initially, it is best to use the WP Crontrol plugin and take a peek under a hood and stop unnecessary recurring activities hampering performances.

To summarise all the above, it is imperative to check the web-page's health through Lighthouse score (web.dev) and follow the suggestions listed in their report. WebPageTest can provide a detailed drill-down on what is being used by your webpage and how it impacting your page-load metrics, so you may make informed decisions.

For example, in a fresh Wordpress 5.4 installation, a new post has the following result on webpagetest.org

Notice how FCP is at ~3 seconds and Page-Load at ~7 seconds

By applying the optimisations discussed above on the fresh WordPress installation, following this the result on webpagetest.org

While FCP remained ~3 seconds, the Page-Load dropped down ~5.5 seconds

Comparing the above two, it is clearly visible that eliminating non-essential JavaScript & CSS style-sheets, and lazy-loading assets caused a drop in page-load time by 2 seconds!!!