Does your page load as fast as you want?
If not? What are you doing about it? Subaru
called us.
The mission was to modernize the web sites used on the Nordic markets with new flexible templates where one important factor was to make the sites faster.
In the following blog post I have written down the tasks we completed to optimize their web site for high performance and speed. Perhaps it can work as a check list in your future web project.
Why is a fast site important?
The number of seconds that users can tolerate waiting for a web page to load has changed over the years:
1999.
8 seconds [1]
2006: 4 seconds [2]
2009: 3 seconds [3]
According to a study from 2009 done by Forrester you risk loosing 40% of your visitors if the page takes longer than 3 seconds to load. You have already invested lots of energy, marketing and money trying to get visitors to your site. Now that they are there you need to keep them there so that they can accomplish the goal
Summary:
By optimizing the page we managed to decrease the loading time by almost 90%! As a result the number of PageViews increased by 24%!
Overview of the most important tasks that gave the most effect on the load time
- Optimize the usage of Flash files
- Reduce the number of requests
- Stream the movie clips (instead of loading the entire film)
- Compress and minify Javascript and CSS
- Speed up the backend code
- Upgrade hardware
If you are not interested in the technical details you can skip directly to the results.
Method
To be able to verify the results in this kind of project it is very important that you start with defining a goal. How fast do you want the page to load? After that you should document how the site performs before you begin any work. With this you have something to compare with and verify the result of the optimization work.
Before we started it took 6 seconds to load the first page of Subaru using a broadband with 10 MB connection speed.
Optimize how Flash is being used
The biggest culprit on the slow loading page was the heavy Flash files. They display movies, images and also navigation. All the pages on the entire site use this Flash file. The original Flash file wasn't optimized and wasn't streaming content. All the content had to be loaded before anything could be displayed. Even the navigation could not be displayed until the movies had been loaded. Of course, this was a top priority to fix!
We rebuild the page to use HTML, JQuery and CSS as much as possible. Now it loads quickly and Flash is only used where necessary (for example streaming videos and other interactive presentations).
Reduce the number of requests
Most web sites consists of many small files such as images, images, CSS and javascript. With the nature of web development today we often use ready-made snippets of code and complete modules (for example menus, calendars, Ajax-libraries). Even if each individual file is small, the large quantity of requests on a single page sums upp to a lot of overhead. This is because each request that the web browser send cause hidden information (HTTP headers) to be sent back and forth. Often these HTTP headers can be larger than the actual files.
In Camelonta CMS there is a module that combines all the JavaScript
and CSS files to one single resource. By activiting this we immediately reduced the number of request on the home page from 32 to 22.
Another tecnique that can be used in order to reduce the number of server transfers is to combine small graphics into one single composite file. Then you can use CSS to display different parts of the file on different locations on the page. A nice tool to create these so called Sprites are http://spriteme.org.
Optimize browser caching
The browser cache is used to avoid having the server send all the files on each page view. Files that change rarely are often referred to as "static content." The web server sends HTTP headers to let the browser know what can be cached and during how long.
By modifiying these HTTP headers we can optimize how the browser cache is used. For example, the default setting for all images, was that they could be stored for one day. We turned this up to 7 days instead by setting the HTTP header "Expires".
By setting the HTTP header Cache Control
to Public we allow proxy servers to cache the images. This way visitors sitting behind a Proxy server can get quicker access to the file.
Entity tags ("ETag") are HTTP headers that changes only when the content of the file has changed.
Example code:
Response.Cache.SetCacheability(HttpCacheability.Public);
Response.Cache.SetExpires(DateTime.Now.AddDays(7));
Response.Cache.SetETag(filename);
Speed up response time using server caching
With the performance profile software dotTrace we could find the performance bottlenecks in our template code. Some of them we could remove by rewriting the code. Others were removed by configuring Camelonta CMS to use caching on parts of the pages (using ASP.Net output caching).
This way we could cut the time it takes for the server to receive the request to that the client begins to receive the response three fourths! The time went from 400 ms down to 50-100 ms.
Optimization of client code
By using the Firefox Extension Google PageSpeed we could find many suggestions for improvement. We discovered some images could be compressed better with reduced file size in return.
We analyzing the page requests we found images that were loaded but weren't used.
We activated GZIP which enabled GZIP-compression of all text based resources that are sent between the client and the server.
All JavaScript and CSS where placed in seperate files which means that we get the following benefits:
- Javascript can be cached which reduces the size of the overall request.
- We defer parsing and compiling of the JavaScript code. This causes the client to render the page faster
In Camelonta CMS there is support for minifying all JavaScript and CSS files. To minify means removing all whitespace from a file thereby reducing the file size by, sometimes up to 60-70%. The smaller the files are the faster the page gets!
Annica Gramman, webmaster at Subaru, says:
- Our new web is really fast. Even working with it in Camelonta CMS goes really quickly with all the clever shortcuts and easy interface
Hardware and load test
By load testing the site we could examine how well it scaled. A load test means that you use a software to test how much load the server can take. This software allows you to simulates hundreds of simultaneous users before you take the site in production and thereby find the bottlenecks in your configuration.
Using these tools you can also check the response time from the server over a larger time frame and thus see how well the site performs over time.
To remedy problems related to response and load can be difficult but one option is to upgrade hardware or changing the hosting provider. For Subaru we were able to upgrade their server which gave us good conditions to manage heavy
traffic.
We tested the server both before and after the upgrade and the result was improved by several hundred percent!
The site had to scale in order to deal with sudden increase in traffic. The image above shows traffic from Subaru.se, where they during one day had their traffic multipled. Thanks to our work with performance the server handled this without any problem.
The Result
We managed to decrease the number of requests per page view from 32
to 22. Because we optimized the browser cache using HTTP headers we decreased the following page views requests to 6 compared to 19 before.
The average load time decreased from 6 seconds to 1 second!
Picture above: Load time in seconds during a Full GET (i.e. the first request when all resources are loaded).
Picture above: Load time in seconds during a simple GET (i.e the following page views when some requests have been cached).
We managed to reduce almost 90% of the old load time! Awesome! But - has all this work had any real effect at the users?
We turn to Google Analytics for answers and compare the 30
days of traffic with the same period the previous year.
- Number of PageViews increased by 24%
- Number of PageViews for each visitor increased by 17%
- The average time that the user spent on the site decreased by 14%
My conclusion from these numbers is that the visitors become more effective on the site and consume more content, look at more pages during a shorter time. A win situation for both visitors and Subaru.
Our work with optimizing the site is clearly seen in the statistics. The visitors aren't scared away by slow pages but rather look at 17% more pages than before and they do it in a shorter time.
Note: Loading times have been measered without Google Analytics and Camelonta MyVisitors scripts on the pages.
References
1: Zona
Research: http://www.keynote.com/downloads/Zona_Need_For_Speed.pdf
2: Akamai
och Jupiter Research : http://www.akamai.com/html/about/press/releases/2006/press_110606.html)
3:
Forrester Research http://blogs.keynote.com/the_watch/2009/09/the-new-2-second-website-rule.html)
<<- Tillbaka till listan
