The Smashing Book – Performance Optimization for Websites

• By The Smashing Editorial
• October 5th, 2011
• Optimization, Performance, Servers
• 2 Comments

← The Ultimate Guide to Fantastic Color UsageTOCPerformance Optimization for Websites (2/2) →

Slow and unresponsive web sites are annoying. And if your website is annoying, your visitors are unlikely to buy goods or contact you. You lose money. Hence, it is important for you to optimize your website to provide a good user experience.

Yahoo’s Firefox plug-in YSlow provides tips on how to make websites more responsive. We will not settle with just YSlow’s tips, though, but take two further steps by optimizing MySQL and PHP as well. Let’s go!

Tools You Will Need

• Your text editor of choice.
• A LAMP Web server (Linux, Apache or Lighttpd, MySQL, PHP5), configured.
• FTP access: FTP is a common way to access files on a Web server. Because this article is intended for Web designers and developers with some degree of knowledge, we will assume you already know how to access your files via FTP.
• SSH access: In order to change the configuration of a remote Web server running Linux, you will need to access your Web server via SSH using an SSH client such as Putty or Jellyfish. We will assume you know how to enter your SSH access information into an SSH client. Your Web host can provide SSH access information; that is, if your hosting plan includes SSH access and you have write permission to the Web server’s configuration files, which may not be the case in a shared hosting environment.
• MySQL Tuning Primer: Please skip this part if you do not have write access to your MySQL configuration files or if your Web server does not run Linux or if you are not using a MySQL database. Otherwise, please go to http://launchpad.net/mysql-tuning-primer/ and download the latest MySQL Tuning Primer script. Move it to your Web server using FTP or SSH. Do not run it just yet.
• Installing Smush.It for Firefox: this is a handy tool that gives you a huge shortcut with image optimization. Go to http://smush.it/ and install Smush.It for Firefox. It may interfere with Firefox’ NoScript plug-in, so you may want to disable the latter temporarily.
• Installing Firebug and YSlow for Firefox: Yahoo’s Firebug plug-in YSlow analyzes your website in a jiffy and provides real-world recommendations on how to achieve a more responsive website. Of course, we will not settle for YSlow’s recommendations alone. But this is how you install YSlow:
• Download Firefox fromhttp://www.mozilla.org and install.
• Start Firefox and install Firebug from http://www.getfirebug.com
• Install YSlow from https://addons.mozilla.org/firefox/addon/5369.
• Start analyzing your website right away. This is how you do it: restart Firefox and open your website. Go to “Tools > Firebug > Open Firebug”. Then open the split-window tab “YSlow” and click “Performance”. YSlow will now analyze your website and show a performance grade. We are now going to boost that grade.

Give Correct Image Dimensions in IMG Tags

If you have an image in the dimensions of 2592 * 1944 pixels, and you would like to display it at 120×90, do not let browsers scale down the image:

<img src="img_2592x1944.png" width="120" height="90" alt="Bad" />

Transmitting the image would take a lot of time. Additionally, browsers would have to scale down the image on their own, which also takes time and does not look very good. Prepare all images first before putting them on the Web. A lot of free and powerful tools can help you scale down images: the GIMP and Paint.NET, for example.

The benefit: Better-looking images that can be transmitted more quickly, leading to a better user experience.

Reducing Image File Size

You will need to take care of every image file that you use on your website and see if it is possible to reduce the colour palette to 256 colors or even less. That, of course, depends on the image and file format. There are photos, line art, screenshots and so on, and every type needs special care. This is a tedious task, and nobody wants to do it.

Now, here is the shortcut: fire up Firefox and go to your website. At the bottom-right of your browser, you will see the stylized Smush.It head. Click it. A new browser tab will open. The Web service grabs your website’s images and smushes them. Download the ZIP file provided and replace the images on your Web server with the optimized versions. Repeat for other pages on your website that have images.

The benefit: smaller image files contribute to faster loading times for your website, leading to a better user experience.

Sprites

Let’s say you have a forum. In forums, people like to express their emotions using smiley faces. Because there are so many emotions, you would need many different smileys and thus many different image files, increasing the number of HTTP requests for each page delivered to the visitor. This can significantly slow down the loading time because there are many files to download.

Now imagine a 48 * 16 pixel image divided into three columns. In each column there is a 16 * 16 smiley: one with a sad face, one with a happy face, one with an angry face, etc. This single file that consists of three different images is a sprite. Using the CSS attribute “background-image” and “background-position”, you can specify which cell to be displayed: for example, when to show a happy face on the page. That way, you can store all smiley faces in a single file, reducing the amount of HTTP requests big time. Naturally, the more images you aggregate into a sprite, the more you will benefit from this technique.

This method originates from the computer games industry and is suitable for images that do not need to be updated often: smileys, arrows, background images and bullet points, for example.

We would not recommend using this technique for images of text menu items, because you may have to change those from time to time and would thus have to change the sprite image every time and have to be careful not to break things. Head over to Smashing Magazine¹ for detailed information on this topic.

The benefit: fewer HTTP requests contribute to faster loading times for your website, leading to a better user experience.

Content Delivery Networks and Servers

YSlow recommends putting static content, such as images, on a dedicated network of servers spread around the world so that images are stored in proximity to users. If you can afford renting servers all over the world, then please do follow this recommendation. For most users, this is not a feasible option because of the high costs. If at all, rent a dedicated server and set it up as a no-frills static content server without scripting or cookie support.

