How to improve your wordpress website page speed (Advance Step by Step)

In this article, we are going to do away with jargon, technical terms like “Improve server response time”, “Remove render-blocking JavaScript”. We will try our best to explain each term as simply as possible.

TL;DR How to improve your page speed

So what can you do to improve your website page speed? To Summarise:

For your function files (JS Files), design files (CSS) and your HTML files- 

1. Combine your JS, CSS and HTML files as much as possible. 
2. Minfy the scripts by removing unnecessary spaces and symbol used in the files
3. Compress the files size

For your images, 

1. Resize and crop your images to a optimized size before uploading them
2. Compress your image files
3. Serve the image files in next-gen format (e.g. .Webp)
4. Use Lazy load plugins like Smushpro to allow your website to load first before loading other images

For your website

1. Create a website cache system to cache all files so that your user will not need to load all your files everytime they use your website
2. Activate your server cache – Server provider like Siteground have a few layers of cache including NGINX Direct Delivery, Dynamic Cache and Memcached. 
3. Use a CDN server like CloudFlare to further improve your website performance 
4. Reduce Redirects

Your website should respond quickly when your user browses your website. For every second is important for your conversion rate, a slower website will have a 7% loss in conversion and 11 % fewer page views. 

Here’s a step by step guide on what you can do to improve the speed of your wordpress website.

Setting it up on your WordPress (Free Alternative)

Firstly, you should always make use of plugins to help you with your optimisation. We recommend installing free plugins like WP Fastest Cache and combining with Smush for WordPress if you would like a free alternative.

WP Fastest Cache

This is a plug and play plugin which makes it easy for every WordPress Users. They have a pro version which you can buy it at only USD49.99 (lifetime). You can compare the version on their website.

Step by Step to Set up Wp Faster Cache

1. Click on the WP Fastest Cache option in the menu at left.

2. Click on the checkbox next to Enable in the Settings tab. You can leave most of the settings as default or activate any settings that you want.

3. Once you have completed clicking on the options that you want to use, click on Submit at the bottom of the page.

Smush For WordPress

Smush comes with both free and premium(pro) versions. Here’s a video comparing the two version.

Step by Step to Set up Smush (Free)

1. Once you have activated the plugin, click on the Get Started > Bulk Smush now

Setting it up on your WordPress (Paid Alternative)

For a paid alternative, it makes sense to use WPMUDEV (The developer for Smush WordPress) for both files and images optimisation.

Cache System (WPMUDEV HummingBird)

Hummingbird Pro for improved website performance, automated reporting, and fixing your Google PageSpeed with its full WordPress speed optimization suite.

Step by Step Set up with WPMUDEV HummingBird

Install Wpmudev Hummingbird

1. Select Hummingbird > Caching and turn on Automate Asset Optimisation

Here’s some basic configuration that you can do.

Page Caching	Page Types – Turn on for all pages EXCEPT for product pages Preload caching – Enable for Home page and pages that’s been updated Cache interval – 15 Days Integrations – Turn off all Settings Settings – Turn on only: Clear full cache when post/page is updated Identify cached pages Cache on mobile devices Clear cache on comment post Exclusions :  URL String wp-.*\.php Index\.php Xmlrpc\.php sitemap[^\/.]*\.xml User agents bot is_archive slurp crawl spider Yandex ​​Cookies Wp_woocommerce_session_
Browser Caching	Status – All 1 year Activated Configure Server Type : Apache Expiry Time: All File Types: 16 Days Setup : Automatic
Settings	File Change Detection: Automatic

2. Select Hummingbird > Gzip Compression > Activate
3. Select Hummingbird > Asset Optimization > Activate
4. Select Hummingbird > Advanced Tools 

Here’s some basic configuration that you can do.

General	URL Query Strings : Disable WooCommerce Cart Fragments : Turn on ONLY for ecommerce Site Emojis: ActivatePrefetch DNS Requests: //fonts.googleapis.com //fonts.gstatic.com //ajax.googleapis.com //apis.google.com //google-analytics.com //www.google-analytics.com //ssl.google-analytics.com //youtube.com //s.gravatar.com Preconnect: Leave Blanks
Database Cleanup	Schedule: Enable, Monthly, All Transients
Lazy Load	Deactivate

For more basic configuration, you can also use their preset configuration.

Smush Pro (WPMUDEV)

