Hi!

I'm Lemon

(I make websites.)

I make websites and I also speak.

  • Minnesota
  • Kansas City
  • Netherlands
  • St. Louis
  • Sydney
  • Oslo
  • Lithuania
  • Ukraine

Today I wanna talk about

PERFORMANCE!

(website performance)

By which I mean website performance. And to be clear, I'm fully cognizent of the idea that what I'm about to present here is a talk about building fast and performant websites. And I'll grant that I recognize this could be seen as boring. But website performance matters. A lot.

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

🙋‍♀️ What is this?

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

This is a problem that has been talked about, but has continued completely unabated

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

30-40 seconds

Because time is real. It's experiential, but unmutable.

If I'm good in this presentation today, then hopefully our experience together will feel fast.

But if you find me boring or uninformative, everything's going to feel a whole lot slower. You might be looking at the clock.

But we're clever people! So we can fix this.

This is a talk about easy wins.

  • no zealotry
  • minimal sacrifices

Let's start with the easy stuff.

Start with Photoshop. This is for designers, but if you don't have Photoshop, I have more stuff for you.

What do I click on?

What do I click on?

Save for web inside save for web aren't I clever

2.34 Mb
219 Kb

91% smaller!

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)

Source: Raul Fraile @ JSConf EU 2014

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

Margaret Hamilton, 1969, standing next to printouts of her software for the Apollo Project

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?

Well, this is a harder question to answer as it comes down to personal choices.

WRITE HTML!

Seriously though, write HTML.

(and CSS)

Thank you.

ahoylemon.xyz

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