Optimise and Speed Up WordPress Websites

 In Google, Search Engine Optimisation, Web Development, Website Performance, WordPress

WordPress isn’t known for its breakneck speed but in this blog, we will show you how to bring it up to scratch with a few changes and tweaks.

WordPress has become a staple name in the web design world, boasting user friendliness and customisation to all who want to try it. But with this ease of use comes a great window for undetected errors or problems. As Google tightens emphasis on page speed as a ranking factor, budding webmasters are increasingly getting caught out by not being able to get what they’ve built to run quickly.

So why does WordPress have a reputation for being so clunky? Out of the box WordPress CMS is relatively fast, enabling users to apply a theme and write a large number of blog posts without running into performance issues. Problem s praise as a side effect of WordPress’s popularity. There is a massive selection of third-party plugins, themes and even hosting providers aimed at the amateur starting out with little to no budget. There are plugins for pretty much anything a new user might want, however these plugins are all of varying quality and it is not always obvious at first that installing a plugin has actually caused problems.

How to find out if you have a problem

Many page speed tests are available for free online, with favourites such as Google PageSpeed Insights and GTmetrix. For this blog, Google PageSpeed Insights will be used.

Go to Google PageSpeed Insights at https://developers.google.com/speed/pagespeed/insights. Enter the URL of the page to test and press Analyse to start the process. After a few moments the results will appear, along with an overall score out of 100 for mobile mobile and desktop.

What Do All The Metrics Mean?

First Content Paint is the time between a user requesting the website and the content appearing on the screen.

First Meaningful Paint is the time taken for content to render on the user’s screen in a meaningful and human-readable way.

Speed Index is a measurement of how quickly content on a web page is populated.

First CPU Idle is when the loading of the page has calmed down enough that the phone you’re using can handle input on the page.

Time to Interactive is similar to the last metric – it is an indication of when a page becomes completely interactive and stable.

Max Potential First Input Delay is the length of the longest task and an indication of the delay until a user can perform smooth actions on a website.

Below is a list, several suggestions will be included, although these aren’t always easy to understand. A few of the suggestions to pay particular attention to are…

TTFB – Time to First Byte

If this metric flags up in Google PageSpeed Insights as a problem, it almost always means that the server in use is over capacity. This may be caused by bulky plugins or themes. It’s important to take inventory of installed plugins and decide whether or not they really add much to the business requirements or users experience. If everything installed is needed, them it’s time to look at upgrading the server.

Properly sized images

