Wke2016

Marc Hinse @mademyday #wke2016

Blog-Redesign mit Performance-Budget 200kB

und 1 Sekunde Time to Render


Frontend Performance


Was heißt Performance?


“Zeit, die es braucht, bis der Nutzer was sieht

und mit dem Interagieren der Seite

beginnen kann.”


Anders gesagt:

“Zeit bis endlich was geht”


Volles WLAN

Kein Text

Social Media Gerümpel ist aber – na klar – da.


Hui!


“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


Warum ist das wichtig?


Conv

ersi

on R

ate

Load time

0s 1s 2s 3s 4s 5s 6s 7s

Conversion Rate vs. Load Time

Quelle: Tammy Everts


Aber: “Load time” ist nicht alles…


“load” heißt nicht

“bis was geht”!


“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


WAS MACHT DER BROWSER EIGENTLICH DA?


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


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


(ach ja, nur 6-8 Verbindungen gleichzeitig pro Domain)


remember?


Was können wir tun?


CDN?

Ein Stück weit


+ 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)


Inline?


+Gut für first Render

+Kein zusätzlicher Request

- Kein Caching (ohne Trickserei)


async?

<script src=“myscript” async defer>


+ macht was es soll - Reihenfolge schwierig (Dependencies)

* den Browser am Parsen hindern


Webfonts*

* irgendwie speziell


CSS 2 eingeführt (’97)

CSS 2.1 entfernt

* IE4 schon ’98 eingeführt, scheißt (hier zum Glück) auf Specs.


FLASH OF UNSTYLED TEXT (FOUT)


FLASH OF INVISIBLE TEXT (FOIT)


Was ist jetzt mit dem Redesign?


Redesign.


Performance Bugdet?


Desirable Design.


Is’ okay.**aber dann is halt kacke.


Bilder


Sobald eine Redaktion Bilder 1:1

in ein System lädt und diese so

ausgeliefert werden, sollten Sie

den Verantwortlichen feuern.


oder/und erstmal gar nicht laden?

Mittel und Wege<picture> und <img srcset>

imageoptim

lazyload

Vernünftiges CMS


Webfonts*

* Filament Group Scott Jehl


Critical Path*

* Above the Fold inline


Nur ein Prototyp, aber ein Anfang.

* mademyday.de/optimiert

http://mademyday.de/optimiert


Lange nicht Schluss* Caching in Offline Storage* Cookies for cached resources* DNS Prefetch* Preconnect* Prefetch* Prerender


danke 😘

Wke2016

Internet

Transcript of Wke2016