WordPress is a preferred CMS by many organizations from across the world because it’s easy to use. Approximately 74 million websites run on WordPress. But do you know that it could work slow if not optimized correctly? Here is a guide that will take you through different web performance strategies and recommendations about how to speed up WordPress. Let us start with some basics.
Speed test tools
To understand how effectively the optimization is taking place, you must use a speed test tool. Comparing the report of before and after optimization will provide you with a better idea about how it is impacting the speed. There are numerous speed test tools available online, KeyCDN is one of the best speed test tools. It allows you to test your website from 10 different locations.
Site speed matters
Not only site speed matter for ranking higher in SERPs but also for having a higher conversion rate and providing users with a better experience. In 2010, Google announced that desktop speed affects SERP rank. In 2018, they announced new rules that mobile site speed will also impact your website’s rank.
Therefore, to increase the organic traffic on your website, you must optimize your WordPress website for both desktop and mobile devices. It will ultimately lead to an increase in revenue.
Speed up WordPress
Below given recommendations will help you speed up the WordPress website and decrease the site load time, providing the best user experience to your visitors.
1. Use a solid framework/theme
Every WordPress website consists of a theme or framework coded differently. These themes work differently than each other, and some might be better than others. Like the default themes by WordPress- Twenty Fifteen is faster because it is lightweight.
You must be careful while purchasing themes from marketplaces like Creative Market and ThemeForest. Though these marketplaces consist of many incredible themes, you should know that developers keep adding features to generate more sales.
The Total WordPress theme by WPExplorer is one of the stunning multi-purpose themes that consider the performance. Even when this theme is full of content, it can load under 800 ms. A light framework like Thesis Theme and Genesis also carries a reputation for developing well-coded and fast themes.
2. Utilize caching
It is another critical factor to speed up WordPress. Caching allows storing your posts and pages as static files that are then served to the visitors, ultimately reducing the processing load on your server.
You can achieve this by implementing browser caching, using WordPress caching plugins and server-side caching.
Browser caching – Add expire headers to WordPress
You can also implement browser caching by adding expire headers. These expire headers, let the browser know whether they should grab it from the browser’s cache or should they request a specific file from the server. It will reduce the required number of HTTP requests. A few caching plugins of WordPress allows you to add this, but you can also add the following code to your .htaccess file:
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 month"
# JavaScript
ExpiresByType application/javascript "access plus 1 year"
Caching plugins
Here are a few free and premium caching plugins:
Server caching
Besides the above two methods, you can also utilize the advantage of server-side caching. It is generally performed on sites with high traffic.
Prefetch commonly used domains
Like caching, prefetching is like indicating browsers like chrome to look up the DNS settings before the actual need. It straightens the queries and pages of any prefetched and precached domains so that they load quicker in the future.
It can be done by adding the domain syntax to your header.php file between the <head>“</head> tags. This process will only take place when possible and is non-blocking. Few common examples for this:
Prefetch Google code (jQuery)
<link rel="dns-prefetch" href="//ajax.googleapis.com">
Prefetch Google Fonts
<link rel="dns-prefetch" href="//fonts.googleapis.com">
Prefetch Google Analytics
<link rel="dns-prefetch" href="//www.google-analytics.com">
3. Implement a content delivery network
No matter how much traffic your WordPress website generates or how heavy your WordPress is, implementing a content delivery network (CDN) will benefit your website. A content delivery network takes all your files (JavaScript, CSS, Images) and delivers them on a server close to you, ultimately decreasing the load time. It also influences your bounce rate, visitors experience, time spent on the website, conversion % of the lead and SEO of the website.
Load all assets from WordPress CDN
Ensure that CDN loads even the smallest file of your website like a favicon icon. If you allow everything to load from the CDN, it leads to creating one single connection. To achieve this, you will have to drop the favicon in the root of your WordPress install via FTP and add it to our header.php file between the head tags.
<link rel=”shortcut icon” href=”https://cdn.domain.com/favicon.ico” type=”image/x-icon” />
The following screenshot is an example representing that 100% of the assets of your website are loaded from the CDN. You can follow a similar process for loading your Gravatars.
4. Optimize images using Smart compression
On average, images make 56 per cent of a website’s page weight. Therefore, it is necessary to optimize these images and compress them. Optimus uses a combination of lossy and lossless compression methods to reduce the file size without impacting the quality. It can reduce the images to up to 70%. To achieve this, you must install the plugin and auto-image your images during the upload process.
5. Gzip/Brotli compression
Yet another form of compression is Gzip that compresses CSS, JavaScript and web pages at the server level before sending them to the browser.
Apache
To enable compression, you need to add the following code to your .htaccess file:
<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 (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>
Nginx
You can also add the following code to your nginx.conf file to enable compression:
gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;
Also, you can implement Brotli compression for reducing the size further. It is a relatively new compression algorithm by Google and is known to provide better results than Gzip. Below are the comparison results of the size and loading speed difference between a site compressed using the two given processes.
Source: Sitepoint
6. Reduce the number of WordPress plugins
Many WordPress websites run slowly because several plugins are running in the background, which creates a lot of overhead for the webserver to handle. You must ensure that you install minimum plugins on the website.
Keep an eye on your plugins and when they were updated for the last time. If they have not been updated recently, you will see a warning similar to this on the WordPress plugin page:
These plugins are no longer maintained and can cause performance or compatibility issues. So, such plugins should not exist on the website. Also, check for all the plugins present on your website and how important are they? If it is not in use, you should remove it from the website.
Not all plugins are equally good, and some might impact the speed of the website. Check out Supsystic’s collection to get the list of high-quality WordPress plugins.
7. Optimize web font performance
Research shows that over 57% of websites now use custom fonts, making it an 850% increase since 2011. It is important to use fonts that you need, like WOFF and WOFF2 formats. Services like Typekit base64 cyphers all the format, increasing the download time and slowing down your website.
Open Sans is one of the fastest popular fonts. If you want to speed up WordPress while using Google fonts, Open Sans in combination with WordPress would be the best option, and for a web-safe font, you can use Ariel.
You must also know that the difference between a Google font and a web-safe font is almost 200 ms because of the download time of the font plus the extra HTTP request to Google’s servers.
8. Optimize Font Awesome icons
You can take advantage of your CDN to accelerate the delivery of Font Awesome. If it already exists on your theme, the following tweak on your theme will get it working.
Host Font Awesome on your CDN
If you are running on HTTPS and are on an HTTP/2 supported CDN server, it would be best if you consolidate your requests to a single H2 connection.
Firstly, you should ensure that your Font Awesome file is loaded relative to your initial CSS path. Using this method will ensure that your Font Awesome CSS file gets loaded from the CDN, just like the font file.
The snippet given below is what your Font Awesome file using the CDN URL should look like.
<link href="https://cdn.keycdn.com/css/font-awesome-4.4.0.min.css" rel="stylesheet">
9. Minify and concatenate CSS and JavaScript
Minification and concatenation play a big role if you want to speed up WordPress.
Minification
The process of removing any unwanted characters from your JavaScript, HTML and CSS that are not required to load is called Minification. It includes removal of any:
- White space characters
- Newline characters
- Comments
- Block delimiters
Because of the reduction of the amount of code, the load time speeds up requests from the server.
Concatenate
This process is about combining the JavaScript files and CSS into one file to reduce the HTTP requests. Sometimes, this may lead to an increase in the download time of your file, but usually, it outweighs any additional requests. Parallel downloads can actually be faster for your sire, so it is better to test your website to see which delivers a better result.
To minify and concatenate your code, you can use WordPress plugins. In WP Rocket, you can find the option under the basic tab:
Most of the WP Plugins provide these options, but there are also certain other free lightweight plugins like Better WordPress Minify and Autoptimize that you can use.
Also, the best practice of placing CSS and JavaScript in WordPress is to move JavaScript to the bottom and CSS to the top.
You can use Autoptimize’s pro services to run a full site speed optimization or to enhance your Autoptimize plugin’s configuration.
10. Disable scripts on a page-level basis
Normally, getting rid of plugins is best for a WordPress website, but a plugin called Gonzalez actually allows you to disable unwanted scripts on a site-wide basis and loading on a page level. This plugin is not free, but if you want to invest a little money for great speed, you can go for this option.
Contact Form 7 is a great example to explain the working of this plugin. By default, it loads the script on every single page. With Gonzalez, you can disable it, loading it only on your contact page. The same process is done to your social sharing plugin, etc. This plugin lets you get rid of at least five or more HTTP requests/scripts.
11. Disable hotlinking
Hotlinking is defined as displaying an image on a website by linking to the website hosting it on their server. It means that when someone visits their website, it will load an image from your server while taking up your bandwidth.
By adding the following code to your .htaccess file and updating it with your domain name, you can disable hotlinking.
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]12. Disable pingbacks and trackbacks
Considered as a legacy feature by some, Pingbacks and trackbacks can make website page speed slow. With so many monitoring tools like Google alerts, Ahrefs and other tools available, there are many ways to check if someone has linked to your content.
By making the following changes under the discussion settings in WordPress, you can disable pingbacks and trackbacks. Remember that these changes will only get reflected in your new post.
You can use the bulk edit post feature and change pings to “Do Not Allow” if you want to disable pingbacks on older posts.
13. MySQL tuning
It is equally important to optimize MySQL. Unfortunately, it is specific to your setup and environment, so providing or recommending configuration will not be possible for us. Generally, you can locate the configuration file of MySQL/MariaDB in /etc/my.cnf. Here are a few settings that you must be careful about.
tmp_table_size
query_cache_type
query_cache_size
query_cache_size
join_buffer_size
max_heap_table_size
MySQL Tuner script is one of the highly recommended tools. It is a read-only script that won’t make any configuration changes but will provide an overview of your server’s performance. It will also make some basic recommendations to improve your website. Some other stools that you can use are:
Summary
We hope that this post will help you in achieving your goal of speeding up the WordPress website. There are a lot of modifications that you can do to your website to decrease its loading time. Feel free to share any other strategy that is not mentioned above.