How to optimize WordPress loading time  • Google Page Speed 100/100

How to optimize WordPress loading time • Google Page Speed 100/100


Wojtek Andrzejczak
Wojtek Andrzejczak
How to optimize WordPress loading time •...

Achieve Google Page Speed at a score of 100/100 is challenging, especially for mobile. So let’s discuss a few steps to optimize your WordPress to get you close to the top score.

My story

I’ve started this blog without any specific goal. I just wanted to share my knowledge, so I’ve quick and easy set the WordPress site with a premium theme without paying attention to details.

After 2 years, over 40% of all traffic comes from the USA alone; Switzerland generates 7%. So my audience is mainly spread across the world. Noice.

Plausible Analytics / Visits distribution
Plausible Analytics / Visits distribution

My goal

I’ve decided to optimize my website loading time to reduce waiting time to the audience and improve my SEO position.

I wanted to have a relatively high Google Page Speed score, but 100/100 was never a target. So instead, I’ve aimed to have something around 90 on mobile/desktop.

Since 100/100 was not my target, I don’t have a record of all the steps and improvements I’ve made along the way. However, I remember that I had scored on Google Page Speed around 65-75 (for mobile) when I’ve started optimizations.

And since I’m not running any advertising campaigns, I don’t need to implement any tracking pixels on my website.

Long story long, but keep it short

This article will be very long. If I’d like to put all details to each section, it would be even longer. So I’ll keep things short and straightforward.

If you have any questions, need clarification, or more details, don’t hesitate to get in touch with me to clarify everything.

Before we start (disclaimer)

  • My approach worked for me and might work only partially for you. In addition, each website is different, so the optimization challenges you need to face will be different.
  • Playing around with the WordPress plugins might cause your website to stop working.
  • Never apply any changes to the production website to test something.
  • Always have a backup.
  • Any 3rd party service like Cloudflare solves some problems but generates other problems/challenges. In this article, I focus only on performance. Security aspects/configuration options are not a part of this article.
  • Some improvements are for free, but other cost money; you need to know what you want to achieve at what cost.
  • If you don’t use WordPress, you can still apply most of the improvements listed below.
  • Google Page Score over 90/100 is still a remarkable result.

Why it is essential to optimize page loading times

Old Chinese sayings: Time is money.

User experience

The longer user waits, the higher chance to abandon the website. More users abandon the website, fewer conversions they will generate.

Optimize WordPress loading time / Optimized loading times vs Bounce Rate
Optimize WordPress loading time / Optimized loading times vs Bounce Rate

E-commerce revenue

Same as above, but include how much money you potentially lose because your website is too slow. If you speed up your website, your digital campaigns would be more efficient, have higher ROI, more happy users, better spend money.

SEO

Content is the king, and Speed is the Queen.

Other SEO optimization steps are essential and give very nice results, but none of them will give you as much as those two mentioned above.

Final results: optimized loading performance

Please find my final WordPress loading time results. The whole process methodology is described below.

Google Page Speed

The score on the desktop page is 100/100. Not sure what could be improved here.

Google Page Speed / Desktop / Optimized loading times
Google Page Speed / Desktop / Optimized loading times

The score on Mobile is 100/100. Important notice is that Tota Blocking Time is 0ms, so there is no code making the whole website waiting for 3rd party domains assets.

Here I still find some room for improvement. There is some unused CSS, but manually removing this CSS or rewriting the whole theme would make no sense. Still, I wonder if it is possible to get average times below 1s. We will see.

Google Page Speed / Mobile / Optimized loading times
Google Page Speed / Mobile / Optimized loading times

dotcom-monitor

Dotcom-monitor is a service that allows you to check loading times from different locations around the world. I’ve selected five destinations to check how the loading times will behave.

I’m pretty happy about the results, to be honest. Of course, all this is thanks to the Cloudflare CDN WordPress pages caching integration.

Desktop results

China’s results are relatively speaking slow. But I guess this is no surprise to anyone.

dotcom-monitor / CDN / Desktop / Optimized loading times
dotcom-monitor / CDN / Desktop / Optimized loading times

Mobile Results (iOS / 4G)

dotcom-monitor / CDN / Mobile, iOS, 4G / Optimized loading times
dotcom-monitor / CDN / Mobile, iOS, 4G / Optimized loading times

Google Chrome Network Tab

All assets on the website are loading from the website domain. The first load has nine requests in total—6 Requests loads during the initial page load.

Google Chrome / Dev Tools / Network / Optimized requests
Google Chrome / Dev Tools / Network / Optimized requests

I’ve created Cloudflare Worker+Route to make a proxy service to handle Plausible Analytics work within my domain to avoid downloading assets (and DNS Lookup) from the plausible.io domain.

