Building a Fast Website for every single visitor

Medhat Dawoud

Web is Full of Challenges

@med7atdawoud

Everyone loves to use latest technology

Developers are privileged

Give MacBooks away to users to be guaranteed

Building a Fast Website for every single visitor

Medhat Dawoud

Medhat Dawoud

Senior Software Engineer at Miro

Google Developer Expert in #WebPerf

𝕏 @med7atdawoud

medhat.dev

It is all about making the Web more Accessible

Performance is one factor

Performance is relative

So, How to measure Performance ?

#1 Lab Testing

aka synthetic testing

IT IS NOT REAL

You Can’t Predict the User Experience

#2 Field Testing

aka RUM testing

Core Web Vitals

https://developer.chrome.com/docs/crux

Device Distribution

https://developer.chrome.com/docs/crux

Connection Distribution

https://developer.chrome.com/docs/crux

What if we build for the worst user condition? 🤔

@med7atdawoud

Pick Your Direction

😐 Lowest UX

🚀 Best UX

To build a web application for the user with guaranteed conditions

To build a web application that can adapt to user conditions

@med7atdawoud

Well, let’s adapt to

User Variables

@med7atdawoud

Device Screen Sizes

Browsers support

User Preferences

Device (CPU + RAM)

Internet connection

Five user variables when shipping a web app

@med7atdawoud

✅ Detect user conditions

⚙️ Mitigate perf issue

Steps to mitigate issues

@med7atdawoud

Device Screen Sizes

Browsers support

User Preferences

Device (CPU + RAM)

Internet connection

Five user variables when shipping a web app

Device Screen Sizes

@med7atdawoud

Components should be responsive like water

source

@med7atdawoud

Components should be responsive like water cats

@med7atdawoud

https://www.reddit.com/r/catsareliquid/

@med7atdawoud

medhat.dev

Desktop

Tablet

Phone

@med7atdawoud

<img

srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"

sizes="(max-width: 600px) 480px, 800px"

src="elva-fairy-800w.jpg"

alt="Elva dressed as a fairy" />

​

Responsive Images

@med7atdawoud

💡

const sharp = require('sharp');

const fs = require('fs');

const directory = './images';

​

fs.readdirSync(directory).forEach(file => {

sharp(`${directory}/${file}`)

.resize(200, 100) // width, height

.toFile(`${directory}/${file}-small.jpg`);

});

Server Different Images with different sizes using Sharp or ImageMagick

Or use an image service like Cloudinary or Thumbor

@med7atdawoud

💡

✅ Device Screen Sizes

Browsers Support

User Preferences

Device (CPU + RAM)

Internet connection

Five user variables when shipping a web app

Browsers Support

@med7atdawoud

Browsers Engines

Gecko

Blink

Webkit

Blink

Blink

Fallback sources (media)

<video class="theatre" autoplay muted playsinline control>

<source src="/static/img/doodle-theatre.webm" type="video/webm">

<source src="/static/img/doodle-theatre.mp4" type="video/mp4">

</video>

<picture>

<source srcset="photo.avif" type="image/avif" />

<source srcset="photo.webp" type="image/webp" />

<img src="photo.jpg" alt="photo" />

</picture>

@med7atdawoud

* Even Edge added support for AVIF lately

Always check for available features and add a polyfill

if ("geolocation" in navigator) {

navigator.geolocation.getCurrentPosition(function (position) {

// show the location on a map, such as the Google Maps API

});

} else {

// Give the user a choice of static maps

// or a polyfill to this missing feature

}

​

@med7atdawoud

Always check for available features and polyfill

if ('requestIdleCallback' in window) {

// Use requestIdleCallback to schedule work.

} else {

// Do what you’d do today.

}

​

​

@med7atdawoud

CSS @supports

/* This rule won't be applied in browsers that don't support :has() */

ul:has(> li li) {

/* CSS is applied when the :has(…) pseudo-class is supported */

}

​

@supports not selector(:has(a, b)) {

/* Fallback for when :has() is unsupported */

ul > li,

ol > li {

/* The above expanded for browsers that don't support :has(…) */

}

}

@med7atdawoud

Skip Unnecessary shipped polyfills

Recommendation

💡

Device (CPU + RAM)

✅ Device Screen Sizes

✅ Browsers support

User Preferences

Internet connection

Five user variables when shipping a web app

User Preferences

@med7atdawoud

