Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist

Frank Kleine, Nico Steiner

1&1 Internet AG

Frontend-Performance mit PHP

Frontend-Performance mit PHP 2

Vorstellung

Frank Kleine

Head of Web Infrastructure

Nico Steiner

Experte für Frontend T&A


Vorstellung

1&1 Shopsysteme• Ca. 30 verschiedene Shops mit zahlreichen Tarifen

• Mehrere Millionen Requests täglich

• Mehrere Terabyte Traffic

• Aufgeteilt auf verschiedene Cluster

• Anbindung: 210 Gbit/s


Vorstellung

• Web Performance und Open Source Evangelist

• Google (früher Yahoo)

• Erschaffer von YSlow

• Stanford-Dozent

• Sprecher auf internationalen Konferenzen 2007

2009

Steve Souders

YSlow Firebug Extension


Frontend-Performance mit PHP

• HTTP-Protokoll• Die Testumgebung• Weniger HTTP Requests• Kombinierung / Komprimierung• Stylesheets an den Anfang• Scripte an das Ende• Expires-Header• Entwicklertools


HTTP Protokoll

Client Server

Request

Response

URL Header

Header BodySC

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/

LiveHTTPHeaders


Die Testumgebung


Die Testumgebung

http://www.webpagetest.org/


Die Testumgebung



Die Testumgebung



Ohne Optimierung

695 KB475,9 s7,5 s

SizeRequestsStart RenderLoad Time


Ohne Optimierung


Ohne Optimierung

HTML


Ohne Optimierung

HTML

12%


Ohne Optimierung

CSS (9)


Ohne Optimierung

JS (7)


Ohne Optimierung

Grafiken (30)

Weniger HTTP-Request



• Erzwingt Kompromiss zwischen Performance und Produktdesign

• Kombinierte Scripte + Styles

• CSS-Sprites

• Inline-Images



• Zeiten verkürzen sich deutlich durch weniger HTTP-Overhead

Bandbreite des Endanwenders

Internet Service Provider

Nähe zu Peering-Punkten

Distanz

+

+

+


Live-Umgebung

Kombiniertes CSS / JavaScript

• Software-Design bedingt Modularisierung– 30 Stylesheets

– 15 Scripte

• HTTP-Overhead (Round-trip time)

Build-Prozess


JS/CSS-Dateien kombinieren

• Build-Prozess?

• Erster Ansatz: Phing

• Mit Bordmitteln möglich



• Build-Prozess?



• Aber: Unpraktisch– Jede JS/CSS-Änderung erfordert einen Build



• Build-Prozess?



• Aber: Unpraktisch– Jede JS/CSS-Änderung erfordert einen Build


JS/CSS-Dateien kombinieren, Versuch 2

• Kombinieren on the fly

• minify

• Kombiniert Ressourcen on Demand

• Erlaubt Gruppierung von Ressourcen

• Ab PHP 5.2, BSD-lizensiert

• http://code.google.com/p/minify/


JS/CSS-Dateien kombinieren, Versuch 2

• Kombinieren on the fly

• minify

• Kombiniert Ressourcen on Demand

• Erlaubt Gruppierung von Ressourcen

• Ab PHP 5.2, BSD-lizensiert

• http://code.google.com/p/minify/

• PHP zum Ausliefern von JS/CSS?

• Schnell genug für www.1und1.de, also auch für andere



CSS (1)



JS (1)



631 KB33 (-14)3,7 s (-37%)5,3 s (-30%)

695 KB475,9 s7,5 s



Weniger HTTP-Requests

http://dsl.1und1.de



„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

36Requests!



buttons.png 24,7 KB

part-x.png 36,9 KB

+49%



http://login.1und1.de


Inline Images

data:[<mediatype>][;base64],<data>

<img src="data:image/gif;base64, R0lGODlhEAAQANUAAPr7/PL09mhoaA4ODk1NTVxcXAoKCvf4+iwsLDg4ODs7O/T2+IaGhnBwcPX3+ZSUlJycnOPl5ri4uMTExKysrPj5+vj6+0RERPr6+87P0V9fXwYGBlFRUby+v05OT3JycvL19/b4+RsbG8vLyxgYGCoqKgICAtbY2iEhIbq6usDCw6+wsN7e3nt7e9fX16CfoJiYmLS0tYiIiJCQkIODgxcXF1dXVzc3N7u9vnV1dYmJieXl5fv8/GZmZgAAAP///yH5BAAAAAAALAAAAAAQABAAAAajQJ5wSCwKJbqkcikZAmijUW9Knc5igGxr8qp5WTCBqzaRrQCYT+pxa7vbj9QHYxFQGLa8Ps+gCCwVBRA5hIWGEAUVBxwNIj6PkI8iDRwHIRcaPj+bnJs+GhchDgkEmjunqD8+BAkOCwgKmp2cPgoICyAoJaaop6olKCABNSSys6okNQEBAwbGsz4GAwEnHhsmkZEmGx4nERkqHTjj5OMdKhkRQQA7" width="16" height="16"

