Performance « Sascha Kimmel - Living The Web Experience Since 1996

Archive for the ‘Performance’ Category

Website Performance Checklist (PDF)

Thursday, May 14th, 2009

In this blog I have previously posted an article series on how to achieve maximum website performance. Now if you wish to follow the steps described in the articles I thought it’s quite helpful to have a checklist ready that you can print out and tick each box for every single optimization step that you have checked and optimized.

I have refrained from using any colors so it’s purely black and white for your day-to-day use.

So I created this checklist and offer it here as a free PDF download. Just click on the following button to access the website performance checklist. I always appreciate your comments, feedback and suggestions.

Tags: checklist, download, pdf, Performance
Posted in Development, Free Stuff, Performance, Search Engines, Security | 2 Comments »

How To Achieve Maximum Website Performance (Part 5)

Tuesday, May 12th, 2009

Welcome to the fifth part of this article series on how to maximize the performance of your website. The focus of this article is mostly on compressing content on the way from the server to the user’s browser.

6. Compress That Code

All modern browsers support the compression of content transferred via HTTP and indicate this by sending the appropriate Accept-Encoding header just like this:

Accept-Encoding: gzip,deflate

This header tells the server that the browser supports compression of content using either the GZIP algorithm or the deflate algorithm.

To optimize your site and speed up the load time you should add compression to the output your server is sending. If you are using Apache (which I have always assumed throughout this article series) it works as described as follows.

Just like you installed the ExpiresModule as described in part 4 you can install the DeflateModule (”mod_deflate”) in your Apache web server by adding this line to your httpd.conf file:

LoadModule deflate_module       modules/mod_deflate.so

Most of the time it does not make sense to compress images or packed files because they have already been compressed so I suggest you focus on the HTML code. You can achieve this by adding this block to either your httpd.conf file or to any VirtualHost you wish to use the compression for.

<IfModule deflate_module>
AddOutputFilterByType DEFLATE text/html
</IfModule>

Just by adding this configuration to the VirtualHost for this domain (saschakimmel.com) at the time of writing the data transferred for this blog’s homepage was reduced from almost 170 KB to only 27 KB - that’s a reduction of 84%!

I highly recommend using this Apache module as it reduces the traffic enormously.

If you just wish to use output compression in your PHP scripts you can simply use this code:

<?php
ob_start("ob_gzhandler");
?>
<html>
<body>
<p>This should be a compressed page.</p>
</html>
<body>

This will tell the PHP interpreter to use output buffering, i.e. to buffer all of the output of the script until it has finished when it will call the ob_gzhandler from PHP. This handler detects if the browser supports compression at all and will only send the code as compressed data if it does.

7. Using YSlow

If you have read each of the articles in this series you pretty much know every possible performance optimization for a website so now let’s have a look at the analysis of the YSlow addon for Firefox. If you have not already installed this addon you should install it now.

After installing it and restarting your Firefox browser type the URL of the page you wish to optimize into the address bar and hit the enter key. If the page has finished loading you need to open the YSlow tool by clicking on the icon in the browser’s status bar.

If you click on the button labeled “Run Test” it takes some seconds during which YSlow reloads and analyzes the page. This will show you a list of recommendations like the one below.

yslowresult

If you have read all parts of this series you should by now already have optimized most of the things you can optimize on your website. Please note that YSlow only shows you what you can optimize, not what you already have optimized. It won’t show me that the main page is already delivered with compression it only shows me which files are not yet compressed on this blog so keep this in mind when reading the recommendations.

8. Outsourcing Your Data To A CDN

If you get lots of traffic (and I am talking about really lots of traffic here) to static files like images, videos and downloads you should think about hosting your files on a content delivery network.

You just upload the data to their network and modify the links on your website pointing to these files. You have to pay a fee depending on the amount of data served to your users through these networks. If you already know that your server is not likely to be able to handle all of that traffic you might have a closer look at these services.

The most prominent ones are Amazon Simple Storage Service (S3) and MOSSO.

9. Adding Cache Headers For The WordPress Sociable Plugin

As I just had a look at the YSlow recommendations for my blog I found out that I could add expiration headers for these graphics so I just added this info here because I think it may be quite helpful for you.

Just add this code to your VirtualHost which belongs to your WordPress blog:

<LocationMatch /wp-content/plugins/sociable/images/*>
        ExpiresActive On
        ExpiresDefault "access plus 7 days"
</LocationMatch>

Please note that you need to have the ExpiresModule installed on your server for this to work as described in part 4 of this series.

This concludes this article series. Download your free Website Performance Checklist now.

Tags: apache, cdn, deflate, gzip, mod_deflate, mod_gzip, Performance, sociable, yslow
Posted in Development, Performance | No Comments »

How To Achieve Maximum Website Performance (Part 4)

Monday, May 11th, 2009

Welcome to the fourth part of the article series on how to maximize the performance of your website. This time I will show you how you can minimize the number of HTTP requests to your server by setting appropriate cache headers so that the browser does not request the file time and again while a visitor is browsing your site.

5. Caching And Expiration

Most of the people think that if a browser has downloaded a file like an image or CSS file from the server it has stored it in the cache directory on the local harddisk and will retrieve it from there without sending a new request to the server every time it is embedded in an HTML page.

However this is simply not true. Modern browsers just like Firefox or Internet Explorer 7 will most of the time send an “If-Modified-Since” request to the server to find out if the file has been updated on the server. This is good because your browser can use the file from the cache if it has not changed on the server without downloading the file again.

Well, this still is an HTTP request that is sent to your server. Just think about how often you change images, CSS and JavaScript files on your server. Every 2 minutes?

Most of the time your answer to that question will simply be “No.” although this makes sense for some specific files like images from a webcam that may be updated every few seconds.

Cache Headers

This is the HTTP response header sent to your browser when you access this blog:

Live HTTP Headers Addon For Firefox showing headers (German version)

Let’s examine the different headers in detail:

Expires: Wed, 11 Jan 1984 05:00:00 GMT

This tells your browser that the file has already expired so that the browser should retrieve from the server again next time it is requested.

Cache-Control: no-cache, must-revalidate, max-age=0
Pragma: no-cache

These headers tell the browser that it must not cache the file and always has to revalidate if the file on the server has been updated.

Last-Modified: Sun, 10 May 2009 18:06:04 GMT

When looking at the headers of static files like images you will often see a header like this which is the file modification time.

Time To Optimize

So now let’s optimize the header settings for some of our files. This optimization assumes that you are using the Apache web server. If you do not have root level access to your web server you cannot use this optimization as described here, regretfully. There are other ways which I am planning to write about in a later post.

First of all you need access to your webserver configuration. You need to add the Expires module (”mod_expires”) to your Apache configuration file httpd.conf like this where all the other lines beginning with LoadModule are located at the beginning of the file:

LoadModule expires_module       modules/mod_expires.so

This will load the Expires module into your Apache web server. Now you need to add the following lines to your VirtualHost configuration - the VirtualHost given is only an example - just add the <IfModule>…</OfModule> block to your existing VirtualHost block for the domain you wish to speed up.

<VirtualHost 127.0.0.1:80>
ServerName      example.com
DocumentRoot    /srv/www/example.com/htdocs
CustomLog       /logs/example.com.access_log combined
<IfModule expires_module>
	<Location /flvplayer.swf>
	      ExpiresActive On
	      ExpiresDefault "access plus 1 day"
	</Location>
	<Location /img>
       	ExpiresActive On
	      ExpiresDefault "access plus 2 hours"
	</Location>
</IfModule>
</VirtualHost>

This example code assumes that you want all of the files in the /img directory to be cached on the client side for two hours and the file /flvplayer.swf to be cached for one day. You can add as many <Location> blocks as you wish. There are several options available you can look up on the Apache website.

By using this method Apache will add the appropriate HTTP headers automatically.

Setting Manual Headers In Your PHP Files

You can also set expiration and caching headers automatically in your PHP files. By default as PHP is a language where the code is interpreted at runtime PHP sends an Expires header with a date long gone. Here is some example code:

$cacheTime = 60*60; // 1 hour

header("Expires: " . gmdate("D, d M Y H:i:s", gmmktime() + $cacheTime)." GMT");
header("Pragma: public"); // HTTP/1.0

header("Cache-Control: public, max-age=".(int)$cacheTime.""); // HTTP/1.1

WARNING!

Never set the last two headers if the page you are using it on contains user-specific data. This means: if you offer a login on your homepage don’t add the last two lines as this may result in proxies between your server and the visitor’s PC storing this data so that another person who is using the same proxy might see confidential data belonging to the other user - “public” says it all in the code above. In all other cases you can normally safely use the code as shown above. Just modify the cache time to suit your needs.

How To Find The Perfect Cache Time Value

You should resist the temptation to set the expiration for all of your files to one day or anything more than a few hours. Just imagine you have an image on your website which shows a product with the price next to it. If you change the price when the user returns to your website several hours later (which may depend on your business) he will not be able to see the updated price because the original file has not yet expired in his browser’s cache.

I suggest using several different values depending on how often specific content changes. Your company logo for example is unlikely to change every day (unless you are Google, of course) so you may set a high value here. Just remember that you can (OK, should be able to) change the value on your server at any time so if you are planning to update some images you may as well lower the value a few days or hours before the change is scheduled to happen.

There is no rule of thumb so you just have to think about the different types of files and how often you update these files.

This concludes this article. I appreciate your comments below - feel free to retweet!

Read the next part.

Tags: apache, caching, expiration, mod_expires, mod_rewrite, Performance, php
Posted in Development, Performance | No Comments »

How To Achieve Maximum Website Performance (Part 3)

Sunday, May 10th, 2009

Welcome to part 3 of this article series on how to maximize the performance of you website. This time I am going to show you how to minimize the number of HTTP requests on your page. Most people don’t even realize how many HTTP requests are required until every single element on the page has been loaded. I was shocked when I saw that the Sociable plugin for Wordpress has not been optimized for the number of requests but more on that later.

4. Less Requests = Better

If you have not done yet you need to empty your browser cache once again. Open the page you wish to optimize and open Firebug by clicking on the Firebug icon in your browser’s status bar.

Firebug

If you have not used Firebug before on that domain you need to activate it (check all boxes) and reload the page. After the page has finished loading open the network tab in Firebug at the top.

This will show you all of the HTTP requests that were required on your page.

Using CSS Sprites To Reduce Image Requests

Now have a look at all of the image requests on your page. If you move your mouse pointer over the “GET …” text on the left hand side of the list Firebug will show you a thumbnail version of the image so that you can find out quickly which image has been loaded.

On my blog (this page) there is a large number of images loaded which can (and should) be optimized.

Some of the HTTP Image requests on my blog

There is a good technique to merge several images into one file yet still be able to display separate images even in separate image tags in HTML. These are called CSS Sprites because Cascading Style Sheets are used to implement this. In fact a new image is created that contains all of the images and CSS is used later with background positions to show separate areas of the image where the source images are located in the merged image.

This is not as hard as it sounds because although you could create the merged image and CSS manually I prefer to use the Online CSS Sprite Generator.

The only thing you need to do is to package all of the images into a single ZIP file and upload it on the Sprite generator website. I recommend that you use the same output format as the original images - I will be using the PNG format. You may want to change some of the default options however I am using the default options most of the time.

After clicking on the “Create Sprite Image & CSS” button after a few seconds you will be shown some CSS code and a link to download your merged image.

In my case I received the following CSS code:

.sprite-1_de_btn { background-position: 0 -30px; } 
.sprite-delicious-large_blue { background-position: 0 -83px; } 
.sprite-digg-large_blue { background-position: 0 -165px; } 
.sprite-findmeonfacebook2 { background-position: 0 -247px; } 
.sprite-linkedin2 { background-position: 0 -310px; } 
.sprite-myspace1 { background-position: 0 -370px; } 
.sprite-stumbleupon_48x48 { background-position: 0 -460px; }

This is the code I have added (slightly modified from the original code on the website):

.sidebarsprite {background: url(/img/csg-4a07143404186.png) no-repeat top left; }

This is the merged image:

Merged Buttons as CSS Sprites

As I am not using a list for the images on the right hand side of this page (the sidebar) although this may make sense this is how I implemented it. You need to have a 1×1 pixel transparent GIF first. This will be used as your main image file in the image tag and it has to be transparent for the background image to be visible.

<img src="/img/spacer.gif" width="100" height="30" alt="" border="0" class="sidebarsprite sprite-linkedin2" />

When using an image tag (and not an <li> tag) you have to set both width and height of the image as shown in the image tag above otherwise your image will not be shown.

It does of course not make sense to merge all of the images on your page just to save HTTP requests but you should do this whenever there are images on your page that are used on many other pages on your site as well (just like the sidebar images I am using).

By using the CSS sprite technique just described I have saved 6 HTTP requests to the server. There is even more to optimize - try it for yourself on your own website.

External Scripts Under Scrutiny

Now it’s time to have a look at all the external scripts and maybe images used on your site. Use the method described above in Firebug to find more culprits. And look very closely at your own website - do you really need these 12 external JavaScripts to show your Twitter follower count, your social network friends and contacts and so on?

By using Firebug you can find out how much further requests are caused by some of the external scripts - just scroll down the list in the network tab.

Remove all of the external files that are not essential and that you can live without.

Merge CSS And JavaScript Files Automatically

If you have several CSS and/or JavaScript files on your page hosted on your own server you should merge them into a single file - for your visitors. I strongly suggest to keep modular code separated on the development site but you may wish to just copy all of your own JavaScript and CSS files each into a single .js and a single .css file while still keeping the original files for editing.

Also see the section Optimizing CSS and JS Code in part two of this article series.

Several techniques are shown on this page but I am planning to show you the one I am using in one of the next articles on my blog.

Outsourcing With Google

If you are using one of the popular JavaScript frameworks like prototype.js, jQuery, MooTools, DoJo, script.aculo.us etc. I suggest using Google to deliver these files straight from their servers. Google’s worldwide network of servers has a very high performance and speed so I suggest you check out the documentation on the AJAX Libraries API and start using it to deliver these files through Google’s servers.

This concludes the third part of this article series. Continue with the next part.

Tags: css sprites, firebug, google, optimization, Performance, speed, website
Posted in Development, Performance | No Comments »

How To Achieve Maximum Website Performance (Part 2)

Sunday, May 10th, 2009

This is the second article in the article series on how to maximize your website performance. I assume that you have also read the previous article which defines the basics of performance optimization.

After optimizing the time to the first byte received the next step is to decrease the load time of your website.

3. Decreasing Load Time

The less bytes are to be transferred the better. But you may also want to check your webhost first because if the connection to your server is very slow that might be the root of the problem - not necessarily the number of bytes to be transferred.

Checking Your Server Performance

To check this you should upload a large file to your server - maybe 10 megabytes at the very least - the larger the better. You should also ensure that your own internet connection does not suffer from any problems while you are testing. All downloads and other programs (like email clients) should be shutdown prior to testing.

Please note that this test only shows the maximum speed of both your server and your own internet connection combined. If your server is connected to the network with 100 Mbps but your internet connection is just 1 Mbps you will only be able to measure 1 Mbps as the maximum speed so depending on your connections it may not make sense to measure the speed.

Now you need to have a stopwatch ready as you need to measure the time from starting the download to the download being finished. Let’s say the file you have uploaded has a size of 2 MB. You now have to divide the file size by the number of seconds it took to download. If it took 10 seconds to download the file the connection speed is something like 2MB/10 seconds = 0.2 Mbps = 200k/s.

You may also use DownTester (freeware) to measure the download speed automatically.

To measure the performance of your internet connection I recommend using SpeedTest.

If you have found out that the server speed is indeed very low compared with what you would expect check back with your webhost.

Image Optimization

Now it’s time to review the images on your page. Select “Images” > “View Image Information” in your Web Developer Toolbar after you have opened your website again in your Firefox browser.

webdeveloper

This will open a new tab which will list all of the images on your website including information on image dimensions, URL and file size. Have a careful look at the number of total image requests - the higher the more you can optimize.

webdeveloper-image-count

While scrolling down always have a look at the file size for each image. There is not a rule of thumb regarding the file size of an image because it depends on the file type of the image and the dimensions.

Image Types - What’s Right And What’s Wrong

I am still amazed when I see how many web developers still do not know which image file formats to use for different kinds of images. There are only three main types of images used on the web (yes, I won’t talk about SVG and other formats here) and supported by all major browsers:

GIF
The GIF format should never ever be used to compress photos because it has been developed for images with a maximum of 256 colors and works best with images that contains a small number of colors and especially large chunks of pixels with the same color.
This is the optimal format for screenshots of an application and for graphics with a small number of different colors.
When compressing GIF images you can choose the maximum number of colors. Sometimes just 16 colors or even just two may be enough however in my opinion you should not invest hours to optimize images just to gain a total 10 KB out of it.
Supports one color to be used as a transparent color. Supports animations as well.
JPEG
The JPEG format (the “P” actually stands for “photographic”) has been developed for true-color images, mostly for photos. It should never be used for screenshots beause it uses far more storage capacity (and therefore load time) than required.
No support for a transparent color, no support for animations.
PNG
Nowadays PNG files - although originally developed to be used online - are seldom used for normal images on a website. From my experience it does not make sense to use PNG graphics most of the time except you want to use the so-called alpha transparency feature which in contrast to the GIF transparency offers a full 256 bits channel for transparency. This means that you cannot only pick one single color that is transparent but several grey scale values which are semi-transparent. This allows for seamless integration onto any background.
Most of the time I am only using PNG images if I need alpha transparency.
There are currently two formats implementing animations for PNG.

Sample Images - Learning By Seeing

Just have a look at the following images to see the differences in image types and compression. You should see very clearly when not to use JPEGs and prefer GIF images instead.

Photo (bad, saved as GIF, 32K)

Photo (good, saved as JPEG, 21K)

Screenshot (good, saved as GIF, 5K)

Screenshot (bad, saved as JPEG, 15K)

Screenshot (good, saved as GIF, 5K)

Screenshot (bad, saved as JPEG (90%), 8K)

Screenshot (good, saved as GIF (8 colors), 2K)

Screenshot (bad, saved as JPEG (20%), 3K, still larger than the GIF)

Screenshot (good, saves as PNG (truecolor), 4K)

You should have seen that GIF offers good quality and still requires less bytes for certain images.

After you have optimized your images (Corel PhotoImpact offers a very cool image optimization assistant for JPEG, GIF and PNG) now it’s time to look at your CSS and JS code on the page.

Optimizing CSS and JS code

Are you using Cascading Style Sheets (CSS) and JavaScript on your page? For this optimization it does not matter whether the code is embedded on your website or has been outsourced to an external file. Just look at your CSS and JavaScript code and remove unnecessary comments first.

Now it’s time to compress your CSS and JavaScript files. There are free online services available to compress CSS and JS code. I recommend using CSSDrive to compress your CSS code and JavaScriptCompressor.com to compress your JavaScript code.

You should save the compressed code to another file than your original file otherwise you won’t be able to edit the code later on unless you are a bot of course.
Just remember that you have to repeat this process every time you modify your CSS or JS code. In a later article I will show how you can automate this process completely with PHP.

Cleaning Up The HTML Code

Now have a closer look at your HTML code. Are there large chunks of code in comments? Remove the comments that are no longer useful.

Embedded Code From External Domains

Is there any popular website that doesn’t offer embeddable content? Yes, embeddable content can be quite cool but it may also slow down the loading time of your page especially if the code snippet you have inserted into your page uses JavaScript because your browser will stop rendering the page right where the JavaScript code has been embedded until it has been executed successfully. If an external source is unavailable or very slow your page will get stuck while loading.

I even had to remove some ad server code some months ago from one of my pages because the ad server was so slow that even after one minute my page was still showing just half of the page rendered. This is not an impressive or professional view. It makes you look like an amateur.

To find out which sources are slow you only have to look at the status bar of your browser to see what is currently happening. “Waiting for ….” is an indication.

Sometimes I also experience slower load times on my page because of the Google Friend Connect Widget embedded on the sidebar to the right. You should check the code one-by-one and decide if you really need this specific widget, snippet or feature.

There are many sites that allow you to embed buttons on your own website to link to your Twitter, Facebook, LinkedIn, MySpace etc. profile and just give you a JavaScript snippet to put onto your site. You should think about using static images to upload onto your server and link to the pages manually.

This concludes the second part of the article series. The next part will focus on how to minimize the number of requests on your page. Some of the optimizations discussed in this article will be revisited to further improve the performance of your website. Click to read the next part now.

Tags: compression, css, images, javascript, optimization, Performance, website
Posted in Development, Performance | No Comments »

How To Achieve Maximum Website Performance (Part 1)

Saturday, May 9th, 2009

The idea for this article came to my mind when I was wondering why twitter.com is so slow sometimes. When looking at the source code of my profile homepage on Twitter I was really shocked because I still cannot understand why such a reputable company with so many users does not use all of the methods and processes available to increase the performance of their website.

But first things first. Before you’re going to analyze your website to find out what you can optimize to increase the performance of your website you need to install the following addons and Firefox of course.

I have also compiled a comprehensive list of Firefox addons for developers but you only need the addons listed above to follow the steps described in this article series.

1. Finding The (Maybe Not So Usual) Suspects

It is important that you empty your browser cache first.

Now just open the website in your Firefox you wish to speed up.

At the bottom of the browser in your status bar you will see information collected by the lori addon.

Screenshot of "Life Of Request" info

Time To First Byte

The first value shows you how long it took for the first byte to arrive. On this blog’s homepage it took just about 0.157 seconds. If you have dynamic data on your page and maybe even database queries on your site the value may actually be much higher.

This value is important to optimize your code on the server side. If you see something like more than 0.5 seconds or even a value greater than one second you know that you have to optimize your server-side code (more on that later).

Total Load Time

The second value shows how long it took until all of the elements on the page had been loaded - this includes embedded images and everything else - even external scripts and embedded video players. If this value is higher than about two to three seconds you know that you need to optimize the code on the client side.

Total Number Of Bytes

The third value shows the total number of bytes transferred which also includes images, scripts etc. Depending on your site and your target audience this value may be quite high but in most of the cases it should not exceed 200K (if your site is a blog it may be up to 500K in my opinion).

Number Of HTTP Requests

The fourth value shows you how many separate HTTP requests to a server were required. Your goal should be to minimize this number. At the time of writing there were 37 HTTP requests required on this page (and 5 requests on reload which is shown in the screenshot) which is quite a large value. Every HTTP request (especially if the request goes to different servers) results in a delay of your page being displayed.

There is no rule of thumb regarding this value - it depends on the nature and contents of your site but it should always be as low as possible.

2. Optimizing The Time To First Byte

If the time to first byte value is quite high you need to optimize your server-side code. As there is no general rule for all the different backends, applications and content management systems I can only give general recommendations here yet I will also show you how to decrease this value if you are using WordPress on your own server (not the hosted blogs at Wordpress.com).

Static Page

If the page you are trying to optimize is a completely static page (like a real HTML file) and the value is relatively high I would interpret this as your server being too slow or being under a high server load. You should check this with your webhost as a static page should be delivered by webservers in a very short amount of time.

Dynamic Page

If your page is a dynamic page developed in PHP, Perl, Ruby-On-Rails, JSP or any other web development language or system there may be much to optimize depending on the nature of your page.

Do you have many content on your website that is retrieved dynamically?

You may for example have the latest comments by users in your forum, on your blog or the latest images or postings on your page. If you are not caching these contents (or the page) on your server yet just ask yourself the following question:

What is the access-to-update ratio, i.e. how often is the specific page accessed by someone and how often do you change or update the contents?

If you have many people accessing your page yet you only update it hourly or even daily or weekly you should implement caching on your server. You may for example just update the contents on the page every X minutes from the database or you may use what I call intelligent caching where you only update cache files if the content has changed. This is actually what I am using on most of my own sites: when a new user joins the cache file containing the HTML code for the “new users” snippet is deleted. Whenever someone then accesses the page the PHP script on the server checks if the cache file is available and loads it in that case. If it is not available it is created just-in-time, cached and will be used as long as it exists.

Implementing a caching algorithm is however very dependent on the language your code is written in and depends on your framework or application so I cannot go into detail on that matter, regretfully, as there is not a one-fits-all solution.

WordPress

I am using WordPress on this blog as well (as you might already have guessed) so I can give you some advice on how to optimize your pages.

I have seen many plugins for WordPress that have not been developed with getting lots of traffic in mind. Some retrieve the data from an external source (like your Twitter feed) on every single page request which not only increases load time it also means that your blog may be unavailable if Twitter (or any other source a plugin may be using) is down. This also leads to a huge amount of traffic to the external sources. You should check if the plugins you are using are requesting dynamic content from external sources on every single reload of a page.

Remember: whenever you access such a blog page data is retrieved from the external source before the page is displayed to the user (because it is server based). If these pages would be cached on the server for a limited amount of time this problem would be solved (to the most part).

There is actually a great caching plugin available for WordPress. It is called WP Super Cache and can be downloaded or installed directly from within WordPress. It decreases the load time of your WordPress pages dramatically because with the default installation WordPress pulls all article data on every request from the database so the database is really your bottleneck if you are getting lots of traffic to your site. WP Super Cache not only caches the pages it is also very intelligent in that it regenerates cache files automatically if you update your posts.

More info on WP Super Cache is available on this page as well.

This concludes the first part of the series. Continue to read the second part of this series.

Tags: firefox, Performance, webserver, WordPress
Posted in Development, Performance, WordPress, twitter | 2 Comments »