Web Performance Workshop

Everyone is impacted by site speed

SEO
Product
Marketing
Operations
Development
User Experience
Business Intelligence

But who owns it?

Measuring Performance

Measurement:

• Rule-based
• Ad hoc
• Synthetic
• Real User
• Application

Measurement:

• Rule-based
• Ad hoc
• Synthetic
• Real User
• Application

PageSpeed is a Ranking Factor

Calibre | How PageSpeed Works

Measurement:

• Rule-based
• Ad hoc
• Synthetic
• Real User
• Application

Works on real devices too

developers.google.com/web/tools/chrome-devtools/remote-debugging/

WPT Filmstrip

Compare visual output to the network waterfall.

Amazon.com Filmstrip

Host your own WPT

Test internal environments, bulk tests, API key management.

WPT Private Instances

Ad Hoc Summary

• Results in seconds
• High level of detail
• Does not scale well
• Relies on device emulation

Measurement:

• Rule-based
• Ad hoc
• Synthetic
• Real User
• Application

Synthetic Monitoring

Synthetic Monitoring Tools

• SpeedCurve
• Catchpoint
• Rigor
• Calibre

* other services are available

Synthetic Summary

• Tests production environment
• Active monitoring 24x7
• Lab testing - easy to spot changes
• Small number of test locations
• Does not measure user experience
• Difficult to test pre-production

Measurement:

• Rule-based
• Ad hoc
• Synthetic
• Real User
• Application

Real User Monitoring Tools

• Akamai mPulse
• SpeedCurve Lux
• Raygun

* other services are available

Real User Monitoring Summary

• Measures real user experience!
• Correlate performance with business metrics
• Global coverage
• Requires implentation in client-side code
• May be blocked by tracker blockers
• Can only measure in production

Measurement:

• Rule-based
• Ad hoc
• Synthetic
• Real User
• Application

Application Performance Measurement (APM)

APM Tools

• AppDynamics
• NewRelic
• Dynatrace

* other services are available

APM Summary

• Code-level profiling
• Database query profiling
• Architecture discovery
• Priced per server / VM
• Limited / no view of UX

Measurement:

• Rule-based
• Ad hoc
• Synthetic
• Real User
• Application

Browser APIs

Provide data for synthetic & real user monitoring

• Navigation Timing API
• Resource Timing API
• User Timing API

Browser APIs

• Navigation Timing API - page load timings
• Resource Timing API - individual resource performance
• User Timing API - bespoke performance measures for you

The Network

A simple example...

WebPageTest.org

Network requests are complex

Network Fundamentals

• DNS
• TCP
• TLS
• HTTP/1.1
• HTTP/2
• Congestion Control
• HTTP/3

Network Fundamentals

• DNS
• TCP
• TLS
• HTTP/1.1
• HTTP/2
• Congestion Control
• HTTP/3

DNS Performance

• Increase TTL to 24 - 48h
• Use a high-performance DNS provider
• Pre-connect additional domains^*

^* <link rel="dns-prefetch" href="//thirdparty.com"/>

Network Fundamentals

• DNS
• TCP
• TLS
• HTTP/1.1
• HTTP/2
• Congestion Control
• HTTP/3

TCP Performance

Reducing tound-trip latency ^*

• Use a CDN!
• Re-use connections
• Keep requests < 14kb (one packet on most networks)

^* optimising RTT benefits all stages

Network Fundamentals

• DNS
• TCP
• TLS
• HTTP/1.1
• HTTP/2
• Congestion Control
• HTTP/3

Network Fundamentals

• DNS
• TCP
• TLS
• HTTP/1.1
• HTTP/2
• Congestion Control
• HTTP/3

Network Fundamentals

• DNS
• TCP
• TLS
• HTTP/1.1
• HTTP/2
• Congestion Control
• HTTP/3

Network Fundamentals

• DNS
• TCP
• TLS
• HTTP/1.1
• HTTP/2
• Congestion Control
• HTTP/3

Network Fundamentals

