fbpx

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

Date of Post
Wednesday, Dec 08
Written by:
Chan Teck Seng
Category
Blog

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.

WP Fastest Cache Settings

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.

Enable Cache System Setting

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

Click on Submit Button

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

Steps to bulk smush

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

Activate Hummingbird Page Caching

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
SettingsFile 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 CleanupSchedule: Enable, Monthly, All Transients
Lazy LoadDeactivate

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
MetadataActivate
Image Resizing Disable for all
Uploaded ImagesActivate only compress Uploaded Images
PNG to JPEG ConversionActivate

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 TypeApache
Add RulesAutomatic
Finish SetupConvert Now
MetadataActivate
Image Resizing Disable for all
Uploaded ImagesActivate only compress Uploaded Images
PNG to JPEG ConversionActivate

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

Navigate to Divi Theme Options

Click on Divi Peformance

Divi Theme Options Performance

You can follow the following configuration:

Dynamic Module FrameworkEnable
Dynamic CSSEnable
Dynamic IconsEnable
Load Dynamic Stylesheet In-lineEnable
Critical CSSDisable
Dynamic JavaScript LibrariesEnable
Disable WordPress EmojisEnable
Defer Gutenberg Block CSSDisable
Improve Google Fonts LoadingEnable
Limit Google Fonts Support For Legacy BrowsersEnable
Defer jQuery And jQuery MigrateDisable

Go to Builder > Advance and activate Static CSS File Generation

Enable Static CSS in Divi Theme Options

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.

Enable NGINX Direct Delivery

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.

Enable Memcache

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

Navigate to Lighthouse and Generate Report

3. Click on view original Trace

Click on View Original Trace button

Common Issue and Fixes

Server slowness

Screenshot of report showing 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

Screenshot of report showing 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.”

Screenshot of report showing Cumulative Layout Shift

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!

Related Article

Sustainable Web Design

Sustainable Web Design

According to Siteefy (2020), an estimate of 1.7 billion websites exist in the world wide web today, and the average size of a single web page runs at 2.5MB (HTTP Archive, 2020). With more data being...

read more

Pin It on Pinterest

Share This