Page Loading Performance Strategies

Page Loading Performance @rungta from @miranj

2005…

2011…

Why performance?

Slow networks

More conversions

Less anxiety

#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

3 case studies

Hand-coded static files CMS-based Improved performance

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

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

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

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

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

What if we could pre-fetch the next page?

Okay, but which page?

Let the user show the way… mouse pointer

Prefetch request Link Link Link Regular request ✓

Is this really significant?

Pre-fetch page on mouseover/touchstart

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

Demo: buuuk.com

How can you implement it?

InstantClick

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

Response time target: 200ms

Server HTTP Server WebApp / CMS Database Browser

Requested page is regenerated each time

Save a copy of the final page

Server HTTP Server WebApp / CMS Database Cache

Now the server can handle load

But cache may be out of sync

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

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

3 options

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

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

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

Okay, but what should trigger invalidation?

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

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

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

Expiry times as short as one second

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

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

150 concurrent over 1 minute

Publication on art & design, highly visual

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

Images were killing load speeds

First – network layer

Server A B C D CDN CDN CDN CDN

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

Second – Prioritise Critical Path

From 30 to 3 images

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

github.com/aFarkas/lazysizes →

Third – Appropriate no. of pixels

Nautilus.jpg 1200x674

400x224 800x449 1200x674 1200x674

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

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

Fourth – Compression

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

1. Edge CDN 2. Lazy loading 3. Responsive Images 4.
Compression

images.guide →

1. PJAX with Pre-load 2. Microcaching 3. Image optimisation Page
Loading

All the strategies combined

Demo: designfabric.in

Page Loading Performance Strategies

Page Loading Performance Strategies

More Decks by Prateek Rungta

Other Decks in Technology

Featured

Transcript