Mehr und mehr entscheidet sich die Performance von Webanwendungen nicht mehr auf dem Server, sondern im Browser des Users. Die Session zeigt auf, warum nicht nur PHP-Performance eine Rolle spielt, sondern was wirklich zu einer schnellen Website beiträgt und welche Hilfsmittel man in der PHP-Welt zur Verfügung hat.
31. Weniger HTTP-Requests „ Sliding Doors of CSS“ by Douglas Bowman (2003) http://www.alistapart.com/articles/slidingdoors / <a class=„btn-yellow-medium“> <span>prüfen</span> </a> <button class=„btn-yellow-medium“> <span>auswählen</span> </button> Probleme mit IE6: http://www.peterbe.com/plog/button-tag-in-IE 36 Requests!
51. JavaScript am Ende des Dokuments 254 KB (-63%) 33 (-14) 1,1 s (-81%) 2,4 s (-68%) 254 KB (-63%) 33 (-14) 2,1 s (-64%) 3,2 s (-57%) 631 KB (-9%) 33 (-14) 3,7 s (-37%) 5,3 s (-30%) 695 KB 47 5,9 s 7,5 s Size Requests Start Render Load Time
77. Vielen Dank! http://icons.mysitemyway.com Frank Kleine http://frankkleine.de/ http://www.stubbles.org/ http://twitter.com/mikey179 Nico Steiner http://www.nicosteiner.de/ http://www.slideshare.net/n.steiner http://twitter.com/sensationalseo
Notes de l'éditeur
Frank: Willkommen
Frank: kurze Vorstellung Nico: kurze Vorstellung
Frank, danach Wechsel zu Nico
Nächste Folie: &quot;Was wollen wir in unserem Vortrag vorstellen?&quot;
&quot;Wenn ihr Fragen habt…&quot;
Bestandskundenshop AJAX-lastig Feedback über Lightboxen
+ Enter Test URL + Warten auf Testgenerierung
Start des Rendering
Aus UK / Kleinste DSL-Geschwindigkeit
Nächste Folie: HTML
Nächste Folie: Goldene Regel
12%: DNS-Lookup + Initialer Verbindungsaufbau + Generieren des Dokuments + Download Anmerkung Frank: PHP-Optimierungen im Millisekundenbereich, auch zusätzliche Hardware hilft hier nicht Typisches Feedback von Kollegen aus den USA: &quot;Unsere Seiten laden zu langsam.&quot; -> Chef: Macht's doppelt so schnell!
Komponenten aus realen 1&1 Anwendungen Wie schafft man das in PHP-Anwendungen? -> Frank
Nächste Folien: Wie ist das Ergebnis?
Nächste Folien: Wie ist das Ergebnis?
Erster Erfolg, aber das geht noch mehr. > Nico
Beispiel DSL-Bestellprozess Buttons in unterschiedlichen Farben, Zuständen, Größen
Inline-Images IE7! Oder mit PHP… -> Frank
Oder mit PHP… -> Frank Wir können aber noch mehr optimieren -> Komprimierung ab nächster Folie
Frank: Content Negotiation erklären
Wechsel zu Nico mit Ergebnissen
Gestrichelte Linie
Gestrichelte Linie Seite im Vergleich zu vorher
Da sind wir schon bei 50% weniger Ladezeit! Nächste Folie: Weitere Optimierung im Frontend
Um rauszubekommen, wie viel schneller -> Anderes Feature von WebPagetest Zeitlicher Verlauf Oben nachher / Unten vorher (Laser-Pointer) Nur Stylesheet-Optimierung
Abweichungen durch Videoaufzeichnung von US-Server Nächste Folie: Auch JavaScript spielt eine Rolle
2/3 schneller! 2/3 der Datengröße eingespart! HTML unkomprimiert Sprites waren schon in der ursprünglichen Version (36 Requests!)
Wie sieht es mit der Optimierung an dem 2. Request aus?
Grafiken ohne Expires-Header Sind bereits im Cache, trotzdem Geschwätz zwischen Client und Server (1,4 Sekunden!)
Am besten beide Methoden
Hash -> kein Bezug zu urspünglicher Adresse Version: Aufwendig zu implementieren Cookie-freie Domain Verteilung über verschiedene Subdomains
Resultat Oben nachher / Unten vorher
Jede Menge Geld… Damit sind wir mit den wichtigsten Regeln durch. Webpagetest.org und minify sind nicht die einzigen Tools… -> Frank