Five Ways to Speed Up Page Response Times

May 28 2009 by Ryan Hickman | 78 Comments

It’s important for your website to load as fast as possible; users want to see your web pages quickly and if you can’t give them that – then they’ll go somewhere else. In this article, you’ll find a discussion on five simple and effective techniques for speeding up your web pages.

Five Ways To Speed Up Page Response Times.

1. Use YSlow to profile and measure your website load times

Knowing how long it takes for your website to load is the first step in determining what’s wrong. It also lets you know if you need to makes changes to your website to speed it up.

Before we begin, if you haven’t installed YSlow, please do. It is a Mozilla Firefox extension which can be found at the following link:

First, let’s navigate to the Six Revisions website so we are all working with the same example (just open it in a new tab or browser window).

In the bottom right hand corner of your browser, there is a bar with a odometer (see Figure 1). Next to that bar, after the page has completly loaded, you will see ‘YSlow’ followed by a number. That number is the time it took for the site to load (in seconds) in your browser. We want that number to get this number as low as possible.

Odometer.Figure 1: YSlow icon and odometer showing the page load time.

Most often, what causes such a long page load time is one or a combination of the following:

  • Too many HTTP requests
  • Uncompressed (or non-minified) JavaScript files
  • No expiration headers for static graphic files

We’ll talk about all of this in a moment.

To familiarize yourself with the performance of site load times, travel around a few sites. Check out Google’s homepage, Facebook, and a few of your favorite blogs/sites and you will notice that the more images or JavaScript a site utilizes, the higher the page response time is.

Using the features of YSlow

Aside from measuring the speed it takes for a page to load, YSlow also provides you some insight into what you can do to increase the performance of your site, as well as where your site’s load performance is lacking.

Pictured below is the ‘Performance’ tab (Figure 2). When you click it, it launches details grading each area which impacts your load time complete with a overall performance grade.

Performance tab.Figure 2: The Performance tab.

The area that is the most subjective is Using a CDN (content delivery network). CDN’s are more useful for larger sites. What they do is spread the content of a site across multiple servers throughout various regions. In loading a website, a page loads faster when the physical server is located closer to the user. So in essence, using a CDN for your content delivery serves files from the server that is closer to the user accessing your page.

Performance - All.Figure 3: Performance tab shows you a letter grade (A, B, C, D, F) and a percent grade (1-100).

Aside from using a CDN (which can be costly) – everything else is doable.

Grading areas

Let’s run through each grading factor. Here is a brief desciption of what each of these graded areas are, and ways to
address them for optimum performance.

Make Fewer HTTP Requests: HTTP requests happen whenever a web page requests a file from the
server. These can range from scripts, CSS files, images, and asynchroneous client-side/server-side requests (Ajax and other variations of the technique).
This is the most crucial area when it comes to performance, and also one that is easily addressed with just a little bit of elbow grease. For example, caching files
on the user’s machine often helps, as well as consolidating scripts, CSS,
and images.

Add an Expires Header: 80% of the page load time is wrapped up in downloading scripts, images,
and CSS. Most often, these elements don’t change on users’ machines. By
adding some code to your .htaccess file you can cache the redundant files
on the users local machine (we’ll discuss how to do this later down the article).

Gzip Components: Gziping or compressing JS files, images, HTML documents, CSS files, etc. allows the user to download a much smaller version of a file, increasing the speed of the page load. This can reduce the tax on your server, but unzipping (uncompressing) the components can lead to slower page response times depending on the user’s browser.

Put CSS at the top: Putting CSS files at the top of your document allows your site to
render your web pages as soon as possible while other components such as images and scripts are still loading.

Put JS at the bottom: With your CSS at the top of the document, inserting your JS files just before you close your <body> tag allows you to render what seems to be a complete page to the user while these scripts propagate in the background.

Avoid CSS Expressions: I personally never use CSS expressions (otherwise called Dynamic Properties), which is an IE-only, proprietary way of adding programming concepts (such as control/conditional structures) to CSS. As of IE8, Trident-based layout engines (which is used in IE) will no longer be supported, so it’s never a good idea to use them anyways. Rather, I script with PHP to
load different CSS style rules based on various conditions, be it a random number,
time of day, or browser.

