It’s time to write about speeding up WordPress sites. I’ve covered basics of security issues, then we’ve inspected WordPress security plugins and now we’re on another very popular and highly sought topic. It’s one of most popular complains about the platform so let’s have a look at how we can speed it up.
But before we do so we need to know what’s the current speed and why it is slow in the first place. Once we know that we can take appropriate steps in order to optimise performance and make it first.
What’s the speed of my site?
This simple question can leave some people scratching their heads as it depends on your location in relation to your server location and of course the speed of your connection. But many tests do say that your website should be visible in under 2 seconds and dont use more than 1/1,5MB of data (files, images, styles) to show. I’m using on purpose the word show instead of fully load as when you have lots of media content you should load it after the rest of page becomes visible.
Easy way to measure
So let’s measure the load time of your site and let’s see it’s size and all the files it needs for full page load in their full glory… I mean in Chrome Developer Tools, Network toolbar… how to switch it on and use it:
- – open new tab or window in Chrome
- – press ctrl+shift+c or click with right button on any place in the browser window and click Inspect
- – once you see the CDT (Chrome Dev Tools) click on network tab
- – now with this tab active open your website
- – while website open you should see requests to all image, js and other files filling up the tab like on this screenshot:
You can see just images, JS, CSS files or just all the requests. The important part is marked on the screen above (blue frame).
We can see in it: “27 requests | 247 KB transferred | Finish: 2.51s | DOMContentLoaded: 762 ms | Load: 2.44s”
It means that:
– my site made 27 requests (to get css files, image files etc.),
– the page loaded in under 1 second (DOMContantLoaded 762ms) and with images and everything else it took 2.5s
– the first (orange frame) response from server with my page content took just 159ms so I’m ok with hosting speed
– as you can see I didn’t concatenate (join) css and js files 🙂
Press ctrl+r to refresh, press ctrl+shift+r to refresh and clear cache, check the difference between loading times.
You can sort requests by name, time they took, size, when they happened (click on Waterfall column).
In here you can easily spot too big images and see which particular script is making your website load slower.
In the online/offline section (purple frame on screen) you can even simulate loading page over 2G and 3G connections which is more than helpful when it comes to optimising for mobile.
Now as intro to next point on our list… if your site would be slow because of too much traffic or slow hosting you’d see the first response (orange frame again) coming in much later or taking much longer time, in above case it took just 159 milliseconds. But slow response is as well possible if you’re “hitting” your database with too much queries from some plugin so just to be sure check out the rest of this article.
On the other hand if you see that your site is loading let’s say 5MB png image as background that’s not transparent – so it technically could be saved as JPEG and weight 0,5MB instead of ten times more. It means your issues are coming from design/theme/plugin/lack optimisations.
How To Speed Up a WordPress site?
1. OPTIMISE IMAGES
Are you loading image that are simply to big? Are your thumbnails really thumbnails? or does it just changes the site of big images to thumb size, but still loads the whole thing?
Make sure your site is loading appropriate sizes of images by which we mean the thumbs are images small in size and resolution.
Typical mistake in beginner’s plugins and themes is to scale down the images to be displayed as thumbs, but they’re still big in size pictures.
2. LOAD APPROPRIATE IMAGES FOR MOBILE DEVICES
Common pitfall when it comes to responsive design and your site speed is not loading the right images for the right resolutions:
-> your iPhone has resolution of 375×667,
-> but your theme is still loading the header image which is 1200×500 and then just scales it down.
The solution to deliver your site at highest speed is to lazy load images (in next optimisation) AND have different sets for basic resolutions: screen, tablet & mobile.
3. LAZY LOAD IMAGES
Lazy load means simply load images AFTER the website (text and layout) are loaded and displayed on your screen.
Let’s say you have post that has loads of images – i.e. a gallery page with 30 thumbs to 30 big pictures:
– with lazy loading the browser will load scripts, layouts, texts, display it to user & then start fetching images
– without it the user will see “page loading” sign and might not even see any content on your site until each and last image is loaded
So lazy loading works by delaying the loading of images until the visitor’s browser (mobile or desktop) rendered all HTML and loaded scripts.
Take a step further and lazy load images based on the VISITORS resolution/device (mobile/tablet), this will you your site a great speed up!
4. MINIMISE HTML, CSS AND JS
Minification is simply about removing unnecessary characters like whitespaces etc. from your code, it makes it smaller and so faster to load.
5. CONCATENATE CSS & JS
Concatenate means join files of similar extension (.css & .js) together.
Why do this? Currently most of websites use protocol called HTTP 1 – in which there’s a limit on number of concurrent connections that can be made at the same time.
I.e. if you have 60 CSS and JS files the browser will be loading maximum 5 items at once. It won’t care that you’re on super fast connection and will need to process all those requests sequentially.
So when you join multiple CSS styles files into one you’re and though reduce the amount of requests the browser needs to make to load your website.
6. USE CDN – CONTENT DELIVERY NETWORK
Hosting your files in CDN allows for delivering the them from server that’s located closest to visitor.
This way it can strongly speed up your site, especially if your site is on one and your visitor on the other side of the planet.
7. DISPLAY REASONABLE AMOUNT OF POSTS
Simple, but true. Related not only to design, images and other content loading, but as well to number of database queries that needs to be done.
If you’re loading 30 posts at your homepage you might want to reduce it to smaller size, especially if your showing full posts that has a lot of images!
If you still want to display big amounts of posts at once consider using excerpts if you aren’t already.
7. USE EXCERPTS INSTEAD OF FULL POSTS
If you’re showing your full post content on home, category or any other index pages you can always show just excerpts.
This way most of the media in post won’t need to load and hence speed up the loading times of your home and taxonomy pages.
8. REMOVE UNNECESSARY PLUGINS
This is big one as extra plugins not only add to your site. They take their toll on performance too.
You need to remember that the more plugins you will add the slower your site will get. Why is that you could ask?
Well plugins have options and they do things, most of data they access is stored in database so usually adding plugins means:
– adding extra database calls,
– extra CSS files, JS files and images that needs to get loaded
In worst case, the badly designed plugin or theme can really degrade performance of your site or even bring it to a halt.
That’s why it’s so typical for WordPress sites to get slower with time, not only the traffic grows but the owner adds new plugins over time.
One way to deal with this is move functionality from plugin directly into the theme, find other more optimal one or get a custom coded solution.
9. REDUCE AND OPTIMISE YOUR DATABASE QUERIES (database calls)
When your site loads posts, admin dashboard or anything else the most data it shows come from database.
Users, comments and even plugin & theme settings, everything is stored in there.
If your site makes too much calls to database on load of every page then it will get slower because the MySQL database will be getting “hit” with too much of them.
10. USE A GOOD CACHING PLUGIN
To simplify, caching is way of taking all the database and template (your site) results which often includes a lof of calls and processing and saving it as a static version.
By static we mean it won’t make the database calls and so much processing (reading and checking templates etc.) when it will be displayed.
The basic idea is that if you post one time per week there are no changes on your website in the meantime so let’s just display static generated version.
It will save you money and it will make sure the things are faster for your visitors!
Use a plugin that caches not only the pages, but as well database queries. It can speed up your WordPress significantly.
11. USE NGINX INSTEAD OF APACHE FOR WEB SERVER
This is software/architecture tip, but your website runs on (or is served by) some web server.
The two most popular ones are Apache and Nginx, the second one is battle tested/high performance server which can shave of even half of a second or more from your loading times just like that.
– choose wordpress hosting that uses nginx as a web server (and high performance hosting will)
– request installation if you’re using managed hosting and you’re on Apache
– install it by yourself if you have root access and unmanaged hosting
12. INCREASE PHP MEMORY LIMIT
WordPress is written in php and its files are to say executed via it’s interpreter on your hosting server.
Obviously they’re using some memory and that amount can be increased to speed up script processing times.
13. GET YOURSELF A HOSTING THAT USES SSD
SSD drives are these little nifty drives that can read data 10 times fast than their parents, the gold old HDD’s.
Since your website is on a driver of server, and your database files and all the others are there as well…
Yeap, SSD drive will speed up your page, especially in situation where you’re loading a lot of images or other bigger files.
It may be not much, but again – there is a difference so if you’re perfectionist 😉
14. ELIMINATE BLOCKING RESOURCES
What happens is that they need to load before the browser proceed with loading and showing the page to user.
So what can happen is that just 1 script loaded from some other domain can block loading of your page for a long time.
The solutions are:
– to move the ones possible to move (without breaking the site) to the end of site, before the closing of BODY tag
– add async attribute on them so the browser doesn’t wait for them to load
– inline necessary script/styles directly in your page
Please keep in mind that moving some scripts to the bottom of the page might break some functionality so you should try it one by one and test your side along the way.
Try to put as much resource file calls as possible without breaking site just before the </BODY> tag.
15. ENABLE GZIP & TEXT COMPRESSION
Gzip compression will highly reduce the size of the files that are being served by the server so as well, a mandatory one