The benefit: better use of caches and an enhanced user experience, as well as lower traffic costs.

Combine CSS and JavaScript

Reduce the amount of HTTP requests needed to transmit a Web page to the visitor’s machine by aggregating all of your CSS files into one big CSS file and all your JavaScript files into one big JavaScript file. You can, of course, continue developing using multiple CSS and JavaScript files. You would then have to aggregate files for each development cycle.

Use either a text editor to aggregate files by hand, or, on Linux, go to your CSS directory and cat (short for “concatenate”) them into one file via the SSH console:

cd your_css_directory
cat file1.css file2.css file3.css > file_to_link.css

and

cd your_javascript_directory
cat file1.js file2.js file3.js > file_to_link.js

The benefit: fewer HTTP requests contribute to faster loading times for your website, leading to a better user experience.

Take special care to maintain the order in which JavaScript and CSS files are loaded. This is important because CSS directives may overwrite others. (You may want to delete redundant CSS declarations as well.) Some JavaScript code may depend on other JavaScript code. If you decide to develop these aggregated files, make sure to divide the files into sections, using comments, for example:

/* Menu Styles */
(place menu styles here)
/* Header Styles */
(place menu styles here)

The benefit: fewer HTTP requests contribute to faster loading times for your website, leading to a better user experience.

Move CSS to the Top and JavaScript to the Bottom

Place CSS file requests in the <head></head> section of your HTML files, just as YSlow suggests. This way, browsers will already know how to display the page even before they get the HTML and will not need to realign objects during the loading process.

Place JavaScript files at the bottom, right above the closing <body> tag. This prevents JavaScript code from rendering the page while things are still being requested.

The benefit: the page loads as fast as possible, leading to a better user experience.

Minify CSS and JavaScript

First of all, many regular expression-based JavaScript compressors are prone to failure when the code to be compressed is flawed. Save yourself a lot of hassle and run your code through JSLint¹ , and sort out any problems it may have detected. Even when your code passes JSLint, make sure your code is as close to perfect as possible, because even semicolons in strings make some compressors fail because the compressors mistake them for the end of a line.

In a text editor, copy your CSS or JavaScript onto the clipboard and paste it into the corresponding input field in Minify². This incorporates Packer 3.1 and Minify3, which provide very good minimizing performance. Then click “Hit me” and use the resulting CSS or JavaScript on your website. The more code you minify, the higher the performance gain, at least for JavaScript, because CSS cannot be minimized very much. Of course, other CSS and JavaScript compressors have even better compression ratios. You may want to try them as well.

YUICompressor, for example, has proven to be a good compromise between security, reliability and compression ratio. If you are using some kind of middleware, you may want to integrate YUICompressor to automate the processing of CSS and JavaScript files. Being a Java application, it can be integrated virtually anywhere.

The benefit: overall JavaScript performance can be significantly improved, leading to a better user experience, smaller files and lower traffic costs.

Make CSS and JavaScript External

Do not use inline CSS or JavaScript. Put all CSS and JavaScript into separate files. Not only is this more comprehensible (because you know where to look when you want to change something), but it also reduces the size of HTML files and takes advantage of caching (for example, when a JavaScript file or CSS file is used for more than one page). It also reduces the amount of HTTP requests.

The benefit: Better use of caches. Reloading content while browsing the website takes less time, leading to a better user experience.

Choose a Document Type

Choosing a document type does not have a direct impact on speed. However, by giving browsers clear and unambiguous rules on how to interpret HTML and CSS, you take full advantage of their potential.

Decide on one HTML or XHTML standard for all the pages on your website. HTML 4.0 is a good choice, although many website owners use XHTML 1.0 Transitional and seem to be happy with it. Do not omit a document type declaration anywhere and thus force browsers to guess which standard you are following. Instead, explicitly declare the document type in the first line of your HTML.

For XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">

And for HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/
loose.dtd">

The benefit: by telling browsers how they should handle your website, you take an important step in ensuring that your website looks consistent across different browsers.

Validate Your Pages

Especially when you offer Internet-related services, potential customers often carefully analyze your website to determine how important good quality is to you. A page that validates successfully on W3C’s own validation service ³ suggests that you are dedicated to quality and that your pages are designed to look good in common Web browsers. Whether a valid page really is an indicator of your quality of service is another matter. But if a potential customer checks your website and finds that it does not validate, you probably have already lost her or him.

Do Not Use CSS Expressions

Web browsers that support CSS expressions let you put logic in CSS declarations. This is neither an accepted Web standard (and thus not supported by most Web browsers) nor good practice, because CSS is intended to separate program logic and content from document presentation. For example, when a document object is moved or updated, triggered by JavaScript or window resizing, the object’s style needs to be updated for every step of the movement or update. CSS expressions take a lot more cycles to render than plain CSS, slowing down the process significantly. This is a waste of resources. Do not use CSS expressions. They are no good. They have never been accepted by the Web design community for a good reason. Even Microsoft, the “inventor” of CSS expressions, has ditched them in Internet Explorer 8.

—

1. JSLint, The JavaScript Code Quality Tool
2. Minify – Strong JavaScript and CSS compression
3. W3C: Markup Validation Service

← The Ultimate Guide to Fantastic Color UsageTOCPerformance Optimization for Websites (2/2) →