Make JS and CSS external: Placing JS and CSS in external files allows your browser to cache them
making your page load faster than those files loading inline every time
the page is called.

Reduce DNS lookups: Whenever a user types in a domain name in their web browser address field, the browser performs a DNS lookup to the IP
address. The more locations your site has to
access, the more DNS lookups that must occur. Do your best to keep these
low, on average it takes 60-100 milliseconds to do a DNS lookup.

Minify JS: Unlike regular gzip compression, minifing JavaScript files is removing
the unnecessary spaces, tabs, and various other selected characters
reducing the overall size of the file. With a smaller file your able to
have a faster page load. You can use JSMIN to minify your JavaScript.

Avoid redirects: No matter if you do a server-side header redirect, a JS redirect, or an HTML meta redirect, your site is going
to load a header with a blank page, then load your new page, increasing the time it takes for a user to get to the actual page they want to go to – So
completely avoid this at all costs.

Remove duplicate scripts: Making your browser load the same script twice will increase your page
load. It’s simple math. More files equals more load time. Double check
your site and make sure your not calling jQuery 2 or 3 times or any
script for that matter.

Whew… that was a lot, let’s move on to the next tab of YSlow just before we get into some other techniques to increase the performance of your website.

Components tab.Figure 4: The Components tab.

The Components tab (Figure 4) gives you insight into what your efforts to increase your site speeds are producing. Here, you can see how long it takes for certain files to load, if those files are gziped, response times, as well as if they are cached in the users machine and when their cache expires. This is good for examining components of your site, measuring their performance and optimizing their speed.

Lastly, we have the Stats tab (Figure 5). This tab shows all the HTTP requests for both the downloaded files, as well as the cached files. The Empty cache shows the files the browser had to download in order to render the page. The Primed Cache, on the other hand, is the list of files that were already in the user’s browser cache, saving the browser from having to download those files again.

Stats tab.Figure 5: Stats tab.

2. Using CSS Sprites to reduce HTTP Requests

CSS Sprites may be the coolest thing since Tesla invented electricity… did I say that.. oops, I meant Edison.

Well, not quite, but pretty close.

CSS sprites can reduce your page load time simply by reducing the amount of HTTP requests your page makes to the server through the consolidation of your CSS background images.

Most tutorials teach you just to use CSS Sprites for navigation, where I am going to say to use it for the entire user interface of your site.

First, let’s take a quick look at YouTube and how they use CSS Sprites (Figure 6). You can find YouTube’s CSS Sprite here:

YouTube screenshot of Master Sprite.Figure 6: YouTube’s "master" CSS Sprite.

What happens is, using CSS, YouTube set a class with this image as the background (pictured above).Then with elements that need to use these images, their class is set accordingly, with the background-position CSS property set to properly align the top and left sides in that element.

Let’s give it a try. We are going to use the YouTube Image as an example.

In example below, we rendered the YouTube Logo to the screen. Using the same sprite class, and same image, we are going to create a simple rollover icon.

<style>
.sprite {
  background:url(http://s.ytimg.com/yt/img/master-vfl87445.png);
}

#logo {
  width:100px;
  height:45px;
  background-position:0 0;
}
</style>

<div id="logo" class="sprite"> </div>

Now what we’ve done is allowed for all of our static site assets to come from a single HTTP request, which significantly reduces page load

When you use hover with sprites it makes for a seamless transition, unlike when you load the file on the hover state, which leaves a blank space until that file is loaded.

<style>
.sprite {
  background:url(http://s.ytimg.com/yt/img/master-vfl87445.png); 
}
#logo {
  width:100px;
  height:45px;
  background-position:0 0;
}

#button {
  background-position:0 -355px;
  padding:5px 8px;
}

#button:hover{
  background-position:-25px -355px;
}

</style>

<div id="logo" class="sprite"> </div>

<a href="#" id="button" class="sprite"></a>

3. Load your CSS first and your JavaScript last

With some websites, you simply can’t get around all the HTTP requests, as it disrupts your functionality. So as an alternative, you can "bring out the appetizer" while the "main entree" is finishing up by loading the JavaScript files last.

In that regard, here’s a couple of tips:

  1. Load your CSS in your <head> tag above your body.
  2. Load your JavaScript just before you close your </body> tag.

