What Every Web Developer Should Know About Front-End Performance

Too often as developers, we ignore a crucial last step before launching a website: optimizing for performance.

Most developers now recognize that organized, valid code ensures maintainability and compatibility.

Anyone who doubts this merely has to speak to a developer who has picked up work on an old website that is littered with unorganized, uncommented spaghetti code.

Just as preparing our code to be read by other developers is important, so is preparing our code to be read by browsers. Great web development might start with great organization, but it ends with great optimization.

This article introduces best practices of front-end performance.

 

The Story of a Web Request

web page timeline

When a visitor requests a page from your website, several things happen:

  • Your web server returns an HTML document;
  • The visitor’s browser looks for and requests linked files (CSS, JavaScript, images);
  • Your web server returns those linked files;
  • The visitor’s browser displays those files, runs them or looks through them for more things to request (e.g. CSS background images).

While this process seems simple enough, a number of complications could really slow it down:

  • Each requested file has headers that must also be sent. Sending many small files creates unnecessary overhead, which you avoid with a couple of big files.
  • Most browsers are limited in the number of files they can download from one domain at a time. If you have 24 files to download from the same domain, the ninth won’t begin downloading until the first has finished.
  • Many browsers block all parallel downloads when loading external JavaScript.

While all this might sound somewhat complicated, there are best practices to follow to make it much simpler. Both Google and Yahoo offer fairly comprehensive guidelines on taking website optimization to the extreme:

Many of their recommendations require a bit of work. Below are the five best things you can do today to improve your website’s performance with minimal effort.

 

5 Quick Changes To Improve Your Website’s Performance

1. Move your JavaScript to the Footer

Moving your JavaScript files to the page footer is the quickest and easiest thing you can do to improve performance. Many browsers block parallel downloads when loading external JavaScript files; by putting your files in the footer, browsers will begin loading other things first.

Look out, though, for side effects to timing and appearance. If you are using JavaScript to change the appearance of an element, it won’t be executed until after a longer time lag.


2. Put the CSS First

Loading the CSS first is just as important as putting the JavaScript at the end of the HTML document, for two reasons:

  1. CSS often contains background images that require another round of requests. Getting these started ASAP is important.
  2. Pages render as soon as the CSS is ready.

By putting the CSS at the top of the document, you ensure that all background images begin loading immediately and that your website renders as quickly as possible.


3. Compile and Minimize your CSS and JavaScript

When writing code for maintainability, using several different style sheets and JavaScript files often makes sense. When optimizing for performance, this is almost the worst thing you can do. With each file you add, a header needs to be sent and an additional request needs to make its way to and from the server.

Combine all of your CSS into one file and all of your JavaScript into another, and then minimize them both. (Don’t forget to put the CSS at the top of the HTML document and the JavaScript in the footer.)

Although recompiling and minifying your files after each change might sound like a pain, the performance difference is truly dramatic.

Compilation and minimization resources:


4. Beware Third-Party Scripts

Many websites today contain third-party scripts and widgets that load data from other servers. Examples are the Tweet Button, the Facebook fan box, the Share This button and even Google Analytics. You would think that these would all be well engineered, but many are not. For example, the Digg widget makes nine requests, is 52 KB and blocks the main page from downloading!

Use these widgets sparingly, measure their performance and look for asynchronous alternatives. Alternatives to the most popular widgets are available; installing them is slightly more complicated, but they perform much better. You can usually find them with a little digging.

Asynchronous widget resources:


5. Measure Your Results

gtmetrix

A number of great tools out there make it easy to measure the performance of your website. Some can be used in the browser; others are online:

  • Firefox Firebug
    Check out the Net tab in Firebug to see a visual timeline of how long your website takes to load and why it’s so.
  • YSlow for Firebug
    Yahoo has released a plug-in for Firebug that analyzes a website against its YSlow recommendations and suggests ways to improve performance.
  • PageSpeed for Firebug
    This works just like YSlow but is based on Google’s PageSpeed recommendations.
  • GTMetrix
    This tool takes a URL and delivers a full report on the website’s performance based on YSlow and PageSpeed. It’s convenient when Firebug isn’t available or you want to share the results via a link.

 

