Improve Page Load Times
If visitors wait for a page to load, you’ve created a bad first impression. Your visitors want their question answered. So, they click on the first promising link or menu item. If the page doesn’t answer their question, they click the back-button. Unsurprisingly, the back-button is the most used browser feature. What’s more, these days Google slightly downgrades slow loading pages. Unfortunately, speeding up WordPress based websites need a little extra effort.
WebPagetest.org is a useful test. Fig 1 shows some results – achieved on £16/year hosting.
Three factors determine the page-load-times, which are, in order of importance:
- The number of files your visitors download to see the web-page.
- The total size of the files;
- How quickly the web-host responds to your visitors’ requests for a file.
So, just reduce the number of files, reduce the total size of the files, and speed up the response of the web host.
I use the WordPress W3 Total Cache plug-in. It can work well. I’ve reduced page load-times from over 10 seconds to around 1.5 seconds. It’s usually possible to load pages from low-cost web-hosts in under 2 seconds.
There are plenty of posts recommending appropriate settings for W3 Total Cache. This article explains the effect of the settings and their options when using a shared host.
W3 Total Cache can be tricky. I don’t think it’s the plug-in’s fault. W3 Total Cache writes to the .htaccess and wp-content files. Security plug-ins may not grant W3 Total Cache permission to write to these files. The best performance often requires Apache modules that low-cost web hosting services don’t provide. What’s more, it might not work with badly written plugins.
How to Reduce the number of files downloaded
Fig 2 – Combine and Minify Files
So the following non-blocking options in Fig 4 may not work:
Fig 5 Manual CSS Minification
- Enable: enables minification and combining of CSS files.
- Combine only: just combines the files, but doesn’t minify them. I suspect that if both Combine only and Enable are checked, then you don’t get comment and line break removal.
- Preserved comment removal: once the site is in production, there’s no need for the visitor to download your CSS comments
- Line break removal: removes line breaks. – sometimes removing line breaks reveals CSS bugs.
@import processing, which imports multiple CSS files to create a single CSS file, has a couple of options:
- Bubble: This might refer to a patch that forces imported CSS to appear at the top of the CSS file. About a year ago the plug-in author suggested bubble was unreliable.
- Process: This option imports additional CSS files to create a single file.
Fig 6 HTML Minification
The other setting in the minify tab is HTML minification, which I enable. However, inline JS minification might break some scripts.
Add images to CSS or HTML
Read more about Speeding up the Server’s response