What happens is that the page appears to be loaded on the user’s machine, so their eyes can begin scanning the offerings, all the while the JavaScript is catching up in the rears and loading in the background.

Tip: If you don’t want to physically move the JavaScript tags, as you feel it will mess up the way your site works, I recommend using the defer property. Usage is as
follows:

 <script defer='defer'>

4. Using Subdomains for parallel downloads

Parallel downloads are when you increase the simultaneous file downloads. If you have your status bar open in your footer, you will notice when traveling other websites making requests to static.domain.com and c1.domain.com.

This is a great way to optimize load performance. Although you will simply be using subdomains, and the content is on the same server, the browser see’s it as a seperate server.

To set this up:

  1. Create 3 Subdomains on your server
  2. Place your images in a folder in each of the subdomains
  3. Replace the image locations in your site to the paths of the newly create subdomains.

Now with JavaScript files, this doesn’t exceed beyond two parallel at a time.

5. Adding an Expires Header

Some sites are just very rich, even after using the techniques described above, performance seems as if it can be increased even more.

A user can go to your website and make all the necessary HTTP requests to render the page, images, scripts, etc.

When you use an Expires Header, you can cache those elements on the user’s local machine, not only increasing their speed, but also saving you bandwidth. An Expires header can be used on all your scripts, CSS, and images as well.

This can be done simply by adding a line of code to your .htaccess file in the root directory of your site (if you don’t have one, you can create one – use a text editor and save it as .htaccess, then upload it to your root directory).

The following .htaccess entry sets a far future expires header sometime in 2010 for file types such as .ico, .pfd, .flv (Flash source files), .jpg, .png, etc.

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|CSS|swf)$">
  Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>

Beware: if you make updates to a file that has a far future expires header, you’ll have to rename it (version it) or else users with primed caches won’t see the updates.

For example, if you have a JavaScript file that you made updates to, use version numbers and then update all the files that refer to the old version (i.e. javascriptfile-1.0.js, javascriptfile-1.1.js)

Conclusion

That was a lot of stuff, but hopefully you picked up a few tips on how to make your web pages load faster. If you have more tips or questions, share them in the comments!

Related content

About the Author

Ryan Hickman is a web developer from Upstate NY. Loves PHP, Photoshop, CSS, Illustrator, jQuery, Ajax and Ruby on Rails! Currently working on the release of his first 2 startups. Very excited.Follow Ryan on Twitter.

78 Comments

Michael Flint

May 28th, 2009

Wow! Looks like we’ve got a lot of homework here. What’s nice, is that once a web site is improved, it generally stays improved over time. (The benefits become exponentially valuable.)

We spent a lot of time over the past 6 months optimizing our web site for search, and its really paid off. Even though our site traffic could be higher, we still rank pretty well because of the time and effort spent on our web site.

cancel bubble

May 28th, 2009

Regarding the performance grade/use CDN, with the latest version of YSlow you can filter your ruleset. In other words you can exclude “use CDN” because for a lot of folks, it just isn’t relevant. You can filter the ruleset by clicking the “edit” button at the top/center of YSlow (next to the Rulesets dropdown).

Also, regarding the script defer, doesn’t this only work in IE? Instead of “Load your JavaScript just before you close your tag.” move your script tags to the very end of your files, right before the close body tag (just like Google Analytics code).

Jake

May 28th, 2009

Thanks for the great tips!

Sam G. Daniel

May 28th, 2009

I use Yslow alot now after finding out how useful a tool it is. Using subdomains for parallel downloads is something I have not used but definitely will try and see how big of a difference it will make.

Cody

May 28th, 2009

Moving your javascript files to being last within the head tags will not make any difference. Browsers will wait until those javascripts are fully loaded before rendering the page to the user, so it doesn’t matter if the css files were loaded first or if the javascript was loaded first. If you were really concerned about having your page render before attempting the javascript download you’d have to put them at the bottom of the page, like before the closing body tag. Also, adding defer to the script is IE-only and it will not stop the downloading of the script only the execution.

Andy

May 28th, 2009

So, in short, follow the Yahoo Performance Guidelines.

Jack

May 28th, 2009

This is a pretty exhaustive list of tricks/optimizations.

I think this is the first time I’ve seen anyone suggest using subdomains to get more than two concurrent requests going solely for page load speeds. I’ve often seen it for bigger media files, etc. but not for the HTML, CSS, and images alone.

