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