JSFoo 2015

The future of JavaScript

Nicolas Bevacqua

@bevacqua

High Performance in the Critical Rendering Path

Submitted Jul 30, 2015

This talk covers the past, present and future of web application performance when it comes to delivery optimization. I’ll start by glancing over what you’re already doing -- minifying your static assets, bundling them together, and using progressive enhancement techniques. Then I’ll move on to what you should be doing -- optimizing TCP network delivery, inlining critical CSS, deferring font loading and CSS so that you don’t block the rendering path, and of course deferring JavaScript. Afterwards we’ll look at the future, and what HTTP 2.0 has in store for us, going full circle and letting us forego hacks of the past like bundling and minification.

Outline

This talk begins by looking at the kind of performance optimizations we’re are already doing, such as bundling and minification, gzip compression, caching, and using progressive enhancement. Then I’ll cover things we should be doing such as measuring performance, setting up a performance budget, using nginx as a reverse proxy, inlining critical CSS while deferring the rest, deferring font loading, using a CDN, experimenting with WebP images, and maybe deferring image loading too.

Last, we’ll take a look at where HTTP is going with HTTP 2.0, and discuss the new multiplexing features that enable HTTP 2.0 to take advantage of a single TCP request, erasing the need for “hacks” such as bundling, spriting, CSS or image inlining, taking HTML back to the way it was originally designed to work, while actually improving performance.

Speaker bio

Nico is an enthusiastic JavaScript consultant, author of JavaScript Application Design, and public speaker. He loves open-source and helps organize a few local events like Beer.js and NodeSchool.

Slides

https://speakerdeck.com/bevacqua/high-performance-in-the-critical-path

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more