Managing the subdomain a particular this or that come from manually seems like a good idea, but I wonder if it would complicate/hurt SEO if a page’s images were in different subdomains.

Kayla

May 28th, 2009

Awesome tips. I know this is one area I really need to work on with my site, but I never knew where to start. I’ll definitely focus on these tips when I redesign my blog in a few weeks. Thank you!

Silas

May 28th, 2009

Wow excellent post, definitely something I’ll look into in the future.

Jacob Gube

May 28th, 2009

@Michael Flint: Most of these are front-end improvements, or optimizing your web page components so that you’re taking advantage of browser caches. I think you’ll get a high ROI from investing some time into optimizing your site’s load times.

@cancel bubble and @Cody: You’re both right, that was supposed to say closing body tag not closing head tag just like under the “Grading area” section above that section, under “Put JS at the bottom” – corrected.

@Sam G. Daniel and @Jack: to be honest, I’ve never thought about that technique either. Usually, I use subdomains for content if they’re being served from another server, away from the Six Revisions main server; not sure if it would make a big difference, but I’m definitely going to try it!

If any of you have an input or personal experience on this – please share your thoughts.

Michael Scrip

May 28th, 2009

I can’t imagine that subdomains would help that much. The HTML page itself is tiny, external CSS or JS scripts are tiny… images are the biggest thing. So if all the images are coming from the same other place… all the images are still fighting to load.

I’ve always wanted to try it though… I’m a freak for organization! But since it’s coming from the same server, I never thought it would help. Maybe it will!

From a server standpoint… http://www.website.com/images isn’t that much different than images.website.com

In fact… that’s how my host does it. The images subdomain is the same as /images

I can see why huge sites use subdomains if they have millions of visitors per day. But they probably have their subdomains on separate servers to handle that load.

Matt.S

May 28th, 2009

Nice guide! I hadn’t known of YSlow before, but it’ll definitely be getting a workout now. Thanks for such a great article.

Roseli A. Bakar

May 28th, 2009

This is just what I have been looking for.

Awesome tips Ryan!!

Sam

May 28th, 2009

Your link “First, let’s navigate to the _Six Revisions_ website” is broken (sixrevisons.com)

Selinap

May 28th, 2009

After updating a file that has a far future expires header, I use for example style.css?v=0.1. The next update, I just replace v=0.1 to v=0.2. Therefore no need to rename the file.

sam

May 28th, 2009

That last caching issue can be circumvented (when combined sets of js or css files) by using a script that combines and crushes scripts or sheets eg
/ccss/11ce22aefa09ed049dbf935c02bed991_1243296671.css
or
/cjs/01ee15d3ae16569a7ebbd775977751b7_1243296677.js

I am using cake with Matt Curry’s Asset Plugin it names files with a serialized md5 of filenames followed by a timestamp – I am getting a grade of 95 yslow

dynamic sites can have rsponse times closer to static files

putting css above js is important but does not speed up the page.

I have found some that slight differences are required by different servers in htaccess syntax for expire headers & etags (what works on 1 will cause 500error elsewhere)

as cancel bubble points out
Yslow has an improved version and also firediff too

@Michael Flint – reviewing your site with yslow should have dramatic rewards – reducing http requests you have 11 scripts currently

@Jacob Gube – have you tried the minify & supercache plugins for wordpress

Jacob Gube

May 28th, 2009

@Michael Scrip: If you try it out and you notice performance improvements, please let me know how it goes (through here or via email). I was thinking though, that using subdomains would somehow tie into DNS lookups, I’m not sure if, once an A Name record look up is requested, whether corresponding CNAME records are also taken/stored (using just one lookup request). But, again, even if it did, you could simply see if the extra DNS lookup is worth it for the performance boost.

@Sam: Fixed the link.

@Selinap: Oh great tip, thanks for that!

sam

May 28th, 2009


@Michael Scrip – it will a big difference due to cookies.Sending cookies with each image request, which serves no purpose. Having additional servers for staic content makes a big difference too – in doing so your avoiding the cookie issue.

chaoskaizer

May 28th, 2009

thanks for the for tips.

if you have Apache Mod_expires uses

ExpiresActive on
ExpiresDefault "access plus 1 year"

