Web Performance

@heyday

According to the HTTP Archive, the average web page is more than 1.8MB in size.

Roughly 78% of the page weight is Javascript / Media

71%

Users expect your mobile site to load as quickly as your desktop site

Primary Performance Issue

Overdownloading

Poor network

  • Download & Hide
  • Download & Shrink
  • Download & Ignore
  • High Latency
  • Variable Bandwidth

Ok, First, How to diagnose

The basics

Page Speed Insights

Next steps

Chrome dev tools

Web page test (CI integration)

Then, BUDGET TIME !

A Budget is a guide, not a hard or fast limit.

Performance tweaks are comprises.

Mobile Optimisation Tenets

  • Reduce requests
  • Reduce assets size
  • Speed-up page render

"Best request, is no request" 

some dude on the internet​

Web Performance Easy Wins

  • Browser cache assets
  • Try avoid images (use shapecatcher instead)
  • Images compression
  • Responsive Image (srcset)
  • Avoid dark matter (display: none)
  • Use VanillaJS first
  • Check weight of your dependencies
  • Defer as much as you can

Case Study

or example

HRLMorisson homepage

Drive Async videos

GIB bundles + heavy modules

What's next !

Image optim build integration