Slide 1
Slide 1 text
Web Performance Optimization
Images, Fonts, JavaScript
Slide 2
Slide 2 text
STAY AWAKE!
Slide 3
Slide 3 text
@JecelynYeen
Software Architect
Google Developer Expert
- Angular
- Web Technologies
Director
- NG-MY 2019
- Women Who Code KL
Slide 4
Slide 4 text
#ngMY2019, July 6-7
400+ ppl, 30+ countries
Slide 5
Slide 5 text
Feeling of browsing slow website...
Slide 6
Slide 6 text
To make our users happy,
having pleasant
browsing experience.
Slide 7
Slide 7 text
Page speed matters to
SEO Page Ranking
https://webmasters.googleblog.com/2018/01/u
sing-page-speed-in-mobile-search.html
Slide 8
Slide 8 text
But it takes a lot of effort to do
so. Building features is more
important… SEO doesn’t matter...
Slide 9
Slide 9 text
Speed is basic need,
it is a FEATURE.
No
excuses.
Slide 10
Slide 10 text
- Measure & Monitor
- Optimization
- Summary
Slide 11
Slide 11 text
11
Measure & Monitor
Slide 12
Slide 12 text
Measure Page Performance
Lighthouse | PageSpeed Insights | Web Page Test
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Automate performance
measurement & monitoring
Slide 15
Slide 15 text
npm install lighthouse
Install Lighthouse
Set your performance budget
budget.json
Slide 16
Slide 16 text
[
{
"resourceSizes": [
{ "resourceType": "script", "budget": 309 },
{ "resourceType": "total", "budget": 500 }
],
"resourceCounts": [
{ "resourceType": "third-party", "budget": 10 }
]
}
]
Define performance budget
in budget.json
Slide 17
Slide 17 text
lighthouse https://example.com
--budget-path=./budget.json
Integrate and run in your CI/CD
Slide 18
Slide 18 text
https://developers.google.com/web/tools/li
ghthouse/audits/budgets
Slide 19
Slide 19 text
19
Optimize & Get Fast
Slide 20
Slide 20 text
Page Weight (Mobile)
http://bit.ly/mobile-page-weight
Slide 21
Slide 21 text
➔ Images
➔ Fonts
➔ JavaScript
Slide 22
Slide 22 text
Images
Slide 23
Slide 23 text
5MB
Images a page
Data Plan
Slide 24
Slide 24 text
SVG
Slide 25
Slide 25 text
32kb
Slide 26
Slide 26 text
NPM: https://www.npmjs.com/package/svgo
UI: https://jakearchibald.github.io/svgomg/
Optimize SVG with
SVGOMG
32kb -> 2kb (879B)
Slide 27
Slide 27 text
Like PNG but smaller
Slide 28
Slide 28 text
WebP Images are 25-35% smaller
than equivalent JPEG 0r PNG.
Slide 29
Slide 29 text
78% Global User
WebP Has arrived
Based on data from caniuse
Source: bit.ly/webp-support
Supported Supported Supported ?
Slide 30
Slide 30 text
.png - 119 kb
.webp - 28 kb
.png - 278 kb
.webp - 30 kb
Slide 31
Slide 31 text
Serve WebP and
support browsers
Image container If browser
supports WebP
Else PNG it is
Image container If browser
supports WebP
Else PNG it is
Slide 32
Slide 32 text
Image Compression
Slide 33
Slide 33 text
Lossy Image
For most images, 80-85% quality will
reduce file size by 30-40% with
minimal effect on image quality
Slide 34
Slide 34 text
495 kb 180 kb (80% quality)
Lossy Image
Slide 35
Slide 35 text
Responsive Image
Slide 36
Slide 36 text
Image in desktop & tablet can be
~2-4x larger than mobile
28 kb
12 kb
Slide 37
Slide 37 text
Serve different
image sizes
Small screen and if
browser supports WebP
https://developer.mozilla.org/en-US/docs/Learn/HTML/
Multimedia_and_embedding/Responsive_images
Small screen and if
browser supports WebP
https://developer.mozilla.org/en-US/docs/Learn/HTML/
Multimedia_and_embedding/Responsive_images
Slide 38
Slide 38 text
squoosh.app
resize, compress, format
Or automate with these npm packages:
imagemin, sharp, jimp
Slide 39
Slide 39 text
Lazy Loading
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
Performant Images
➔ Is lazy
➔ Appropriate format
➔ Appropriate compression
➔ Appropriate display size
Slide 44
Slide 44 text
Fonts
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
“Flash of Unstyled Text” (FOUT)
Arial
Slide 47
Slide 47 text
“Flash of Unstyled Text” (FOUT)
Google
Sans
Slide 48
Slide 48 text
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
Slide 49
Slide 49 text
fonts.googleapis.com/css?family=Source+Sans+Pro
&display=swap
Slide 50
Slide 50 text
Limiting font characters
Slide 51
Slide 51 text
Limiting font characters
https://developers.google.com/fonts/docs/getting_started#
optimizing_your_font_requests
Slide 52
Slide 52 text
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/
Slide 53
Slide 53 text
JavaScript
Slide 54
Slide 54 text
If only we could
snap and destroy
half the file size...
Slide 55
Slide 55 text
Lazy Loading
Traditional SPA
- big-bundle.js (60kb)
Split & Lazy Load
- route-speakers.js (20kb)
- route-food.js (20kb)
- route-schedule.js (20kb)
- ….
Slide 56
Slide 56 text
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
Slide 57
Slide 57 text
Preloading
Preload lazy-loadable modules in the
background while the user is interacting with our
application.
Slide 58
Slide 58 text
imports: [
...
RouterModule.forRoot(routes,
{ preloadingStrategy: PreloadAllModules })
],
Preloading in Angular
https://angular.io/api/router/PreloadAllModules
Roll your own: Network aware preloading strategy
Slide 59
Slide 59 text
https://github.com/guess-js/guess
https://github.com/GoogleChromeLabs/quicklink
Predictive Preloading
Slide 60
Slide 60 text
Differential Loading
Serve different bundles & polyfills based
on browser
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
Built in Differential Loading with
Angular CLI
https://auth0.com/blog/angular-8-differential-loading/
Slide 63
Slide 63 text
Defer JavaScript
Slide 64
Slide 64 text
Patrick Hulce, thirdpartyweb.today. Data from across top 4 millions sites
Slide 65
Slide 65 text
Defer JavaScript
<script defer>
HTML parsing
HTML parsing paused
Script download
Script execution
Slide 66
Slide 66 text
Defer Google Tag Manager
...
Defer it
Reduction of
domComplete time
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
Expensive JavaScript
Libraries
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
72
Summary
Slide 73
Slide 73 text
Performance optimization
is a continuous effort
Slide 74
Slide 74 text
➔ Measure
➔ Improve
➔ Monitor
➔ Repeat
Slide 75
Slide 75 text
Blueprint for
Performance Success
https://youtu.be/mLjxXPHuIJo
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
The Web
Slide 78
Slide 78 text
Make the Web Better for
E.V.E.R.Y.O.N.E.
Slide 79
Slide 79 text
Thank you!
Follow @JecelynYeen
slides:
https://speakerdeck.com/chybie/w
eb-performance-optimization
Videos
https://youtu.be/ACA3yBHBUuE
Instagram me!
@ngmykia