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
21
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
79
Other Decks in Technology
See All in Technology
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
420
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
220
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
Android Audio: Beyond Winning On It
atsushieno
0
120
AI開発ツールCreateがAnythingになったよ
tendasato
0
130
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
180
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
220
KotlinConf 2025_イベントレポート
sony
1
130
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
410
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
12
4.8k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.7k
Featured
See All Featured
Faster Mobile Websites
deanohume
309
31k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Thoughts on Productivity
jonyablonski
70
4.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Embracing the Ebb and Flow
colly
87
4.8k
Rails Girls Zürich Keynote
gr2m
95
14k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
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/