Todd S

May 29th, 2009

I always noticed the subdomain downloads going on, but never knew about the optimization. Thanks for the great info!

B A B U

May 29th, 2009

Defer attribute only supported by IE.

eGruve.com

May 29th, 2009

awesome tips, thank you very much one learns everyday.

Claire Web

May 29th, 2009

I always outsource and compress as much as i can, always use external CSS and javascript files to keep your document down to a minimum. It also helps the search engines get to the ‘real’ content quicker.

barbara

May 29th, 2009

…this page is still loading

Ashley

May 29th, 2009

Wow, very interesting read, thanks for making it all clear now :)
Didn’t know about using subdomains for parallel downloads, great idea !!

Tijmen

May 29th, 2009

You can easily start making sprites using
http://spritegen.website-performance.org/

When done right, it could save you a lot of time figuring out the dimensions & positions for the images.

Jeet

May 29th, 2009

Supercool stuff. I am surprised I never knew about css sprites. Have used subdomains for 2 connection per server limit before and same for css first js last.

Sankar

May 29th, 2009

Hi Ryan,

Thank you so much for sharing with us such a nice information. I never heard about this tool before. It’s working awesome. Today I came to know a lot of new things because of this article. Still needs to do lots of research on this tool to make myself perfect about decreasing page loadtime.

Thanks
Sankar

Bim

May 29th, 2009

This is a very useful post. Thanks. For a site with around 20-30 pages… would you put the css in one file or have one core linking out to seperate subdomain css files (which is what I have right now)?

Thanks

Lamnk

May 29th, 2009

Nothing new, yahoo posted these tips at their dev site a long time ago.

Ryan Hickman

May 29th, 2009

@Cody:
Some of this functionality is browser dependent. With FireFox2, IE6, FF3 (mac), IE7, the browser WILL show the assets of the page, while the JavaScript loads in the rear. This particular technique doesn’t allow the page to download faster, its just a remedy when you have lots of HTTP requests to make it appear as it’s already loaded. Its a fact that longer load times increases Bounce Rates, especially when your site has a product or offering. The goal is to have eyeballs looking at what is offered, navigation, and other misc opportunities of navigation as soon as possible.

When it comes to the parallel downloads – The Guideline for Internet Explorer and Firefox (HTTP ver 1.1) are both 2 parallel downloads per hostname. So distributing your files across multiple hostnames, you increase the amount of parallel downloads.

UbuntuLinuxHelp

May 29th, 2009

Your .htaccess code:

Header set Expires “Thu, 15 Apr 2010 20:00:00 GMT”

causes every server I try it on to have error 500. Is there another way of doing this instead (or some other htaccess code)?

Black Sand

May 29th, 2009

Thanks for sharing. Good information

Brett Tabke

May 29th, 2009

Excellent set of tips.

I would add one more: Test in multiple browsers and machines. What is fast under FF on WinzXP, might be dog slow under safari on a macbook. I often use an older slower backup laptop to test pages and am surprised at what parts of a page can slow down rendering/loading.

Also, don’t get married to using that big default library package of – say – JS or CSS code. On a high value page that doesn’t require js/ajax/css code, you can skip loading all that for much faster rendering.

bt

varul

May 29th, 2009

wow, I have landed to the right page
seems to be prime things required to follow for making up a search engine friendly site

Robert Shady

May 29th, 2009

@Michael Scrip: The multiple subdomains comes into play because of a limitation on the number of simultaneous transfers a browser will do, not because of server limitations. Most browsers will only open 2 simultaneous connections to the SAME URL, but if the URL’s are slightly different (ie: static1.domain.com and static2.domain.com) then it will open 4 connections (2 to each URL) thereby effectively cutting your page load times in 1/2. Most large websites put their HTML on their main URL, and all of their content on subdomains or CDN’s..

Khurram

May 29th, 2009

To apply these guidelines to ASP.NET applications:
http://www.codeproject.com/KB/aspnet/PeformanceAspnet.aspx

Julian Young

May 29th, 2009

Loving this, specifically the css sprite guidance. Much appreciated!

Jack

May 29th, 2009

