GDG DevFest Suwon 2018 - Improve Web Performance (Cho eun)

Improve web performance Cho Eun Google Developer Experts Web Technologies
Seoul, South Korea With ChromeDevTools & LightHouse

What is the performance?

Now is 4:00AM (zzZ)

From zootopia

Measuring performance with the RAIL Model

RAIL is a user-centric performance model that breaks down the
user's experience into key actions. RAIL's goals and guidelines aim to help developers and designers ensure a good user experience for each of these actions. By laying out a structure for thinking about performance, RAIL enables designers and developers to reliably target the work that has the highest impact on user experience.

Focus on the user

0 to 16ms 0 to 100ms 100 to 300ms 300
to 1000ms 1000ms or more 10000ms or more GOOD FAST DELAYED WELL… BAD TERRIBLE

Response: Process events in under 50ms

Animation: produce a frame in 10ms

idle: maximise idle time

Load: deliver content and become interactive in under 5 seconds

When you does not know problem, you can’t solve the
problem

Chrome DevTools

LightHouse

PageSpeed Insights

Summary • Focus on the user • Repond to user
input in under 100ms • Produce a frame in under 10ms when animating or scrolling • Maximise main thread idle time • Load interactive content in under 5000ms

We are using lighthouse improve their performance

Lighthouse is an open-source, automated tool for improving the quality
of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

Performance

Critical Rendering Path ઺ਃೠ ۪؊݂ ױ҅

Optimising Critical Rendering path refers to prioritising the display of
content that relates to the current user action

NAVER is unoptimised Rendering

Constructing the Object Model

index.html <!DOCTPE html> <html> <head> <meta name=“viewport” content=“width=device-width, initial-scale=1”> <link
href=“style.css” rel=“stylesheet” /> <title>HELLO WORLD</title> </head> <body> <p>Hello <span>web performance</span> students!</p> <div><img src=“photo.jpg”></div> </body> </html>

style.css Body { font-size: 16px } P { font-weight: bold
} Span { color: red } P span { display: none } Img { float: right }

index.html <!DOCTPE html> <html> <head> <meta name=“viewport” content=“width=device-width, initial-scale=1”> <link
href=“style.css” rel=“stylesheet” /> <title>HELLO WORLD</title> </head> <body> <div style=“width: 50%”> <div style=“width: 50%”>Hello World</div> </div> </body> </html>

Render-blocking CSS & Defer unused CSS

CSS is Rendering block resources

NAVER (CSS ࢎਊ) NAVER (CSS ޷ࢎਊ) (FOUC)

https://mm.pstatic.net/css/w_g181108a.css

઺ਃೠ ܻࣗझח ਋ࢶ ۽٬ೞҊ, ઺ਃೞ૑ঋ਷ ܻࣗझח ࠺زӝ۽ ۽٬ೞب۾ ೞ੗.

index.html <!DOCTPE html> <html> <head> <meta name=“viewport” content=“width=device-width, initial-scale=1”> <style>
// Important Styles </style> <link href=“style.css” rel=“stylesheet” /> <title>HELLO WORLD</title> </head> <body> <p>Hello <span>web performance</span> students!</p> <div><img src=“photo.jpg”></div> </body> </html>

Offscreen Images

࠭ನ౟ ߆ী ੓ח ੉޷૑ܳ ݢ੷ ࠛ۞ৢ ೙ਃח হ׮.

Optimise Images

Imagemin

$ imagemin images/* --out-dir=images

Showcase & Resources

Thanks!

GDG DevFest Suwon 2018 - Improve Web Performanc...

GDG DevFest Suwon 2018 - Improve Web Performance (Cho eun)

More Decks by GDG Suwon

Other Decks in Technology

Featured

Transcript