Hi!

My name is Lemon.

(I make websites.)

I work at

Savas Labs

Front End
Development Director

  • Mentoring
  • Shepherding
  • Documenting
I am a serious professional.
I am a serious professional.

Today I wanna talk about

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? *

(specifically, like with my website.)

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
  • > 250k sales
  • oh boy, parallax!
  • 35 images, 4 fonts, 12 JS, 8 CSS
  • 1,333 words
  • > 15 seconds on a 3G connection
  • File size: 4.72 Mb

197%

Source: HTTP Archive

What about Moore's Law?

Broadband speeds, 2015

Source:Fastmetrics

Broadband speeds, 2023

Source:cable.co.uk
Speedtest Index, Broadband
# Country ⇣ Mb/s
#1 Singapore 264.15
#2 Hong Kong 263.07
#7 United States 215.72
#12 Spain 189.37
#24 Portugal 150.45
#86 Croatia 56.51
#128 Morocco 24.78
#182 Cuba 2.19
Source:Ookla
Speedtest Index, Mobile
# Country ⇣ Mb/s
#1 United Arab Emirates 269.41
#6 Norway 146.02
#13 United States 103.69
#30 Croatia 75.71
#63 Spain 40.47
#74 Ireland 32.74
#132 Colombia 11.97
#143 Cuba 3.33
Cost Of 1Gb In Mobile Data
# Country EUR USD
#1 Israel €0,046 $0.05
#4 Italy €0,92 $0.27
#68 Spain €1,14 $1.24
#80 Sweden €1,33 $1.45
#154 United States €3,05 $3.33
#191 Norway €5,32 $5.81
#229 Falkland Islands €40,82 $44.56
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.

SourceThemeforest
2.34 Mb
219 Kb

91% smaller!

Let's do this in a browser!

squoosh.app

Lemon, can't I do this automatically?

Text Compression

(HTML, CSS & JS)

Triage:

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

1. GZIP

How does GZIP Work?

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)

If you found yourself thinking "Well, actually..."
This is definitely less true on modern webservers with HTTP/2 multiplexing where requests are subdivided by origin, however when you factor in GZIP compression from the previous point the results can still be dramatic, as each of those 10 files would need to be compressed & decompressed individually, which would be less efficient overall.

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

Q: Who is this?

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