September 19–20, 2016: Training
September 20–22, 2016: Tutorials & Conference
New York, NY

Making single-page applications faster

Boris Livshutz (Akamai Technologies), Manuel Alvarez (Akamai Technologies)
2:25pm–3:05pm Wednesday, 09/21/2016
Performance for the people Design, UX optimization Grand Ballroom West Audience level: Beginner
Average rating: ****.
(4.43, 7 ratings)

Prerequisite knowledge

  • Familiarity with the basic concepts of single-page apps, JavaScript, and WebPagetest
  • What you'll learn

  • Understand the performance challenges of SPAs
  • Learn actionable takeaways to address these challenges
  • Description

    Single-page applications (SPAs) offer a major architectural shift for websites. While SPAs have enabled impressive site look and feel and reduced the number of bytes delivered to the end users, they have also introduced new challenges, resulting in degraded site performance or failure on mobile after migrating to SPAs. SPAs are processing intensive, and monitoring tools do not accurately track UX, masking users’ pains from performance teams. In light of this, Boris Livshutz and Manuel Alvarez explore the importance of selecting the right framework, the power of isomorphic JavaScript, and how to use the User Timing specification.

    When developing an SPA you must:

    Select the right framework: The philosophy behind Angular is different from the one in Backbone or the goals of React. As with any project, you need to select the tool that best suits your goals. If you are looking for a fast ramp up and huge community support, go with Angular. If you are concerned with speed and have a team of JavaScript wizards waiting to create something big, then go with React. Looking for flexibility and interaction with other libraries? Use Backbone.

    Address the first-hit problem: This refers not to the size of the framework (they compress very well) or the low cache hit ratio on mobile devices but to the “loading” of the framework. It is an expensive process and can make the experience unbearable in mobile. If your site has many first-time visitors or multiple points of entry (search engine or referred traffic, bookmarks, etc.), you might want to consider server-side rendering.

    Clean up your JavaScript packaging: Packagers makes developers’ lives easy and reduce the number of round trips needed to load a page. However, they are commonly used as a catch-all that contains every single library you ever tried to use. This not only drives the size down but also reduces the probability of keeping it in cache (remember your mobile device’s limited resources). You must package intelligently to realize gains without sacrificing caching.

    Measure what is relevant: The onload event triggers when the page first loads, and it is not invoked again for virtual pages. (The onload most likely triggered before the page became interactive.) You cannot optimize what you cannot measure. To solve this problem, tag your code using W3C’s User Timing specification. Implementing custom metrics is not very hard and is already supported on WebPagetest.

    Photo of Boris Livshutz

    Boris Livshutz

    Akamai Technologies

    Boris Livshutz has spent over two decades making enterprise applications run faster. Boris is an enterprise architect at Akamai working on improving the performance of some of the world’s largest websites. Previously, he ran the Center of Excellence at AppDynamics, where he developed best practices for using performance monitoring tools to improve the speed and reliability of large sites and helped them scale in the cloud. In his earlier years, Boris worked at startups and then at Oracle, building database and data warehousing products for enterprise customers.

    Photo of Manuel Alvarez

    Manuel Alvarez

    Akamai Technologies

    Manuel Alvarez is an enterprise architect at Akamai, where he focuses on designing complex technical solutions over a variety of technologies and driving business objectives by implementing solutions aligned with the organization goals with proven ROI, such as implementing advanced caching techniques to reduce platform costs. Over his career, Manuel has worked on large projects with financial institutions, high-tech companies, and telecommunication services across multiple geographies.