Being in the business of making the best possible WordPress websites, the loading speed of a website is an integral part of web design and development. Now more than ever actually, given how much Google cares about page speed and optimisation.
Although WordPress is by far and away the most versatile CMS I know of, it’s not the most optimised one one by today’s standard. But there are a few key things that can be done to speed things up.
1. Minify CSS and JS
This is probably the easiest and least technical of the processes on the list. Usually when developing a WordPress website or theme, it becomes essential to use plugins and external javascript libraries. Unfortunately, this means loading more and more JS and CSS files. Minifying scarcely used JS and CSS files (think JS libraries such as a slider and it’s CSS files) can really help improving the loading time. I personally use SASS and Grunt to take care of the minifying on fly, but there are other tools that can do the job just as well.
CSS: http://cssminifier.com/
JS: http://jscompress.com/
Or Refresh-SF http://refresh-sf.com/ which does CSS, JS and HTML
Tip: Better WordPress Minify Wordpress plugin could be a great alternative if the above isn’t an option. Best thing about this plugin is that it uses native WordPress enqueueing system, which means it’s more integrated with the system and doesn’t interfere with the order of your scripts and files.
Note: W3 Total Cache plugin minifies and combines all your CSS and JS files on the fly. It does require fiddling with the settings and a period of trial and error but it’s well worth looking into. Read on to learn more about W3 Total Cache.
2. Concatenate/Combine static CSS and JS
Another quick and easy of of optimising a site is to combine less used CSS and Javascript files. For example if you’ve got a main CSS file and a custom Javascript file then you could simply put all the other JS and CSS files in two single files. I personally use Grunt to take care of it but it’s not difficult to take the simpler way around. Copy and paste the minified CSS and Javascript into two new files, save them and enqueue them in your functions.php or save them in the original files. Don’t forget to comment out or remove the lines that point to the original files.
Note: W3 Total Cache plugin minifies and combines all your CSS and JS files on the fly. It does require fiddling with the settings and a period of trial and error but it’s well worth looking into. Read on to learn more about W3 Total Cache.
3. Move JS files to footer
Another quick but essential way to speed up a WordPress website is to move all Javascript to the footer instead of keeping them in the header. Javascript, by nature usually has to wait till the content of a website has finished loading in order to manipulate them, which in turn blocks the site from rendering till the JS files are fully loaded. Sometimes a JS file might break the site completely if it throws an error while the site is still being loaded. WordPress makes it very easy to force JS files to load after content. If you’re enqueueing JS files in functions.php, use the following format to load them.
wp_enqueue_script ( $handle, $src, array $deps, $ver, $in_footer )
For example, if you’re enqueueing your custom.js file and you want to move it to the footer then do the following
wp_enqueue_script('Custom', get_template_directory_uri() . '/js/main.js', false, '', true);
The last bit of the line where it says “true” is what makes WordPress load your JS files in the footer. It’s a well backed consensus that you should always enqueue JS files using wp_enqueue_script function in the theme functions.php file instead of directly hardcoding them into the header or footer file.
Also, it’s worth mentioning that you might want to take a look at wp_register_script() function if you want to register a script and use it later in a switch statement for example.
4. Leverage browser caching
This is one of the more advanced ways of speeding up a website but essential nevertheless. It’s not unusual for a site to serve a lot of the same images and files over and over as a visitor reloads a site. Caching the static files can significantly improve loading time. This however, requires editing the .htaccess file. Find the .htaccess file in the root of your website/Wordpress installation (Apache only) and copy/paste the following lines at the start or after all the other sections you might have in the file.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
This is what I’m using for a site at the moment. You can customise the length of time you want to cache a file type based on your requirements.
Note: Do note that this requires the Apache mod_expires module turned on. To check if it’s enabled just create a new PHP file with the line <?php phpinfo(); ?>, upload it to your host, run it in a browser and it should give you a list of Apache modules enabled on your account under the “Loaded modules” section. It’s usually enabled on all Linux hosting accounts, if it’s not then you might have to get in touch with your hosting provider.
5. Enable Gzip/DEFLATE Compression
Enabling compression is another way to speed up a website, whether it’s WordPress or not. The reasoning is simple, a compressed version of your site loads faster in a browser than an uncompressed version. When a browser requests a website, if compression is enabled on your host/server, the browser will load the compressed version.
There are two ways of enabling compression, Gzip and Deflate, I personally use DEFLATE because I run an Apache server and that’s what google recommends. If you’re using Nginx then you could use ngx_http_gzip_module or Configure HTTP Compression if you’re on IIS.
To enable DEFLATE compression on your website, open up your .htaccess file again and add the following code:
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml text/css application/javascript image/svg+xml font/eot font/opentype font/ttf
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>
This is what I normally use. The last three lines are there to deal with browser specific bug fixes and are optional. It’s up to you to keep or remove them based on your own test results. The first line is what enables compression of specific file types. If you want to target a specific file type, just Google “mod_deflate .xxx compression” where .xxx is the file extension.
Note: This require mod_deflate Apache module enabled. Use the method I mentioned above to check if it’s enabled. If not, contact your hosting provider.
Tip: On WordPress, you could also use GZip Ninja Speed Compression to enable Gzip compression quickly. It’s worth mentioning that this only works on Apache WordPress installations.
6. WordPress Cache plugin
Caching content with a WordPress plugin can really boost load time in conjunction with browser caching mentioned above. What a caching plugin does is simply cache dynamic content till you publish/update something. There are quite a few very good cache plugins available at the moment, I personally prefer WP Super Cache for small websites simply because it’s easy to setup. You could use W3 Total Cache if you like fiddling with settings and want to fine tune your output. W3 Total Cache also supports CDN which makes it the best candidate for people who are using a CDN service.
Caution: Please do note that if you’ve just started developing for WordPress, it’s best to read up on W3 Total Cache before installing. It can be overwhelming if you don’t know your way around WordPress. If you’re really inclined to test W3 Total Cache on a website, I’d suggest doing a fresh install of WordPress in a sub-directory just to make sure nothing is compromised in case something goes wrong.
Note: W3 Total Cache let’s you enable Gzip compression on the fly. It’s under the Performance/Browser Cache menu.
7. Bonus tip: Using Cloudflare free service
It’s up for debate whether using Cloudflare to reduce loading time even further actually works, but it’s certainly deserves a mention. Although I have found the improvements to be negligible, it’s fun to to try new tricks out. I won’t go through the whole process here since Cloudflare themselves have published the process of integrating Cloudfare with WordPress and it’s dead simple to follow.
They’ve also written about how to integrate Cloudflare with W3 Total Cache at https://blog-cloudflare-com.webpkgcache.com/doc/-/s/blog.cloudflare.com/w3-total-cache-w3tc-total-cloudflare-integrat/
MORE LIKE THIS
VIEW ALL