Going One Step Further

Most web developers could implement the five tips above fairly easily. That said, a number of other things are worth doing if you want to dig a little deeper and optimize your server’s configuration.


Add Expires Headers

Include an expires header with every file your server sends. This tells the browser how long the file is good for. This way, the browser knows to save the file for the next time it is referenced, so that the browser doesn’t need to fetch it again from the server.

Many websites include the same CSS file on every page, but there is no reason a visitor should have to download it for every page; the browser should know to cache it.


Use Gzip Compression

Today’s computers are really fast. Gzip compression takes advantage of this by asking the server to compress every file before sending it to the visitor.

The visitor’s browser then downloads and uncompresses it. In the past, we had to consider server resources in deciding whether to enable this. Today, there is essentially no downside to enabling gzip.


Consider Installing mod_pagespeed

Google has just released an Apache module called mod_pagespeed. It automatically implements almost all of the techniques in this article.

Understanding the techniques before implementing this module is still important, though; if you know how the website works, you’ll be able to take advantage of mod_pagespeed’s many filters. One such filter, Combine CSS, finds, combines and minifies all CSS referenced in the HTML.

The module has a number of filters and settings that could improve your website’s performance. All are worth looking at.

 

Conclusion

While not the most glamorous topic, optimization deserves more attention. Our job as developers is to learn the industry’s best practices in order to deliver the highest-quality work to our clients and users.


This post was written exclusively for Webdesigner Depot by Joel Sutherland, founder and web developer at New Media Campaigns. He is a part of the team that just launched HiFi, a modern content management system built for designers with their clients in mind. Follow Joel on Twitter or contact him on the HiFi website.

Do you know of an easy way to improve a website’s performance that wasn’t mentioned in this article? Please share it and your experience in the comments below.

