Building a faster web

October 4, 2011

Creating a sound user experience on your website involves much more than just the user interface. Equally important is the speed at which that interface is delivered to the user. This article details what Brandlogic did to improve our site, and what you can do to improve yours.

Change is in the air. Brandlogic has introduced an all-new look that is decisive, beautiful and clean. It is only fitting for our website to match the aspirations of the refreshed identity. When we sat down to plan our site, it was clear from a design perspective that the new site was going to be a stunning (and long overdue) incarnation of what came before. We were inspired to create a technical architecture that complimented the new visual design: a strong, modern foundation to serve us well into the future.

We’ve learned that constraints are a wonderful thing. An aggressive launch timeframe made it obvious that we needed a simple, focused approach. We decided that performance was our main priority, which neatly corresponds with our new positioning statement "ideas that drive performance."

Why speed matters

More than anything else, we value the user’s experience when it comes to the sites and tools we build. Page speed is an important element in making that happen. It’s something that the user may not even notice when things are running smoothly, but when something is slower than expected, it surely can be frustrating. When it comes to usability, we believe performance is a feature as important as any other. Luckily, there is research to back this up, and it predates the web by a long shot. See Jakob Nielsen’s summarization on how much speed matters to usability. Speed is so important to user experience that search engines have even started to notice. Last year, Google started measuring page speed as a factor in their search rankings. All other things being equal, a page that is faster than another will receive a higher rank in search results. So, just by making your site more enjoyable for people to use, you’ll get rewarded by search engines for no additional cost.

What we did

Here is an overview of some tactical approaches we use to achieve maximum performance: static HTML, combining multiple resources into one, caching and compression.

Static HTML

On a site using a traditional content management system (CMS), the pages that the user sees are most often dynamically generated by the server. This means that when a user browses to a page, the server collects the content from a data store, pairs it with a template or multiple templates and runs some code to put it all together into the viewable HTML document. As you can imagine, this all takes time. What we’re doing differently is using an advanced CMS that pre-generates all of the HTML pages. When a user browses to a page on our site, the server doesn’t have anything to do except serve the file that already exists. With no database to call and no code to run, the server can send the page much faster. You might think that we would have to trade off the ability to have dynamic content on each page load. Not true. We are taking advantage of the JavaScript engine race in recent years among modern browsers. For example, on our homepage we show a random team member on each page refresh using JavaScript. The browser is doing most of the work. By shifting dynamic features from the server to the client we are making the site faster for everyone.

Combine all styles into one stylesheet

When a user visits a webpage, her browser is doing a lot behind the scenes. It sends a request to the server for the webpage, the server responds by sending the HTML and then the browser needs to check that HTML for any external resources to load. These resources could be images, styles, JavaScript, etc. The browser starts the process all over again for each resource: it sends a request to the server for the resource and the server responds to each request. Once the browser has a good representation of the page, only then will it render to the screen. One of the biggest bottlenecks is the communication between the browser and the server. Every request that is made for an additional resource slows down the whole process and just results in waiting longer to see the page. We alleviate this by combining all of the styles for the entire site into one resource. This means only one additional call is necessary to the server for the user to see the entire site as intended. Another way we have reduced requests to the server is by embedding images that are frequently used (our logo, for example) directly into the stylesheet. By embedding these images, the browser doesn’t have to request them separately. However, a user must use a modern browser to experience this benefit.

Aggressive caching

As stated above, requesting resources from the server can cause an enormous bottleneck. Another way to alleviate this is by aggressively caching the resources in the user’s browser after they’ve been downloaded. Since we are combining all styles into one stylesheet, the user only needs to download it once to view the entire site. Therefore, we tell the user’s browser never to request the stylesheet again once it has been downloaded. We also do this for all images and JavaScript files. As a result, when a user is browsing subsequent pages on our site, the needed resources are in her browser cache and the site performs dramatically faster. What about updates? If we’re telling your browser never to request a stylesheet or image again, how can we change something and ensure that you see it? We use another trick to address this issue. When our CMS publishes the site, it sets a version number to any resource that we are aggressively caching and renames the file using that version number. If the file changes in any way, it is guaranteed that the version number will change as well. To a user’s browser, the file appears to be brand new, so it downloads and caches it again. The end result is that a user never has to worry about resources being stuck in the cache again. Every time a user browses our site, she always gets the latest changes.

Minification & Compression

We can ensure that the downloaded resources are packaged as small as is possible. Looking at the source code for our home page, it’s actually rather unattractive. Everything is on one line, and it’s not easily readable. What’s missing is any extraneous whitespace and line breaks. By keeping the page as small as possible, the user gets to view the page that much faster. We do this for all HTML, CSS and JavaScript. One last thing we do to reduce what a user’s browser has to download is to compress everything. Just as zipping files on your computer saves disk space, we compress files that have to be downloaded so that the transfer completes more quickly. The browser is smart enough to expand the content once it is downloaded so that the user can see the page as intended.

A better web for everyone

Being passionate about making our site faster is a win-win: server resources are reduced, bandwidth costs go down, and most importantly, the user’s experience is much improved. By adhering to web standards and the best practices described above, we hope to promote the idea of making the web a little bit better for everyone.

blog comments powered by Disqus
Brandlogic and CoreBrand have become Tenet Partners — Where brand meets innovation®. More