Akamai Diversity
Home > Web Performance > Performance Beyond Caching - Front End Optimization

Performance Beyond Caching - Front End Optimization

"The level of stress caused by mobile delays was comparable to watching a horror movie" 

Source: Ericsson Mobility Report                   

As the above quote highlights, Performance Matters today more so than ever before. Having a fast and reliable website is expected and for many organizations, performance has become a mission critical goal. Now, we've all heard the old saying, cache is king. The goal was to cache as much content and as close to the end user as possible to achieve maximum performance. Pretty simple concept, but for anyone that has attempted this in practice without an intelligent Content Delivery Network (CDN) can certainly attest the challenge is immense. 

The process typically involved squinting at web server and load balancer configuration files only to end up being forced into a tough decision of caching on the browser or significantly scaling up your infrastructure - both expensive decisions in their own right. The former you lose control and flexibility in being able to refresh your website's content quickly, and the latter significantly extending the complexity of your infrastructure. 

Now if you're reading this, I'm going to assume you have your caching strategy already figured out. If you don't, I'd recommend taking a moment to read through the following articles on how Akamai can help:

In my previous articles you know I like to go fast with images. In this article we're going to go even faster with Front End Optimization (FEO) features that are included in Akamai's flagship web performance solution, Ion.

Front End Optimization has three key goals in mind to increase website performance:

  • Reduce Requests
  • Reduce Bytes Delivered
  • Expedite page rendering

You may already be familiar with some Front-End Optimization techniques such as minification or consolidation for javascript and css files. Akamai is able to apply these development best practices on the fly in addition to several other techniques that include: deferring javascript loading, loading images on-demand, DNS Prefetching, domain sharding, and many more.

To highlight the potential performance gains, we have selected http://www.memcake.com. The website leverages the popular bootstrap framework which contains the following content breakdown for reference.

  • Content Breakdown (asset count) -
    • CSS Files - 5 files
    • JS Files - 9 files
    • Images (JPG and PNG) - 28 files
    • HTML - 1 file

Performance Comparison Breakdown

Beyond Caching 1.png Notes:

- Performance metrics captured from www.webpagetest.org, Test Location: Dulles VA USA

-The bootstrap framework contains requests to third party domains to reference web fonts.

Beyond Caching 2.png

WebPagetest Comparison Timings

Beyond Caching 3.png

WebPagetest Visual Comparison Film Strip

Beyond Caching 4.pngAs you can see the performance gains are dramatic. With FEO enabled, the data shows the DOM Complete finishes more than 1.5 seconds faster. However, the real story is in the visual comparison film strip. The film strip view is a great tool in highlighting, the comparative benefit your end users will actually see. The site is now visually complete after 2 seconds, allowing your users to really experience your site the way you intended. Don't let your website feel like a horror movie.  Contact your Akamai Account Representative for more information on how to get the most out of Front End Optimizations in Ion and other performance enhancing techniques such as HTTP/2.

Leave a comment