• DNS
• TCP
• TLS
• HTTP/1.1
• HTTP/2
• Congestion Control
• HTTP/3

Network Fundamentals

• DNS
• TCP
• TLS
• HTTP/1.1
• HTTP/2
• Congestion Control
• HTTP/3

Other Optimisations

• Resource Hints
• Priority Hints
• Lazy Loading

Resource Hints

<link rel="dns-prefetch|preconnect|prefetch|preload" href="...">

• dns-prefetch - resolve hostname as soon as possible
• preconnect - establish TCP & TLS connection
• prefetch - download this when you're ready
• preload - download this as soon as possible!

^* use with caution - too many can break browser prioritisation and make a page slower!

MDN | Preloading Content

Priority Hints

Tell the browser what is important

<link rel="dns-prefetch|preconnect|prefetch|preload" href="...">

Available in Chrome 74 as origin trial, general availability in Chrome 76

Google Developers | Priority Hints

(Native) Lazy Loading

Free up the network for critical resources

<img loading="auto|eager|lazy" src="...">
<iframe loading="auto|eager|lazy" src="..."></iframe>
                        

Addy Osmani | Native image lazy-loading for the web!

Images

The rise of Images

Desktop Image Bytes are up 330% since 2011

Mobile Image Bytes are up 1050% since 2011

HTTP Archive | State of Images

Bitmap vs. Vector

Bitmap (PNG / JPG)

Grid of pixels, does not scale well

Vector (SVG)

Shapes defined in XML, scales infinitely!

Bitmap Scaling

150px

20kB

300px

27kB

450px

86kB

Vector Scaling

150px

18kB

300px

18kB

450px

18kB

Choose Appropriate Formats

Photo Imagery

JPG
(lossy compression)

Icons & Graphics

SVG / PNG(lossless compression)

Animations

GIF / CSS(lossless compression)

Browser-Specific Formats

Chrome & Opera

Safari

Internet Explorer

Optimising JPEG Images

• jpegtran - linux cmd-line
• imagemin - node module
• tinypng - web-based (yes for JPEGs!)
• squoosh.app - web-based

Optimising PNG Images

• OptiPNG - lossless, multiple binaries
• pngquant - lossy(!), multiple binaries
• tinypng - web-based
• squoosh.app - web-based

Optimising SVG Images

• SVGO - node module
• SVGOMG - web-based SVGO

Images Summary

• Send different images based on device requirements
• Defer non-critical images
• Select format & compression to minimise bytes

JavaScript

JavaScript

You’re building your own maze, in a way,
and you might just get lost in it.

Marijn Haverbeke, Eloquent JavaScript: A Modern Introduction to Programming

The rise of JavaScript

HTTP Archive | State of JavaScript

The rise of JavaScript

Desktop JavaScript is up 350% since 2011

Mobile JavaScript is up 650% since 2011

HTTP Archive | State of JavaScript

The cost of JavaScript

• Downloading the files
• Parsing the content
• Compiling the code
• Executing

CSS & Fonts

Caching

Cache control headers

• cache-control
• last-modified
• etag
• pragma
• expires
• last-modified

Devices 📱

Device Characteristics:

• Screen resolution (DPR)
• Processing (CPU & RAM)
• Mobile Network
• Browsing Context

Device Characteristics:

• Screen resolution (DPR)
• Processing (CPU & RAM)
• Mobile Network
• Browsing Context

Device Characteristics:

• Screen resolution (DPR)
• Processing (CPU & RAM)
• Mobile Network
• Browsing Context

Device Characteristics:

• Screen resolution (DPR)
• Processing (CPU & RAM)
• Mobile Network
• Browsing Context

Device Characteristics:

• Screen resolution (DPR)
• Processing (CPU & RAM)
• Mobile Network
• Browsing Context

Device Characteristics:

• Screen resolution (DPR)
• Processing (CPU & RAM)
• Mobile Network
• Browsing Context

Third-party Content

Third-party scripts account for
>70% of requests

requestmap.webperf.tools

Tags serve business goals