@Michael Scrip, @Jacob Gube There’s no question whether it would be faster or not. A browser will only create 2 concurrent connections to a domain. Subdomains count as new domains, so if you use just one subdomain and split the load evenly across it, you will be loading with 4 concurrent connections. It’s a trick used a lot in AJAX/Comet type apps a lot when you really need to keep a persistent connection to the browser.

My curiosity is still whether or not doing so would degrade the SEO efforts in the page. I don’t know if the search engines clump media under a given domain regardless of the subdomain or if subdomaining them would fracture your SE presence.

As far as images fighting for connections, I think the idea is to use enough of them (c1.mydomain.com, c2.mydomain.com, etc.) to prevent that from happening. If you over did it you could probably tie up your own server with connections from the same box. So, in that way, it is a bit like mydomain.com/images. The advantage is purely for the client’s load time.

Jacob Gube

May 29th, 2009

@Jack: Logically, in theory, to me, it makes sense. I was just wondering what gains you get versus the negatives (DNS lookup, and like you mentioned, SEO effects).

I think I’ll start splitting up my images domain (image1.sixrevisions.com, image2.sixrevisions.com, image3.sixrevisions.com) to see if it improves load times.

ray

May 29th, 2009

Great tips!
I still have some difficulty
understanding the SPRITES example.
Can you expand that section with some images, etc?

Thanks Ryan!!
Ray
SF

m3talsmith

May 29th, 2009

@Selinap and @Jacob: In reference to expiration versioning, I’ve been using a javascript Date object, or server side Date object, for cache purposes for years. So during development I add a ?13739920 or whatever the current UTC time is. I like the version idea though as it gives greater control. Cheers!

Ryan Hickman

May 29th, 2009

@Jacob: Well if you add the CNAME image1 and image2 etc… to your DNS record, then there is no DNS lookup. As its already associated with the appropriate IP address. You have to be very careful and do this the right way thou. I would do on a test server first. As it must propagate which can take up to 24 hours.

John (Human3rror)

May 29th, 2009

this is awesome. thanks!

Roberto

May 29th, 2009

I have to try to start working with sprites. Thanks for the tips.

Mariano

May 29th, 2009

Ryan,

Great great article. I had no idea about how CSS sprites were used before I read this article, and your advice on allowing caching for your site were top-notch. Certainly, most of this should be considered during the design phase and not as an after-thought, but in both instances it’s applicable nonetheless.

Thanks!

Ian

May 29th, 2009

Wow… great guide. Thank you.

honour chick

May 29th, 2009

great tools. i use Yslow w/ firefox which is embedded in Firebug.

Steve Zussino

May 29th, 2009

The CSS Sprites might be interesting to use. Has anyone implemented this? Wouldn’t the difference in browsers drive your designers squirrely?

I can see it on larger image friendly sites but I can’t see it used effectively on mine.

Michael Scrip

May 29th, 2009

Thanks everyone.

I understand the reason behind using subdomains. What I’m confused about is if you load a webpage from your main domain… and that page has 30 images coming from another subdomain… how does it help? All 30 images are loading from that one subdomain… still limited by 2 concurrent browser connections.

But, if you had 2 subdomains, and put 15 images on each… then it would help in the above example.

So, if you had separate subdomains for header images, article images, avatars, etc… then a single page could possibly open more connections to get images from the different subdomains.

Sascha Kimmel

May 30th, 2009

Good article, I have posted a similar article series two weeks ago on my blog.
Anyways, from my experience using subdomains does not work at all if the subdomains do not resolve to different IP addresses. So if you are using different host names they have to resolve to different IP addresses to work. You cannot use CNAMEs for that purpose but need to use A records in the name server.

Lasmiranda D.

May 31st, 2009

i use this very handy firefox extension to minify my css files:
http://www.sitepoint.com/dustmeselectors/

it can tell you, which css selectors are unused. not only for one page, but for your whole site! this can seriously shrink your css files, especially if you handcrafted them over years or used a website template.

gaus surahman

May 31st, 2009

I was about to write the similar article since two weeks ago, but was buried in my preparation to leave the office. I’ll make sure I’ll write what is not covered here when I get a chance to write it. Thanks for coming out first :)

Sriraj

May 31st, 2009

Awesome tips. Just downloaded Yslow and your tips on how to read its UI works like a genius

Max Hartshorne

June 2nd, 2009

