Introduction
I recently updated my QuickCoder WordPress blog and finally tackled the performance issued I had for a long time. My major problem was that the page loading time was too slow. Since the first impression matters and I get a ton of visitors from search engines, this problem needs to be taken care of at some point. Here is how to improve your WordPress page speed.
To track your performance, you can use Google Search Console which checks all your URLs. There are many alternative tools across the internet like PageSpeed Insights which even gives handy advice on how to improve your ratings.
My PageSpeed report for the main page stated that I had two major flaws in my setup
- No compression enabled
- Images in PNG format
By fixing those two issues, I could improve my score to over 90 for desktop and mobile.
Ideally, you should do this already when setting up your blog since it means extra work to do it afterwards. However, my tips here might help you to overcome some of the struggles I had to deal with and improve your WordPress page speed.
Enabling compression
I don’t even know why this is not a default setting in 2025 since you can expect up to 75% less data transmission when visiting a website.
To test if GZIP/Brotli compression is enabled, try out this tool.
There are many WordPress plugins that claim to enable GZIP compression (W3 Total Cache, WP Super Cache, WP Rocket) but they didn’t work on my site for whatever reason.
So, I manually added this snippet in my .htaccess file to enable GZIP and Brotli compression. Brotli is a newer method and usually compresses better than GZIP. However, it has not yet the global support like GZIP does.
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>
<IfModule mod_brotli.c>
AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css application/javascript application/x-javascript application/json application/xml application/xhtml+xml image/svg+xml
</IfModule>If you run a WordPress blog, make sure to place this code outside the #BEGIN WordPress … #END WordPress block. Otherwise, WordPress plugins could overwrite these values. Usually this would be desired but since the plugins didn’t work for me, I don’t want them to break things.
By editing the .htaccess configuration file, I eventually had compression enabled.
Replacing PNG images
I always thought PNG was fine. Maybe I am too old. Today, you should use WebP as a better alternative. Your files will be smaller. You won’t notice a difference in image quality (except if you are running a photo gallery site maybe).
Ok, so I have like 150 pages on my blog with different images. I am not going to replace all of them. It would be way too much effort. So I started focusing on images that are used more often. Article category images, logos, ad banners, and so on. By replacing them, I could already see an improvement.
To convert images to WebP, I used FreeConvert. I uploaded the images and got a WebP version back in seconds.
But … how can I replace my PNG images with the WebP versions without breaking all references? Of course, they have a different file name now.
Here are two ideas to manage this:
- Add a
.htaccessrule to serve a WebP image when available and supported by the browser - Use a WordPress plugin to replace the images
Let’s start with the rule. Here it is (thanks, ChatGPT):
<IfModule mod_rewrite.c>
RewriteEngine On
# Check if browser supports WebP
RewriteCond %{HTTP_ACCEPT} image/webp
# Check if WebP version exists
RewriteCond %{REQUEST_FILENAME}.webp -f
# Redirect to .webp version
RewriteRule (.+)\.png$ $1.png.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>It checks if a WebP version of a requested PNG file exists and returns this instead of the PNG file.
The benefit is that you don’t need to change anything. Just upload the WebP versions of your images to the same folder as the PNG file and it works. For me, this is not an option because my upload folder is structured by year and month subfolders.
On the plugin side I can recommend Enable Media Replace. It can replace any image with a new one and fix all references (remember that we replace image.png with image.webp). However, external sources will lead to a 404 with that approach.
It has never been easier to improve your WordPress page speed just by replacing images!
Additional image plugin tips
To automatically convert any uploaded image to WebP, try out Modern Image Formats. It takes your source image, converts it, and uploads it as a WebP or AVIF image.
However, it does not convert your existing images by default. If you want that, you additionally need the WP CLI and the command wp media regenerate. Then, all your images will be converted to a modern format. Together with the .htaccess rule from the previous section, you should now only serve modern image formats to your users!
Further improvements
As mentioned my PageSpeed score is not perfect. The tool lists additional potential improvements to max out the score. Here is what’s still possible for my website.
Reducing initial server response time is affected by caching, your theme, plugins, your hoster, and other factors. Check the already mentioned compression plugins (they also have a caching option) to set up and enable caching.
Render-blocking resources is a cookie banner on my website. Since it is legally required to show it, I cannot remove it. I could go for an alternative solution with less impact. Maybe I’ll do that in the future.
The style and script files are already minified, so there is not much to optimize here.
Conclusion
It should be easy to improve your WordPress page speed but sometimes it just takes manual work. I hope my insights can help you max out your site so that your users enjoy their visit.
Related articles
Firebase
