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.7k
My Journey as Technical Presenter
jecfish
0
920
Becoming a GDE
jecfish
0
3.7k
How to get started in IT Freelancing
jecfish
1
270
New Web API & Stylings
jecfish
3
680
如何打造高性能且SEO友好的单页应用(SPA)
jecfish
2
820
JS SEO
jecfish
4
1.5k
Have Fun with Angular
jecfish
0
94
RxJs Trex
jecfish
0
630
Other Decks in Technology
See All in Technology
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
44
26k
Autonomous Database サービス・アップデート (FY25)
oracle4engineer
PRO
2
770
Kotlinで学ぶ 代数的データ型
ysknsid25
5
1.1k
「伝える」を加速させるCursor術
naomix
0
620
TODAY 看世界(?) 是我們在看扣啦!
line_developers_tw
PRO
0
160
AIエージェントの継続的改善のためオブザーバビリティ
pharma_x_tech
6
1.1k
原則から考える保守しやすいComposable関数設計
moriatsushi
3
390
生成AIをテストプロセスに活用し"よう"としている話 #jasstnano
makky_tyuyan
0
160
Create a Rails8 responsive app with Gemini and RubyLLM
palladius
0
120
新規プロダクト開発、AIでどう変わった? #デザインエンジニアMeetup
bengo4com
0
450
New Cache Hierarchy for Container Images and OCI Artifacts in Kubernetes Clusters using Containerd / KubeCon + CloudNativeCon Japan
pfn
PRO
0
150
ユーザーのプロフィールデータを活用した推薦精度向上の取り組み
yudai00
0
320
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
53
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
4 Signs Your Business is Dying
shpigford
184
22k
KATA
mclloyd
29
14k
Statistics for Hackers
jakevdp
799
220k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
Designing Experiences People Love
moore
142
24k
Making Projects Easy
brettharned
116
6.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
350
20k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
900
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