up

Optimize Your Website

Optimizing the performance of your website need not be hard. Follow these tips to significantly improve your site performance with little effort.


Performance Optimization Tips

Enable HTTP Compression

Overview

HTTP compression allows the web server to compress a resource before sending it to the client, reducing the amount of data that needs to be sent across the network. HTTP compression is one of the biggest performance improvements that can be made to a website. Typically using HTTP compression can reduce bandwidth consumption by 50%-75% and lower page load times. Enabling compression on this website will dramatically improve application performance while drastically reducing bandwidth consumption.

Details

By default web servers simply serve a resource to a visitor without performing any actions on it. The full size of the resource is sent to the client as shown below:

However, many of the resources a website serves are text such as HTML, CSS, and JavaScript. These text items can be compressed by the web server prior to sending the item to the client. The client decompresses the response once it is received from the client. The net result is that less bytes have to be transmitted across the network to the client. The process of using HTTP compression look like this:

This additional computation does consume some server resources but the compressed version can be cached by the web server making this additional overhead unimportant.

There are different types of HTTP compression. You should use the gzip compression method instead of older, less powerful methods such as deflate which do not perform or compress as well as gzip.

Remediation

HTTP compression is a setting inside the web server. Different web servers are configured different ways. Below are instructions on how to enable compression on the most common web servers.

Apache

Compression on Apache is accomplished with modules using either the mod_deflate for Apache 2.0 or mod_gzip for Apache 1.3. The following shows how to configure gzip compression for Apache 2.0.

In your httpd.conf file uncomment or add the following lines:

          LoadModule deflate_module modules/mod_deflate.so
        

Then add the following lines to the end of your httpd.conf file:

          AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript
          DeflateFilterNote Input instream
          DeflateFilterNote Output outstream
          DeflateFilterNote Ratio ratio
        

These configurations will enable compression for HTML, CSS, and JavaScript files, and will also log the compression ratios in a deflate.log file. This helps ensure that compression is working, and you can disable these logs if you no longer need them.

Microsoft IIS

To configure on Microsoft IIS 7, refer to the Microsoft Documentation. For IIS6, see Enabling HTTP Compression (IIS 6.0)

References


Lossless Image Optimization

Overview

Images can often contribute up to 80% of your total page size, so its critical to analyze how you are using your images to improve your performance. This section discuss lossless image optimization techniques, or techniques that can reduce the size of your images without any impact to visual clarity.

Details

Images such as PNG files often are needlessly large due to ancillary content such as unusued pallete entries, comments, embedded thumbnails and more. While this content may be useful to the designer, it is not needed by your users. For example, some possible data chunks in a PNG file are shown below:

Follow these best practices to cut down your image size by 50% or more in some cases

  • Don’t use PNG images for photos. JPEG images compress photographs significantly smaller with great image quality. For example, on Windows 8 launch day, the Microsoft homepage used a 1 megabyte PNG photograph when a visually comparable JPEG would have been 140k! Think of all the wasted bandwidth on that one image alone!
  • Don’t overuse PNGs for transparency. Transparency is a great effect (and not supported by JPEG), but if you don’t need it, you don’t always need the extra space of a PNG image, especially for photographic images. PNGs work better for logos and images with sharp contrast, like text.
  • Strip out extraneous metadata from your images. Image editors leave a lot of “junk” in your image files, including thumbnails, comments, unused palette entries and more. While these are useful to the designer, they don’t need to be downloaded by your users. Instead, have your designer make a backup copy for their own use, and then run the website image versions through a free optimizer like Yahoo’s Smush.It or open source tools like pngcrush and jpegtran.

References


Minify Your Text

Overview

Minification is a process of stripping out unused comments, spaces, and other non-essential components of your HTML, CSS or Javascript files. By minifying your text content, you can often reduce your text file sizes by 10-20%.

Details

The following example shows minification of a sample javascript file:

Example: Original Javascript

            /* ALERT PLUGIN DEFINITION
            * ======================= */
            var old = $.fn.alert
            $.fn.alert = function (option) {
            return this.each(function () {
            var $this = $(this)
            , data = $this.data('alert')
            if (!data) $this.data('alert', (data = new Alert(this)))
            if (typeof option == 'string') data[option].call($this)
            })
            }
            $.fn.alert.Constructor = Alert
          

Minified Version:

var old=$.fn.alert;$.fn.alert=function(a){return this.each(function(){var c=$(this),b=c.data("alert");if(!b){c.data("alert",(b=new Alert(this)))}if(typeof a=="string"){b[a].call(c)}})};

While the minified version is barely readable to you and I, it’s perfectly valid for a computer and renders just as well, but using less space. Minification also has the added benefit of obfuscating your code to make it harder for your competitors to copy and modify all your hard earned work for their own purposes.

