Frontend Perfomance und was man so tun kann. Anhand eines Redesigns werden potenzielle Erfolgsfaktoren für die Verbesserung der Ladezeit und der Zeit des ersten Renderns aufgezeigt. In bunt.

1. Marc Hinse @mademyday #wke2016
Blog-Redesign mit
Performance-Budget 200kB
und 1 Sekunde Time to Render

2. Marc Hinse @mademyday #wke2016
Frontend Performance

3. Marc Hinse @mademyday #wke2016
Was heißt Performance?

4. Marc Hinse @mademyday #wke2016
“Zeit, die es braucht,
bis der Nutzer was sieht
und mit dem
Interagieren der Seite
beginnen kann.”

5. Marc Hinse @mademyday #wke2016
Anders gesagt:
“Zeit bis endlich
was geht”

6. Marc Hinse @mademyday #wke2016
Volles WLAN
Kein Text
Social Media Gerümpel
ist aber – na klar – da.

7. Marc Hinse @mademyday #wke2016
Hui!

8. Marc Hinse @mademyday #wke2016

9. 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

10. Marc Hinse @mademyday #wke2016
Warum ist das wichtig?

11. Marc Hinse @mademyday #wke2016
ConversionRate
Load time
0s 1s 2s 3s 4s 5s 6s 7s
Conversion Rate vs. Load Time
Quelle: Tammy Everts

12. Marc Hinse @mademyday #wke2016
ConversionRate
Load time
0s 1s 2s 3s 4s 5s 6s 7s
Conversion Rate vs. Load Time
Quelle: Tammy Everts

13. Marc Hinse @mademyday #wke2016
Aber: “Load time”
ist nicht alles…

14. Marc Hinse @mademyday #wke2016
“load”
heißt nicht
“bis was geht”!

15. 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

16. Marc Hinse @mademyday #wke2016
WAS MACHT DER
BROWSER EIGENTLICH DA?

17. 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

18. 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

19. Marc Hinse @mademyday #wke2016
(ach ja, nur 6-8 Verbindungen
gleichzeitig pro Domain)

20. Marc Hinse @mademyday #wke2016
remember?

21. Marc Hinse @mademyday #wke2016
Was können wir tun?

22. Marc Hinse @mademyday #wke2016
CDN?
Ein Stück weit

23. 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)

24. Marc Hinse @mademyday #wke2016
Inline?

25. Marc Hinse @mademyday #wke2016
+Gut für first Render
+Kein zusätzlicher Request
- Kein Caching (ohne Trickserei)

26. Marc Hinse @mademyday #wke2016
async?
<script src=“myscript” async defer>

27. Marc Hinse @mademyday #wke2016
+ macht was es soll
- Reihenfolge schwierig (Dependencies)
* den Browser am Parsen hindern

28. Marc Hinse @mademyday #wke2016
Webfonts*
* irgendwie speziell

29. 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.

30. Marc Hinse @mademyday #wke2016
FLASH OF UNSTYLED TEXT (FOUT)

31. Marc Hinse @mademyday #wke2016
FLASH OF INVISIBLE
TEXT (FOIT)

32. Marc Hinse @mademyday #wke2016
Was ist jetzt mit
dem Redesign?

33. Marc Hinse @mademyday #wke2016
Redesign.

34. Marc Hinse @mademyday #wke2016
Performance
Bugdet?

35. Marc Hinse @mademyday #wke2016

36. Marc Hinse @mademyday #wke2016

37. Marc Hinse @mademyday #wke2016

38. Marc Hinse @mademyday #wke2016

39. Marc Hinse @mademyday #wke2016

40. Marc Hinse @mademyday #wke2016
Desirable
Design.

41. Marc Hinse @mademyday #wke2016

42. Marc Hinse @mademyday #wke2016
Is’ okay.*
*aber dann is halt kacke.

43. Marc Hinse @mademyday #wke2016
Bilder

44. 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.

45. Marc Hinse @mademyday #wke2016
oder/und erstmal gar
nicht laden?
Mittel und Wege
<picture> und <img srcset>
imageoptim
lazyload
Vernünftiges CMS

46. Marc Hinse @mademyday #wke2016
Webfonts*
* Filament Group Scott Jehl

47. Marc Hinse @mademyday #wke2016
Critical Path*
* Above the Fold inline

48. Marc Hinse @mademyday #wke2016

49. Marc Hinse @mademyday #wke2016

50. Marc Hinse @mademyday #wke2016
Nur ein Prototyp,
aber ein Anfang.
* mademyday.de/optimiert

51. Marc Hinse @mademyday #wke2016
Lange nicht Schluss
* Caching in Offline Storage
* Cookies for cached resources
* DNS Prefetch
* Preconnect
* Prefetch
* Prerender

52. Marc Hinse @mademyday #wke2016
danke 😘