Embracing Performance Optimization

Slide 1

Slide 1 text

Embracing Performance Optimization making the web faster

Slide 2

Slide 2 text

@jonbellah

Slide 3

Slide 3 text

What is performance optimization? The science of making websites faster.

Slide 4

Slide 4 text

Perceived speed vs. Actual speed

Slide 5

Slide 5 text

3 Critical Limits • 0.1 Second - limit for having the user feel the system is reacting. • 1.0 Second - limit for the users ﬂow of thought to remain uninterrupted. • 10 Seconds - limit for keeping the users attention on the dialogue. Source: Nielsen Norman Group, 1993

Slide 6

Slide 6 text

How does performance affect the bottom line?

Slide 7

Slide 7 text

• Increased search results from 10 to 30. • Load speed went from 0.4s to 0.9s. • Trafﬁc and revenue from searchers in the experimental group dropped by 20%. Source: Marissa Mayer, 2006 Web 2.0 Conference Google Experiment

Slide 8

Slide 8 text

• Reduced Google Maps payload by 30%. • Resulted in a 30% increase in requests. Source: Marissa Mayer, 2008 Google I/O Google Maps Optimization

Slide 9

Slide 9 text

• Predicted that a 1 second reduction in load speed would improve downloads and conversions by 2.7%. • In reality, they reduced page load speed by 2.2 seconds and saw a 15.4% increase in downloads and conversions. • With 275,000 daily visitors, that increase translated into over 10 million extra downloads every year. Source: Mozilla Blog, 2010 Mozilla Performance Optimization

Slide 10

Slide 10 text

What is our benchmark? Sub-second rendering.

Slide 11

Slide 11 text

The Critical Rendering Path The users path from following a link to the ﬁrst impression to the working experience.

Slide 12

Slide 12 text

Source: Ilya Grigorik

Slide 13

Slide 13 text

Source: Ilya Grigorik

Slide 14

Slide 14 text

The Overview

Slide 15

Slide 15 text

• Minimize requests and round-trip times. • Optimize the critical rendering path. • Leverage browser caching. • Reduce payload. • Compress and serve scaled images. • Maximize parallelization. • Prefetch resources. Performance Optimization Overview

Slide 16

Slide 16 text

Minimize Requests and Round-trip Times

Slide 17

Slide 17 text

• Initial connection requires a minimum of 3 RTTs (1 for DNS, 1 for TCP connection, 1 for HTTP request). • The server can only send ~14kb in the ﬁrst round-trip. • Avoid redirects. • Concatenate CSS and JavaScript to reduce requests. Minimize Round-trip Times (RTTs)

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Optimize the Critical Rendering Path

Slide 20

Slide 20 text

• Allows the page to render progressively. • Scripts block subsequent downloads, but those already in progress will continue. • Browsers can’t process CSS incrementally, so it all needs to arrive before the browser begins to paint. CSS at the top, JavaScript at the bottom

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

• Don’t load CSS from an asset domain. • Avoid duplicate rulesets and otherwise bloated CSS. • Don’t use @import in CSS, each occurrence is a new HTTP request. • Inline CSS above-the-fold. Optimizing CSS

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Leverage Browser Caching

Slide 26

Slide 26 text

• Cache rules everything around me. Leverage Browser Caching

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

• Cache rules everything around me. Leverage Browser Caching • Cache resources using far-future Expires or Cache-control max-age headers. • Specify a Last-Modiﬁed or ETag for each cacheable resource. • Load major libraries from Google Hosted Libraries.

Slide 29

Slide 29 text

Text ExpiresActive On ExpiresByType text/html "access plus 1 day" ExpiresByType image/gif "access plus 10 years" ExpiresByType image/jpeg "access plus 10 years" ExpiresByType image/png "access plus 10 years" ExpiresByType text/css "access plus 10 years" ExpiresByType text/javascript "access plus 10 years" ExpiresByType application/x-javascript "access plus 10 years"

Slide 30

Slide 30 text

Reduce Payload

Slide 31

Slide 31 text

• Gzip compresses based on repeated or repeatable strings. • Generally reduces ﬁle size by around 70%. • Minifying removes unnecessary comments and spacing, reducing overall ﬁle size. Reduce Payload

Slide 32

Slide 32 text

Compress and Scale Images

Slide 33

Slide 33 text

• Sprites. • 220% JPEG at 0 quality. • Pictureﬁll / • Srcset Compress and Serve Scaled Images

Slide 34

Slide 34 text

• Baseline renders top-to-bottom. Baseline vs. Progressive JPEGs

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

• Baseline renders top-to-bottom. Baseline vs. Progressive JPEGs • Progressive renders layered scans of increasing quality. • Perceived Speed vs. Actual Speed

Slide 37

Slide 37 text

Maximize Parallelization

Slide 38

Slide 38 text

• HTTP/1.1 suggests that browsers only download two components in parallel per hostname. • Asset domains allows you to fetch more resources in parallel. Maximize Parallelization

Slide 39

Slide 39 text

Prefetch Resources

Slide 40

Slide 40 text

• Lets you tell the browser to start fetching a DNS a fraction of a second before it’s needed. • Especially helpful in combination with the look-ahead preloader. Prefetching Resources

Slide 41

Slide 41 text

How do we test all this stuff?

Slide 42

Slide 42 text

Waterfalls Allow you to see the series of actions that occur between a user and your server in order for a user to view a page.

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Real User Monitoring (RUM) Captures time spent on front-end and back-end, geographic origin, browser type and version, and many other performance-related metrics.