Remediation

Before you deploy your Javascript and CSS files to your production environment, make copies and run them through one of the many great free minification tools to strip the extraneous content.

There are many great free tools that can minify your text content, including YUI compressor (also works for CSS). There’s also a hosted YUI Compressor, JSCompress, and JSMin.


Caching Resources

Overview

HTTP caching instructs a visitor’s browser to store static content such as images, CSS and Javascript locally on their device for a period of time – often days, months or even years. By instructing a browser to store rarely changing content, you can significantly speed up your page load time by drastically reducing the number of server requests a typical page load makes.

Details

Files such as images, CSS and Javascript can be cached on the client using HTTP caching headers. The web site will often tell a browser when a resource was last modified. The next time you visit that web site you browser will send a conditional GET request. With a conditional GET the web browser asks the web server “Give me a copy of this resource, but only if the copy I have is not longer valid.” If the cached resource is still fresh the web server sends back a very small message telling the browser it acceptable to use the cached copy the browser already has. Otherwise the web server responds with a complete copy of the resource. This can be seen below:

While conditional GET requests are a step in the direction because it prevents the resource from having to be downloaded each and every single time it still has problems. The browser still has to make a complete HTTP request and wait for the server’s response before knowing if its cached copy of the resource is safe to use. Making all these conditional requests for content which is already in the browser’s cache can slow down page load times. In the waterfall chart below, you can see that the browser is spending a significant amount of time request and waiting for content only to receive an HTTP 304 response.

The solution is configuring the web server to use the Expires HTTP response header. This header tells the client it is safe to use a resource without first checking with the web server until a fixed date and time. After that date and time the resource should be considered stale and the browser should then fall back to using conditional GETs to get the correct version of the resource. The Expires header works for both HTTP/1.0 and HTTP/1.1 so downstream caches will respect it as well. The use of Expires can be seen in the figure below:

A down side to using the Expires header is that it is tricky to force a new version of the resource to a user who already has a cached copy of the older version resource. For example, consider a webpage with an image named logo.png reference with the following piece of HTML:

                  <img src="logo.png" alt="Our Awesome Logo!" />
                

Now let’s say the web server was configured to tell browser that this image will not expire for 5 years. This means every visitor who has a cached copy will continue to use that cached copy for 5 years or until the browser cache is cleared. To get visitors with an old cached logo to request the new logo we must do file name versioning. Since browsers cache resources based on their URL, by changing the name of the logo image’s URL the web browser will request the new image. The <img> tag using file versioning is shown below:

                  <img src="logo-2.0.png" alt="Our Awesome Logo!" />
                

It is important to change the actual file name and not simply add a query string to the filename like logo.png?5-2008. Many HTTP caching proxies like Squid will not cache anything with a query string by default.

Remediation

Caching directives are handled by web server and adding the Expires header to image responses is done by modifying the web server’s configuration files.

Apache

For Apache 2 you can add the Expires header using mod_expires. For the appropriate Directory or Website section of you httpd.conf file you should add:

            ExpiresByType image/gif "access plus 5 years"
            ExpiresByType image/jpg "access plus 5 years"
            ExpiresByType image/jpeg "access plus 5 years"
            ExpiresByType image/png "access plus 5 years"
          

Microsoft IIS

To set the expiration of Web site content (images, CSS, and JavaScript) for IIS:

  1. In IIS Manager, double-click the local computer; right-click the Web Sites folder, an individual Web site folder, a virtual directory, or a file; and then click Properties.
  2. Click the HTTP Headers tab.
  3. Select the Enable content expiration check box.
  4. Click Expire immediately, Expire after, or Expire on, and type the appropriate expiration information in the corresponding boxes.
  5. Click OK.

References


Missing Resources

Overview

Missing resources are images and other files referenced by your page, but no longer available on the webserver. Improve your user experience and speed up your page by fixing broken links.

Details

Missing resources refer to URLs included by your page in some manner, commonly by an anchor, link or CSS URL reference, but are not found on the server. This is usually caused by a typo when creating the web page, but can also be caused by changes in the server configuration.

When resources are missing, this often impacts visual elements of your page, resulting in a poor user experience. This can also impact page load time since the browser is searching for those missing resources.

Remediation

Check all broken links reported by Zoompf and change the URL to the appropriate location. If the reference has moved to a new location, consider using a permanent redirect to let other websites and search engines know where the new web page is located.

Apache

The format to specify a permanent redirect in Apache’s httpd.conf is:

          redirect 301 old-url new-url
        

For example:

          redirect 301 /party.jpg /photos/party.jpg
        

References