Shrink The Web!

(a talk by @AhoyLemon)

Hi!

I'm Lemon

(I make websites.)

Today I wanna talk about

PERFORMANCE!

(website performance)

Today's Agenda...

  1. What's the problem?
  2. Why should I care?
  3. What should I do about it?
  4. How can I be happy?

But there will be a test!

(If you volunteer for it)

Let's play a game!

DOOM facts

  • Released by id Software in 1993
  • Played by 20 million people in two years
  • Popularized the First Person Shooter Genre
  • Sequels continue to this day
  • custom game engine
  • File size: 2.39 Mb

this homepage

  • $59 on Theme Forest
  • oh boy, parallax!
  • 35 images, 9 fonts, 5 scripts
  • 1,333 words
  • > 15 seconds on a 3G connection
  • File size: 3.56 Mb

148%

Source: HTTP Archive

What about Moore's Law?

Broadband speeds, 2015

Source:Fastmetrics

Broadband speeds, 2019

Source:cable.co.uk
Speedtest Index, Broadband
# Country ⇣ Mb/s
#1 Singapore 205.13
#2 Hong Kong 183.24
#7 Liechtenstein 151.32
#9 United States 138.02
#31 Poland 98.24
#35 Germany 91.26
#56 Austria 56.54
#90 Greece 29.05
Source:Ookla
Speedtest Index, Mobile
# Country ⇣ Mb/s
#1 South Korea 100.22
#35 United States 44.31
#41 Romania 38.26
#42 Italy 38.24
#43 Germany 38.10
#44 Slovakia 37.52
#71 Ireland 27.74
#136 Sudan 8.08
#137 Venezuela 6.15
#138 Afghanistan 5.71
Cost Of 1GB In Mobile Data
# Country 1 Gb
#1 India 0,08 €
#4 Italy 0,38 €
#5 Ukraine 0,43 €
#136 Luxembourg 3,46 €
#140 Germany 3,61 €
#188 United States 7,12 €
#207 Greece 10.73 €
#227 Falkland Islands 35.96 €
Source:cable.co.uk
Connection Download 3 megs
2G 2 minutes
3G 10 seconds
3G+ 6 seconds
4G 2 seconds
Source: Pingdom

This is a talk about easy wins.

  • no zealotry
  • minimal sacrifices

Let's start with the easy stuff.

2.34 Mb
219 Kb
squoosh.app

Lemon, can't I do this automatically?

Who knows the difference between

Jpeg

PNG

GIF

FILE IS USE FOR...
Jpeg lossy photos, rectangles, resizable things
PNG lossless drawings, screenshots, transparent backgrounds
SVG vector logos, icons, limited complexity
GIF lossless Basically nothing.
MP4 video anything you think is a GIF

Email doesn't follow any rules.

Text Compression

(HTML, CSS & JS)

Triage:

  1. Server-Side Compression
  2. Bundle & Minify
  3. Consider CDNs

1. GZIP

How does GZIP Work?

H = Σ p(x) log2 p(x)

TLDR: Less bits over the wire.

Turn GZIP on.

2. bundling & minifying

Why bundle?

100k < (10 * 10k)

Why minify?

moment.js = 148k
moment.min.js = 51k

How?

That super depends.

prepros.io

3. CDNs

like:

  • cdnjs
  • jsdelivr
  • Google Hosted Libraries
  • etc.

Why serve some files from a shared CDN?

  • The CDN is probably(?) faster than your servers.
  • Your users already have jQuery

You already have this.

(just open up Chrome)

I need a volunteer.

Webinale.DE
DESKTOP MOBILE
Zend.com
DESKTOP MOBILE
Clever-Cloud.com
DESKTOP MOBILE
Corporate.AboutYou.com
DESKTOP MOBILE
NotPoutine.FYI
DESKTOP MOBILE

Gary Bernhardt did the math...

Framework Files Folders Size
Vue 20,283 2,932 106 Mb
React 26,472 4,309 111 Mb
Angular 26,694 3,550 222 Mb

(+ an of MP3 “Army of Me” at 256kbps)

So, what's to be done about this?

WRITE HTML!

Seriously though, write HTML.

(and CSS)

Thank you.

ahoylemon.xyz

https://ahoylemon.github.io/Shrink-The-Web