Front-End Optimization

Developers have always been faced with tough choices impacting the performance of their programs. Should I unwind that loop, or let the compiler deal with it? Ruby, Java, C, or assembly? We are all looking to hit the perfect combination of implementation cost, maintainability and performance.

Now, consider your web pages. These days, they have become sophisticated programs. With a lot of JavaScript, fancy CSS, and those retina-ready images, your page may be looking like it might benefit from a touch of optimization. Think of Akamai’s Front End Optimization service as the optimizing compiler for your HTML, CSS, JavaScript and images. The FEO service changes your page so the browser loads it faster. The transformations are applied each time the page is requested, so the system works also with pages that are not typically served from cache, such as personalized or rapidly updating content.

Front End vs. Back End

So what is happening in the browser while your page is loading? The browser has to not only fetch the HTML, but also has to fetch a bunch of CSS, JavaScript and images. Waterfall charts are a useful way to get the picture of what is happening, and when important events, such as start render and doc complete occur.

waterfall
waterfall

The waterfall chart shows all the requests the browser needs to make in order to load the page, when each request starts and ends and how long each request takes.

We call the time needed to return the initial HTML response the back-end time. Everything after that is the front-end time. Its quite common for the front-end time to be 5 or 10 times the back-end time, so you don’t need a profiler to figure out that optimizing the front-end pays off.

Front End optimization techniques

Many of Akamai’s optimizations focus on reducing the length of each bar in the waterfall chart. The idea is to move the bytes down to the user as quickly as possible.

Front-end optimization tackles the problem from a complementary angle. With front-end optimization we overhaul the contents of the waterfall chart. Front-end optimization reduces the number of requests, makes responses smaller, and reorders things to optimize rendering in the browser.

There are dozens of different FEO optimization methods available in our service and the list continues to grow. FEO can reduce the number of requests by combining multiple JavaScript or CSS files into one download and by embedding small images directly into CSS. FEO can make responses smaller by minifying JavaScript and CSS, and by optimizing images. FEO also can unblock rendering of your page by running JavaScript asynchronously. Images can be made to load on demand, only as they scroll into view.

DIY vs. FEO service

Organizations can and do implement their own features for Front End Optimization. However, these take time, and are often reprioritized when new security and functional requirements arise. Using a service like Akamai’s Front End Optimization services can allow organizations to refocus their efforts and leverage the performance knowledge at Akamai.

Akamai lives and breathes performance. Our focus allows us to go after every millisecond. Take images for example. The goal is to download only the bytes required to achieve perceivable image quality. Bigger screens need bigger images, and different browsers benefit from different image formats. You could change your page to dynamically load images of different sizes depending on the screen width of the browser, so that small devices don’t download wastefully big images. You could also change your page to use the WebP image format on Chrome and JPEG XR on Internet Explorer and regular JPEGs elsewhere. And your publishing process could generate multiple variants of each image, and updates to all variants as changes occur. Or you could use a service that handles all that, and a bunch of similarly complex challenges, for you.

A second advantage a service offers is future proofing. The service keeps up with the latest in browsers and makes adjustments as browser behaviors change.

Thirdly, the service is always evolving, with new optimization methods being made available regularly.

And finally, there are some optimization methods that require a globally distributed network of servers to implement. For instance, EdgeStart enables an Akamai edge server closest to the user to respond immediately with part of a dynamic HTML response, in order to get the browser started on fetching key resources while origin generates the HTML.

In summary

If you are looking to improve page load performance, focus on the front-end. When thinking through the options, you’ll see that our Front End Optimization service can help your development team achieve more, while keeping your code clean and performing well for your users.