Improving Web Performance w/ Resource Hints

Slide 1

Slide 1 text

Improving Web Performance w/ Resource Hints Darren L Martin Frontend Developer Twitter: @ThatUIGuy CONNECT.TECH

Slide 2

Slide 2 text

Why Performance? 2

Slide 3

Slide 3 text

Why Performance? #PerfMatters 3

Slide 4

Slide 4 text

Why Performance? #PerfMatters Decrease Bounce Rate 4

Slide 5

Slide 5 text

Why Performance? #PerfMatters Decrease Bounce Rate: ● 53% of visits are likely to be abandoned if pages take longer than 3 seconds to load ● 46% of people say that waiting for pages to load is what they dislike the most when browsing the web on mobile devices 5

Slide 6

Slide 6 text

Why Performance? #PerfMatters Decrease Bounce Rate Increase Conversion Rate 6

Slide 7

Slide 7 text

Why Performance? #PerfMatters Decrease Bounce Rate Increase Conversion Rate: ● Mobile sites that load closer to 5 seconds earn up to 2x more mobile ad revenue than those whose sites load in 19 seconds, the average ● 70% longer average sessions for sites that load in 5 seconds vs 19 seconds. 7

Slide 8

Slide 8 text

Why Performance? 8

Slide 9

Slide 9 text

Why Performance? #PerfMatters Decrease Bounce Rate Increase Conversion Rate and Revenue Performance is a feature 9

Slide 10

Slide 10 text

What are Resource Hints? 10

Slide 11

Slide 11 text

What are Resource Hints? 11 W3C’s deﬁnition: “These primitives enable the developer, and the server generating or delivering the resources, to assist the user agent in the decision process of which origins it should connect to, and which resources it should fetch and preprocess to improve page performance.”

Slide 12

Slide 12 text

Layman’s terms: “Resource Hints are a simple but eﬀective way that web developers can help the browser to stay one step ahead of the user and keep pages fast.” What are Resource Hints? 12

Slide 13

Slide 13 text

Network Browser request content from server. Content ﬁles are received. Performance: Network vs Render 13 Render (Run-time) Browser parses and executes retrieved content ﬁles.

Slide 14

Slide 14 text

Network Browser request content from server. Content ﬁles are received. ● Resource Hints Performance: Network vs Render 14 Render (Run-time) Browser parses and executes retrieved content ﬁles.

Slide 15

Slide 15 text

Resource Hints 1. DNS-Prefetch 2. 3. 4. 15

Slide 16

Slide 16 text

DNS-Prefetch Tell the browser to perform a DNS lookup in the background 16

Slide 17

Slide 17 text

DNS-Prefetch Tell the browser to perform a DNS lookup in the background ... ... ... 17

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Resource Hints 1. DNS-Prefetch 2. Preconnect 3. 4. 20

Slide 21

Slide 21 text

Preconnect Tell the browser to begin the connection handshake (DNS, TCP, TLS) in the background 21

Slide 22

Slide 22 text

Preconnect Tell the browser to begin the connection handshake (DNS, TCP, TLS) in the background ... ... ... 22

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Preconnect 24

Slide 25

Slide 25 text

Preconnect Network diagram 25

Slide 26

Slide 26 text

Preconnect Network diagram 26

Slide 27

Slide 27 text

Slide 28

Slide 28 text

DNS-Prefetch & Preconnect Combining the two will allow the browsers which lack support to fall back to at least execute the DNS lookup ... ... ... 28

Slide 29

Slide 29 text

DNS-Prefetch or Preconnect? 29

Slide 30

Slide 30 text

DNS-Prefetch or Preconnect? 30

Slide 31

Slide 31 text

State of HTTPS Adoption 31

Slide 32

Slide 32 text

State of HTTPS Adoption “Majority of the world’s top million websites now use HTTPS” https://scotthelme.co.uk/alexa-top-1-million-analysis-august-2018/ 32

Slide 33

Slide 33 text

State of HTTPS Adoption “Majority of the world’s top million websites now use HTTPS” https://scotthelme.co.uk/alexa-top-1-million-analysis-august-2018/ 33 “Majority of the world’s top million websites now use HTTPS” https://scotthelme.co.uk/alexa-top-1-million-analysis-august-2018/

Slide 34

Slide 34 text

Resource Hints 34 1. DNS-Prefetch 2. Preconnect 3. Preload 4.

Slide 35

Slide 35 text

Preload Specify resources your page will need very soon, making sure they are available earlier in the page lifecycle 35

Slide 36

Slide 36 text

Preload Specify resources your page will need very soon, making sure they are available earlier in the page lifecycle (Attributes: as) ... ... ... 36

Slide 37

Slide 37 text

Preload Specify resources your page will need very soon, making sure they are available earlier in the page lifecycle (Attributes: as, media) ... ... ... 37

Slide 38

Slide 38 text

Preload Specify resources your page will need very soon, making sure they are available earlier in the page lifecycle (Attributes: as, media, type) ... ... ... 38

Slide 39

Slide 39 text

Preload - Fonts Specify resources your page will need very soon, making sure they are available earlier in the page lifecycle (Attributes: as, media, type, crossorigin) ... ... ... 39

Slide 40

Slide 40 text

Preload 40

Slide 41

Slide 41 text

Preload 41

Slide 42

Slide 42 text

Resource Priority 42

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Resource Hints 1. DNS-Prefetch 2. Preconnect 3. Preload 4. 46

Slide 47

Slide 47 text

Resource Hints 1. DNS-Prefetch 2. Preconnect 3. Preload 4. 47 Current View / Page

Slide 48

Slide 48 text

Current View / Page Browser detects the preload directive before it detects the font URL within the stylesheet. 48 DOCUMENT: ... ... MAIN.CSS: url(‘../link/to/font.woﬀ2’)

Slide 49

Slide 49 text

Current View / Page Browser detects the preload directive before it detects the font URL within the stylesheet. The font is loaded and available for use sooner. 49 DOCUMENT: ... ... MAIN.CSS: url(‘../link/to/font.woﬀ2’)

Slide 50

Slide 50 text

Use Responsibly 50

Slide 51

Slide 51 text

Critical (Happy) Path Web: “The typical sequence of steps taken by a user to convert.” 51

Slide 52

Slide 52 text

Critical (Happy) Path Web: “The typical sequence of steps taken by a user to convert.” Network Performance: “Resources that must be loaded before the initial render.” 52

Slide 53

Slide 53 text

Measuring Single View / Page: 1. WebPageTest (WPT) - External 2. Lighthouse (LH) - Local (Browser Extension) 53

Slide 54

Slide 54 text

Measuring to Identify Single View / Page: 1. WebPageTest (WPT) - External 2. Lighthouse (LH) - Local (Browser Extension) 54

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Slide 57

Slide 57 text

Measuring to Conﬁrm Single View / Page: 1. WebPageTest (WPT) - External 2. Lighthouse (LH) - Local (Browser Extension) 57

Slide 58

Slide 58 text

Slide 59

Slide 59 text

Slide 60

Slide 60 text

Results - Real World Case study example 60 500 ms 16.67% savings

Slide 61

Slide 61 text

Results - Real World Case study example 61

Slide 62

Slide 62 text

Resource Hints 1. DNS-Prefetch 2. Preconnect 3. Preload 4. Prefetch 62 Current View / Page

Slide 63

Slide 63 text

Resource Hints 1. DNS-Prefetch 2. Preconnect 3. Preload 4. Prefetch 63 Current View / Page Future View / Page

Slide 64

Slide 64 text

Prefetch Specify resources that will be needed for the next navigation, making sure they are available earlier 64

Slide 65

Slide 65 text

Prefetch Specify resources that will be needed for the next navigation, making sure they are available earlier ... ... ... 65

Slide 66

Slide 66 text

Slide 67

Slide 67 text

Slide 68

Slide 68 text

Future View / Page 68 DOCUMENT A: ... DOCUMENT B: ... ... Page A Page B Cache

Slide 69

Slide 69 text

Future View / Page 69 DOCUMENT A: ... DOCUMENT B: ... ... Page A Page B Cache

Slide 70

Slide 70 text

Dynamically Injected - Prefetch // w3c-snippet.js var hint = document.createElement("link"); hint.rel = "prefetch"; hint.as = "document"; hint.href = "/article/part3.html"; document.head.appendChild(hint); 70

Slide 71

Slide 71 text

Slide 72

Slide 72 text

Slide 73

Slide 73 text

Slide 74

Slide 74 text

74 Homepage Heroes!!!

Slide 75

Slide 75 text

75 Homepage Heroes!!!

Slide 76

Slide 76 text

Team Search - Critical Assets "https://domain.com/path/to/spa-search/main.css" "https://domain.com/path/to/spa-search/main.js" "https://domain.com/path/to/spa-search/vendor.css" "https://domain.com/path/to/spa-search/vendor.js" 76

Slide 77

Slide 77 text

Team Search - Critical Assets // team-search-assets.js [ "main.css", "main.js", "vendor.css", "vendor.js" ] 77

Slide 78

Slide 78 text

Team Search - Critical Assets - Hashed // team-search-assets.js [ "main.7e86b45a.min.css", "main.c8784e3d8daef15f5712.min.js", "vendor.b207424b.min.css", "vendor.13a88024ceaf166c1980.min.js" ] 78

Slide 79

Slide 79 text

Webpack - Asset Manifest Plugin $ npm install --save-dev webpack-manifest-plugin // webpack.config.js var ManifestPlugin = require('webpack-manifest-plugin'); module.exports = { plugins: [ new ManifestPlugin() ] }; 79

Slide 80

Slide 80 text

Webpack - Asset Manifest JSON // team-search-asset-manifest.json { "main.css": "main.7e86b45a.min.css", "main.js": "main.c8784e3d8daef15f5712.min.js", "runtime.js": "runtime.69b7851664c8474c1ab4.min.js", "vendor.css": "vendor.b207424b.min.css", "vendor.js": "vendor.13a88024ceaf166c1980.min.js" } 80

Slide 81

Slide 81 text

Prefetch - Injected at Runtime var doc = window.document, docHead = doc.head; var assetManifestObj = JSON.parse(<>); var path = 'path/to/team-search/dist/bundle/'; Object.keys(assetManifestObj).forEach(function(assetName) { var linkElem = doc.createElement("link"); linkElem.rel = "prefetch"; linkElem.as = "<>"; linkElem.href = path + assetManifestObj[assetName]; docHead.appendChild(linkElem); }); 81

Slide 82

Slide 82 text

Prefetch 82

Slide 83

Slide 83 text

Prefetch - Lowest Priority 83

Slide 84

Slide 84 text

84 Prefetch - Subsequent Navigation

Slide 85

Slide 85 text

Results - Real World Case study example 85

Slide 86

Slide 86 text

Results - Real World Case study example 86 3,200 ms 30.77% savings

Slide 87

Slide 87 text

87 Google Blog Case Study Results

Slide 88

Slide 88 text

88 3,900 ms 84.78% savings

Slide 89

Slide 89 text

Measuring Multi-View / Page: 1. WebPageTest (WPT) - External 2. Puppeteer - Local 89

Slide 90

Slide 90 text

Measuring with WPT 90

Slide 91

Slide 91 text

Measuring with WPT 91

Slide 92

Slide 92 text

Measuring Multi-View / Page: 1. WebPageTest (WPT) - External 2. Puppeteer - Local 92

Slide 93

Slide 93 text

Puppeteer - Scripting const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); const start = performance.now(); await page.goto('https://www.store.google.com/landingpage'); await page.goto('https://www.store.google.com/productpage'); // click the buy button, which triggers overlay basket await page.click('#buy_btn'); // wait until basket overlay is shown await page.waitFor('#close_btn'); await page.goto('https://www.store.google.com/basket'); await page.goto('https://www.store.google.com/checkout'); console.log('Flow took ' + parseInt((performance.now() - start)/1000) + ' seconds'); await browser.close(); })(); 93

Slide 94

Slide 94 text

94 Homepage Heroes!!!

Slide 95

Slide 95 text

Tools for Prefetch 95

Slide 96

Slide 96 text

“Guess.js uses a technique called predictive prefetching. By consuming data from an analytics source, such as Google Analytics, Guess.js enables our web applications to prefetch resources only when they are likely to be needed, considering the user's behavior.” 96

Slide 97

Slide 97 text

Slide 98

Slide 98 text

Tools - Guess.js “Guess.js uses a technique called predictive prefetching. By consuming data from an analytics source, such as Google Analytics, Guess.js enables our web applications to prefetch resources only when they are likely to be needed, considering the user's behavior.” 98

Slide 99

Slide 99 text

Slide 100

Slide 100 text

100

Slide 101

Slide 101 text

Resource Hints 1. DNS-Prefetch 2. Preconnect 3. Preload 4. Prefetch 5. 101 Current View / Page Future View / Page

Slide 102

Slide 102 text

Resource Hints 1. DNS-Prefetch 2. Preconnect 3. Preload 4. Prefetch 5. Prerender 102 Current View / Page Future View / Page

Slide 103

Slide 103 text

Resource Hints 1. DNS-Prefetch 2. Preconnect 3. Preload 4. Prefetch 5. Prerender 103 Current View / Page Future View / Page

Slide 104

Slide 104 text

Prerender Tell the browser to render the speciﬁed page in the background, speeding up page load as the user navigates to it ... ... ... 104

Slide 105

Slide 105 text

105

Slide 106

Slide 106 text

Resource Hints 1. DNS-Prefetch 2. Preconnect 3. Preload 4. Prefetch 5. Prerender* * deprecated 106 Current View / Page Future View / Page

Slide 107

Slide 107 text

107

Slide 108

Slide 108 text

108

Slide 109

Slide 109 text

Resource Hints 1. DNS-Prefetch 2. Preconnect 3. Preload 4. Prefetch 5. Prerender* * deprecated use with caution 109 Current View / Page Future View / Page

Slide 110

Slide 110 text

Summary & Next Steps 1. Performance is a feature 2. Deﬁne Critical (Happy) Path - Analyze user behavior 3. Automate Implementation: a. Frontend Tooling (Asset Manifest JSON) b. Third-party (quicklink, Guess.js) 4. Measure Consistently: a. Single View / Page - WPT or LH b. End-to-End - WPT or Puppeteer c. Set a Performance Budget 5. Performance Checklist (https://web.dev/fast) 110