hacking web performance @ forwardjs 2017

Picture from Simon Howden freedigitalphotos.net!

Picture from Simon Howden freedigitalphotos.net!

hacking web performance

Max Firtman @firt

mobile+web developer & trainer

😬

I have 2 goals…

Show you new tricks 😁

Make you feel bad

Let’s Start!

I know you know

http://www.flickr.com/photos/steenslag/22689920/-borrowedfromSteveSouders

Picture from Simon Howden freedigitalphotos.net

14

Picture from Simon Howden freedigitalphotos.net

500ms delay, +26% user’s frustration

Source: Radware

:(

500ms delay, -20% Google’s traffic

1http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt

:(

+100ms delay, -1% Amazon’s sales

1http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt

:(

immediate feedback 100ms

perception

Jakob Nielsen - Usability Engineering

perception

Jakob Nielsen - Usability Engineering

losing flow of thoughts 1s

perception

Source: Google Developers

RAIL

perception

RAIL

100ms

perception

RAIL

100ms 16ms

perception

RAIL

100ms 16ms 50ms

perception

RAIL

100ms 16ms 50ms 1s

I know you know

Performance is important We need a great Speed Index We have a budget of 1 second to load

You are already…

Optimizing the network

You are already

CSS as Appetizer

You are already

JavaScript as Dessert

You are already

Optimizing Images

You are already

Have an HTTP Cache Policy

You are already

Using Service Workers

You are already

Avoiding Redirects

You are already

Working with TLS and HTTP/2

You are already

You are already doing this

What’s the problem then?

Average time to load a mobile landing page

The problem

22 seconds Research by thinkwithgoogle.com

If a page takes more than 3 seconds to load

The problem

53% leave it Research by thinkwithgoogle.com

The problem

The problem

AMP Facebook Instant Articles

The problem

We always underestimate

mobile

iOS and Android

Safari and Chrome?

Source: MOVR Report

browsers with market share

Using Cellular Networks!

We have 4G! We don't need to worry about performance...

(

)

cellular

0

25

50

75

100

US Western Europe Asia Global

4G 2G/3G

Only 21% is on 4G, worldwide

cellular

cellular

45% of users are on 2G networks

cellular

0

25

50

75

100

US Western Europe Asia Global

4G 2G/3G

~30% of the time 4G was not used

RTT - latencycellular networks

2G

3G

4G

Home

0 250 500 750 1000

Min Max

Let’s hack Web Performance!

Hack First Load

Avoid more than one roundtrip

First Load

Deliver ATF in 14Kb

First Load

• Embed all CSS and JavaScript needed • If space, embed logo and/or low-res images

Announce DNS queries ASAP

First Load

<link rel="dns-prefetch" href="http://newdomain.com">

HTML

Avoid http to httpS redirect

First Load

• Use HSTS (HTTP Strict Transport Security) • Header • Opt-in at hstspreload.org

Hack Data Transfer

Use Zopfli

Data Transfer

• Save 4-8% data transfer with GZIP • It’s ~80x slower

Use Brotli

Data Transfer

• Save ~14% data transfer • Check Encoding Header

Create a low-res version

Data Transfer

• Check save-data Client Hint header • Use NetInfo API • Use Performance Timing API • Measure bandwidth

Embrace Responsive Images

Data Transfer

• Not just 3 versions of your image • 65% of the traffic is for images (HttpArchive)

• 84% improvement creating n versions (ScientiaMobile)

Hack Images

http://www.flickr.com/photos/steenslag/22689920/-borrowedfromSteveSouders

A picture is worth a thousand words…

… if it loads

Time to replace JPEG and PNG

Images

Lossy format: WebP -35%

Images

Lossy format: JPEG 2000 (JPX) -19%

Images

Lossy format: JPEG XR (JXR) -29%

Images

Lossless format: Zopfli PNG

https://github.com/imagemin/zopflipng-bin

-20%

Images

Deal with compatibility!

Images

• Hello to <picture>

<picture>

<source type="image/webp" src="image.webp"><source type="image/vnd.ms-photo" src="image.jxr"><source type="image/jp2" src="image.jp2"><source type="image/png" src=“image.zf.png"><img src=“image.zf.png" alt=“description">

</picture>

Meet HTTP Client Hints

Images

• Browser will expose data to the server<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Downlink">

HTML

Decode images in the background

Images

• github.com/GoogleChrome/offthread-image

Stop using Animated GIFs!

Images

• Use Animated PNGs or Animated WebP • Use muted videos • Use webkit-playsinline for iOS

Use tricks for Preview Images

Images

Images

The future looks interesting!

Images

• BPG • FLIF

Hack Limitsthanks to Service Workers

Make CDNs race for performance

Limits

Delta Updates

Limits

Use Streams

Limits

Your own Compression Method

Limits

Progressive Images

Limits

Use BPG Today!

Limits

https://github.com/sandropaganotti/bpg-converter

Feeling bad enough?

Performance is TOP PRIORITY Push it even more It’s a worthwhile effort

Make it fast!

Foto de freefoto.com

firtman@gmail.com@firt

firt.mobi/hpmw

Next Forward workshopsProgressive Web AppsNew Web APIs Lab: VR, BT, PaymentsApps with TypeScript and Angular