• Measurement & Analytics
• Ads & Retargeting
• Optimisation & Testing
• Comments & Live Chat
• Tag Management

Blocking tags create availability risk

<script src="//code.jquery.com/jquery-1.7.1.min.js"></script>

Single Point of Failure blank screen duration:
Windows: 30s | Android: 60s | MacOS: 75s | iOS: 75s

WebPageTest | businessinsider.com

Tags create performance risk

Main thread blocked for over six seconds by Campaign Monitor

Tags can cause frustration!

1.6s delay on click event, caused by third-party scripts

Tags can cost us $£€ 😱

Guardian | BA faces £183m fine over passenger data breach

Managing Third Parties

• Subresource Integrity
• Content Security Policy
• Reporting API
• Self-hosting & Proxying
• Service Worker

Subresource Integrity

Validate resources against a crypto hash.
Protects against malicious code changes, not poor performance!

                            <script 
                            src="//thirdparty.com/script.js"
                            integrity="sha256-ivk71nXhz9nsyFDoYoGf2...=">
                            </script>

MDN | Subresource Integrity

Content Security Policy

Only allow scripts / images / frames from pre-approved domains

                                Content-Security-Policy:
                                default-src 'self';
                                img-src *;
                                media-src media1.com media2.com;
                                script-src userscripts.example.com
                            

MDN | Content Security Policy

Reporting API

Validate resources against a crypto hash.
Protects against malicious code changes, not poor performance!

                                Report-To:
                                {
                                    "group": "csp-endpoint",
                                    "max_age": 10886400,
                                    "endpoints": [{
                                        "url": "https://example.com/csp-reports"
                                    }]
                                },{
                                    "group": "network-endpoint",
                                    "max_age": 10886400,
                                    "endpoints": [{
                                        "url": "https://example.com/network-errors"
                                    }]
                                },{
                                    "max_age": 10886400,
                                    "endpoints": [{
                                        "url": "https://example.com/browser-errors"
                                    }]
                                }

MDN | Subresource Integrity

Self-hosting & Proxying

Serve third party content from your domain

Optimizely self-hosting for Akamai users

Service Worker

Time out slow responses

                                    function timeout(delay) {
                                        return new Promise(function(resolve, reject) {
                                            setTimeout(function(){
                                                resolve(new Response('', {
                                                    status: 408,
                                                    statusText: 'Request timed out.'
                                                }));
                                            }, delay);
                                        });
                                    }
                                    
                                    self.addEventListener('fetch', function(event) {
                                        if (/\.js$/.test(event.request.url)) {
                                            event.respondWith(Promise.race([timeout(2000), fetch(event.request.url)]));
                                        } else {
                                            event.respondWith(fetch(event.request));
                                        }
                                    });

Akamai | 5 ways to prevent slow 3rd party front-end services

Managing Third Parties

• Subresource Integrity - protects from malicious code
• Content Security Policy - only run expected code
• Reporting API - report on code erros & CSP violations
• Self-hosting & Proxying - maintain control of delivery
• Service Worker - race third parties against timeouts

Automation

Tooling

• Adhoc
• CI / CD
• Alerting

Adhoc Tooling

Advanced Concepts

Bring on the workers!

• Web Worker
• Service Worker
• Edge Worker

Web Worker

• 100% extra threads! 💯
• Logical separation of compute vs. UI
• postMessage communication is slow
• Only ArrayBuffers can be transferred for free

Service Worker

• Can serve content when offline
• Proxy third-party requests and apply timeouts
• Augment requests to add context (e.g. image width)
• Does not work for first view
• Only one permitted per domain
• Hard to test & debug

Edge Worker

• Logic at the edge means ⬇️ latency
• Offload expensive logic from the client
• Lack of standards = vendor lock-in
• Basic functionality only - geo / user agent / cookies

Worker Summary

• Web Worker - offload intensive JS to another thread
• Service Worker - a JS proxy in your browser
• Edge Worker - serverless at the edge

Thank you 🙏

simon@hearne.me

simonhearne.com/presentations/workshop/