Post on 06-Apr-2017
Marc Hinse @mademyday #wke2016
Blog-Redesign mit Performance-Budget 200kB
und 1 Sekunde Time to Render
Marc Hinse @mademyday #wke2016
Frontend Performance
Marc Hinse @mademyday #wke2016
Was heißt Performance?
Marc Hinse @mademyday #wke2016
“Zeit, die es braucht, bis der Nutzer was sieht
und mit dem Interagieren der Seite
beginnen kann.”
Marc Hinse @mademyday #wke2016
Anders gesagt:
“Zeit bis endlich was geht”
Marc Hinse @mademyday #wke2016
Volles WLAN
Kein Text
Social Media Gerümpel ist aber – na klar – da.
Marc Hinse @mademyday #wke2016
Hui!
Marc Hinse @mademyday #wke2016
Marc Hinse @mademyday #wke2016
“It’s hard, if not impossible, to deny that performance is by far one of the most critical aspects
of any decent web project”Harry Roberts
Marc Hinse @mademyday #wke2016
Warum ist das wichtig?
Marc Hinse @mademyday #wke2016
Conv
ersi
on R
ate
Load time
0s 1s 2s 3s 4s 5s 6s 7s
Conversion Rate vs. Load Time
Quelle: Tammy Everts
Marc Hinse @mademyday #wke2016
Conv
ersi
on R
ate
Load time
0s 1s 2s 3s 4s 5s 6s 7s
Conversion Rate vs. Load Time
Quelle: Tammy Everts
Marc Hinse @mademyday #wke2016
Aber: “Load time” ist nicht alles…
Marc Hinse @mademyday #wke2016
“load” heißt nicht
“bis was geht”!
Marc Hinse @mademyday #wke2016
“The secret is that ’page weight’, broadly defined as the simple total file size of a page and all of it's sub-resources
(images, CSS, JS, etc), isn't the problem. Bandwidth is not the problem, and the performance of the web will not improve as broadband access becomes more
widespread.
The problem is latency.“Nate Berkopec
Marc Hinse @mademyday #wke2016
WAS MACHT DER BROWSER EIGENTLICH DA?
Marc Hinse @mademyday #wke2016
Im Ponyhofland: Browser öffnet Verbindung und regelt
den DNS/TCP/SSL-Kram
Browser lädt HTML runter
Wenn HTML fertig, lädt Browser zugehöriges CSS/JS/Fonts (gleichzeitig)
runter
Browser parst das Dokument und baut es zusammen
Marc Hinse @mademyday #wke2016
Die Realität: Browser öffnet Verbindung und regelt den DNS/TCP/SSL-Kram
Browser lädt HTML runter
Browser Fängt an zu parsen, lädt zugehöriges CSS/JS runter, hört aber
mit Parsen Jedes Mal auf bis jede einzelne Ressource geladen und
ausgeführt ist und irgendwann
baut der Browser alles zusammen
Marc Hinse @mademyday #wke2016
(ach ja, nur 6-8 Verbindungen gleichzeitig pro Domain)
Marc Hinse @mademyday #wke2016
remember?
Marc Hinse @mademyday #wke2016
Was können wir tun?
Marc Hinse @mademyday #wke2016
CDN?
Ein Stück weit
Marc Hinse @mademyday #wke2016
+ Verteilt die 6 Connections pro Domain
+ Potenziell näher an User
+ Besseres (weil spezielleres) Caching
- geringer Speicher für Cache
- Kostet Latenz (DNS Lookup etc)
Marc Hinse @mademyday #wke2016
Inline?
Marc Hinse @mademyday #wke2016
+Gut für first Render
+Kein zusätzlicher Request
- Kein Caching (ohne Trickserei)
Marc Hinse @mademyday #wke2016
async?
<script src=“myscript” async defer>
Marc Hinse @mademyday #wke2016
+ macht was es soll - Reihenfolge schwierig (Dependencies)
* den Browser am Parsen hindern
Marc Hinse @mademyday #wke2016
Webfonts*
* irgendwie speziell
Marc Hinse @mademyday #wke2016
CSS 2 eingeführt (’97)
CSS 2.1 entfernt
* IE4 schon ’98 eingeführt, scheißt (hier zum Glück) auf Specs.
Marc Hinse @mademyday #wke2016
FLASH OF UNSTYLED TEXT (FOUT)
Marc Hinse @mademyday #wke2016
FLASH OF INVISIBLE TEXT (FOIT)
Marc Hinse @mademyday #wke2016
Was ist jetzt mit dem Redesign?
Marc Hinse @mademyday #wke2016
Redesign.
Marc Hinse @mademyday #wke2016
Performance Bugdet?
Marc Hinse @mademyday #wke2016
Marc Hinse @mademyday #wke2016
Marc Hinse @mademyday #wke2016
Marc Hinse @mademyday #wke2016
Marc Hinse @mademyday #wke2016
Marc Hinse @mademyday #wke2016
Desirable Design.
Marc Hinse @mademyday #wke2016
Marc Hinse @mademyday #wke2016
Is’ okay.**aber dann is halt kacke.
Marc Hinse @mademyday #wke2016
Bilder
Marc Hinse @mademyday #wke2016
Sobald eine Redaktion Bilder 1:1
in ein System lädt und diese so
ausgeliefert werden, sollten Sie
den Verantwortlichen feuern.
Marc Hinse @mademyday #wke2016
oder/und erstmal gar nicht laden?
Mittel und Wege<picture> und <img srcset>
imageoptim
lazyload
Vernünftiges CMS
Marc Hinse @mademyday #wke2016
Webfonts*
* Filament Group Scott Jehl
Marc Hinse @mademyday #wke2016
Critical Path*
* Above the Fold inline
Marc Hinse @mademyday #wke2016
Marc Hinse @mademyday #wke2016
Marc Hinse @mademyday #wke2016
Nur ein Prototyp, aber ein Anfang.
* mademyday.de/optimiert
Marc Hinse @mademyday #wke2016
Lange nicht Schluss* Caching in Offline Storage* Cookies for cached resources* DNS Prefetch* Preconnect* Prefetch* Prerender
Marc Hinse @mademyday #wke2016
danke 😘