It’s possible that in parts of a page’s layout, images have been inserted at full resolution (eg 1200×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 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% more bytes, typically three times smaller than a PNG. It’s easy to add support for WebP to WordPress 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 this blog.

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:

Setting > EWWW Image Optimizer

Starting on the ‘Resize” tab, add a max width and max height of 2000×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 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 ‘server next gen images’ issue detected in PageSpeed Insights.

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 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 hots 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 plain HTML version of the page bypassing the need to re-render it.

There is no right or wrong option out of the many available bu the Breeze plugin bundles many of these features cleanly into one and in this instance, works directly with the server hosting the website. Install and activate the plugin and head to the Settings page, on the first tab tick the Cache system.

Minify HTML, CSS and JS

If the website being worked on is live, make sure to minify on a staging website as the options can occasionally cause problems at first.

Minification is the process of removing the characters in code that made the code tidy and human-readable and also reduces the size of the page. Breeze is perfect for this. On the Settings Page, tick the Minification button for HTML, CSS and JS. Save the changes and clear the current cache by hovering over the Breeze button at the top of the screen and select ‘Purge allCache’. The changes can now be seen by opening the website in a new tab. Check to make sure everything works and then re-run the PageSpeed tests. An instant jump in performance should be seen.

If the problems do occur and some JavaScript breaks or an element doesn’t render correctly, inspect the element in the developer tools to try and find which resource is not working. Once you have an idea of what stylesheet or script is causing the problem, head to the Advanced tab of the Breeze settings and paste the link to the offending script in the Exclude CSS or Excluded JS option (depending on the filetype). This stops that file from being minified and should fix the problem at the expense of some performance.

Defer JavaScript

Live chat, analytics and tracking tools can bundle large JavaScript files that add seconds to the time a page takes to become interactive. Add the Defer attribute to these scripts so that they aren’t executed until the DOM has finished loading. This can be done from the Breeze settings under the Advanced options. First, identify any JavaScript files loading on the page that are not critical to how the site functions or looks. Then enter the original unminizfed URL of the resources in the “JS files with deferred loading’ box and save the changes. This should force the file to only run once the page has finished loading.

More critical scripts can still be optimised by using the Async attribute. This fetches the script while the page is still rendering for a user and then executes it, interrupting the DOM if necessary.

Browser Caching

Once an image, stylesheet or script has been downloaded by a user, in most cases that asset is unlikely to change by the time they open a new page or return to the website within a short period of time. To take advantage of this, browser caching can be used.

Tune The Server

WordPress websites that involve search features or the popular commerce plugin Woocommerce can be quite CPU intensive at high user counts. To help with this, it is worth increasing the raw power of the server will take care of this.

Like most web apps, if the server running a WordPress website runs low on RAM it will begin to slow before crashing entirely. Usually MySQL will fail first causing an ‘error establishing database connection’ error.

Cloudflare is a service that, among other things, screens traffic before it even gets to your website. The free plan can help massively in reducing bandwidth and server power wasted on bots and spammers.

Set UpA CDN

To set up a CDN with BunnyCDN, first sign up for an account on the website and load the account up with credits – start with about £10, which should last several months for a mid-traffic site.

First, a ‘pullzone’ is needed – click ‘Create a pull zone’ in the BunnyCDN dashboard. Enter a name and the origin URL ( the URL of the website the CDN is being used on).

Save the settings, making a note of the CDN hostname (<name entered above>.b-cdn.net).

If using the Breeze plugin, re-open the settings and head to the CDN tab. From there, enter the hostname in the CDN CName box, leave CDN content as it is and exclude any content as needed in the Exclude Content box. Once done, click Save and purge the cache. Over the next few minutes, assets should be served from the CDN instead of the local server. This can be checked by using Chrome DevTools to examine the URL of the images in the homepage: if they are loading from <name>.b-cdn.net the the CDN is working correctly.

Upgrade to PHP 7

Making regular upgrades to PHP is something that has flown under the radar for many, with PHP 7.1 now at the end of life. Many websites still run on the older and much slower PHP 5.6. Upgrading to at least PHP 7.3 would bring a major performance increase and should reduce the pressure on the server making it more efficient.

Test To See What Version Of PHP Is Being Used

Depending on where and how the website is hosted, there are several ways to check the version of PHP being used. If FTP access is an option, create a new file called version.php and add the following code

<?php

phpinfo();

?>

Upload this file to the root folder of the website and then access it from a browser. The details of the current PHP installation will be shown.

If SSH or sheep access is available, open the server terminal and simple type:

php-v

The currently installed version will be shown.

Many hosting companies have a dashboard that is specific to them that shows this information. As a general guide, look for ‘Change PHP setting” or something similar for the best chance of finding the version number.

If non of these approaches work, ask the person in charge of the hosting. If the version returned is lower than the currently supported version, attempt to upgrade to the latest stable version for a large performance boost.

Retesting

Open all changes have been made, return to Google PageSpeed Insights and run the test again. Significant improvement should have been made even though the score likely won’t be perfect. It can be difficult to optimise a website to 100/100 on both mobile and desktop as sometimes the problem doesn’t entirely lay at the feet of the webmaster. Poor themes and plugins can sometimes be critical. The important thing is to be aware that it is a factor and take it into account when planning new features.

In summary, site speed should always be modified and optimised to the maximum extent possible. The quicker a web page loads, the longer the site retains a user’s attention. Conversion rate skyrocket with even small increases in page speed.

Recommended Posts
uThink1