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.6k
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.4k
My Journey as Technical Presenter
jecfish
0
780
Becoming a GDE
jecfish
0
3.4k
How to get started in IT Freelancing
jecfish
1
250
New Web API & Stylings
jecfish
3
590
如何打造高性能且SEO友好的单页应用(SPA)
jecfish
2
700
JS SEO
jecfish
4
1.3k
Have Fun with Angular
jecfish
0
80
RxJs Trex
jecfish
0
480
Other Decks in Technology
See All in Technology
Deno で作る快適な “as Code” プラットフォーム – TSKaigi 2024
pizzacat83
4
310
シンプルなHITL機械学習と様々なタスクにおけるHITL機械学習
naohachi89
0
320
Real World Type Puzzle and Code Generation
yukukotani
4
640
B2C、B2B プロダクトマネジメントの違い(および思考の罠) / B2C, B2B PM and reduction fallacy
ykmc09
5
2.3k
Google Cloudを組織(企業)で運用する時のベストプラクティス × 健康の環境分離戦略 #まるクラ勉強会
yasumuusan
0
170
#phpconkagawa レガシーコードにもオブザーバビリティを 〜少しずつ始めるサービス監視〜
yamato_sorariku
0
550
Step by Stepで学ぶ、ADT(代数的データ型)、モナドからEffect-TSまで
leveragestech
1
2.9k
拓展QA日常工作的邊界
line_developers_tw
PRO
0
550
大規模言語モデル (LLM)における低精度数値表現
pfn
PRO
3
810
グイグイ系QAエンジニアでやっていくよ!
____rina____
0
760
RailsConf 2024 Keynote "Startups on Rails in 2024"
irinanazarova
0
790
社内での継続的な機械学習勉強会の開催のコツ
yudai00
2
390
Featured
See All Featured
For a Future-Friendly Web
brad_frost
172
9k
4 Signs Your Business is Dying
shpigford
176
21k
Documentation Writing (for coders)
carmenintech
60
4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Ruby is Unlike a Banana
tanoku
96
10k
What the flash - Photography Introduction
edds
64
11k
Building Applications with DynamoDB
mza
88
5.7k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
Writing Fast Ruby
sferik
622
60k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Embracing the Ebb and Flow
colly
80
4.2k
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