Cloudflare / Worker / Proxy for Plausible Analytics
Cloudflare / Worker / Proxy for Plausible Analytics
Google Chrome / Dev Tools / Network / Plausible Analytics Proxy Requests
Google Chrome / Dev Tools / Network / Plausible Analytics Proxy Requests

WordPress Optimization Steps

Now we go to the details. Bellow, you can find details about my setup how I’ve optimized loading time performance.

SiteGround: Web Hosting Services

I’ve decided to choose SiteGround hosting because they offer:

  • Speed & Caching solutions, Dynamic Cache, Memcached.
  • WordPress automated migrator (including many other platforms).
  • Direct integration with Cloudflare.
  • Official WordPress Optimization plugin.
  • Dynamic staging (test) environment.

And few more features that I was looking to have to make my life/work more manageable.

And their website design, usability, ultra simplicity is what you would expect in 2021 from the hosting company.

And pricing is quite reasonable if we compare what we get in return (WP Plan comparison).

WordPress Theme: EckoThemes

After deep research, I’ve bought the EckoThemes template.

  • It does not require jQuery
  • It does not include jQuery
  • The size of the CSS/JS files is relatively small, does not include anything unnecessary.
  • Mobile ready
  • Optimized for performances
  • I like this modern design
  • JavaScript: 14 KB
  • CSS: 180 KB

jQuery

There is no reason why you should not use jQuery. The right question to ask is, WHEN should I not use jQuery?

If you are doing something incredibly complicated, requiring advanced jQuery features, then probably adding an 87 KB payload to your website makes sense. But in most cases, you can use plain JavaScript to reflect the most common jQuery functionalities or migrate your code to skip jQuery.

Google Analytics & Google Tag Manager

I’ve switched to Plausible Analytics because I don’t need and features that GA offers. For example, page loading time is more important to me.

Without jQuery and Google Analytics & GTM, you could save around 200-300KB+ of bandwidth.

Custom Fonts

I’ve removed all custom fonts. Modern default system fonts look good enough to me. Those fonts are designed to be as user-friendly as possible. I don’t see any reason why I should use any custom font on my blog.

WordPress Plugins

To make my life easier, I had to install few additional plugins to make me happy.

SiteGround Optimizer

Official plugin from the hosting provider includes an additional layer of configuration for the backend performance and frontend.

  • Dynamic Caching: On
  • Memcached: On
  • Minify the HTML Output: On
  • Minify JavaScript Files: On
  • Combine JavaScript Files: On
  • Defer Render-blocking JS: On
  • Minify CSS Files: On
  • Combine CSS Files: On
  • Web Fonts Optimization: Off
  • Generate WebP Copies of New Images: Off
  • Cloudflare Full Page Caching: Off

The plugin also includes a WebP generator, so you don’t have to look for a workaround. But if you use Cloudflare, it does not matter.

Regenerate Thumbnails

Then it would help if you regenerated thumbnails to update the sizes of the images and apply compression to the images to reduce the size.

I’ve also added a defined jpeg_quality filter in the functions.php

add_filter( 'jpeg_quality', create_function( '', 'return 80;' ) );

SiteGround Optimizer contains an image optimization option, but I prefer to have manual control on the image compression, but this is just me : )

Cloudflare

By install installing this plugin, you enable your WordPress to automatically cache and erase cache without managing this manually by the Cloudflare website.

It allows you to generate and deliver a static page to all Cloudflare cache servers to improve page loading times to users located around the world.

And since SiteGuard has an official integration, all the DNS configurations are done automatically. Also, billing is integrated into the hosting panel.

Cloudflare CDN service

To describe Cloudflare options would take too much time.

Below you can find a list of options I’ve enabled:

  • SSL/TLS / Edge Certificates / TLS 1.3 – (read more)
  • Speed / Optimization / Polish: Lossy (WebP)
  • Speed / Optimization / Auto Minify
  • Speed / Optimization / Brotli – (read more)
  • Speed / Optimization / Automatic Platform Optimization for WordPress – (read more)
  • Speed / Optimization / Enhanced HTTP/2 Prioritization – (read more)
  • Speed / Optimization / TCP Turbo – (read more)
  • Speed / Optimization / Mirage

With HTTP/2 & HTTP/3 & 0-RTT, you can not make connections and data transmission quicker. However, if your server still uses HTTP/1.1, you could improve loading performance a lot just by enabling those three options.

To eliminate the plausible.io (Plausible Analytics) domain request, I’ve followed the guideline to create Worker with Route entry. Then I’ve adjusted the Plausible snippet on the website to overwrite new endpoints.

