Journey to a
performant website
Prashant Palikhe
Nepal 🛫 🛬 Netherlands
@prashantpalikhe
What is fast enough?
90+ on Google PSI
< 1000ms SpeedIndex on WebPagetest
90+ on PWA Lighthouse
Profiling & analysing
Content efficiency
whatdoesmysitecost.com
Compress and cache
Easily achievable by configuring web server
h5bp/server-configs
Gzip text-based assets
Brotli for higher compression
Include image optimisation in build process
Use progressive jpegs
WebP for ~30% savings
<picture>
<source srcset="2x.webp 2x, 1x.webp 1x" type="image/webp">
<source srcset="2x.jpg 2x, 1x.jpg 1x" type="image/jpeg">
<img src="fallback.jpg" alt="">
</picture>Lazy load images
Intersection observer to detect elements in viewport
// create observer
const observer = new IntersectionObserver(onChange);
function onChange(changes) {
changes.forEach(change => {
// take image url from `data-src` attribute
change.target.src = change.target.dataset.src;
// stop observing the current target
observer.unobserve(change.target);
});
}
// convert node list to array
const imgs = [ ...document.querySelectorAll('.lazy') ];
// observe each image
imgs.forEach(img => observer.observe(img));requestIdleCallback() to prevent scroll jank
Optimize web fonts
Use lightweight woff2
Font-loader to get around lazy font-loading
Render text asap with system font
Render actual font when available
<style>
body {
font-family: Arial, sans-serif;
}
body.has-fonts-loaded {
font-family: "My fancy font";
}
</style>
<script>
someFontLoader
.load('My fancy font')
.then(() => {
document.body.classList.add('has-fonts-loaded');
});
</script>Using system UI fonts
body {
font-family:
/* 1 */ -apple-system, BlinkMacSystemFont,
/* 2 */ "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
/* 3 */ "Helvetica Neue", sans-serif;
}<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin=""> />
Cache your static content
cache-control:immutable
to prevent revalidations
Trash junk CSS/JS
DevTools coverage
Inline critical CSS & load the rest async
Critical CSS within
first 14kb
TCP starts slow
addyosmani/critical
github.com/
Eliminate network
Service Worker
// index.html
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
}[1/4] Download
// sw.js
self.addEventListener('install', (event) => {
// Prime your cache
});[2/4] Install
// sw.js
self.addEventListener('activate', (event) => {
// This SW is taking control, clean up old caches and do migration work if needed
});[3/4] Activate
// sw.js
self.addEventListener('fetch', (event) => {
// Intercept network requests, resolve from cache if hit.
});