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.
Contents
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.
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.
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.
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.
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.
Mobile Results (iOS / 4G)
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.
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.
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:
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
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:
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.
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).
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).
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.
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.
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.
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok