Slide 1
Slide 1 text
Web Performance and
Optimization
IEEE@UC Talk - 2020.03.05
Slide 2
Slide 2 text
Today’s Topics
1. Why web performance matters (Isiah)
2. Analyzing speed and using devtools (Isiah)
3. Tree shaking optimizations (Kristian)
4. Network optimizations across the full stack (Noah)
5. API optimizations and caching (Omar)
Slide 3
Slide 3 text
Web Performance is ensuring content is
quick to load and responsive to user
interaction.
https://developer.mozilla.org/en-US/docs/Learn/Performance
Slide 4
Slide 4 text
What we hope you get out of today...
On the web,
every millisecond matters.
Slide 5
Slide 5 text
Why Web Performance Matters
1
Slide 6
Slide 6 text
In 2010, Google made pagespeed a
ranking factor for desktop searches, in
2018 they did the same for mobile
searches
Slide 7
Slide 7 text
Pinterest increased search engine traffic
and sign-ups by 15% when they reduced
perceived wait times by 40%.
https://medium.com/pinterest-engineering/driving-user-growth-with-performan
ce-improvements-cfc50dafadd7
Slide 8
Slide 8 text
What happens if you don’t optimize?
Google found 53% of mobile site visits
were abandoned if a page took longer
than 3 seconds to load.
https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mo
bile-page-speed-new-industry-benchmarks/
Slide 9
Slide 9 text
There have been rapid gains in
reported internet access rates in
a large number of emerging and
developing nations
https://www.pewresearch.org/global/2016/02/22/internet-access-growing-world
wide-but-remains-higher-in-advanced-economies/
Slide 10
Slide 10 text
Performance is a
foundational aspect of
good user experiences.
https://developers.google.com/web/fundamentals/performance/why-performa
nce-matters
Slide 11
Slide 11 text
Analyzing Speed + Using Devtools
2
Slide 12
Slide 12 text
How to measure performance
+
Slide 13
Slide 13 text
Tree Shaking
3
Slide 14
Slide 14 text
Tree
Shaking
(let’s shake some trees)
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
https://webpack.js.org
Before tree shaking...there
was bundling.
Slide 17
Slide 17 text
https://webpack.js.org
Before tree shaking...there
was bundling.
Bundling is taking multiple files with
dependencies and wrapping them
together into a single file.
Slide 18
Slide 18 text
import module;
(introduced in ES2015 to replace
CommonJS modules’
require()
)
Slide 19
Slide 19 text
nav.js
node_modules/
lodash/lodash.js
api.js
stuff.js utils.js
app.js
import “...”;
import “...”;
import “...”;
import “...”;
import “...”;
import “...”;
import “...”;
Slide 20
Slide 20 text
nav.js
node_modules/
lodash/lodash.js
api.js
stuff.js utils.js
app.js
import “...”;
import “...”;
import “...”;
import “...”;
import “...”;
import “...”;
import “...”;
This can be evaluated statically.
Slide 21
Slide 21 text
nav.js
node_modules/
lodash/lodash.js
api.js
stuff.js utils.js
app.js
import “...”;
import “...”;
import “...”;
import “...”;
import “...”;
import “...”;
import “...”;
Slide 22
Slide 22 text
nav.js
node_modules/
lodash/lodash.js
api.js
stuff.js utils.js
app.js
import “...”;
import “...”;
import “...”;
import “...”;
import “...”;
import “...”;
import “...”;
How do we only import what
we’re actually using?
Slide 23
Slide 23 text
import seuss;
import {thing1, thing2} from seuss;
seuss = 1 MB
thing1, thing2 = 100 kB
900 kB savings!
Slide 24
Slide 24 text
https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking/
webpack.config.js
Slide 25
Slide 25 text
nav.js
node_modules/
lodash/lodash.js
api.js
stuff.js utils.js
app.js
import “...”;
import “...”;
import “...”;
import “...”;
import “...”;
import “...”;
import “...”;
Slide 26
Slide 26 text
utils.js
nav.js
stuff.js
app.js
import { lots,
of, stuff } from
“stuff.js”;
import { get }
from “api.js”;
import { bigSort }
from “utils.js”;
import { hover }
from “nav.js”;
import { click }
from “nav.js”;
import sortBy from
lodash-es/sortBy;
api.js
_.js
import sortBy from
lodash-es/sortBy;
Slide 27
Slide 27 text
More details and if things
go wrong:
https://developers.google.com/web/fundamentals/performance/opti
mizing-javascript/tree-shaking/
Slide 28
Slide 28 text
Network Optimizations Across the Stack
4
Slide 29
Slide 29 text
Ugly code is
good.
Slide 30
Slide 30 text
Ugly production code +
pretty development
code is ideal.
Slide 31
Slide 31 text
Minimization +
concatenation
Slide 32
Slide 32 text
Before Minify + Concat After Minify + Concat
33%
Slide 33
Slide 33 text
source: https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch
DNS Prefetching
what?!
Slide 34
Slide 34 text
source: https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch
Slide 35
Slide 35 text
Image Optimizations:
WebP, Responsive
Images, and srcset
Slide 36
Slide 36 text
WebP is an alternative image format
with lossy and lossless compression.
Ok, but what does this mean?
(WebP is really lightweight and fast.)
Slide 37
Slide 37 text
source: https://developers.google.com/speed/webp/gallery1
JPEG file size: 251.03 KB WebP file size: 172.82 KB
31%
Slide 38
Slide 38 text
Lossy WebP images average 25–35%
smaller than JPEG images of visually
similar compression levels.
—Mozilla
source: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
Slide 39
Slide 39 text
Browser Support: WebP
source: https://caniuse.com/#search=webp
Slide 40
Slide 40 text
WebP
JPEG
Slide 41
Slide 41 text
source: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
Slide 42
Slide 42 text
Responsive images
+ srcset
Slide 43
Slide 43 text
Mobile Desktop
Slide 44
Slide 44 text
srcset: Deliver
the right image to
the right device.
Slide 45
Slide 45 text
Intelligent Image Delivery with srcset
source: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
Slide 46
Slide 46 text
Browser Support: srcset
source: https://caniuse.com/#search=srcset
Slide 47
Slide 47 text
Delivering fast:
Using a CDN
(Content Delivery Network)
Slide 48
Slide 48 text
source: https://www.cloudflare.com/learning/cdn/what-is-a-cdn/
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
For more on web performance…
css-tricks.com/tag/performance/
Slide 51
Slide 51 text
API Optimizations and Caching
5
Slide 52
Slide 52 text
What is Browser Cache?
Browser cache is a temporary storage location on your local machine for resources that
are downloaded by your browser to display web pages.
Examples of downloaded (cached) contents:
● HTML documents
● CSS stylesheets
● JavaScript scripts
● Multimedia content
Slide 53
Slide 53 text
What is a Service Worker?
A service worker is a script that your browser runs in the
background of an web page (separate from the page),
allowing features that do not require any sort of user
interaction like push notifications.
Slide 54
Slide 54 text
https://deanhume.com/service-workers-can-save-the-environment/
Slide 55
Slide 55 text
https://deanhume.com/service-workers-can-save-the-environment/
Slide 56
Slide 56 text
Service Worker Life Cycle
Every service worker goes through three steps in its lifecycle:
● Registration
● Installation
● Activation
Slide 57
Slide 57 text
Register the Service Worker
if (!('serviceWorker' in navigator)) {
console.log('Service Worker not supported');
return;
}
navigator.serviceWorker.register('/service-worker.js')
.then(function(registration) {
console.log('SW registered! Scope is:', registration.scope);
}); // .catch a registration error
https://developers.google.com/web/ilt/pwa
Slide 58
Slide 58 text
Installing the Service Worker
self.addEventListener('install', function(event) {
// Do stuff during install
});
https://developers.google.com/web/ilt/pwa
Slide 59
Slide 59 text
Activating the Service Worker
self.addEventListener('activate', function(event) {
// Do stuff during activate
});
https://developers.google.com/web/ilt/pwa
Slide 60
Slide 60 text
For more on service workers…
developers.google.com/web/ilt/pwa/introduction-to-service-worker
Slide 61
Slide 61 text
Conclusion
6
Slide 62
Slide 62 text
Build awesome websites.
Make them fast.
Slide 63
Slide 63 text
Web Performance and
Optimization
IEEE@UC Talk - 2020.03.05