Speed tips for Wordpress websites
In some circles WordPress, has a very bad reputation for being slow. There are few simple optimizations that you do, to massively speed up your website. A fast site is important. First of all, users will quickly bounce from your website, if it is way too slow. Also, page speed is an important ranking factor in Google. Even though this article focusses on Wordpress, you can use most tips for other web projects.
Note: I mainly use NGINX for hosting, so I have more knowledge on that system and thus the NGINX examples are more comprehensive than the Apache examples.
Enable GZIP
GZIP is a commonly used compression algorithm for web pages. GZIP can reduce text based transfer date by over 60%. GZIP is supported by nearly any modern web browser. Unfortunately, GZIP doesn’t work with binary files like images. Still, a lot of other data that get’s transferred during a web request is text based, such as HTML, CSS stylesheets, Javascript files and SVG graphics. To enable GZIP, you often need to edit some web server configuration files.
GZIP encoding is not recommend on cheaper hosts or cheap servers, due to the extra resources it takes to serve GZIP pages.
NGINX
To able to enable GZIP on a NGINX based web server, you need to have full shell access and root (sudo) access. This may not be the case if you are on a shared hosting plan and only have FTP access. In that case, contact your hosting company. To enable GZIP in NGINX, add these lines to the http block in your main NGINX config file:
gzip on;gzip_vary on;gzip_proxied expired no-cache no-store private auth;gzip_types application/json image/svg+xml text/plain text/css text/xml application/javascript text/javascript application/x-javascript application/xml;
Your config is probably stored in /etc/nginx/nginx.conf . Make sure to backup this file before you edit anything. Afterwards, restart your NGINX daemon.
Apache
For Apache you have two options. You can either edit the VHOST file for your website or edit the .htaccess in the webroot of your site, if you only have FTP access. Add these lines to the vhost or htaccess:
<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>After you have enabled GZIP on your webserver, you can use https://checkgzipcompression.com/ to check if you have properly enabled GZIP and how much bandwidth it saves you.
Cache static assets
It is a good practice to enable caching for your assets such as images, CSS and Javascript. When you do this, the user’s browser will store these files for a limited time. That means that the browser doesn’t have to re-download all assets when the user visits your site again or even when they go to a different page. A downside of asset caching, is that when you update your files, users will still use the old files. There are two ways to combat this problem.
Firstly, you can use a technique called cache busting. This means that you re include the assets in your pages, but with a different name. Just one different letter is enough. A commonly used technique is appending a ?v=… parameter to the urls. After each update, you increase the version number and the assets get downloaded again. Some asset manager systems generate random names for files after each update.
Secondly you can add an expiration date for the cache. Commonly used are 1 day, 1 month or 1 year. In the future, the browser will delete the cached assets and download the latest versions.
NGINX
Add these lines to the server block of your website/webserver:
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {expires 1M;access_log off;add_header Cache-Control "public";}location ~* \.(?:css|js)$ {expires 1y;access_log off;add_header Cache-Control "public";}
You can modify the expires parameter to change how long you want to have the assets cached.
Apache
Add these lines to the vhost or .htaccces (source: http://metaskills.net/2006/02/19/how-to-control-browser-caching-with-apache-2/)
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 120 minutes"
ExpiresByType image/jpeg "access plus 120 minutes"
ExpiresByType image/png "access plus 120 minutes"
ExpiresByType text/css "access plus 60 minutes"
ExpiresByType text/javascript "access plus 60 minutes"
ExpiresByType application/x-javascript "access plus 60 minutes"
ExpiresByType text/xml "access plus 60 minutes"
</IfModule>Optimize images
Try to compress your images before putting them online. I often use https://tinyjpg.com/ and https://tinypng.com/ to compress images without major quality loss. Also, pay attention to the resolution of your images. Does it make sense to use a 4000 by 2000 pixel image for a blog header that is 1000px wide?
Wordpress plugins like EWWW and Smush can auto optimize images for you after you upload them.
I also recommend this article, for bulk optimizing png and jpg files using Linux CLI tools.
Lastly consider using a CDN like MaxCDN or CloudFlare to host your images. This will save processing power and bandwidth on your servers. These companies have world wide datacenters, thus that means that someone from Paris will get content from an EU server and someone from Chigago will be served by an US server. The closer the user is to the datacenter, the faster your page will load.
Use a cache plugin
When an user visits your Wordpress website, millions of PHP lines are executed each time. This is very time consuming and a big waste when the content of your posts doesn’t change often. Fortunately, there are plugins that store all your pages as compiled html files on disk. They refresh the cache automatically after a certain time.
My favorite is WP super cache. I recommend that under advanced setting, you turn on: “rebuild cache after post update”. This will auto delete the cache after each post save, meaning that users will always see the latest version of your pages. If you have Wordpress multisite network, WP super cache can insert global settings that are the same on each site.
There are a lot of other alternatives. It’s best that you carefully compare which cache plugin best suits your needs. Important note: most cache plugins can auto config an Apache based website, because they can write to .htaccess. For NGINX, you often need to edit the config files yourself.
Use minification
Lastly, you should minify your assets and HTML. This means that you strip all whitespace and comments from your code. Web browsers don’t care about code readability. I use JHC optimize for this. JHC automatically bundles and minifies your stylesheets and Javascript files. It can also minify your HTML.
When using JHC and something like WP Super cache, you need to clear both the JHC cache and your caching plugin’s cache to update your website. Also at the highest HTML minify level, JHC strips away quote tags from HTML. This can confuse some browsers and validation bots.
For example, after enabling JHC at the highest level, Google webmaster tools told me that my HREFLANG meta tags weren’t properly implemented. It turns out that it couldn’t parse them properly because the quotes were removed.
When developing or editing a theme, use something like Gulp to auto minify your stylesheets and javascript files. There are also online tools that can minify your code.
Conclusion
I hope that after implementing these tips, you see a significant boost in the speed of your website. You should also periodically test your site with the “Pagespeed Insights” tools from Google. This a free tool that tells you how you can improve the speed of your website. The tool also explains why certain optimizations are needed for a smooth web experience. Some of the tips in this article, like the difference that GZIP makes, were discovered by me after I ran the page speed tool.
If you have more tips or if you disagree with certain portions of this article, feel free to comment. If you liked this article, please give it a 👏🏻 and share it around :)
About the author
I’m a freelancer web developer and online marketer from the Netherlands. I’m specialized in creating and optimizing websites where the focus is user experience. In may 2017, I was included in the list of the TOP 500 young innovators by the Next Web. If you want to reach out, please contact me on Twitter or check my website:
