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