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
930
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
830
JS SEO
jecfish
4
1.5k
Have Fun with Angular
jecfish
0
95
RxJs Trex
jecfish
0
630
Other Decks in Technology
See All in Technology
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
1
170
20250623 Findy Lunch LT Brown
3150
0
790
Uniadex__公開版_20250617-AIxIoTビジネス共創ラボ_ツナガルチカラ_.pdf
iotcomjpadmin
0
150
エンジニア向け技術スタック情報
kauche
0
110
本部長の代わりに提案書レビュー! KDDI営業が毎日使うAIエージェント「A-BOSS」開発秘話
minorun365
PRO
14
2.3k
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
180
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
9.5k
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
300
IIWレポートからみるID業界で話題のMCP
fujie
0
740
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
3
300
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
390
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
11
4.1k
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
RailsConf 2023
tenderlove
30
1.1k
A better future with KSS
kneath
239
17k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Adopting Sorbet at Scale
ufuk
77
9.4k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Side Projects
sachag
455
42k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Building an army of robots
kneath
306
45k
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