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
Web Performance Optimization
Search
Jecelyn Yeen
September 18, 2019
Technology
5
1.7k
Web Performance Optimization
Web Performance & Optimization - Images, Fonts, JavaScript
Jecelyn Yeen
September 18, 2019
Tweet
Share
More Decks by Jecelyn Yeen
See All by Jecelyn Yeen
WorkerConf 2021 - Browser automation with Puppeteer
jecfish
0
1.8k
My Journey as Technical Presenter
jecfish
0
930
Becoming a GDE
jecfish
0
3.8k
How to get started in IT Freelancing
jecfish
1
270
New Web API & Stylings
jecfish
3
690
如何打造高性能且SEO友好的单页应用(SPA)
jecfish
2
840
JS SEO
jecfish
4
1.5k
Have Fun with Angular
jecfish
0
95
RxJs Trex
jecfish
0
640
Other Decks in Technology
See All in Technology
Amazon Bedrock AgentCore でプロモーション用動画生成エージェントを開発する
nasuvitz
6
310
UDDのススメ - 拡張版 -
maguroalternative
1
650
AI時代の大規模データ活用とセキュリティ戦略
ken5scal
1
270
人を動かすことについて考える
ichimichi
2
190
Telemetry APIから学ぶGoogle Cloud ObservabilityとOpenTelemetryの現在 / getting-started-telemetry-api-with-google-cloud
k6s4i53rx
0
160
キャリアを支え組織力を高める「多層型ふりかえり」 / 20250821 Kazuki Mori
shift_evolve
PRO
2
220
生成AI利用プログラミング:誰でもプログラムが書けると 世の中どうなる?/opencampus202508
okana2ki
0
170
Amazon Inspector コードセキュリティで手軽に実現するシフトレフト
maimyyym
0
150
MySQL HeatWave:サービス概要のご紹介
oracle4engineer
PRO
4
1.6k
[OCI Technical Deep Dive] OCIで生成AIを活用するためのソリューション解説(2025年8月5日開催)
oracle4engineer
PRO
0
130
Jamf Connect ZTNAとMDMで実現! 金融ベンチャーにおける「デバイストラスト」実例と軌跡 / Kyash Device Trust
rela1470
1
210
Engineering Failure-Resilient Systems
infraplumber0
0
130
Featured
See All Featured
The Language of Interfaces
destraynor
160
25k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
810
Writing Fast Ruby
sferik
628
62k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Music & Morning Musume
bryan
46
6.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Statistics for Hackers
jakevdp
799
220k
4 Signs Your Business is Dying
shpigford
184
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Transcript
Web Performance Optimization Images, Fonts, JavaScript
STAY AWAKE!
@JecelynYeen Software Architect Google Developer Expert - Angular - Web
Technologies Director - NG-MY 2019 - Women Who Code KL
#ngMY2019, July 6-7 400+ ppl, 30+ countries
Feeling of browsing slow website...
To make our users happy, having pleasant browsing experience.
Page speed matters to SEO Page Ranking https://webmasters.googleblog.com/2018/01/u sing-page-speed-in-mobile-search.html
But it takes a lot of effort to do so.
Building features is more important… SEO doesn’t matter...
Speed is basic need, it is a FEATURE. No excuses.
- Measure & Monitor - Optimization - Summary
11 Measure & Monitor
Measure Page Performance Lighthouse | PageSpeed Insights | Web Page
Test
None
Automate performance measurement & monitoring
npm install lighthouse Install Lighthouse Set your performance budget budget.json
[ { "resourceSizes": [ { "resourceType": "script", "budget": 309 },
{ "resourceType": "total", "budget": 500 } ], "resourceCounts": [ { "resourceType": "third-party", "budget": 10 } ] } ] Define performance budget in budget.json
lighthouse https://example.com --budget-path=./budget.json Integrate and run in your CI/CD
https://developers.google.com/web/tools/li ghthouse/audits/budgets
19 Optimize & Get Fast
Page Weight (Mobile) http://bit.ly/mobile-page-weight
➔ Images ➔ Fonts ➔ JavaScript
Images
5MB Images a page Data Plan
SVG
32kb
NPM: https://www.npmjs.com/package/svgo UI: https://jakearchibald.github.io/svgomg/ Optimize SVG with SVGOMG 32kb ->
2kb (879B)
Like PNG but smaller
WebP Images are 25-35% smaller than equivalent JPEG 0r PNG.
78% Global User WebP Has arrived Based on data from
caniuse Source: bit.ly/webp-support Supported Supported Supported ?
.png - 119 kb .webp - 28 kb .png -
278 kb .webp - 30 kb
Serve WebP and support browsers <picture> <source srcset="teh-tarik.webp" type="image/webp"> <img
src="teh-tarik.png"> </picture> Image container If browser supports WebP Else PNG it is
Image Compression
Lossy Image For most images, 80-85% quality will reduce file
size by 30-40% with minimal effect on image quality
495 kb 180 kb (80% quality) Lossy Image
Responsive Image
Image in desktop & tablet can be ~2-4x larger than
mobile 28 kb 12 kb
Serve different image sizes <picture> <source media="(max-width: 800px)" srcset="teh-tarik-800w.webp" type="image/webp">
<source srcset="teh-tarik.webp" type="image/webp"> <img src="teh-tarik.png" > </picture> Small screen and if browser supports WebP https://developer.mozilla.org/en-US/docs/Learn/HTML/ Multimedia_and_embedding/Responsive_images
squoosh.app resize, compress, format Or automate with these npm packages:
imagemin, sharp, jimp
Lazy Loading
None
None
None
Performant Images ➔ Is lazy ➔ Appropriate format ➔ Appropriate
compression ➔ Appropriate display size
Fonts
None
“Flash of Unstyled Text” (FOUT) Arial
“Flash of Unstyled Text” (FOUT) Google Sans
Flash of Unstyled Text (FOUT) @font-face { font-family: Google Sans',
sans-serif; src: url('...') format('woff'); font-display: swap; } Display unstyled text until font loaded .5s improvement in “Visual Complete” on 3G
fonts.googleapis.com/css?family=Source+Sans+Pro &display=swap
Limiting font characters
Limiting font characters https://developers.google.com/fonts/docs/getting_started# optimizing_your_font_requests
fonts.googleapis.com/css?family=Source+Sans+Pro :400,600,900 Limit font weights https://www.smashingmagazine.com/2019/06/o ptimizing-google-fonts-performance/
JavaScript
If only we could snap and destroy half the file
size...
Lazy Loading Traditional SPA - big-bundle.js (60kb) Split & Lazy
Load - route-speakers.js (20kb) - route-food.js (20kb) - route-schedule.js (20kb) - ….
Lazy Loading 1-2 pages per module const routes: Routes =
[ { path: 'speakers', loadChildren: () => import('./speakers/speakers.module') .then(m => m.SpeakersModule) }, ... ]; Latest Angular version 8 syntax
Preloading Preload lazy-loadable modules in the background while the user
is interacting with our application.
imports: [ ... RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) ], Preloading
in Angular https://angular.io/api/router/PreloadAllModules Roll your own: Network aware preloading strategy
https://github.com/guess-js/guess https://github.com/GoogleChromeLabs/quicklink Predictive Preloading
Differential Loading Serve different bundles & polyfills based on browser
None
Built in Differential Loading with Angular CLI https://auth0.com/blog/angular-8-differential-loading/
Defer JavaScript
Patrick Hulce, thirdpartyweb.today. Data from across top 4 millions sites
Defer JavaScript <script> <script defer> HTML parsing HTML parsing paused
Script download Script execution
Defer Google Tag Manager <script defer src="https://www.googletagmanager.com/gtag/js?id=xxx"> </script> <script> ...
</script> Defer it Reduction of domComplete time
None
Expensive JavaScript Libraries
None
None
None
72 Summary
Performance optimization is a continuous effort
➔ Measure ➔ Improve ➔ Monitor ➔ Repeat
Blueprint for Performance Success https://youtu.be/mLjxXPHuIJo
None
The Web
Make the Web Better for E.V.E.R.Y.O.N.E.
Thank you! Follow @JecelynYeen slides: https://speakerdeck.com/chybie/w eb-performance-optimization Videos https://youtu.be/ACA3yBHBUuE Instagram
me! @ngmykia