- Step 1: Use Web standards
- Step 2: Validate your HTML and CSS
- Step 3: Keep CSS and JavaScript out of your markup
- Step 4: Load CSS in the HEAD, JavaScript in the BODY
- Step 5: Reduce requests for external objects
- Want to learn more?
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Step 5: Reduce requests for external objects
It only makes sense that, if you want to reduce page load times, then you want to reduce the size of the page – but reducing the number of external objects called by a page is as equally, and sometimes more, important. A browser can download one big object faster than multiple smaller objects, due to the overhead of talking to the server for each separate object (as described in step 3).
One easy way of reducing calls is to combine all external CSS files in to a single style sheet; likewise, combine all JavaScript files in to one. There may be some files which you can’t combine (such as a third-party style sheet or an analytics script) or it may not make sense to combine everything in to one file (for a very large site or Web app where code is applied in very specific situations instead of across the site) –you’ll have to use your best judgment to determine what works for your site.
A slightly more advanced technique to reduce the number of external objects called on a page is to use CSS sprites. A sprite is a single large graphic file which contains multiple small graphical assets. With some carefully coded markup and CSS, select portions of the sprite can be displayed. For example, here is a sprite containing the default and hover states for some content controls, followed by the markup and CSS to display just one of the arrows:
){kind=icon}
<a href="#" class="next"><span class="hide">Next</span></a>
a.next {display:block; width:11px; height:11px;
background:url(sprite.gif) -75px 0 no-repeat;}
.hide {display:block; position:absolute; top:0; left:-500em;
width:1px; height:1px; overflow:hidden; text-indent:-9999em; line-height:0;}
If you were to call the eight arrow graphics separately, you’d be making eight calls to the server to download 447 bytes of data. With the sprite, the browser only makes one call to the server for an image which is just 298 bytes. This is just a small example – just think of the effect an even larger sprite could have on page load time!