How to speedup WordPress website under 0.8 seconds
How to speed up a WordPress website? This is a commonly asked question, with lots of different approaches and various experiences.
A few months ago I have reactivated my personal blog. Yes, the one you are reading right now. I am trying to write high quality technical articles. However, I also want to make my web site technically optimized.
Therefore, I selected WordPress as a good and simple CMS (Content Management System) and decided to optimize it for speed.
This article explains how to speedup the WordPress website and how to accomplish similar results as I have accomplished here.
I have applied common “How to speedup WordPress website” approaches to this blog and I got these results.
Yup, let’s start with this one.
At SymfonyCon 2019, Diana Ungaro Amos from Blackfire.io had a great presentation “PHP, Symfony and Security”. I have already wrote an detailed article about SymfonyCon here.
However, here are some highlights related to PHP versions and updates:
Also, there are lots of articles explaining speed benefits between versions of PHP.
Just by switching WordPress from PHP 5.6 to PHP 7 decreased the website load time by 50%.
Source: https://geekflare.com/wordpress-php-fpm7/
Yes, this is the most important thing.
If your design is complex and filled in with loads shiny animations, popups, fancy scripts for doing lots of different things your site will be very hard to optimize.
It is not only about performance optimization. Think about your visitors. They are visiting your web site to read high quality content and not to be amazed by your triple-loop-javascript-unicorn-magic-maker that loads for 2 seconds and stops everything else.
I have examined several different WordPress themes (didn’t have time to code one from zero) and selected one with minimal design but with a combination of features that I wanted at the moment. Anything else, I can simply code or add.
Tip: I did not go for any “drag and drop” or “all in one” themes. These popular one size fits all themes are usually very bloated.
Decide which features do you actually need.
If you are planning to develop 10+ features, don’t do it all at once. Develop one feature and optimize for speed, UX and security. Then publish, inform your visitors. Furthermore, give them some time to enjoy fancy new feature and then make next one.
Tip: Make a quality bar and stick to it! Meaning, decide about loading speed, number of requests, sizes of pages etc. and try to work your features around it.
Sometimes it will be hard to fit in features within expectations and it will take extra effort, but it will pay off long-term.
Examples of features that you can reconsider in your WordPress site:
Ok, setting up git repository is not really a speed optimization feature but it is important. And yes, WordPress way of versioning stuff (plugins etc.) is SVN. I know, I know.
Buy really, why should you use GIT?
Well, when you implement new speed optimization approaches sometimes you will get good results. However, sometimes you will get bad results, as decreased performance.
In these cases you want to have history of your code changes, so you can compare what was changed and what went wrong.
In short, these are benefits of using GIT repository for your web site:
Tip: One important thing when using git is to setup a git ignore file properly. With .gitignore file you decide which files you want to synchronize with your git repository and which ones are only local files.
This is example of .gitignore file that I usually use (at least as a basis).
# ignore everything except .gitignore
/*
/*/!.gitignore
!readme.md
# Commit wp-content directory
!wp-content/
# ignore everything in the "wp-content" directory, except:
# "mu-plugins", "plugins", "themes", "languages", "uploads" directory
wp-content/*
!wp-content/mu-plugins/
!wp-content/plugins/
!wp-content/themes/
!wp-content/languages/
!wp-content/uploads/
# ignore these plugins
# ignore specific themes
wp-content/themes/twenty*/
# ignore log files and databases
*.log
*.sql
*.sqliteYour server has to deliver the files to your visitors in order to display the website. For big files, this delivery will take more time.
With GZIP compressions, file sizes will be reduced (compressed), therefore making them faster for delivery.
You can find detailed description on how to setup GZIP compression within various resources:
Essentially, this is a part of .htaccess code that you will find in most of online resources that describe setup of GZIP compression.
# GZIP compression for text files: HTML, CSS, JS, Text, XML, fonts
<IfModule mod_deflate.c>
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
</IfModule>Cleaning up WordPress header is important because of two reasons. Firstly, it will reduce number of unneeded requests.
Therefore, your web site will load faster because there is less requests to be loaded.
Furthermore, removing identification data from your header is also considered a security improvement. Why? Well, because attackers will not be aware of all the details of your website.
Here is a list of several considerations when you want to cleanup your WordPress header:
Detailed explanation on how to cleanup your WordPress header can be found here.
What is a JS and CSS minification?
That is removing all the unnecessary parts from your code in order to reduce bandwidth and load your site faster.
While ago I wrote a detailed article on CSS and JS minification topic.
Read the article and try to apply CSS and JS minification on your site.
When your visitors open your site, your server sends lots of files to their browser. These files include html, css, js files, images, scripts, anything.
Now, when your visitors visit your site again, browser would ask for all of these files again.
That is when the caching comes to play.
Caching mechanism talks to browser and explains which files were changed (or timed out) so browser can pickup only needed files.
For example, if site has 100 files, and only 10 files were changed then browser only needs 10 files to show correct state of the page. So, in this case caching can significantly decrease number of needed files (10 out of 100).
For example, I am using Autoptimize plugin to setup my cache.
Details about Autoptimize plugin can be found here.
Note: I am not affiliated with Autoptimize in any way, I just use this plugin because I like it. You can find any other WordPress caching plugin and you will probably get a very good results.
In any case, these are important caching aspects:
Google Fonts are cool, nice and shiny.
If you use Google Fonts from remote repository you will end up having lots of requests (which will slow down your web site loading).
Therefore, store google fonts locally and reduce number of external requests.
This will have a big impact on your performance.
When you upload images to your WordPress, try to keep their sizes identical to locations where you want to use them in your template.
Considerations:
Scaling images is important because if you reduce size of images, loading time will reduce.
At the moment, I am very satisfied with the performance of this site.
However, there are still things to do.
Without going into much details, I will just make a list here:
Once I implement any of these features I will make a new blog post, so stay tuned! I hope you enjoyed this small optimization use case.
This article is about the code review best practices. It explains code review from the… Read More
API design is an important aspect of modern software development. It allows different systems to… Read More
This article sheds some light related to the question will ChatGPT or AIs in general… Read More
This article provides an overview of new features and deprecations in PHP 8.2. PHP 8.0… Read More
This article is about Automation and Artificial Intelligence in Software Engineering: Experiences, Challenges, and Opportunities.… Read More
PHP is getting more and more features. Enumerations in PHP are one of the latest… Read More