User can change their preference and you need to adapt to that

@media (prefers-color-scheme: dark) { … }

​

@media (prefers-reduced-motion: reduced) { … }

​

@media (prefers-reduced-data: reduced) { … }

​

.translucent { opacity: 0.4; }

@media (prefers-reduced-transparency) {

.translucent { opacity: 0.8; }

}

@med7atdawoud

Animations might trigger discomfort for people suffering from Vestibular Motion Disorders

Device (CPU + RAM)

✅ Device Screen Sizes

✅ Browsers support

Internet connection

Five user variables when shipping a web app

✅ User Preferences

Device (CPU + RAM)

@med7atdawoud

@med7atdawoud

navigator.deviceMemory 🧪

8

> window.navigator.deviceMemory

• It returns the approximate device memory in GB
• Client can send these info to server as memory hints to send memory heavy items according to available memory like 3D models.

@med7atdawoud

@med7atdawoud

navigator.hardwareConcurrency

10

> window.navigator.hardwareConcurrency

• returns number of logical processors available to run threads on the user's computer.
• You can use it to know the max number of web workers that can run

@med7atdawoud

@med7atdawoud

Zooming in/out and animations in slow devices can be disabled

Recommendation #1

💡

@med7atdawoud

Image carousel can load other images on intent

Recommendation #2

💡

@med7atdawoud

Yielding to main thread is NOT always the best for slow devices

Recommendation #3

💡

@med7atdawoud

✅ Device (CPU + RAM)

✅ Device Screen Sizes

✅ Browsers support

Internet connection

Five user variables when shipping a web app

✅ User Preferences

Internet connection

@med7atdawoud

2G

3G

4G

5G

1G

Internet Connection

@med7atdawoud

@med7atdawoud

source

@med7atdawoud

@med7atdawoud

Network Information APIs 🧪

{

downlink: 3.85

effectiveType: "4g"

onchange: null

rtt: 50

saveData: false

}

> window.navigator.connection

@med7atdawoud

const connectionType = navigator.connection.effectiveType;

​

switch(connectionType) {

case '4g':

return <Video src={videoSrc} />

case '3g':

return <Image src={imageSrc.mid} alt={alt} />

default:

return <Image src={imageSrc.low} alt={alt} />

}

4G

3G

2G

DEMO

@med7atdawoud

source

@med7atdawoud

React Adaptive Hooks ⚛️

https://bit.ly/react-adaptive

import { useNetworkStatus } from 'react-adaptive-hooks/network';

import { useSaveData } from 'react-adaptive-hooks/save-data';

import { useHardwareConcurrency } from 'react-adaptive-hooks/hardware-concurrency';

​

export const Func = () => {

const { effectiveConnectionType } = useNetworkStatus();

// effectiveConnectionType can be slow-2G, 3G, 4G

. . .

}

Fetch smaller number of items per page in slow connection

Recommendation #1

💡

@med7atdawoud

Change a heavy custom font to a system font

Recommendation #2

💡

@med7atdawoud

Network Information APIs 🧪

{

downlink: 3.85

effectiveType: "4g"

onchange: null

rtt: 50

saveData: false

}

> window.navigator.connection

@med7atdawoud

saveData (Gifs and videos should not autoplay)

DEMO

@med7atdawoud

✅ Device Screen Sizes

✅ Browsers support

✅ User Preferences

✅ Device (CPU + RAM)

✅ Internet connection

Recap

@med7atdawoud

Resources

https://www.youtube.com/watch?v=puUPpVrIRkc

https://medium.com/@roderickhsiao/sophisticated-adaptive-loading-strategies-7118341fcf91

https://medium.com/@sushant7/pwa-progressive-web-apps-in-2023-86b04be17508

https://web.dev/adaptive-loading-cds-2019/

https://www.youtube.com/watch?v=BoaORHnJYAE&ab_channel=BeyondFireship

https://addyosmani.com/blog/adaptive-serving/

https://deanhume.com/dynamic-resources-using-the-network-information-api-and-service-workers/

https://justmarkup.com/articles/2017-11-02-network-based-image-loading/

https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3

https://medium.com/dev-channel/treebo-a-react-and-preact-progressive-web-app-performance-case-study-5e4f450d5299

https://developer.mozilla.org/en-US/docs/Glossary/Graceful_degradation

https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/

https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement

Thanks

Medhat Dawoud • medhat.dev • @med7atdawoud