Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Optimising Webpage Performance
Search
Thomas Stapleton
November 06, 2017
Technology
1
20
Optimising Webpage Performance
Basics + Chrome Developer Tools
Thomas Stapleton
November 06, 2017
Tweet
Share
More Decks by Thomas Stapleton
See All by Thomas Stapleton
Optimising Website Performance
tomsta93
1
77
Other Decks in Technology
See All in Technology
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
5
3k
ClaudeCodeにキレない技術
gtnao
1
860
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
thejetblueairhelpsupport
0
150
ロールが細分化された組織でSREは何をするか?
tgidgd
1
420
Maintainer Meetupで「生の声」を聞く ~講演だけじゃないKubeCon
logica0419
0
110
microCMSではじめるAIライティング
himaratsu
0
150
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
1
310
Introduction to Bill One Development Engineer
sansan33
PRO
0
260
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
950
An introduction to Claude Code SDK
choplin
2
1k
LLM拡張解体新書/llm-extension-deep-dive
oracle4engineer
PRO
23
6.2k
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
110
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Site-Speed That Sticks
csswizardry
10
700
Build your cross-platform service in a week with App Engine
jlugia
231
18k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
GitHub's CSS Performance
jonrohan
1031
460k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Transcript
Optimising Webpage Performance Basics + Chrome Developer Tools
Webpage Performance • How fast does the webpage load? •
How fast can a user interact? • How fast does the application respond?
Navigation Timing API (W3C)
Navigation Timing API (W3C) HTML Parsing Complete 500 milliseconds
Navigation Timing API (W3C) Interaction 700 milliseconds
Navigation Timing API (W3C) Page Load 1 second
Client Side Optimisation “If your application is slow, people won’t
use it.” - Fred Wilson
Client Side Optimisation • Minify HTML • Load critical content
over the server • Use async templates for non-critical components • Make sure your HTML is valid
• Minify CSS (PostCSS & cssnano) • Bundle common SCSS/LESS
into one stylesheet • Inline styles for critical/non-critical components • Make sure your CSS is valid Client Side Optimisation
• Minify JavaScript • Remove blocking JavaScript • Use a
module loader • Make sure your JavaScript is versioned Client Side Optimisation
Client Side Optimisation • Only load scripts if they are
required on the page • Create JavaScript bundles that make sense • Use DRY, KISS & SOLID principles • Inline JavaScript for critical components
Client Side Optimisation • Utilise a CDN • Version your
images • Optimise them • Lazy Load non-critical • Use SVGs where appropriate
Client Side Optimisation • Blocking fonts slow page speed •
Load fonts async • Avoid FOUT, FOIT, FOFT • Maximum 2X fonts & 2X weights
Serving Static Assets • Use HTTPS, enable HTTP2, HTTP2 server
push • Two way proxy • Proxy cache • Correct headers e.g. e-tags, gzip/brotli, expiry
Serving Static Assets Headers are important, make sure they’re set.
Serving Static Assets Before After ab -n 1000 -c 100
http://192.168.99.100/
Proxy Cache 10x Faster! • Time Taken: 1s - 0.1s
• Individual Requests:10ms - 1ms • Transfer Rate: 38.6kb - 393.4kb Respond with 1000 ‘304’ requests a second
Developer Tools Make sure you have some experience using different
developer tools!
Chrome Developer Tools Preview Production “it's designed for developers and
early adopters, and can sometimes break down completely”
Chrome Developer Tools Powered by HTML, CSS and JavaScript
Overview • Elements - DOM nodes • Console - Errors,
logging & debugging • Audits/Lighthouse - PWA tester • Sources - Downloaded files, snippets & debugging • Network - Latency & requests • Performance (Timeline) - FPS, FMP, JS exec time • Memory - Memory allocations DOM, functions & timeline • Application - Service workers, browser stores & cache • Security - Request protocol type, SSL certificate & HTTPS status
• Elements - DOM nodes • Console - Errors, logging
& debugging • Audits/Lighthouse - PWA tester • Sources - Downloaded files, snippets & debugging • Network - Latency & requests • Performance (Timeline) - FPS, FMP, JS exec time • Memory - Memory allocations DOM, functions & timeline • Application - Service workers, browser stores & cache • Security - Request protocol type, SSL certificate & HTTPS status Overview Outline performance issues
Audits • Overview - Passed/failed • PWA - PWA Checklist
• Performance - FMP • Accessibility - Semantics • Best Practices - Perf pitfalls • Download & Share
Lighthouse Viewer https://googlechrome.github.io/lighthouse/viewer/
Network • See screenshots of progress • Replicate connection speed
• Network queue overview • Protocol Type • Status • DOMContentLoaded • Load time • Breakdown of request processes
Performance • Paint times • FPS • JS Evaluating &
Execution • Summary • Memory • Event Listeners
Time To First Paint • A white page can be
a valid ‘time to first paint’. • Large amounts of JavaScript execution blocking paint render. • The above is cause by poor code executing on scroll.
Memory • Memory Allocation • Usage/script breakdown • Memory usage
& breakdown
Application • Service Workers • Data/Web Stores • Sessions •
Cache
Service Workers (https://developers.google.com 2017) Cache, falling back to network
Service Workers https://www.youtube.com/watch?v=Cjo9iq8k-bc (jakearchibald.com 2016)
Streams (jakearchibald.com 2016)
Thomas Stapleton @tomsta93 Thank you https://www.surveymonkey.co.uk/r/SDC9W78
Useful Links • https://developers.google.com/web/tools/chrome-devtools/ • https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp • https://docs.google.com/document/d/18GmrZjkpA8fxmCehjgMUg2_ujQs04a7RXlm7m_YcxVM/ mobilebasic •
https://jakearchibald.com/2016/streams-ftw/#creating-one-stream-from-multiple-sources-to- supercharge-page-render-times • https://w3c.github.io/ServiceWorker/ • https://developers.google.com/web/fundamentals/performance/ • http://techblog.netflix.com/2015/08/making-netflixcom-faster.html • https://www.webpagetest.org/ • https://tools.pingdom.com/ • https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
• http://caniuse.com/#search=brotli • https://github.com/google/brotli • https://www.smashingmagazine.com/2017/04/guide-http2-server-push/ • https://medium.com/reloading/javascript-start-up-performance-69200f43b201 • https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
• https://www.youtube.com/watch?v=W4zp79QyDXA • https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common- memory-leaks-3f28b94cfbec • https://blog.sessionstack.com/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized- code-ac089e62b12e • https://github.com/GoogleChrome/lighthouse • https://googlechrome.github.io/lighthouse/viewer/ • https://developers.google.com/web/progressive-web-apps/checklist • https://github.com/GoogleChromeLabs/sw-precache More useful links
References • https://www.w3.org/TR/navigation-timing/timing- overview.png • https://jakearchibald.com/2016/streams-ftw/ • https://www.w3.org/TR/service-workers/#cache • https://developers.google.com/web/fundamentals/
instant-and-offline/offline-cookbook/