Hi!
I'm Lemon
(I make websites.)
Today I wanna talk about
PERFORMANCE!
(website performance)
Today's Agenda...
- What's the problem?
- Why should I care?
- What should I do about it?
- 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%
What about Moore's Law?
Broadband speeds, 2015
Source:Fastmetrics
Broadband speeds, 2019
Source:cable.co.uk
| # | 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
| # | 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 |
| # | 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 |  |
This is a talk about easy wins.
- no zealotry
- minimal sacrifices
Let's start with the easy stuff.
91% smaller!
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:
- Server-Side Compression
- Bundle & Minify
- 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 = 148kmoment.min.js = 51kHow?
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.
| DESKTOP | MOBILE |
|---|---|
 |
 |
| DESKTOP | MOBILE |
|---|---|
 |
 |
| DESKTOP | MOBILE |
|---|---|
 |
 |
| DESKTOP | MOBILE |
|---|---|
 |
 |
| 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.
