SlideShare ist ein Scribd-Unternehmen logo
1 von 52
Downloaden Sie, um offline zu lesen
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
ConversionRate
Load time
0s 1s 2s 3s 4s 5s 6s 7s
Conversion Rate vs. Load Time
Quelle: Tammy Everts
Marc Hinse @mademyday #wke2016
ConversionRate
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
“Thesecretisthat’pageweight’,broadlydefinedasthe
simpletotalfilesizeofapageandallofit'ssub-resources
(images,CSS,JS,etc),isn'ttheproblem.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 😘

Weitere ähnliche Inhalte

Wke2016