Website Performance   Leave a comment

The rising value of site performance is no secret, it can seem that way when attempting to explain the concept to others. Therein lies our challenge as Web developers: Unless it is immediately demonstrable, performance is a nebulous concept rarely considered during the planning stages of a website. The task often falls to developers to evangelize performance. And because, ultimately, a developer’s job performance is directly tied to a website’s performance, it is essential that the lines of communication are clear and open.

Here are three rules that, if followed, will allow our often misunderstood group to speak effectively on behalf of website performance.

TRICKS:

To make people want fast websites, you first must be able to build fast websites without sacrificing aesthetics. Here are a few simple precepts I favor that are rapidly becoming universal:

Sprite and concatenate. It is essential to minimize HTTP requests. Sure, each request may take only 200 milliseconds — but if your page contains 60 individual resources, you are looking at a dismal 12-second load. You will see a major impact on performance just by spriting images and concatenating your CSS and JavaScript files.

GZIP. GZIP compression zips the text content of  your HTML/CSS/JS files on the server — most modern browsers unzip the files automatically. It’s an easy way to enhance the speed of any website, resulting in a bandwidth and file-size reduction of up to 80 percent, in some cases. GNU Gzip is a popular resource to compress files.

Use Expires and Cache-Control headers. Tell the browser when assets will expire. Setting a Far Future Expires header on your assets will let the browser know not to request the document again until whatever date you set. Adding an Expires or Cache-Control header defines how long an image will be cached. This reduces HTTP requests and a lot of load time as well. Consider this a way to reward users for making repeat visits to your site.

TRAPS:

Embrace failure. It is a perfunctory tenet, but one that is easily forgotten. What may be surprising is the best tools for evaluation are open-source and readily accessible, if you know where to look.

Google Page Speed. Google’s Page Speed is an add-on to Firefox/Firebug that runs analytical tests on your Web server configuration and front-end code then grades your site against Google’s own Web performance best practices. Finally, the tool offers suggestions for improvements.

Yahoo! YSlow. Like Google Page Speed, YSlow is a Firefox/Firebug add-on that grades your site against Yahoo! performance rules and suggests fixes. YSlow has been around a bit longer than Page Speed, and offers editable profiles based on the needs of high-traffic sites versus smaller ones.

WebPageTest.org. This essential grading service will allow you to test based on varied browser type (IE7 vs IE8, for example), the geographical location of the user and the bandwidth used to access your site.

It might be a tall order for the more socially reclusive, but evangelizing performance is essential to preserving a satisfying user experience as well as your own sanity. Perhaps, even your job.

Ask to be involved. A shocking number of developers who are isolated from the process of scoping, planning and designing a website. As the person ultimately responsible for delivering the final working product, you should make an effort to consult from the project’s onset. Ask to attend client meetings, review proposals or help create functional specs.

Identify ways to simplify. Just because you can doesn’t mean you should. If a telecommunications company delivers videoconferencing over a global corporate WAN, perhaps HD video is a logical website feature. For a company selling colostomy bags, an unnecessary (and unsettling) performance lag can be eliminated by the omission of HD video.

Offer suggestions, not road blocks. Saying “no” might be necessary when something is impossible to code, out of scope or will have a detrimental impact on performance. However, “no” is more valuable when accompanied by an alternative.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 822 other followers

%d bloggers like this: