![Vorstellung ,[object Object],[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Ähnlich wie Frontend-Performance mit PHP
Ähnlich wie Frontend-Performance mit PHP (20)
Frontend-Performance mit PHP
- 1. Frank Kleine, Nico Steiner 1&1 Internet AG Frontend-Performance mit PHP
- 6. HTTP Protokoll Client Server Request Response URL Header Header Body SC GET /xml/shop/home.html Host: kunden.1und1.de User-Agent: Mozilla/5.0 (Windows; U; […]) Gecko/20100401 Firefox/3.6.3 ( .NET CLR 3.5.30729) Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 […] HTTP/1.1 200 OK Date: Thu, 27 May 2010 07:40:50 GMT Server: Apache […] Content-Type: text/html;charset=UTF-8 http://livehttpheaders.mozdev.org/ Liv e HTTP Headers
- 11. Ohne Optimierung 695 KB 47 5,9 s 7,5 s Size Requests Start Render Load Time
- 12. Ohne Optimierung
- 14. Ohne Optimierung HTML 12%
- 15. Ohne Optimierung CSS (9)
- 16. Ohne Optimierung JS (7)
- 17. Ohne Optimierung Grafiken (30)
- 27. Kombiniertes CSS / JavaScript CSS (1)
- 28. Kombiniertes CSS / JavaScript JS (1)
- 29. Kombiniertes CSS / JavaScript 631 KB 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
- 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!
- 32. Weniger HTTP-Requests buttons.png 24,7 KB part-x.png 36,9 KB +49%
- 36. Komprimierung
- 40. Komprimiertes CSS / JavaScript CSS
- 41. Komprimiertes CSS / JavaScript JS
- 42. Komprimiertes CSS / JavaScript 254 KB (-63%) 33 (-14) 2,1 s (-64%) 3,2 s (-57%) 631 KB 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
- 43. Stylesheets an den Anfang
- 46. Stylesheets an den Anfang CSS im Head Start Rendering 4,7 s CSS im Content Start Rendering 6,0 s
- 47. Stylesheets an den Anfang http://www.webpagetest.org/video/view.php?id=100528_ee3c12b0eae75703456caa0dd5ccf098de3a5a48
- 48. JavaScript an das Ende
- 49. JavaScript im Head des Dokuments Start Render
- 50. JavaScript am Ende des Dokuments Start Render
- 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
- 52. Expires-Header
- 55. Mit Expires-Header Facebook: Hash-Tags Amazon: Versionierung C ontent D elivery N etwork
- 56. Resultat Mit Optimierung Start Rendering 2,5 s Ohne Optimierung Start Rendering 9,0 s
- 62. Entwicklertools
- 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
Hinweis der Redaktion
- 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
- Im Frontend -> Nico