1. Install Smush Pro Plugin using WPMU DEV Dashboard
2. Select Smush Pro > Bulk Smush
You can following the configuration as followed:

Image Size	All
Automatic Compression	Activate
Super – Smush	Activate
Metadata	Activate
Image Resizing	Disable for all
Uploaded Images	Activate only compress Uploaded Images
PNG to JPEG Conversion	Activate

3. Select Smush Pro > Lazy Load > Activate this
4. Select Smush Pro > CDN > Activate this
5. Select Smush Pro > Local Webp
You can follow the configuration below:

Server Type	Apache
Add Rules	Automatic
Finish Setup	Convert Now
Metadata	Activate
Image Resizing	Disable for all
Uploaded Images	Activate only compress Uploaded Images
PNG to JPEG Conversion	Activate

Divi Theme Setup

If you are using Divi Theme, you can further enhance the performance by making use of the latest feature by Divi – Divi Performance

After you have install Divi Theme, head to Divi > Theme Options

Click on Divi Peformance

You can follow the following configuration:

Dynamic Module Framework	Enable
Dynamic CSS	Enable
Dynamic Icons	Enable
Load Dynamic Stylesheet In-line	Enable
Critical CSS	Disable
Dynamic JavaScript Libraries	Enable
Disable WordPress Emojis	Enable
Defer Gutenberg Block CSS	Disable
Improve Google Fonts Loading	Enable
Limit Google Fonts Support For Legacy Browsers	Enable
Defer jQuery And jQuery Migrate	Disable

Go to Builder > Advance and activate Static CSS File Generation

Setting Up Cache on Siteground Server

For server Cache, siteground offers a full suite of cache systems (Siteground Super Cacher)that you can make use of. 

To Activate the cache system on Siteground, visit your site tools on Siteground (site’s Site Tools > Speed > Caching)

Here are the explanation of each cache system that you can use:

NGINX Direct Delivery – it caches your site’s static content like images, CSS files, javascript, flash, etc.

You can enable or disable the NGINX Direct Delivery from your Site Tools > Speed > Caching. Just select NGINX Direct Delivery and click on the On/Off button for the desired website.

Dynamic Cache – it caches your site’s dynamic co ntent and stores it in the server RAM.
The Dynamic Cache is enabled by default on a server level. WordPress websites usually take advantage of it out of the box

Memcached – it uses Memcached technology which speeds up database calls, API calls, and page rendering by storing data and objects in memory to reduce the number of times a database is queried. It’s a good option for sites that rely mainly on database queries.

You can enable Memcached from the SuperCacher tool in your Site Tools. Click on Memcached and then the Off/On toggle button.

Manual Speed Optimization (Advance)

If you  still are unable to improve your page speed after activating all the above settings, here are some steps you can take. 

Run a Page Speed Insight or Lighthouse Checks.

1. On the website > Right Click and select Inspect
2. Select lighthouse > Select Desktop and click generate Report

3. Click on view original Trace

Common Issue and Fixes

Server slowness

In the trace source, we can see that it took more than 4.8sec for the first code to be loaded – this indicates the waiting time for the server to respond.

Proposal to fix

We propose to upgrade the server to a higher specs server or move to a reputable server including siteground or Siteground cloud server.
We can consider implementing CDN (Cloudflare) to the website.

Waiting for Script to Load

In the screenshot, we can see that it took about 0.1Secs to load the amount of scripts. Minimised the amount of scripts needed to load by combining the scripts manually using Humming Bird Asset Optimization. We advise that you do not do this step if you are unsure of what to do and TAKE A BACKUP before you start on this. 

Here’s some ways you can start with your manual asset optimization.

Layout shift

Google have implemented cumulative layout shift as part of their lighthouse metric since 1 Jun 2021 to encourage website owners to focus on user experience. 

“Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful.”

The results shows a layout shift and the layout shift may be due to the header loading from Divi.

Proposal to fix

Enable the Static CSS Generation on Divi 

Select Divi > Builder > Advance > Enable Static CSS File Generation > Save Change

We hope that these methods above can help you to achieve a faster website load time and thus improve on your conversion of your website.

A word of advice – always practice good hygiene on your website and remove any files, plugins or images that you are no longer using. Following good practices for web development before you start developing your website helps to reduce the amount of work you need after your website is launched. 
If you are looking for experts to help you build your website, Lemonade can be a good fit! We are experts in WordPress!