Page speed directly impacts the site’s Google ranking, its traffic, number of subscribers, and the revenue you ultimately get. When loading times are too slow, users tend to bounce off before they even see what you offer and how awesome your UI/UX design is. The bad news is that sluggish performance is a common problem of WordPress sites. But, fortunately, it can be easily solved with the right optimization measures. This article explains how to speed up a WordPress site.
What you need to know before reading this article
You’ll find this article useful if you want to make your WordPress site faster but don’t know where to start.
We’ll discuss some common issues that may slow down your website and provide you with step-by-step instructions on how to fix them. More specifically, we will explain how to optimize a WordPress site speed using plugins and give you basic recommendations on how to configure a web server. In our experience, these steps should solve the problem in 90% of cases.
Naturally, to get the most out of the information below, you should be familiar with WordPress and know how to install plugins.
A little caveat here. It’s not always possible to speed up WordPress website performance using only plugins. In some instances, more complex measures are required, for example, code optimization and complex server configurations. If it’s the case, you’ll also need to have some basic programming and system administration skills. But we’ll not cover code optimization in this article.
And, lastly, we use Google PageSpeed Insights and GTmetrix to test page loading speed. They are the most popular performance assessment tools in the market.
So, let’s get to work.
Why your WordPress website is running slow
Before speeding up WordPress load time, you need to know what slows your site down. Here are the main reasons for poor WordPress performance:
- large-size images and videos, or there are too many of them on one page
- the excessive number of unnecessary WordPress plugins (some of them can be replaced with a few lines of code)
- browser and server caching is not configured
- some WordPress plugins are outdated (they need regular updates)
- too long web pages that load fully at once (a lazy loading technique is not implemented)
- incorrect server configuration (e.g., GZIP compression and caching are disabled)
- too many third-party ad scripts that aren’t configured correctly
- CSS and JavaScript files are not optimized:
- file minification is not configured
- there is code in CSS and JS that is used only on separate pages but displayed on all of them
- the order of JS file loading is incorrect (using synchronous loading instead of asynchronous loading)
- incorrect font format (it’s recommended to use woff2 to reduce the file size)
- low code quality (e.g., spaghetti code, duplications, not optimized requests to a database)
Now that you know what affects page response time, let’s figure out how to speed up the WordPress website.
How to prepare your WordPress website for page speed optimization
Before you start improving your website’s page loading time, you need to back up its database and all files. The reason is that a website may stop working or work incorrectly after optimization is completed. It’s quite a common problem. So, you need to have an opportunity to restore it to the previous version with all its original settings.
Also, it would be ideal if you could create an exact copy of your WordPress website on a test server. Doing so will allow you to experiment and not worry about the risk of a site failure. After you make sure that everything works as it should, you can apply the same optimization measures to the real website. Read how to make a copy of your WordPress website in this blog post.
Your second step should be updating all WordPress plugins and disabling those of them which you don’t use. It’s recommended to check the site’s performance after each action since it’s not always obvious what changes it may trigger.
It’s also critical to know on what web server your WordPress is hosted. In this article, we’ll talk about Apache and Nginx, which are the two most widely-used options. If you’re not sure what your web server is, you can easily check it. Just enable developer mode and find the following parameters:
Since the settings for caching and server compression are different for Apache and Nginx, they need to be configured differently.
Note that, in some cases, both web servers are used simultaneously in one solution: Apache typically handles routing, while the Nginx’s task is to serve out files.
How to increase page loading speed
To make your WordPress website faster, you need to get rid of the issues that make it slow. Basically, you have two options here: either install the right plugins or manually configure a web server. We’ll explain how to speed up WordPress and solve specific problems using either of these options or each of them (where possible).
Image optimization
It’s one of the most effective and relatively simple ways to speed up WordPress load time. To optimize images, you can use plugins or a command line interface (CLI). There is also an option to compress images manually by downloading them via FTP (or otherwise), optimizing, and uploading them again to a website. But we won’t cover it in this article.
Just one important aspect before we start talking about technical stuff. Sometimes Google PageSpeed Insights doesn’t detect the problem if an image is optimized but looks terrible on high-resolution devices. So, it’s essential to keep the balance between image quality and size.
Optimizing images with WordPress plugins
You can use the following plugins to make images on your WordPress website more SEO-friendly:
- Regenerate Thumbnails. This plugin allows you to update image sizes for all files in the WordPress Media Library. It also deletes old thumbnail images that are no longer used, freeing up server space.
You can download the Regenerate Thumbnails plugin at this link. - Optimus — WordPress Image Optimizer. This plugin automatically optimizes and compresses images while they are being uploaded. It preserves the image quality, but the downside is that the free version has an image size limit of 100kB. You can download this plugin at this link along with its documentation here.
Now let’s move to the second option.
Optimizing images using a CLI
If the mentioned WordPress plugins are not a good fit for you for some reason, you can choose one of these image optimization utilities:
- JPEGoptim. This program allows you to optimize JPEG images and convert them to progressive files without losing their quality. The matter is that standard JPEG images are loaded from top to bottom — one line at a time. Meanwhile, progressive JPEG lets an image appear at once as a whole but in successive waves. So you see only a blurred picture at first, but the clarity is gained gradually as the loading process progresses. With the progressive JPEG format, site visitors can get a general idea of an image when only an insignificant part of a file has been loaded.
- OptiPNG. It is a utility for the lossless optimization of PNG files. It reduces the image size by removing unimportant features from the input files (e.g., full color for black and white pictures).
If you properly optimize images with the help of WordPress plugins or utilities, they should pass the PageSpeed’s test. But sometimes they don’t. So, you may need to apply some additional tricks.
Getting along with PageSpeed Insights
If you’ve optimized the images, but Google PageSpeed Insights still identifies them as a problem, you can try to do the following:
- change the image format. For example, you can use SVG or WebP. But in this case, you need to consider some important aspects
- use an HTML picture element. It allows a browser to choose the most suitable image for a particular screen size and resolution rather than upload the same image in all cases.
At this point, we’ve discussed all the main options you have when it comes to image optimization. Now, it’s time to talk about other ways to speed up your WordPress site.
Solving page speed issues with multi-functional plugins
To reduce the latency of your WordPress site, you can use a multi-purpose plugin. There are three main options:
- W3 Total Cache
- WP Rocket
- Autoptimize
Importantly, these WordPress plugins are interchangeable, so you should pick just one of them. It’s highly not recommended to use any two of these plugins together.
All three plugins cover the following areas for page speed optimization:
- Caching. It’s a data storage layer that temporarily stores copies of web files so they can be accessed faster during future requests.
- Server compression (GZIP compression). When a visitor enters a web page, a browser loads many files with different extensions. The larger their sizes are, the longer the web content takes to load. GZIP is a technology that compresses .HTML, .XML, .JS, and .CSS files, which reduces the site’s response time.
- Minification. It’s the process of cleaning up unnecessary data (e.g., whitespaces and comments) from CSS and JavaScript files so that the browser can render the page faster. Also, minification improves the site’s SERP ranking.
- Concatenation. It combines all CSS files and JS files into two large files: a stylesheet file and a script file. Concatenation reduces the number of HTML requests, resulting in faster page load times.
- Lazy loading. It delays the loading of heavy web elements until a user scrolls down the page and reaches them. This optimization technique is especially useful if a WordPress site contains a lot of images and videos.
Besides, there are separate plugins for lazy loading, for example, Lazy Load by WP Rocket (download here) and a3 Lazy Load (download here). The latter one is more mobile-oriented but, actually, both of them are good.
When you install one of the multi-functional plugins (W3 Total Cache, WP Rocket, or Autoptimize), you need to pay attention to the type of your site’s web server (Apache or Nginx). It’s an important aspect since these plugins make changes to the .htaccess file in order to configure browser caching and server compression (the Deflate and GZIP methods).
The .htaccess file is an Apache’s configuration file, so it won’t work on Nginx. That’s why if your site is hosted on Nginx, you’ll need to configure server settings manually. We’ll explain how to do this in the Nginx optimization section later in this article.
If plugins haven’t done the trick, you can still speed up your WordPress website. Let’s cover this next.
Solving page speed issues without the plugins
It’s also possible to configure caching, compress the transmitted data, and modify web server response headers without using WordPress plugins. Here are the steps you need to take.
Apache optimization
The configurations described below should be done in the .htaccess file. It is located in the site’s root directory. You need to add these configurations to the end of this file.
Cache settings
First, make sure that the mod_expires module is enabled. It should be active by default, but rare exceptions may occur.
If the module is enabled, you need to specify the storage period for each file type.
Example:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresDefault "access 1 month"
</IfModule>
Cache-control header
The Cache-control HTTP header is used to manage browser caching. It must be passed along with all files that need to be cached. The below example should be sufficient for the majority of scenarios.
Example:
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>
Server response compression
To compress server response, you can use two methods and, consequently, two modules: mod_gzip and mod_deflate. We’ll focus on the mod_deflate module since this method is more up-to-date and uses less CPU time.
<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
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>
Do not forget to restart Apache to apply the above configurations. Use the command: sudo service apache2 restart (it may be different in some operating systems).
Nginx optimization
If your site is hosted on the Nginx, you’ll need to make changes to the domain configuration file in order to optimize the web server. Here is how to do this.
Enabling and configuring compression:
gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_http_version 1.1;
gzip_vary on;
gzip_comp_level 6;
gzip_proxied any;
gzip_types text/plain text/html text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript text/x-js;
gzip_buffers 16 8k;
Enabling caching
location ~* \.html$ {
expires 7d;
}
location ~* \.(ogg|ogv|svg|svgz|eot|otf|woff|mp4|mp3|ttf|css|rss|atom|js|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)(\?ver=[0-9.]+)?$ {
access_log off;
log_not_found off;
expires max;
}
Do not forget to restart Nginx to apply the above configurations. Use the command: sudo service nginx restart (it may be different in some operating systems).
WordPress optimization checklist
To make your life easier, here is a list of things that you should remember to complete the WordPress optimization process successfully:
- always back up a website before you start optimization
- do all the experiments on the site’s exact copy, not the real website
- update all plugins and disable those of them which you don’t use
- after making any changes, clear the browser and server cache; then, test a website to make sure that it works as before
- try to keep the balance between image quality and size
- start with plugins; try code optimization and server settings configurations only if the plugins didn’t solve the problem
- don’t make changes to the server settings if you don’t know how it works
The final word
WordPress optimization can be easy if you have some technical background and know how plugins and servers work. But if you have no confidence in your skills or abilities, it’s better to hire professionals. Flexi IT provides WordPress development services and has a proven track record of WordPress optimization projects. We will speed up your WordPress site and improve its PageSpeed score while you can focus on more strategic tasks.
