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.
- Having constructed the page HTML, the web server is finally ready to send the page to the visitor’s web browser. At this point typically, the page will consist of HTML markup, CSS and JavaScript.
- When the visitor’s web browser receives the markup, if that further refers to any files, such as external CSS, videos, images or external JavaScript files (and most web pages do), the visitor’s browser goes and fetches these to their computer and places them in the browser cache. It then reads the markup including any external files (now locally held in the visitor’s browser’s cache) and renders that into something humans can understand.
- Next the page is rendered onto the visitor’s computer screen, and any images or videos it had to fetch are placed in the appropriate places on the page, and any CSS is applied and any JavaScript is run
- 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?
No matter where you keep your files either on your server, on Amazon S3 or on both, if you implement browser caching, when someone visits your webpage for the second or subsequent time, all the images and external CSS and Javascript files will already in their browser’s cache.
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.
The main things you can address are browser caching, file compression and sizing. This applies to the ‘static content’ on the site: the images, the JavaScript files and CSS stylesheets too. If you keep your images and any extra JavaScript files you may have added to your site on your own server, you can update your .htaccess file to achieve the following :
- compress the text files (like JavaScript and CSS files) into zip files – which means they will be downloaded to the users’s browser faster as they’ve had all the white space squashed out of them,
- 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.
[code]
# BEGIN MIME Type Fixes
AddType image/x-icon .ico
AddType text/javascript .js
AddType text/css .css
# END MIME TYPES
# BEGIN DEFLATE
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/cs
s text/javascript application/javascript application/x-javascript
</IfModule>
# END DEFLATE
[/code]
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.
[code]
# BEGIN Cache-Control Headers
<IfModule mod_headers.c>
<FilesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</FilesMatch>
<FilesMatch "\.(css)$">
Header set Cache-Control "public"
</FilesMatch>
<FilesMatch "\.(js)$">
Header set Cache-Control "public"
</FilesMatch>
<FilesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</FilesMatch>
</IfModule>
# END Cache-Control Headers
# BEGIN Turn ETags Off
FileETag None
# END Turn ETags Off
# BEGIN Expires Headers
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType text/html "access plus 1 month"
ExpiresByType text/css "access plus 3 months"
ExpiresByType text/javascript "access plus 3 months"
ExpiresByType application/javascript "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"
</IfModule>
# END Expires Headers
[/code]
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?
Another recommendation identified by Google Page Speed but not covered in the video is to minify CSS and Javascript.
Well developed WordPress plugins will have already done some minification for you: generally CSS files have no special name but minified javascript files have 2 file extensions eg. some-plugin.min.js
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.
You can use a standard minifier which removes white space and comments. Alternatively you can use an obfuscator which also replaces variable names with shorter codes. For example, you can use the free online service at Javascript Obfuscator with just the “Move strings” and “Replace Names” options set. Compare sizes before and after minification and if the reduction is significant then use the minified file. However do be aware that very occasionally certain javascript files will not work correctly when minified so it can be a painful process.
All in all, my advice would be to go down the minification route only if you have very large javascript files and you do not plan to change them very often.
