Is Your WordPress Site Slow? Speed Up Performance Right Now

Updated on 19-Jan-2012

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:

  1. Someone clicks a link to go to a page on your website
  2. Your web server hears the call, finishes what he is already doing, and eventually gets around to attending to the call.
  3. 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.
  4. 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.
  5. 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.
  6. 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
  7. 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 :

  1. 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,
  2. 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/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

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
<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

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.

This article was updated on January 19, 2012

About Elizabeth

Elizabeth is an experienced web developer and WordPress SEO Coach. Connect with her on Google+ and Twitter

Comments

  1. Hosting images on a CDN is absolutely useless and doesn’t help to improve anything, unless you host really heavy images. CDNs are lie, mostly. If you have youtube-like site or online radio station with 100000+ visitors a day, you can benefit from CDNs, maybe.

    Why turn etags off?

    Minification allows to shrink additional 5-10% of size even if you have compression enabled. For high-traffic sites it matters, I suppose.

    But overall the article is good, thank you.

    • Thanks for your comments:

      Re: CDN
      I find hosting static content on a CDN far from useless: I enjoy several benefits at a cost of just a few dollars a month:

      - much faster delivery of files to users around the globe
      - reduces disk space usage on my web server allows me to host more sites at the same account
      - reduces bandwidth on my web server allows me to host more sites at the same account
      - reduces costs of daily backups as only backup of wordpress database is required – not all the files; full backup can take place monthly
      - implements static content from cookieless domain

      Re: Removing Etags
      The Google PageSpeed recommendation is to use either Cache-Control: max-age or Expires: and either Last-Modified or ETag. Hence I decided to keep Last_Modified and switch off ETags as they do not work well in the unlikely scenario when a domain is on a cluster of servers. Check out this interesting discussion about the relative merits of Last-Modified and ETags.

      RE: CSS minification
      I agree that the Minification could give another 5%. However it is quite hard work to go each CSS file, minify it and then upload. Also as new plugins are added then the list of files to minify may change. With compression you set it once on the server in the .htaccess file and you get typically a 50% reduction in size and hence a 50% improvement is download speed.

      That said it is probably worth minifying specific large CSS files that are updated infrequently and used on every page on your site. An example of this might be the style.css that is part of the your WordPress theme – but remember to re-edit the minified version to re-include the WordPress comments header or it will not be recognised by WordPress as a theme.
      Most minifiers will strip this header out so you would need to save the comment header for your theme so you can add it back in at the top of the minified file
      /*
      Theme Name: Manhattan Child Theme
      Theme URL: http://www.studiopress.com/themes/manhattan
      Description: Manhattan is a 2 or 3-column Widget-ready child theme created for the Genesis Framework.
      Author: StudioPress
      Author URI: http://www.studiopress.com
      Version: 1.0

      Template: genesis

      The CSS, XHTML and design is released under GPL:
      http://www.opensource.org/licenses/gpl-license.php
      */

  2. Another fantastic tutorial Elizabeth! Tank you for your help and training, i appreciate it very much. One quick question for you, I wills end you an email. Thanks again!
    Isela
    Isela recently posted..Williams Island “The Florida Riviera”My Profile

  3. Another great post Liz thank you …. its something I’ll have another listen to, just so it can sink in.
    Jane recently posted..Alkaline FoodMy Profile

  4. Thanks Elizabeth for the tips to improve website performance! Speed seems to be an overlooked aspect of website design in many cases. Your article was a great refresher…and I learned a couple of things I didn’t know before. Like the javascript obfuscator site. I’ll put that to good use.
    Thomas recently posted..Keys To Generating And Maintaining Website TrafficMy Profile

    • Thanks for your comment Thomas. There is a lot to all this – and really the article only serves as an introduction. But at least it gets us to start thinking about it!

  5. Great post, however I can’t seem to get browser caching to work. This is one seemingly simple thing that I haven’t managed to ever get the pagespeed values to change. I pasted the code you provided at the top of the .htaccess file and nothing… Any thoughts?
    Grady recently posted..Merry Maids vs Simply the Best Cleaning – Maid ServiceMy Profile

  6. Good stuff. Using a cache and CDN are two smart ways to improve page load time and create a good user experience.

  7. Figured it out, the host doesn’t have mod_expires, etc…. Good thing a move is planned soon to another server which I have control over bwahahaha, the power :). Thanks for taking a look.

    • Didn’t manage to look too closely as got taken over by events here. My mum was in hospital and she is out now and spending quite a bit of time looking after her. But very glad you got this working. Your reply will help someone else for sure.

  8. This post was so helpful! Cutting images sizes and editing the .htacess file really improved the speed of my site.

  9. For the .htaccess file edits that you mention, would it work with any site for compression, or simply the wordpress platform? For a site running a difference ecommerce platform, would you see a different result?

  10. Excellent tutorial.

    I am using WP Super Cache with the settings “Use mod_rewrite to serve cache files. (Recommended)” under advanced Tab. That means, I have to insert the code generated by the plugin in the .htaccess file.

    Now you know that .htaccess is sensitive and harming it could be fatal for the site.

    The code generated by Super Cache has to go to on top.

    Now my question is if we want “leverage browser caching”, should the code you mentioned goes at the top in the .htaccess file or after the code from super cache..

    Thanks,
    Ali
    Ali recently posted..Frog: Innocent or Killer, amazing speciesMy Profile

  11. I am from Denmark ogkom past your blog when I searched for a solution to my wp page there is a little slow. I’ve tried with WP Super Cache and this works at least for me.

    Otherwise thanks for a good blog with many good and useful advice.
    klaus recently posted..Apple har frigivet iOS 5.1My Profile

  12. I’ve had a lot of issues with my blog loading at a speed that I thought was acceptable. In addition, the Alexa toolbar chicklet that I have on my browser indicates that 90% of the sites on the web load faster, which further concerned me. I recently reindexed a lot of my pages from the Platinum SEO plugin and signed up for the pro package on CloudFlare. I’ll definitely be spending a better part of the afternoon looking at Google’s Page Speed site and watching some of the videos above seeing as how it’s most important to me how Google sees my site in terms of loading speed. Thanks for the great content.
    Rich recently posted..Post Finals Interview With Kyle DakeMy Profile

    • Very good idea – Cloudflare. I will be doing a blogpost on their competitor Incapsula, who I’ve chosen to use instead. We are just about to move all our site there, as I prefer this as a solution to the free caching plugins. Your site is showing 98/100 on Page speed so well done.

      • I’ve never heard of Incapsula. What have you found to be the advantages over Cloudflare? I’m far from an expert, I just realized my site was not performing well and it was probably leading to problems and a poor experience for my visitors and did some research on a few blogs like yours. In addition to Cloudflare I also run the WP Super Cache plugin. Is this overkill and/or doing the same thing? Thanks for the help, and thanks for checking out my Page Speed. It’s good to know things are improving.

        • Rich – I think it’s better than Cloudflare because it concentrates on security – it also helps with performance, but security comes first. There is an excellent write-up here.

  13. Thanks for the interesting facts explained for the wordpress performance increase and can you provide the tricks in .htaccess file for redirecting naked domain and also mod_pagespeed.
    Kiran Chikkala recently posted..Free NLP Tools for SEOMy Profile

  14. I’ve changed my mind about using these plugins now. I am placing client sites on Incapsula.
    Elizabeth recently posted..GPlus Activator – WTF? Choose AuthorSure – It’s FreeMy Profile

  15. Thanks Elizabeth for these tips.
    I think that speeding up the server depends on the server loads, i was experimenting high loads and even if i have 16GB RAM, my server was slow.
    After many investigations and tweaks, i found a nice plugin (ApacheBooster), it’s not a wordpress plugin, it has to be installed using ssh, it optimizes everything on the server, now i have no doubts at all.
    Hicham recently posted..Top 10 tips to better enjoy your Samsung Galaxy S4My Profile

Ask a question or leave a comment

*

CommentLuv badge