Page Loading Performance Strategies

by Prateek Rungta

Slide 1

Slide 1 text

Page Loading Performance @rungta from @miranj

Slide 2

Slide 2 text

2005…

Slide 3

Slide 3 text

2011…

Slide 4

Slide 4 text

Why performance?

Slide 5

Slide 5 text

Slow networks

Slide 6

Slide 6 text

More conversions

Slide 7

Slide 7 text

Less anxiety

Slide 8

Slide 8 text

#perf Combine CSS & JS Minification Unused CSS CDN GZIP HTTP/2 Automation Bundling Caching VPS Image Optimisation DNS prefetch Responsive Images Lazy loading Image Sprites Async Service Workers Server Push Code Splitting

Slide 9

Slide 9 text

3 case studies

Slide 10

Slide 10 text

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Hand-coded static files CMS-based Improved performance

Slide 14

Slide 14 text

✓ Combine CSS, JS ✓ Minify, Gzip ✓ HTTP/2 ✓ VPS ✓ CDN ✓ Lazyloading ✓ Image optimisation ✓ Responsive images

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

CSS JS Fonts Icons Parse Compile Render Request Page 1 CSS JS Fonts Icons Parse Compile Render Request Page 2 CSS JS Fonts Icons Pars Comp Rend Requ Page 3

Slide 17

Slide 17 text

Parse Render Parse Render Page 1 CSS JS Fonts Icons Page 2 Page 3 Parse Compile Render Request

Slide 18

Slide 18 text

How?

Slide 19

Slide 19 text

1. Intercept click 2. Request HTML over Ajax 3. Update and 4. Push new browser history state PJAX

Slide 20

Slide 20 text

✓ No server side conditionals ✓ Minimal markup changes ✓ Graceful degradation ✓ Preserves Back button functionality

Slide 21

Slide 21 text

What if we could pre-fetch the next page?

Slide 22

Slide 22 text

Okay, but which page?

Slide 23

Slide 23 text

Let the user show the way… mouse pointer

Slide 24

Slide 24 text

Prefetch request Link Link Link Regular request ✓

Slide 25

Slide 25 text

Is this really significant?

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Pre-fetch page on mouseover/touchstart

Slide 28

Slide 28 text

✓ At least 300ms of gain in speed ✓ Clicks will start to appear instant ✓ Again, no extra config on the server

Slide 29

Slide 29 text

Demo: buuuk.com

Slide 30

Slide 30 text

How can you implement it?

Slide 31

Slide 31 text

InstantClick

Slide 32

Slide 32 text

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

~3 million monthly average ~72 concurrent (peak) ~150 concurrent (future)

Slide 36

Slide 36 text

Response time target: 200ms

Slide 37

Slide 37 text

Server HTTP Server WebApp / CMS Database Browser

Slide 38

Slide 38 text

Requested page is regenerated each time

Slide 39

Slide 39 text

Save a copy of the final page

Slide 40

Slide 40 text

Server HTTP Server WebApp / CMS Database Cache

Slide 41

Slide 41 text

Now the server can handle load

Slide 42

Slide 42 text

But cache may be out of sync

Slide 43

Slide 43 text

So, we need to invalidate cache (based on some trigger)

Slide 44

Slide 44 text

How?

Slide 45

Slide 45 text

There are only two hard things in Computer Science: cache invalidation and naming things.” – Phil Karlton “

Slide 46

Slide 46 text

3 options

Slide 47

Slide 47 text

A. Delete, rebuild on request B. Delete, rebuild immediately C. Rebuild on request, replace

Slide 48

Slide 48 text

Delete Delete, Rebuild Rebuild, Replace No out-of-sync pages returned ✓ ✓ × Cache regenerates automatically ✓ × ✓ Server load is distributed ✓ × ✓ All users get a cached response × – ✓

Slide 49

Slide 49 text

Speed > accuracy*, so C. Rebuild on request, replace * in this case

Slide 50

Slide 50 text

Okay, but what should trigger invalidation?

Slide 51

Slide 51 text

A. Expire on change in the App B. Time based expiry

Slide 52

Slide 52 text

Change Time No redundant invalidation ✓ × Staggered expiry of caches × ✓ Cache layer decoupled from App × ✓

Slide 53

Slide 53 text

Decoupled > no redundancy*, so B. Time based expiry * in this case

Slide 54

Slide 54 text

Expiry times as short as one second

Slide 55

Slide 55 text

1. Full page cache 2. Short, time based expiry 3. Re-generate, then replace Microcaching

Slide 56

Slide 56 text

✓ All users get a cached response ✓ Cached content no older than 2 seconds ✓ Cache layer decoupled from App layer ✓ Staggered expiry & regeneration

Slide 57

Slide 57 text

150 concurrent over 1 minute

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

Publication on art & design, highly visual

Slide 63

Slide 63 text

~20 images, 7 MB — average ~90 images, 17 MB — peak

Slide 64

Slide 64 text

Images were killing load speeds

Slide 65

Slide 65 text

First – network layer

Slide 66

Slide 66 text

Server A B C D CDN CDN CDN CDN

Slide 67

Slide 67 text

✓ Reduce global latency ✓ Reduce server load ✓ Save bandwidth ✓ Zero-config

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

Second – Prioritise Critical Path

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

From 30 to 3 images

Slide 73

Slide 73 text

1. Prioritise critical rendering path 2. Defer loading images that are not visible 3. Visual feedback that improves perception of speed Lazy loading

Slide 74

Slide 74 text

github.com/aFarkas/lazysizes →

Slide 75

Slide 75 text

Third – Appropriate no. of pixels

Slide 76

Slide 76 text

Nautilus.jpg 1200x674

Slide 77

Slide 77 text

400x224 800x449 1200x674 1200x674

Slide 78

Slide 78 text

1. Create diﬀerent sized images 2. Use srcset attribute to inform browser 3. Use sizes attribute to help browser choose the right size Responsive Images

Slide 79

Slide 79 text

✓ Fewer bytes to download ✓ Fewer pixels to decode ✓ Future-proof for higher DPI screens

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

Fourth – Compression

Slide 82

Slide 82 text

1. Strip metadata 2. Lossless compression 3. Lossy compression 4. Eﬀicient image formats (WebP, WebM, H.264 for GIFs etc.) Compression