You can really improve your website’s performance without spending any money by tuning up the delivery of pages, images and scripts using the tips given by the Google Page Speed Tools, and by hosting images on a CDN (content delivery network) such as Amazon S3 (Simple Storage Service). But first let’s take a peak under the bonnet of how a web page is built.
Have you ever wondered how the web page you are looking at came into being?
What Happens The First Time A Web Page is Visited?
When your WordPress web page is visited for the very first time, something like this had to happen:
- Someone clicks a link to go to a page on your website
- Your web server hears the call, finishes what he is already doing, and eventually gets around to attending to the call.
- The web server instructs the WordPress PHP programs to build the page that has been requested. WordPress looks in the database for the page or post HTML and text, then slaps the page header, footer and sidebars around the edges.
- Once the page is rendered you can look at it, and no doubt you will click a link on it, whereby the whole process starts again for the next page.
OK – so the apparent speed of my site is down to how fast my webserver can re-construct each page and send it down to the visitor’s browser??
What Happens The Second And Subsequent Times A Web Page Is Visited?
When a visitor comes to your site more than once, and the files associated with those pages (assuming he has not cleared his cache sine his last visit), will have already been cached in his browser, so this will make the page appear faster to load.
So How Can I Improve The Performance Of My WebServer?
Well, you can upgrade your hosting account to get a faster, more expensive webserver. But before you do that, you could also install a caching plugin. We use WP Super Cache. It’s a free WordPress plugin and it works quite well.
How Page Caching Works
When WP Super Cache is installed on your site, it remembers the HTML version of each page as it is visited, and stores it. So when the first person visits a page, the webserver still has to construct the page from scratch as described above, reading from the database and running PHP programs within WordPress. All very time-consuming.
Cache : In computing terms, a cache is a place where you place some data so it can be found the next time you need it, quickly and easily. This is done when the original retrieval of the data is work intensive.
But once the page has been visited by a single person, because WP Super Cache holds onto the built page, the next time someone visits it, the webserver delivers the pre-built page without having to construct it each time. This saves time and makes your site run faster.
Rebuilding the Cache With WP Super Cache
WP Super Cache can be set to rebuild the page every so often and the default value is every 3 minutes. This ensures that the saved version of the page is relatively fresh. You can of course set the value to be much longer – like every hour or more if you wish.
Now obviously if the page changes, the saved page will be out of date. Saved (or cached) pages are served up to
- Any user who are is not logged in.
- Any user who has not left a comment
- Any user not viewing a password protected post.
This means that anyone leaving a comment on your site will see the real page (not an out of date cached page). But in doing so they cause WP Super Cache to generate a cached version of the page for subsequent viewers. Read the section half-way down the page entitled : What does the Cache Rebuild feature do? to find out more.
How Can I Make My Site Appear Faster To Visitors?
Once the page has arrived at the visitor’s browser, WP Super Cache has done all it can on the server. Any further optimization has to take effect at the user’s browser. To find out what performance improvements you need to make, use Google’s Page Speed Tool.
Page Speed will help you identify all the areas on your site where performance improvements can be made.
- set the expiry date on files so that when people visit your site for the second and subsequent times, their browsers don’t re-download files they’ve already got in their browser cache from the last time they visited your site.
How To Enable Compression For Files Hosted On My Server
Compression reduces the size of the files and hence it takes less time to send the file to the visitor’s browser. Amazingly, the time it takes to compress the file on the server and and for the browser to decompress it when it arrives, is greatly outweighed by the time saved by sending the resulting smaller file over the internet.
Everyone should take this step and update their .htaccess files. Even if you host your images on say Amazon S3, you will still want to improve the performance of files on the your server by enabling file compression.
The easiest way to implement this on an Apache web server is via the site’s .htaccess file. This method is not the most efficient if you have the ability to update the virtual host definitions directly however it is the easiest to maintain. But do be aware that if you mess up the file with a syntax error your website will not load so be very careful of typos.
On an Apache web server add the following code to the top of the .htaccess file in the root directory of your website – which is typically called public_html or httpdocs – to enable compression.
# BEGIN MIME Type Fixes
AddType image/x-icon .ico
AddType text/css .css
# END MIME TYPES
# BEGIN DEFLATE
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/cs
# END DEFLATE
If you are running WordPress on a Windows Server running IIS then see How to enable compression on IIS.
How To Enable Browser Caching For Files Hosted On My Server
Everyone should take the next step. Even if you host on Amazon S3. You will still want to enable caching for any files that remain on your server but that will be downloaded to the visitor’s browser.
For an apache web server add the following code to the top of the .htaccess file on your web server to leverage browser caching.
# BEGIN Cache-Control Headers
Header set Cache-Control "public"
Header set Cache-Control "public"
Header set Cache-Control "public"
Header set Cache-Control "private, must-revalidate"
# END Cache-Control Headers
# BEGIN Turn ETags Off
# END Turn ETags Off
# BEGIN Expires Headers
ExpiresByType text/html "access plus 1 month"
ExpiresByType text/css "access plus 3 months"
ExpiresByType image/gif "access plus 3 months"
ExpiresByType image/jpeg "access plus 3 months"
ExpiresByType image/png "access plus 3 months"
ExpiresByType image/x-icon "access plus 1 year"
# END Expires Headers
For other web servers see Performing Tuning with Static File Caching
You can either increase or decrease the expiration periods according to the particulars of your site. Typical expiry periods range between 1 day and 3 months depending on how often you expect to update these ‘static’ files.
How To Enable Browser Caching For Files Hosted On Amazon S3/Cloudfront
If you do store your files on Amazon S3 and Cloudfront they will be delivered quickly to the browser but they will be downloaded more often that they need to, and this costs you money for every download. There is a significant savings opportunity of more than 50% in your Amazon charges presented by leveraging browser caching for Amazon S3 files. If you set expiration dates on Amazon files then they are downloaded just once for each user. The following video shows you how to set the expiration dates using the Amazon S3 Panel on a file by file basis.
You can also use free client tools such as Cyberduck which work on PC and MAC platforms or premium tools such as ABucket Explorer which allow you to update expiration dates on a group of Amazon S3 hosted files at the same time.
To Minify Or Not To Minify?
However if you have enabled compression then minification does add not much additional value unless the files are large and contain lots of programming comments or notes.