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
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
2nd step. Load subresources ● Download subresources specified in HTML elements ○ ○ <br/>○ <img><br/>○ <iframe><br/>○ etc…<br/>● CSS will be downloaded and<br/>evaluated asynchronously<br/>● JavaScript will be downloaded and<br/>evaluated synchronously<br/>○ will affect DOM and CSSOM<br/><html><br/><head><br/><meta charset="utf-8"><br/><title>Basic HTML structure</title><br/><link rel="stylesheet" href="foo.css"><br/><link rel="stylesheet" href="bar.css"><br/></head><br/><body><br/><img src="hero.jpg"><br/><script src="app.js">
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
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!
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
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
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
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'] });
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
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
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
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<br/>a. To prefer rendering the current web page<br/>
Preload for module scripts ● Load module scripts actively ● Specify modulepreload attribute for ● Further information about modulepreload: ES Modulesを優先 的にロードするmodulepreload
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.
Priority Hints for subresources ● importance attribute to suggest the resource priority ○ ○ ○ <br/>○ <iframe><br/><!-- An image the browser assigns "High"<br/>priority, but we don't actually want that. --><br/><img src="in_viewport_but_not_important.svg"<br/>importance="low" alt="..."><br/><!-- We want to initiate an early fetch for a<br/>resource, but also deprioritize it --><br/><link rel="preload" href="/js/script.js"<br/>as="script" importance="low"><br/><script src="/js/app.js" defer<br/>importance="high">
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
1000ch
bergkamp
sinsoku
newrelic2023
mineo_matsuya
sat
kthrtty
hassaku63
moritamasami
ojun9
carta_engineering
sakaguchi
keithyokoma
kneath
smashingmag
paulrobertlloyd
mraible
bcantrill
maggiecrowley
lara
colly
tenderlove
rasmusluckow
michaelherold
bermonpainter