Lightning-Fast

Web Performance
Scott Jehl, WebPageTest Team
 Course Agenda

1. Introduction

2. Why Performance Matters

3. Metrics! How do we de ne fast?

4. Identifying Performance Problems

5. Making Things Faster

6. Wrapping Up
fi
Making Things
Faster
 Easy, classic performance optimizations:

Optimize / Minify / Compress

Optimizing images
jpg, png, webp, avif
https://imageoptim.com/mac
https://optimage.app/
https://webponize.org/
https://squoosh.app/
https://caniuse.com/#search=webp
Example server webp reroute

RewriteCond %{HTTP_ACCEPT} image/webp [OR]

RewriteRule (.+)\.(?:jpe?g|png)$ $1.webp

Header append Vary Accept

https://www.askapache.com/htaccess/serving-webp-images-for-png-jpg/
https://web.dev/use-imagemin-to-compress-images/
https://cloudinary.com/
https://imageoptim.com/mac
Optimizing video
mp4, webm
https://caniuse.com/#search=mp4
https://caniuse.com/#search=webm
http://www.mirovideoconverter.com/
https://cloudinary.com/
Optimizing fonts
woff, woff2
https://www.fontsquirrel.com/tools/webfont-generator
https://www.filamentgroup.com/lab/glyphhanger/
https://caniuse.com/#search=woff2
https://caniuse.com/#search=woff
https://v-fonts.com/
https://fonts.google.com/
Removing unused text
Uncss, tree shaking
Minify Text Files
@charset "UTF-8";.dialog-open:focus,.snapper:focus{outline:0}.carousel-nav-paginated .carousel-active-page a,.tablesaw-btn,.tablesaw-
btn:hover,a{text-decoration:none}.collapsible-enhanced.collapsible-collapsed .collapsible-content,.enhanced .collapsible-
collapsed .collapsible-content{display:none}.dialog-background,.dialog-
content{position:absolute;top:0;left:0;right:0;display:none}.carousel,.carousel-
slide,.snapper,.snapper_item,.snapper_nav,.snapper_nextprev_contain,.snapper_pane{position:relative}.dialog-
background{background:#aaa;filter:alpha(opacity=40);background-color:rgba(0,0,0,.4);z-index:99999;height:100%;bottom:0}.dialog-
content{margin:1em;background:#fff;padding:1em 2em;max-width:30em;box-shadow:0 1px 2px #777;z-index:100000}@media (min-width:30em)
{.dialog-content{width:30em}}.dialog-background-open,.dialog-open{display:block}.dialog-background-trans{background:0 0}@media (min-
width:32em){.dialog-content{margin:4em auto
1em}}.snapper:after,.snapper:before,.snapper_items:after,.snapper_items:before,.snapper_nav:after,.snapper_nav:before,.snapper_nextprev_c
ontain:after,.snapper_nextprev_contain:before{content:"
";display:table}.snapper:after,.snapper_items:after,.snapper_nav:after,.snapper_nextprev_contain:after{clear:both}.snapper *{box-
sizing:border-box}.enhanced .snapper_pane_crop,.snapper-
enhanced .snapper_pane_crop{overflow:hidden}.enhanced .snapper_pane_crop .snapper_pane,.snapper-
enhanced .snapper_pane_crop .snapper_pane{padding-bottom:30px;margin-bottom:-30px}.snapper_pane{overflow-x:auto;overflow-y:hidden;white-
space:nowrap;width:100%;-webkit-overflow-scrolling:touch;-webkit-scroll-snap-type:mandatory;-ms-scroll-snap-type:mandatory;scroll-snap-
type:mandatory;-webkit-scroll-snap-points-x:repeat(100%);-ms-scroll-snap-points-x:repeat(100%);scroll-snap-points-
x:repeat(100%)}.snapper_item{width:100%;white-space:normal;scroll-snap-align:start}.enhanced .snapper_item,.snapper-
enhanced .snapper_item{display:none}.enhanced .snapper_item:first-child,.snapper-enhanced .snapper_item:first-child,.snapper-
enhanced .snapper_item[style]{display:block}.snapper-enhanced .snapper_item:first-child,.snapper-enhanced .snapper_item[style]
{float:left!important;clear:none!important}.checkbox,.form-group:after,.radiobutton,.sect-group:after,.tablesaw-bar,.tablesaw-bar-section
label,.tablesaw-bar-section~table{clear:both}.snapper_item img{width:100%}.snapper_nav{margin:1em
0;overflow:hidden}.snapper_nav_inner{overflow:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;padding:2px 1px 30px;margin-
bottom:-30px;height:84px}.snapper_nav a{overflow:hidden;white-space:normal;display:inline-block;float:none;vertical-
align:middle;height:50px;margin:0 5px 0 0}.snapper_nav img{display:block;height:100%;width:auto;max-
width:100%}.carousel{width:100%}.carousel .carousel-item{display:none}.carousel .carousel-active{display:block}.carousel-fade .carousel-
item:not(.carousel-active){pointer-events:none}.carousel .carousel-nav:nth-child(2){display:none}.carousel-slide{overflow:hidden;-webkit-
transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-
transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.carousel-slide .carousel-
item{position:absolute;left:100%;top:0;width:100%;display:block;z-index:1}.carousel-nav-paginated li,.carousel-nav-paginated li
a,.politespace-proxy{position:relative;display:inline-block}.carousel-slide .carousel-active{left:0;position:relative;z-
index:3}.carousel-slide .carousel-item-next{z-index:2}.carousel-slide .carousel-in{left:0}.carousel-slide-reverse .carousel-
out{left:100%}.carousel-slide .carousel-out,.carousel-slide-reverse .carousel-in{left:-100%}.carousel-slide-reverse .carousel-item{-
webkit-transition:left .1s ease;-moz-transition:left .1s ease;-ms-transition:left .1s ease;-o-transition:left .1s ease;transition:left
.1s ease}.carousel-slide-reverse .carousel-active{left:0}.carousel-item.no-transition{transition:none!important}.carousel-slide.carousel-
autoplay-stopped .carousel-item{-webkit-transition:left .1s ease;-moz-transition:left .1s ease;-ms-transition:left .1s ease;-o-
transition:left .1s ease;transition:left .1s ease}.carousel-nav-paginated ol{margin:0 4em;padding:0}.politespace-proxy-
https://cssminifier.com/
https://www.npmjs.com/package/cssmin
https://github.com/svg/svgo
https://jakearchibald.github.io/svgomg/
https://www.npmjs.com/package/uglify-js
https://github.com/uncss/uncss
https://uncss-online.com/
https://webpack.js.org/guides/tree-shaking/
Compress for Transit
Gzip / Brotli
Gzip Text Files: CSS, JS, SVG,
<ifModule mod_deflate.c>
<filesMatch "\.(html|svg|js|css)$">
SetOutputFilter DEFLATE
</filesMatch>
</ifModule>
Brotli: smaller than gzip
AddOutputFilterByType BROTLI_COMPRESS text/html text/
plain text/xml text/css text/javascript application/
javascript
https://caniuse.com/#search=brotli
https://csswizardry.com/2020/04/real-world-effectiveness-of-brotli/
More Weight != More Wait
3.9 secs 12.5 secs

http://www.filamentgroup.com/lab/weight-wait.html
 Lightning-Fast
Web Performance
Scott Jehl, WebPageTest Team