Web
Performance
101

Expectations

  • Understand the lingo
  • Have a short list of good resources to refer back to
  • Set research goals for your use cases

What Is Web Performance?

Make it fast.

Make it frictionless.

Make it accessible.

  • Accessibility is not “just screen readers”
  • Bigger file sizes are a barrier to access
  • “www” does not stand for “wealthy Western web”

Scope

  • JS
  • Images
  • Fonts
  • CSS
  • (HTML / Server)

Measuring

Older Metrics

  • Total bytes
  • Page load time
  • Speed index
  • Render time

Core Web Vitals

Tools

JavaScript Performance

Bundle size

  • Uglification
  • Minification
  • Tree-shaking
  • Package choices

Uglification

const axios = require('axios');
const userID = 127;
const getUserData = function(userID) {
  return axios.get('/user/' + userID);
}

const a=require("axios"),b=127,c=function(e){return
a.get("/user/"+e)}

Minification

const axios = require('axios');
const userID = 127;

const getUserData = function(userID) {
  return axios.get('/user/' + userID);
}

const axios=require('axios');const userID=127;const
getUserData=function(userID){return axios.get('/user/'
+userID)};

Tree-Shaking

import _ from 'lodash';

import { sortedUniqBy } from 'lodash';

Package Choices

  • moment: ~72kb (minified & gzipped)
  • date-fns: ~20kb (minified & gzipped)
  • Find alternatives with bundlephobia

Requests

  • async - don’t interrupt rendering
  • defer - load after page load finishes
  • bundle vs splitting vs modular loading

Code

  • Avoid memory leaks
  • Scope variables locally

Images

Compression

CDNs

Formats

  • SVG for vector shapes
  • PNG for raster + transparency
  • JPG for raster
  • WEBP & AVIF for next-gen raster compression

Format Switching

<picture>
  <source type="image/avif" src="trees.avif" />
  <img
    src="trees.jpg"
    alt="A forest full of trees in fall"
  />
</picture>

Responsive Sizing

<img
  srcset="trees-lg.jpg 2000w,
          trees-sm.jpg 500w"
  sizes="(max-width: 500px) 500px,
         2000px"
  src="trees.jpg"
  alt="A forest full of trees in fall"
/>

Lazy-Loading

<img
  src="trees.jpg"
  alt="A forest full of trees in fall"
  loading="lazy"
/>

CDN + Responsive

<picture>
  <source
    type="image/avif"
    src="https://cdn.com/trees.avif"
  />
  <img
    srcset="https://cdn.com/w_2000/trees.jpg 2000w,
            https://cdn.com/w_500/trees.jpg 500w"
    src="https://cdn.com/trees.jpg"
    alt="A forest full of trees in fall"
    loading="lazy"
  />
</picture>

Fonts

Subsetting

Loading

CSS

File Size

  • Minification
  • Optimization:
    0px ➡ 0
    rgb(200,175,20) ➡ #C8AF14

PostCSS Tools

“Critical” CSS

  • Isolate just enough CSS to style above the fold*
  • Inline that critical CSS
  • Lazy load the full stylesheet
<link rel="stylesheet" href="styles.css"
      media="print" onload="this.media='all'" />

* There is no fold…

HTML

Server

Compression

  • Server compresses files; browser expands them.
  • gzip / brotli

Resources

Thanks, Y’all!

James Steinbach

Senior Engineer
at auth0

jdsteinbach

Twitter | GitHub | Blog