1. Use YSlow to profile and measure your website load times
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 completely 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.
- Too many HTTP requests
- No expiration headers for static graphic files
We’ll talk about all of this in a moment.
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.
Put CSS at the top:
Put JS at the bottom:
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:
load different CSS style rules based on various conditions, be it a random number, time of day, or browser.
Reduce DNS lookups:
Remove duplicate scripts:
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.
2. Using CSS Sprites to reduce HTTP Requests
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:
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.
- Load your CSS in your
tag above your body.
defer property. Usage is asfollows:
4. Using Subdomains for parallel downloads
- Create 3 Subdomains on your server
- Place your images in a folder in each of the subdomains
- Replace the image locations in your site to the paths of the newly create subdomains.
1) Five Ways to Speed Up Page Response Times