We’re an authority site about travel and boy do we need this advice. Ryan you’re a genious! I and my webmaster are going to be spending lots of time with your list…and I’m now following you on twitter in case you have any more gems. I also RT’ed this info. Thanks Ryan you da man!

Atul

June 3rd, 2009

thnx a lot

Josh Fialkoff

June 4th, 2009

I’d like to implement your suggestion on using subdomains for images, etc.
After adding the subdomains and files, is there a simple way to do this using redirects, so that I don’t have to change all of the image links?
Thanks,
Josh

Nick Tulett

June 5th, 2009

YSlow is SO May 2009!

I suggest everyone also takes a good look at Google’s new Page Speed add-on for Firebug. Yes it uses the same rules but the explanations in the docs are even better than Yahoo’s and should clear up a lot of the misunderstandings in the comments here.

Jeff Dorenbush

June 15th, 2009

Great post! A lot of helpful tips.

Simas

July 1st, 2009

so i have question: it is possible to make header set expires to something like after 2 days after cache write?
at example i visited site in july 1st, and the cache will expire in july 3rd but if i visit site in july 2nd, cache will expire in july 4th?

sunnybear

September 10th, 2009

@Simas: due to standard HTTP specification it’s impossible (but IE with pre-check and post-check makes it possible onyl for this browser).

If you want a simple and powerful solution for any PHP website acceleration – it’s Web Optimizer ( http://code.google.com/p/web-optimizator/ ), one-click installation, one-minute overall website acceleration, dozens of settings and YSlow up to 98-99

Tony

May 18th, 2010

@UbuntuLinuxHelp: That line is for Apache1 and will cause an HTTP 500 on Apache2. For Apache2 you need this instead:

# turn on the module for this directory
ExpiresActive on

# cache common graphics for 3 days
ExpiresByType image/jpg “access plus 3 days”
ExpiresByType image/gif “access plus 3 days”
ExpiresByType image/jpeg “access plus 3 days”
ExpiresByType image/png “access plus 3 days”

# cache CSS for 24 hours
ExpiresByType text/css “access plus 24 hours”

# set the default to 24 hours
ExpiresDefault “access plus 24 hours”

Table Magician

June 10th, 2010

Thanks for the great info. I will be to work straight away – now that google is using page load as a ranking factor it becomes more important than ever.

Roger

Rob Erskine

June 30th, 2010

In the process of redesigning my site from full flash to html/css. I’ll let you know how much this comes in handy!

Craig

August 25th, 2010

Great tips for SEO and also good coding practice

Anandarajeshwaran.J

October 9th, 2010

If I add the javascripts at the end of the page before the end of body section will it affect if I add some functions to the onload

Pablo Almeida

October 17th, 2010

Good tips for web development and site optimization! Best practices rocks! ;)

SNH

January 5th, 2011

good article, if you have php based site, try adding ob_start(“ob_gzhandler”);
this will reduce the page size a lot. to verify , in ff, click on tools->page info. this size will be different before and after you add the above line. thanks.

Selman

January 6th, 2011

Nice article. Thanks

Mark Web

February 1st, 2011

Sound advice. I always tend to link out to css files to help speed.

Ali Nasir

February 7th, 2011

Good one, thanks for posting. I have tried all that and improved the load time specially.

Greg

May 30th, 2011

For deferred and parallel JavaScript loading, I’ve become a fan of head.js (headjs.com) which also includes HTML5-shiv and Modernizr-like functionality. But even just for loading, it’s a small bit of extra data to open up an easy-to-manage system of loading JavaScript (including conditional dependencies ‘n’ stuff!)

No need to manually include the script tags at the bottom of the page using something like head.js (and others; there are a few “javascript loaders” out there)

James web

July 18th, 2011

Great tips I will be trying these on my next site thanks a lot.

Anil Jangra

August 7th, 2011

I use joomla for my website and wonder if i ca use use sub domains as mentioned in this article, anyway seems like a lot of reading ahead, thanks for great info.

Lyrics

November 10th, 2011

My websites waiting time is large. Any idea to reduce it?

Nonshatter

November 22nd, 2011

is only valid for IE

You will have to move the scripts from the head to the body manually for the other browsers.

Visitor

January 3rd, 2012

This page is really still loading. I think it just stopped after about 5 minutes.

Leave a Comment

Subscribe to the comments on this article.