My thinking methodology

Before jumping into the optimization services and plugins, make sure you did optimizations work on your end. Services like Cloudflare can support you, but they will not solve all your performance problems. 70% of the optimization work you have to do on your website.

Below I’ve listed the most common topics what is essential during the page optimization process.

Use thumbnail images

Often on WordPress, images displayed on the page are precisely those images you have uploaded. Therefore, make sure you reduce the size of the uploaded images or implement thumbnails in the template.

The size of the uploaded images should not be more significant than 1000×1000 or 1600×1600; There is no need to upload bigger pictures.

Use image/thumbnail compression

I use tinypng.com or ImageOptim to compress images with a value around 75-80%. Photoshop, unfortunately, provides quite a flawed compression algorithm.

Use images lazy loading

LazyLoading, In my opinion, each website should have this implemented. Images load continuously during scrolling the website.

Combine CSS/JS files

Fewer files the browser needs to download, then less time it takes to finish processing your website. You can improve loading times significantly just by combining all (or most) CSS/JS files.

Avoid using jQuery

jQuery is a popular library to build JavaScript applications and websites functionalities. But these days, when JavaScript standardization and browser support are way better than years before, it is unnecessary to use such heavy libraries, unless you really need them.

You can find many premium themes and plugins which does not require jQuery. Just this fact can improve your website speed a lot. Really a lot.

Avoid using document.write() at all cost!

Worst thing ever.

Do you know that scripts loaded by the “document.write()” stop entirely processing the rendering process in the browser until the script inside will finish?

You should replace “document.write()” with an alternative asynchronous code. You can improve loading time by even 20-40% just by fixing this problem.

Try to avoid using custom fonts

Don’t use them if you don’t need to.

System fonts on PC/Mac/Android/iOS are designed to look fantastic and have hardware support in rendering. They don’t require anything to load, and they don’t generate any delay in the website rendering time.

You can save a lot of bandwidth and reduce the time that the browser needs to re-render text with a custom font, and often it is required to re-render/re-compute the whole page because the Font caused re-position of the elements.

I recommend using this Font’s stack to let my website use system font based on its displayed device (WordPress is using this idea as well).

font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

If you need to use custom fonts, please read this article first.

If you need to use custom fonts, use font-display: swap;

If you need to use Custom Font’s, make sure you use max 2-3, with WOFF/WOFF2 format.

Also, please add this CSS property (read more):

font-display: swap;

Use async and defer attributes to prioritize scripts loading and execution

The async attribute is used to indicate to the browser that the script file can be executed. With async, the file gets downloaded asynchronously and then executed as soon as it’s downloaded. Do not use async with scripts that are interacting with the website (inject a tracking pixel).

HTML Script / Async attribute / Loading & Execution timeline
HTML Script / Async attribute / Loading & Execution timeline

The defer attribute tells the browser only to execute the script file once the HTML document has been fully parsed. I recommend adding defer attribute to any tracking pixels or tag managers.

HTML Script / Defer attribute / Loading & Execution tineline
HTML Script / Defer attribute / Loading & Execution tineline

Do you need Google Analytics?

This one will be controversial.

If your business does not require Google Analytics features like BigQuery, audiences/goals for Google Ads, Channel Grouping, user segmentation, Enhanced Ecommerce reporting, Firebase cross-device tracking. Then you probably don’t need Google Analytics.

In the article about Plausible Analytics, I’ve described how heavy GTM & GA can be. Especially with the GA4 that needs to be running along with site standard GA.

Google Chrome / Network / Google Analytics Requests
Google Chrome / Network / Google Analytics Requests

Summary

Optimization is a simple but highly complex process with multiple variations. Therefore, it is essential to keep improving things step-by-step and not chase each point on the score list.

Don’t forget what our goal is and how much you can sacrifice to achieve it. There is always a limit.


  • Contact Me
    Contact me if you need advice or if you need help. Would you please choose the most suitable contact channel for you?

Subscribe to our newsletter!

Show Comments (0)

Comments

Related Articles

5 facts about UTM tracking parameters • Google Analytics
Google Analytics

5 facts about UTM tracking parameters • Google Analytics

Google Analytics UTM tracking parameters, what they are, and how to use them in digital advertising. What Google Analytics UTM’s is? UTM allows us to tag URLs with...

Posted on by Wojtek Andrzejczak
5 steps to integrate Firebase conversions • Google native app campaigns
Campaign tracking

5 steps to integrate Firebase conversions • Google native app campaigns

Integrate Firebase conversions in Google Campaign Manager, Google Display & Video 360 and Google Ads to optimize your native app campaigns.

Posted on by Wojtek Andrzejczak