Why Web Applications And Mobile Browsing Are Making The Frontend A Major Performance Bottleneck

For content owners, it used to be that the answer to most website performance problems was either to add more hardware, use a CDN, or reengineer their backend application code. But for a number of reasons detailed below, investing in backend optimization is now providing diminishing returns. Google's research shows that for many popular sites it's the frontend that accounts for over 90% of a users wait time. Content delivery networks (CDNs) help to address part of this problem by reducing network latency, but even larger performance gains can be achieved through what's referred to as Frontend Optimization (FEO) techniques that streamline the Web page HTML code and resources.

Before diving into the details of FEO it's important to define the difference between frontend and backend performance. Backend wait time refers to the time required for the server to respond to requests and generate the content requested. The frontend wait time refers to the time required to download the content and render it in the browser.

There are three trends shifting the performance bottleneck from the backend to the frontend. First, is the growth in the size of Web pages. Since 1995, the average size of a page has grown over 35x, and the number of objects per page has grown 28x. Second, the growth of JavaScript and AJAX usage means that more and more code is being executed on the browser vs. on the server alone. This trend will intensify as content owners move to replace more of their desktop applications with browser based, SaaS services. Lastly, the growth in mobile browsing means that Web pages are increasingly being viewed on less powerful devices with slower connections.

There are proven techniques in the market for addressing frontend performance, and it's a subject that I've heard being discussed more often in the market over the past few months. Content owners and vendors who offer solutions in the market say these best practices include methods such as resource consolidation, versioning, domain sharding, minification and use of compression amongst others. There are even tools like Yslow and Webpage test that will analyze your site and make recommendations on which optimizations you should implement.

FEO might sound similar to another subject I have written about lately, dynamic site acceleration (DSA), but it's very different. DSA's focus is to bring network resources closer to the user by prefetching or caching files. FEO makes the content itself faster. DSA makes page resources download faster. FEO reduces the number of page resources required to download a given page and makes the browser process the page faster. For example, analysis shows that popular sites like CNN, who already use a CDN, can double current performance by implementing FEO.

In addition to improving performance, FEO can also dramatically cut operating costs and improve conversions. Shopzilla's redesign project took their page loads from 6-8s down to less than 2s. The result was a 7-12% improvement in customer conversion and a 50% reduction in their hosting infrastructure costs of hardware and bandwidth.

Despite the potential for large performance gains, not many content owners I have spoken to have invested in frontend optimization. This is sometimes due to lack of knowledge but more often due to the high cost of implementation. FEO projects compete for the same scarce engineering resources that are focused on adding more functionality. Also, implementing FEO requires an upfront investment to retrofit sites and an on going investment to keep it optimized. Ongoing maintenance costs can escalate due to the constant stream of new desktop and mobile browser releases and each browser has it's own performance nuances. Keeping up to date with these changes can be resource intensive.

In order to reduce FEO time and cost concerns, new technologies are now available that will automatically optimize pages. These technologies dynamically transform HTML and page resources to apply FEO best practices as users browse the site. Automated page transformation negates the need for manual investment and allows the site owner to continue to benefit from FEO while still maintaining existing designs. There are three different types of FEO players in the market; software (Aptimize), appliance (Strangeloop) and hosted services (Blaze).

Performance is a complex science and no single optimization approach works for all sites. Continued movement to more complex web applications and mobile browsing will only accelerate the need for investment in FEO. Going forward, automated FEO solutions will play an increasingly important role in helping to reduce the time and cost required to implement and maintain frontend optimization. The Web frontend is clearly an under optimized area that will offer significant performance gains for many sites and is a topic I think we'll hear more about in 2011.

Related Posts:

- How Dynamic Site Acceleration Works, What Akamai and Cotendo Offer

- An Overview Of Transparent Caching and Its Role In The CDN Market

Comments

[Rick]

Thanks Dan. For those publishers that are not familiar with FEO there could be some low hanging fruit that could help juice their traffic numbers. Also, it is believed that Google may now include site performance in their algorithm for search rankings. The thinking goes that more "important" sites will invest in creating a high quality user experience.

[Loc]

Thanks for clarifying what FEO is. Doesn't Google take FEO into account when they are determining your site's page rank? Like how fast it loads?

[Matt Voerman]

I question why the network is now being considered part of the 'front end'.

For years the 'front end' has referred to anything 'client side' (i.e the browser, HTML, run-times, graphics, etc). Wikipedia even defines the front-end as being 'responsible for collecting input in various forms from the user' - the key word being 'collecting'.

Now someone has suddenly decided that anything outside the server (i.e the network and the client) is part of the front end. I'm not buying it.

I don't dispute the power/benefits associated with optimising client side code, but lets not confuse (or distort) the definition of what the front end actually is - a mechanism for collecting (not transporting) user input/interaction.

[Tim Siglin]

Google does take into account page-load times, but only as one factor, and it averages load times over several attempts.

Not only is performance an issue, but also usability and the ability to find the proper app to play the content of the moment, which I covered a few weeks back at http://www.streamingmedia.com/Articles/Editorial/Featured-Articles/Commentary-Apps-Plug-Ins-and-Old-School-Players-72300.aspx

[Joshua Bixby]

Great post, Dan. Thanks so much for the Strangeloop mention.

I just want to clarify that Strangeloop's Site Optimizer is not just an appliance: it's also available as a service via the cloud, and as a virtual appliance. Both of these offerings provide the same robustness and optimization benefits as our appliance. Site Optimizer products are all explained further here: http://www.strangeloopnetworks.com/products/

To address Rick and Loc's comments, there is proof that page speed does affect Google ranking. One of our customers implemented our Site Optimizer service and improved performance by 30-50%. With no other changes to the site, their traffic from organic Google searches increased by 10%. We documented it in this case study:

http://www.strangeloopnetworks.com/customers/everyday-health-cuts-page-load-times-in-half-and-increases-search-traffic-by-10/

Since then, I have read similar case studies from other site owners.

With regard to the future of FEO, it's great to have my own gut feeling validated. My sense is that the coming year is going to be a breakthrough year for our industry, as site owners realize they need to focus on the neglected front end in order to squeeze every drop of performance out of their sites. I wrote about this in my latest blog post, which may interest your readers:

http://www.webperformancetoday.com/2011/01/10/future-of-website-performance-optimization/

---
Joshua Bixby
President, Strangeloop

[Peter Cranstone]

Dan,

Great article. We're getting ready to release a web service that will allow you to measure real time HTTP traffic from inside the mobile browser. This is where the real front end optimization has to take place. Up until now it has been impossible to measure for example how long it takes for the firs visible element to load. We can now show that data and much, much more all in real time. Along with GPS data, Device information and Carrier data.

Glad you talk about the need for compression. We're the team that invented mod_gzip which is now being upgraded with even better compression for mobile devices.

Cheers,

Peter
5o9 Inc.

[RL]

Wonderful Post and look forward to reading more similar articles.

[gpt]

This is my first time to hear about FEO. Thanks, I really learned a lot from this post.

[Billy Ray]

I don't remember how I found your blog but I have been reading it for the last 45 minutes. Not a big deal except that I am supposed to be working. Anyway - thank you for the useful article.

[wd]

This is true, no matter how powerful you website performs at the back end, smaller sites with good FEO will still top you because it now has a larger bearing.

[Web Service Rachel]

Been confused for quite some time about some frontend and backend issues. I'm glad you clarified it a bit. Thanks alot for sharing!