alt="embedded disc icon">

Online: http://www.opinionatedgeek.com/dotnet/tools/base64encode/

NichtimIE7


Inline Images

data:[<mediatype>][;base64],<data>

<img src="data:image/gif;base64, R0lGODlhEAAQANUAAPr7/PL09mhoaA4ODk1NTVxcXAoKCvf4+iwsLDg4ODs7O/T2+IaGhnBwcPX3+ZSUlJycnOPl5ri4uMTExKysrPj5+vj6+0RERPr6+87P0V9fXwYGBlFRUby+v05OT3JycvL19/b4+RsbG8vLyxgYGCoqKgICAtbY2iEhIbq6usDCw6+wsN7e3nt7e9fX16CfoJiYmLS0tYiIiJCQkIODgxcXF1dXVzc3N7u9vnV1dYmJieXl5fv8/GZmZgAAAP///yH5BAAAAAAALAAAAAAQABAAAAajQJ5wSCwKJbqkcikZAmijUW9Knc5igGxr8qp5WTCBqzaRrQCYT+pxa7vbj9QHYxFQGLa8Ps+gCCwVBRA5hIWGEAUVBxwNIj6PkI8iDRwHIRcaPj+bnJs+GhchDgkEmjunqD8+BAkOCwgKmp2cPgoICyAoJaaop6olKCABNSSys6okNQEBAwbGsz4GAwEnHhsmkZEmGx4nERkqHTjj5OMdKhkRQQA7" width="16" height="16"

alt="embedded disc icon">

Online: http://www.opinionatedgeek.com/dotnet/tools/base64encode/

Oder mit PHP ☺echo '<img src="data:image/gif;base64,' . base64_encode(file_get_contents($file)) . '" width= "16" height="16" alt="embedded disc icon">';

NichtimIE7

Komprimierung


Komprimierung

• Kleinere Response = weniger Datenpakete = reduzierte Übertragungszeit

• Komprimierung z.B. mit gzip

• Content Negotiation

GET /xml/shop/home.htmlHost: kunden.1und1.de

[…]

Accept-Encoding: gzip,deflate

[…]

HTTP/1.1 200 OK

[…]

Vary: Accept-Encoding

Content-Encoding: gzip

Keep-Alive: timeout=15, max=97

Connection: Keep-Alive

Transfer-Encoding: chunked

http://livehttpheaders.mozdev.org/

LiveHTTPHeaders


Komprimierung

• Empfiehlt sich für jede Text-Response– HTML / CSS / JavaScript

– AJAX (XML / JSON)

• Zusätzliche CPU-Zeit wird durch geringere Dateigröße aufgewogen


Komprimierung

• minify liefert Content per default mit gzip oder deflate aus– Natürlich nur mit Content Negotation

• HTML kann man auch komprimieren– CMS oder Framework– Nativ in PHP: ob_start('gz_handler');– Benötigt ext/zlib– Apache: mod_gzip, mod_deflate– http://phpperformance.de/mod_gzip-mod_deflate-und-sonstige-komprimierungsverfahren-fuer-web-inhalte/

• Last? Applikationsabhängig.


Komprimiertes CSS / JavaScript

CSS



JS



254 KB (-63%)33 (-14)2,1 s (-64%)3,2 s (-57%)

631 KB33 (-14)3,7 s (-37%)5,3 s (-30%)

695 KB475,9 s7,5 s


Stylesheets an den Anfang



• Progressive Rendering– Browser stellt jegliche Inhalte sofort dar wenn diese verfügbar sind

– Schnelles visuelles Feedback fördert User Experience



• Browser beginnt das Rendering erst nach dem Laden der Stylesheets

Start Render

CSS



CSS im HeadStart Rendering 4,7 s

CSS im ContentStart Rendering 6,0 s



http://www.webpagetest.org/video/view.php?id=100528_ee3c12b0eae75703456caa0dd5ccf098de3a5a48

JavaScript an das Ende


JavaScript im Head des DokumentsStart Render


JavaScript am Ende des DokumentsStart Render


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 KB475,9 s7,5 s


Expires-Header


Ohne Expires-Header


Mit Expires-Header

• „Diese Ressource kann für die nächsten 15 Jahre immer aus dem Cache bezogen werden“


Mit Expires-Header

Facebook: Hash-Tags

Amazon: Versionierung