0 shares
  • http://www.natashastorm.co.za natasha

    A useful article, as always.

  • http://www.free-stock-graphics.com Andree

    Never heard of mod_pagespeed from google. For sure i will take a look.

  • http://www.ajaxshake.com Ajaxe

    Great article, i would like to know a litle more about performace, what about php cache , mem chace, or httacess cache, are you thinking to write an article about that ?
    thanks in advance.

    • http://www.gethifi.com Joel Sutherland

      The items you are describing are for server-side performance. By working with any of those, your server will be able to deliver the html file quicker. This is very important, because ever ms saved on the html file is a ms that will be saved by a visitor.

      That said, I consider server-side optimization as separate issue. Most CMSs will automatically take care of this for you, or have plugins that handle it.

      Even if you do this, you’ll also want to do the optimization methods I describe in this post.

  • http://themeforest.net/user/perrycoke/portfolio?ref=perrycoke Kerry Moran

    Great post, this has given me a great insight to the performance of sites I have created in the past

  • http://masenchipz.com masenchipz

    nice tips improve website, hmmm… how about using plugin DB Cache Reloaded mix WP Super Cache

  • http://www.red-team-design.com Red

    Nice article, but how about optimizing images with tools like smush.it or pngcrush? I think this is also a requirement.

  • http://www.emotionstudios.net Mihai

    Good post! Indeed, for example placing all the small graphics in one big PNG is a good way to increase the speed. This topic can be very large so I guess each technique can get a post of itself with details.
    No word about CDN or filetypes/compression?
    Cheers!

  • muni

    nice article

  • http://www.rethink-design.com/newsletters/novootm.html Dan

    This website has a worse score than me according to my PageSpeed and YSlow firefox plugins.

    I haven’t really done much in the way of optimising my site, apart from the usual images, but some of these tips should vastly improve my site. Thankyou.

  • http://www.acousticwebdesign.net Mitchell Hall

    Great article. I especially like your tip for looking for asynchronous versions of third party scripts. Hopefully, developers will follow Google’s lead and start creating more asynchronous scripts.

    Third party scripts are a huge performance drain and most developers overlook this aspect when working with a CMS like WordPress. Almost every plugin you installs includes some form of javascript and/or CSS that can cause significant performance issues, especially when these scripts are loaded on pages that don’t even use the plugin. I’ve recently added this check to my pre-deploy checklist and am amazed by how much unnecessary code is loaded by default.

  • http://www.sajalkayan.com/ sajal

    The current digg widget is asynchronous and doesn’t block http://about.digg.com/downloads/button/smart <– i found it quite impressive…

    PS: Thanks for the link

  • Will McKenzie

    Also really worth checking out http://jsrocks.com

  • http://monkey-house.ca Greg

    Not all entirely new information, but always worth revisiting. One new thing was the mention of mod_pagespeed, which I hadn’t heard of before. Cheers for the useful reminders and concise explanations!

  • http://www.curtisscott.com Curtis Scott

    This is a great write up! GTMetrix looks like something worth checking out for sure!

    Also, mod_pagespeed is a godsend, I really look forward to testing this out ASAP.

  • http://bibikova.com ben

    Didnt know about the nifty css compressor. Thanks

  • http://www.welcomebrand.co.uk James Young

    The 3rd party apps is a constant source of annoyance to me. As you mention, many are either badly written or just too demanding.

    Digg is a good example and things like the Disqus commenting system add a lot of requests for arguably not that much gain in usability so you should watch those things.

    The other one to keep an eye on as a wordpress user is when you install plugins, often these plugins add in additional calls to their own js files in the head of your document and often you can miss these and they can be removed by editing the plugin and adding into a single config/settings/script file.

  • http://www.jc-designs.net/blog Jeremy Carlson

    Good little overview. I’ll have to check out the WP-Minify plugin, didn’t know about that.

  • http://lekto.net Tian Permana

    This is simple, but great ! Thanks.

  • http://www.xininvoice.com keith

    thanks for the great tips. Will there any problem if put the javascript in the footer? What happen if some click on the page which suppose to fire some javascipt event?

    • http://www.gethifi.com Joel Sutherland

      There can be problems if you move your JS to the footer, but you’ll generally be fine if you’re using a library and your code is inside something like $(document).ready();

      It is important to test things when you make this change. This is maybe the best thing you can do to improve perceived performance on your site, so most work required to make it happen will be worth it.

  • http://www.gethifi.com Joel Sutherland

    Thanks for the comments! This is a topic I care a lot about and there is much more that you can do to improve your site. Consider this list a good starting point.

  • http://www.mgdesign.eu уеб дизайн

    Great article again with lot of usefull resources. Thanks guys!

  • http://www.gethifi.com Joel Sutherland

    Image optimization is also important, whether it is appropriately compressing images or using sprites.

    For this post, I tried to stick to things that wouldn’t require the major overhaul of an existing site. Switching to image sprites can be quite time consuming if you don’t do it from the start.

  • http://www.advitum.de/?linkid=comment Advitum Webdesign

    I actually hate improving the performance of my websites. But I agree that this very nasty task in the working process is extremely important. But it simply has nothing to do with creativity, so it sucks…

    This article really helps with it ;)

  • http://www.energiseweb.co.nz energise web

    There’s some really great stuff in this article. Over the last few years as processor and internet speed has increased, I think that programmers in general have become a little lax when it comes to creating clean, fast code.

  • http://www.amberweinberg.com Amber Weinberg

    I’ve found that just by using Photoshop’s save for web feature at 85%, putting scripts in the footer and making sure they only run on the needed pages has speed up all of my sites to the point where no other optimization is really needed. I’ve played with minifying before, but you don’t really notice a difference on most of the smaller 5-6 page websites out there.

  • http://pceasies.com pceaies

    A couple more tips:

    site-perf.com offers a graph showing how long each file takes and show nice stats

    You can use a batch or shell script to automate compression of css and javascript through Yahoo!’s YUI compressor (Java program, cross platform)
    You can also include in the batch/shell script a line to gzip the files after minifying them

  • http://www.benstokesmarketing.co.uk Ben Stokes

    Biggest thing I picked up on here is to make sure you use G Zip:

    “Today’s computers are really fast. Gzip compression takes advantage of this by asking the server to compress every file before sending it to the visitor.”

    Very useful tool, plus it is free :)

  • http://www.etatvasoft.com/ etatvasoft

    Looking for a front end performance, every web developer can do this stuff easily. Front end performance is very important because the whole back end part is based upon it. It also require less time and resources compare with back end projects. Here you have posted very good information which is helpful to every web developer.

  • http://www.nimeshchheda.com Nimesh Chheda

    Nic1

  • http://www.xhtmlteam.com XHTMLTEAM

    Nice article. Very useful!

  • http://art-a-designer.ru andry

    a site about CSS is quite useful!

  • http://www.empfehlenswert-wien.at wien

    great post, thanks for this helpful tools

  • http://www.markinthe.net markinthe.net

    Great. Some of this things I didn’t know before. So I try it out and have a look at the performance :) Really interesting. Thanks.

  • http://www.psyched.be/wordpress Darkened Soul

    Thanks for this nice post, optimizing is one thing, yet it is sometimes against “symantics”…
    Good thing one states here that compiling CSS is only good for the faster loading and not at all for the readability of it.
    I do not like spaghetti code :D

  • http://www.softter.com/ johnjames audubon

    this simple but good information about free web scripts

  • http://www.plauditdesign.com/ Michael (Minnesota Web Designer)

    I for one am happy that you did not mention CDNs. It seems people over simplify the topic of optimization and don’t understand that for many sites CDNs can be a bad idea. Every connection a visitor needs to make means more time. Optimized web servers keep connections open which makes page loading faster as it avoids the overhead of making new connections. With most sites the addition of a another domain to distribute some of your images or other files can actual slow down page loading because multiple connections and DNS lookups need to take place.
    Personally, GZIP would be in my primary list though. It’s quick and effective for most sites. Love that you mentioned asynchronous scripts — good point!

  • http://sideradesign.com paul

    the best results are obtained by minimizing http requests. try combining css files, using less images for design purposes and replace with CSS, use sprites,etc…

  • http://www.buzz-webdesign.co.uk Buzz

    Thanks, this is a handy guide to keeping things running smoothly. I’m just editing a site somebody else developed a few years back and it’s a nightmare!

  • http://www.vivoocreative.co.uk Nottingham web design

    Awesome and very useful post, GTMetrix looks great gonna check that out now

  • http://createwebworks.com/ Do it Yourself website

    great tips there! thanks for sharing!

  • http://www.ajaxshake.com Ajax Examples

    Great Tips , very simple and straight to the point
    Thanks

  • http://blaze.io David Horne

    If you want to know some of the theory behind front-end optimization you can check out some of our videos: http://www.blaze.io/optimizations/

  • http://www.softter.com/ Stephen Fleming

    Such a this is good information about the scripts…….. so thanks for that…

  • http://janzaldo.wordpress.com Juan Anzaldo

    Recently I wrote an article very usefull about a toolkit for web developers, with a lot of tools that you can use to measure the web performance of your sites. You can see the article here [http://janzaldo.wordpress.com/2010/11/17/toolkit-for-web-developers/] I hope it complemented the information about web performance.

    Nice post!

  • http://www.scottcarmichael.co.uk Scott

    Thanks for sharing some great and useful tips.

  • http://www.emenki.com Web Design Hamilton

    At first glance when you mention minify, I was like how come you weren’t mentioning gzip. Which later I found out you do, but I would think those should be grouped together. They go hand in hand in minimizing sizes.

  • http://www.marcbuurke.nl Marc Buurke

    Again, great article with a lot of usefull tips.

  • http://www.e11world.com e11world

    Glad to say that I already follow most of these steps for all my sites and client’s sites as well. Good post!