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.6k
My Journey as Technical Presenter
jecfish
0
880
Becoming a GDE
jecfish
0
3.7k
How to get started in IT Freelancing
jecfish
1
270
New Web API & Stylings
jecfish
3
650
如何打造高性能且SEO友好的单页应用(SPA)
jecfish
2
770
JS SEO
jecfish
4
1.4k
Have Fun with Angular
jecfish
0
89
RxJs Trex
jecfish
0
590
Other Decks in Technology
See All in Technology
AIをプロダクトに実装するならAPIで分離しよう 〜タクシーアプリ『GO』のアーキテクチャ実例紹介〜
74th
2
130
プロダクト観点で考えるデータ基盤の育成戦略 / Growth Strategy of Data Analytics Platforms from a Product Perspective
yamamotoyuta
0
410
Grafanaのvariables機能について
tiina
0
210
サーバーレスで楽しよう!お気軽に始められる3つのポイント / Have fun with Serverless!
_kensh
3
280
20250129 Findy_テスト高活用化
dshirae
1
250
NOSTR, réseau social et espace de liberté décentralisé
rlifchitz
0
160
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
360
AIエージェントについてまとめてみた
pharma_x_tech
20
13k
バクラクの組織とアーキテクチャ(要約)2025/01版
shkomine
13
3.3k
Next Step: Play Time!
trishagee
2
110
Ask! NIKKEI RAG検索技術の深層
hotchpotch
12
2.3k
A Hidden Pitfall of K8s DNS with Spring Webflux
musaprg
0
220
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
244
12k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Into the Great Unknown - MozCon
thekraken
34
1.6k
The Pragmatic Product Professional
lauravandoore
32
6.4k
How GitHub (no longer) Works
holman
313
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
A better future with KSS
kneath
238
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
RailsConf 2023
tenderlove
29
990
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.3k
Six Lessons from altMBA
skipperchong
27
3.6k
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