Content Delivery Network


Resultat

Mit OptimierungStart Rendering 2,5 s

Ohne OptimierungStart Rendering 9,0 s


Resultat

http://www.webpagetest.org/video/view.php?id=100528_91ecef9fae78adb38f3a100d41ad97e05809d18a


Resultat

http://www.flickr.com/photos/ppz/47473793/

• Dokument wird 5,1 Sekunden schneller geladen

• Browser beginnt 4,8 Sekunden früher zu rendern

• Es werden 14 Requests gespart

• Es werden 441 KB weniger Daten übertragen


Nutzen

Quelle: Fronteers "fast by default" 2009

Google• +0,4 Sekunden• 0,6% weniger Suchanfragen

Yahoo!• +0,4 Sekunden• 5-9% weniger Traffic

Bing• +2 Sekunden• 4,3% weniger Umsatz


Nutzen


Shopzilla• -5 Sekunden • 12% mehr Umsatz• 50% weniger Hardware

Netflix• 43% weniger Bandbreite


Nutzen


Shopzilla• -5 Sekunden • 12% mehr Umsatz• 50% weniger Hardware

Netflix• 43% weniger Bandbreite

Entwicklertools


Entwicklertools

• Wordpress minify Plugin

• http://wordpress.org/extend/plugins/wp-minify/

• BSD-Lizenz


Entwicklertools

• Symfony minify Plugin

• http://www.symfony-project.org/plugins/sfMinifyPlugin

• BSD-Lizenz


Entwicklertools

• TYPO3-Plugin

• http://typo3.org/extensions/repository/view/minify/current/


Entwicklertools

• CSS Sprite Generator– ZIP mit mehreren Bildern hochladen

– Generiert Sprite und passendes CSS

– Online nutzen oder lokal installieren• PHP 5.2 + GD, BSD-Lizenz

– http://spritegen.website-performance.org/


Entwicklertools

• Firefox-Extensions (Add-ons)

• https://addons.mozilla.org/de/firefox/

• Firebug

• YSlow

• Live HTTP Headers

• Firefox Throttle


Entwicklertools

• Firebug (Netzwerk Monitoring)– Fortschrittsanalyse

– Filter nach Ressourcen-Typ

– Cache-Analyse

– HTTP Headers

– XMLHttpRequest Monitoring


Entwicklertools

• Firebug (Netzwerk Monitoring)


Entwicklertools

• YSlow– Entwickelt von Yahoo!

– Bewertet eine Webseite unter Berücksichtigung der „Rules for high performance websites“

– Zeigt performancerelevante Komponenten einer Seite

– Statistiken / Tools

– Alternative: Page Speed (Google)

– Alternative: Speed Tracer (Chrome)


https://addons.mozilla.org/en-US/firefox/addon/3829/

GET /en-US/firefox/addon/3829/ HTTP/1.1

Host: addons.mozilla.org

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1;

de; rv:1.9.2.3)

Accept:

text/html,application/xhtml+xml,application/xml;q=0.9,

*/*;q=0.8

Accept-Language: de-de,de;q=0.8,en-us;q=0.5,en;q=0.3

Accept-Encoding: gzip,deflate

Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7

Keep-Alive: 115

Connection: keep-alive

Referer:

http://www.google.com/search?q=firefox+extensions

Cookie: dloadday=212.227.66.8.1248158487731077;

Cache-Control: max-age=0

HTTP/1.1 200 OK

Entwicklertools

• Live HTTP Headers– Zeigt HTTP Header aller Komponenten einer Seite in Echtzeit

– Manipulation von Request-Daten (Beta)


Entwicklertools

• Firefox Throttle– Begrenzt Download/Upload Geschwindigkeit

– Simulation von Zugängen mit geringer Bandbreite

Anmerkungen? Fragen?

Weiterführende Informationen



Yahoo: Best Practices for Speeding Up Your Web Site

http://developer.yahoo.com/performance/rules.html

Google: Web Performance Best Practices

http://code.google.com/speed/page-speed/docs/rules_intro.html

YouTube: „site performance“

http://www.youtube.com/results?search_query=site+performance



Steve Souders: High Performance Web Sites (O‘Reilly 2007)

http://oreilly.com/catalog/9780596529307

Steve Souders: Even Faster Web Sites (O‘Reilly 2009)

http://oreilly.com/catalog/9780596522315

http://icons.mysitemyway.com

Vielen Dank!

Frank Kleinehttp://frankkleine.de/

http://www.stubbles.org/http://twitter.com/mikey179

Nico Steinerhttp://www.nicosteiner.de/http://www.slideshare.net/n.steinerhttp://twitter.com/sensationalseo

Documents

Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist