Tweet
Tweet

Slide 1

Slide 1 text

HTML Optimization for Web Perfomance Frontend Conference Fukuoka 2019 Shogo SENSUI (@1000ch)

Slide 2

Slide 2 text

Chromium Blog: Moving towards a faster web

Slide 3

Slide 3 text

Shogo SENSUI (@1000ch) ● Software Engineer focusing on the web technology ● Engineering Manager and Tech Lead at Merpay, Inc. ● This is the second in Fukuoka. My first time was 2014.01.25

Slide 4

Slide 4 text

Why HTML Optimization?

Slide 5

Slide 5 text

HTML is the first step of rendering a page

Slide 6

Slide 6 text

The origin of subresources Loading order affects rendering speed directly

Slide 7

Slide 7 text

Independent of web page type Regardless of dynamic web application or not

Slide 8

Slide 8 text

Easy to optimize relatively Mostly completing in HTML

Slide 9

Slide 9 text

3 steps for HTML Optimization 1. Understanding Critical Rendering Path 2. Measuring Performance Metrics 3. Optimizing HTML

Slide 10

Slide 10 text

Understanding Critical Rendering Path

Slide 11

Slide 11 text

Browser Loading Process 1. Download HTML a. Parse HTML to construct DOM 2. Download subresources a. Parse CSS to construct CSSOM b. Parse and evaluate JavaScript synchronously c. Parse images, audios, videos, etc. 3. Create Render Tree using DOM and CSSOM a. Wait for DOM and CSSOM b. Layout nodes c. Paint nodes Construct DOM Tree Construct CSSOM Tree Create Render Tree Layout & Paint Execute JavaScript

Slide 12

Slide 12 text

1st step. Load HTML ● Download HTML from requested URL ● Parse HTML to construct DOM tree ● HTML will be evaluated from the top Basic HTML structure

Slide 13

Slide 13 text

2nd step. Load subresources ● Download subresources specified in HTML elements ○ ○ ○ <img> ○ <iframe> ○ etc… ● CSS will be downloaded and evaluated asynchronously ● JavaScript will be downloaded and evaluated synchronously ○ will affect DOM and CSSOM <html> <head> <meta charset="utf-8"> <title>Basic HTML structure</title> <link rel="stylesheet" href="foo.css"> <link rel="stylesheet" href="bar.css"> </head> <body> <img src="hero.jpg"> <script src="app.js">

Slide 14

Slide 14 text

3rd step. Render pages ● Wait for DOM and CSSOM are completely parsed ● Create Render Tree using DOM and CSSOM ● Display page ○ Layout nodes ○ Paint nodes without CSSOM with CSSOM

Slide 15

Slide 15 text

Measuring Performance Metrics

Slide 16

Slide 16 text

Wait, Load and DOMContentLoaded events? ● They are not user-centralized performance metrics ● We want to score the real-user experience

Slide 17

Slide 17 text

Which experience would you prefer?

Slide 18

Slide 18 text

Time to Interactive Demo (Airbnb mobile web)

Slide 19

Slide 19 text

User Centric Performance Metrics

Slide 20

Slide 20 text

Speed Index ● Visual Progress Score of the page ● Introduced at WebPagetest ○ Speed Index - WebPagetest Documentation ○ Further information in Japanese: Speed IndexというWebパフォーマンスの指標 ● Slightly difficult to understand and calculate. We need simpler metrics!

Slide 21

Slide 21 text

First Paint and First Contentful Paint ● First Paint: When anything on the first view is visible to the users ● First Contentful Paint: When any content on the first view is visible to the users

Slide 22

Slide 22 text

Largest Contentful Paint ● Timing when the biggest content on the first view was painted ● These elements are considered ○ , in , ○ An element with a background image loaded via CSS url() ○ Block-level elements

Slide 23

Slide 23 text

Long Tasks ● The process make the main thread busy ● Long Tasks will cause the UI to freeze ○ Delay time-to-interactive ○ Input latency

Slide 24

Slide 24 text

Time to Interactive ● How long it takes a page to become fully interactive ● Use GoogleChromeLabs/tti-polyfill to measure ○ It requires Long Tasks API is supported

Slide 25

Slide 25 text

PerformanceObserver API ● Enables you to measure the web application performance on the user’s device const po = new PerformanceObserver(list => { for (const entry of list.getEntries()) { // `entry` is a PerformanceEntry instance. console.log(entry.entryType); console.log(entry.startTime); console.log(entry.duration); } }); // Start observing the entry types you care about. po.observe({ entryTypes: ['resource', 'paint'] });

Slide 26

Slide 26 text

To measure FP, FCP, LCP: const observer = new PerformanceObserver(list => { for (const entry of list.getEntries()) { ga('send', 'event', { eventCategory: 'Performance Metrics', eventAction: entry.name, eventValue: entry.startTime + entry.duration, nonInteraction: true }); } }); // Start observing the entry types, FP, FCP, LCP. observer.observe({ entryTypes: ['paint', 'largest-contentful-paint'] });

Slide 27

Slide 27 text

To measure LongTasks: const observer = new PerformanceObserver(list => { for (const entry of list.getEntries()) { ga('send', 'event', { eventCategory: 'Performance Metrics', eventAction: 'longtask', eventValue: Math.round(entry.startTime + entry.duration), eventLabel: JSON.stringify(entry.attribution), }); } }); // Start observing the entry types, Long Task. observer.observe({ entryTypes: ['longtask'] });

Slide 28

Slide 28 text

Performance Audit Tools

Slide 29

Slide 29 text

Lighthouse ● Automated auditing, performance metrics, and best practices for the web. ● Bundled on Chrome DevTools ● GoogleChrome/lighthouse to use from the command line ● GoogleChrome/lighthouse-ci to integrate with CI

Slide 30

Slide 30 text

WebPageTest ● Measuring and analyzing the performance of web pages ● Open-sourced at GitHub. ● SpeedCurve - WebPageTest wrapper ● Calibre - WebPageTest wrapper ● The test result of shogosensui.com ● The lighthouse test result of shogosensui.com

Slide 31

Slide 31 text

How to optimize HTML?

Slide 32

Slide 32 text

All (sub-)resources should be minified

Slide 33

Slide 33 text

Optimize CSS Loading 1. Put in a. To prefer loading CSS and constructing CSSOM b. Putting multiple s is OK! Because browser will load them asynchronously 2. Separate CSS files as possible a. Should NOT be concatenated

Slide 34

Slide 34 text

Optimize JavaScript Loading 1. Put at the end of a. To prefer constricting HTML b. To prefer loading subresources 2. Add defer attribute to that loads 3rd party JavaScript a. To prefer rendering the current web page

Slide 35

Slide 35 text

Basic HTML structure will be... Basic HTML structure

Slide 36

Slide 36 text

Preload subresources ● Load subresources actively ● Specify preload attribute for ● Preload directive: as attribute to specify the kind of subresource ○ as=media: Audio, Video ○ as=script: Script file ○ as=style: CSS file ○ as=font: Font file ○ as=image: Image file ○ etc...

Slide 37

Slide 37 text

Preload for module scripts ● Load module scripts actively ● Specify modulepreload attribute for ● Further information about modulepreload: ES Modulesを優先 的にロードするmodulepreload

Slide 38

Slide 38 text

Native lazy-loading for and ● loading attribute to defer the loading of off-screen images and iframes ○ ○ ● Don’t have to use IntersectionObserver and to observe scroll and resize events. …

Slide 39

Slide 39 text

Priority Hints for subresources ● importance attribute to suggest the resource priority ○ ○ ○ ○ <iframe> <!-- An image the browser assigns "High" priority, but we don't actually want that. --> <img src="in_viewport_but_not_important.svg" importance="low" alt="..."> <!-- We want to initiate an early fetch for a resource, but also deprioritize it --> <link rel="preload" href="/js/script.js" as="script" importance="low"> <script src="/js/app.js" defer importance="high">

Slide 40

Slide 40 text

Resource Hints ● Load subresources speculatively ● DNS Prefetch ○ Resolves DNS ● Preconnect ○ Creates TCP connection ● Prefetch ○ Fetches resources ● Prefender ○ Renders HTML page

Slide 41

Slide 41 text

quicklink ● Faster subsequent page-loads by prefetching in-viewport links during idle time

Slide 42

Slide 42 text

Conclusion

Slide 43

Slide 43 text

Conslusion 1. Understanding Critical Rendering Path a. Browsers wait for DOM and CSSOM are parsed before rendering 2. Measuring Web Performance Metrics a. Use WebPageTest and Lighthouse to audit the web page b. Audit the web page continuously 3. Optimizing HTML a. For initial loading b. For runtime c. Minimizing payload is the premise for both

Slide 44

Slide 44 text

Further information? ● 基礎知識と実践的なノウハウを体系的 に解説し、Web パフォーマンスに関する 本質的な理解を促します ● 詳しくは https://webperf.guide を御 覧ください

Slide 45

Slide 45 text

Thank for listening Ask me anything ❤ by @1000ch