The Right Way to Bundle Your Assets for Faster Sites over HTTP/2

HTTP/2 and Why It Matters

The HTTP/2 Bundling Myth

HTTP/2 Benchmark Details

  • 1000: Loading 1000 small (819 bytes each) JavaScript files, simulating no concatenation.
  • 50: Loading 50 medium (16399 bytes each) JavaScript files, simulating moderate concatenation.
  • 6: Loading 6 large (136666 bytes each) JavaScript files, simulating aggressive concatenation.
  • 1: Loading 1 huge (819999 bytes) JavaScript file, simulating extreme concatenation.

Between San Jose and US West (N. California)

Between San Jose and US East (N. Virginia)

Between San Jose and Asia Pacific (Seoul)

Results and Key Findings

  • Even in HTTP/2 environment, any level of concatenation showed a significant improvement compared to non-concatenation.
  • The improvement was most significant (3x faster) when the distance between browser and server is shortest (i.e. over a connection with least latency).
  • Differences among concatenation levels below 1000 (50, 6 or 1) were negligible.
  • As distance between browser and server is getting farther (more latency), fluctuations of loading speed between samplings became bigger. This means comparing two numbers measured long interval between them can be irrelevant.

Final Takeaways

Always concatenate files into several bundles

Consider HTTP/1.1 compatibility

Use image sprites

Carefully use data URIs

Enable both SPDY and HTTP/2

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Max Jung

Max Jung

More from Medium

What Happened?

Signing JavaScript objects with Symbol and Proxy

NVM Express Primer

JavaScript SPA: Trying to Stay Classy

A cello, guitar, and flute