Front End PerformanceMehr Geschwindigkeit für Webseiten
ÜberblickWorum geht es?   Messen   HTTP   HTML & CSS   Tools                 Front End Performance – Mehr Geschwindigk...
RelevanzWarum ist Front End Performance wichtig?                                Front End Performance – Mehr Geschwindigke...
RelevanzAuswirkung auf Website Nutzung                +0,4 Sekunden                  Suchanfragen: - 1 %                  ...
Relevanz           Seit 2010 behandelt Google die Ladezeit           einer Website als Rankingfaktor            Front End ...
MessenWas ist die Ladezeit einer Website?                                  Front End Performance – Mehr Geschwindigkeit fü...
MessenTime to first Byte                     Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital me...
MessenTime to first Byte Zeit vom Beginn unserer Abfrage, bis der Browser das erste Byte der Antwort empfängt Kann für j...
MessenStart Render / DOMContentLoaded                              Front End Performance – Mehr Geschwindigkeit für Websei...
MessenStart Render / DOMContentLoaded Zeitpunkt, zu dem der Browser mit dem Rendering der Webseite beginnt Üblicherweise...
MessenDocument Complete                    Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital medi...
MessenDocument Complete Das Dokument wurde vollständig im Browser aufgebaut und alle Komponenten sind  vorhanden Die Jav...
HTTPHTTP – Anzahl und Aussehen der Requests                               Front End Performance – Mehr Geschwindigkeit für...
HTTPZahl der Requests vermindern Jeder Request erzeugt neuen Overhead durch  das Senden der Anfrage, den  „Verbindungsauf...
HTTPKomprimierung Vor der Übertragung sollte der Server die  Daten komprimieren. CSS und JavaScript sollte noch auf  Tex...
HTTPCookies Beispiel: 415 Zeichen im Cookie                                    Front End Performance – Mehr Geschwindigke...
HTTPCookies ~70 Requests an denselben Host                                   Front End Performance – Mehr Geschwindigkeit...
HTTPCookies= 70 x 415 Bytes = ~ 29 kB unnötiger Upload Traffic bei jedem SeitenaufrufDeshalb: Cookiegröße minimieren  am...
HTTPCookie freie (Sub-)Domain mit TYPO31. Neuen ServerAlias eingerichtet                                    Front End Perf...
HTTPCookie freie (Sub-)Domain mit TYPO32. Per tx_ja_replacer in TYPO3 Links auf statische Dateien ausgetauscht            ...
HTTPCookie freie (Sub-)Domain mit TYPO3 Keine Cookies mehr bei statischen Dateien:                                       ...
HTTPEin CDN benutzen Über ein Content Delivery Network wird die Last bei der Abfrage von statischen Dateien auf  mehrere ...
HTTPClientseitiges Caching ermöglichen Spezielle HTTP-Header steuern, wie der Browser  (und Proxy-Server) die Server-Antw...
HTTPZwei Arten von Caching Starkes Caching:    − Der Browser versucht gar nicht erst, eine im Cache vorhandene Datei neu ...
HTTPStarkes Caching                                   GET                  200 OK                  Expires: Fri, 13 Jul 20...
HTTPStarkes Caching - Expires-Header Header:         Expires: Tue, 26 Mar 2013 10:00:00 GMT Serverkonfiguration:        ...
HTTPStarkes Caching - Cache-Control-Header Header:         Cache-Control: max-age=31536000, public Serverkonfiguration: ...
HTTPSchwaches Caching                               GET                        200 OK                        E-Tag: 123   ...
HTTPSchwaches Caching - ETag Header:         ETag: „12bh-8f7g-1dsd" Serverkonfiguration:         FileETag MTime Size Ac...
HTTPSchwaches Caching – Last-Modified Header:         Last-Modified: Mon, 21 Feb 2011 10:00:00 GMT Serverkonfiguration: ...
HTTPPriorität Bei statischen Dateien, sollte starkes Caching dem schwachen Caching vorgezogen werden Um Anfragen durch d...
HTTPSPDY [SPeedY]   Experimentelles Sitzungsprotokoll, das von Google entwickelt wird   Eigenschaften:    − Multiplexed ...
HTML & CSSPerformance Optimierung im Quellcode                               Front End Performance – Mehr Geschwindigkeit ...
HTML & CSSBeschleunigung des „Start to Render“ Zeichensatz im Content-Type-Header (HTTP)   −   Der Browser kann gleich mi...
HTML & CSSBeschleunigung des „Start to Render“ CSS am Anfang der Seite   −   Der Browser beginnt erst mit dem Rendern, so...
HTML & CSSBeschleunigung des „Start to Render“ JavaScript ganz am Ende der Seite    −    Der Browser unterbricht das Rend...
HTML & CSSBeschleunigung des „Start to Render“ Bei der ersten Anfrage so wenige Inhalte wie möglich laden    − Alles ande...
HTML & CSSLangsame CSS-Selektoren Generische Selektoren: body *    − Selektoren so spezifisch wie möglich machen, um unnö...
HTML & CSSCSS beschleunigen Nur die CSS-Regeln angeben, die notwendig sind    − Auch ungenutzte Regeln müssen vom Browser...
HTML & CSSDiverses Keine leeren src- oder href-Attribute     − Manche Browser senden bei nicht angegebenen Dateinamen noc...
ToolsTools zum Testen                   Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media c...
ToolsYSlow Bewertet verschiedene Faktoren, die zur FE-    Performance beitragen   Firefox-AddOn   Integriert sich in Fi...
ToolsPage Speed von Google Ähnliches Prinzip wie YSlow, überprüft aber    teilweise andere Faktoren   Extension für Chro...
ToolsGTmetrix Online-Tool, das YSlow und Page Speed  kombiniert http://gtmetrix.com/                                    ...
ToolsQuellen Sammlung von Best Practices bei Google -  https://developers.google.com/speed/docs/best-practices/rules_intr...
BilderBildquellen Folie 1    − Bild von Mostly Dans (flickr), Lizenz: CC-BY 2.0 Folie 3    − Bild von wwarby (flickr), L...
dmc digital media center GmbHRommelstraße 1170376 StuttgartTelefon:    +49 711 601747-0Telefax:    +49 711 601747-141E-Mai...
Upcoming SlideShare
Loading in …5
×

Front End Performance Optimierung

1,065 views
1,001 views

Published on

Folien zu einem Vortrag, der auf dem Summercamp Alfeld 2012 gehalten wurde. Mehr Informationen unter: http://www.kawumba.de/front-end-performance-summercamp-alfeld-2012/

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
1,065
On SlideShare
0
From Embeds
0
Number of Embeds
300
Actions
Shares
0
Downloads
11
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Front End Performance Optimierung

  1. 1. Front End PerformanceMehr Geschwindigkeit für Webseiten
  2. 2. ÜberblickWorum geht es? Messen HTTP HTML & CSS Tools Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 2
  3. 3. RelevanzWarum ist Front End Performance wichtig? Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 3
  4. 4. RelevanzAuswirkung auf Website Nutzung +0,4 Sekunden Suchanfragen: - 1 % + 2 Sekunden Umsatz: - 4,3 % + 0,1 Sekunden Verkäufe: - 1 % Quellen: http://www.slideshare.net/guestbf04d7/fronteers-20091105-1 http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/ Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 4
  5. 5. Relevanz Seit 2010 behandelt Google die Ladezeit einer Website als Rankingfaktor Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 5
  6. 6. MessenWas ist die Ladezeit einer Website? Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 6
  7. 7. MessenTime to first Byte Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 7
  8. 8. MessenTime to first Byte Zeit vom Beginn unserer Abfrage, bis der Browser das erste Byte der Antwort empfängt Kann für jeden einzelnen Request berechnet werden, uns interessiert aber vor allem die initiale Anfrage der Seite Bei Redirects interessiert uns die Zeit vom Absenden unserer Anfrage bis zum ersten Byte der endgültigen Antwort dns Lookup + Socket Connect + Warten Wird hauptsächlich durch die Back End Performance bestimmt Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 8
  9. 9. MessenStart Render / DOMContentLoaded Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 9
  10. 10. MessenStart Render / DOMContentLoaded Zeitpunkt, zu dem der Browser mit dem Rendering der Webseite beginnt Üblicherweise, sobald das CSS vollständig geladen ist Wird durch Unterschiede bei den Browsern beeinflusst Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 10
  11. 11. MessenDocument Complete Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 11
  12. 12. MessenDocument Complete Das Dokument wurde vollständig im Browser aufgebaut und alle Komponenten sind vorhanden Die JavaScript Engine sendet das „onLoad“-Event Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 12
  13. 13. HTTPHTTP – Anzahl und Aussehen der Requests Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 13
  14. 14. HTTPZahl der Requests vermindern Jeder Request erzeugt neuen Overhead durch das Senden der Anfrage, den „Verbindungsaufbau“ und das Empfangen Icons als CSS-Sprites zusammenfassen − Div. Online-Tools, z.B.: http://spritegen.website- performance.org/ Mehrere CSS- und JavaScript-Dateien jeweils zu einer Datei zusammenfassen Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 14
  15. 15. HTTPKomprimierung Vor der Übertragung sollte der Server die Daten komprimieren. CSS und JavaScript sollte noch auf Textbasis optimiert werden, Tools: − Minify (allg.) − Scriptmerger (TYPO3) Alle Daten (außer jpg/png-Grafiken) sollten zusätzlich per Gzip komprimiert werden PayOff: Serverseitig minimal größere Rechenzeit Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 15
  16. 16. HTTPCookies Beispiel: 415 Zeichen im Cookie Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 16
  17. 17. HTTPCookies ~70 Requests an denselben Host Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 17
  18. 18. HTTPCookies= 70 x 415 Bytes = ~ 29 kB unnötiger Upload Traffic bei jedem SeitenaufrufDeshalb: Cookiegröße minimieren  am besten nur eine Session-ID ausliefern und alles andere serverseitig abhandeln Statische Dateien von eine Cookie freien (Sub-)Domain ausliefern − Payoff: Mehr dns-Abfragen Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 18
  19. 19. HTTPCookie freie (Sub-)Domain mit TYPO31. Neuen ServerAlias eingerichtet Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 19
  20. 20. HTTPCookie freie (Sub-)Domain mit TYPO32. Per tx_ja_replacer in TYPO3 Links auf statische Dateien ausgetauscht Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 20
  21. 21. HTTPCookie freie (Sub-)Domain mit TYPO3 Keine Cookies mehr bei statischen Dateien: Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 21
  22. 22. HTTPEin CDN benutzen Über ein Content Delivery Network wird die Last bei der Abfrage von statischen Dateien auf mehrere Server verteilt. Nutzer erhalten die Daten von den jeweils geographisch nächsten und bestverfügbaren Knoten Pay-Off: dns-Lookups erzeugen zusätzlichen Overhead Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 22
  23. 23. HTTPClientseitiges Caching ermöglichen Spezielle HTTP-Header steuern, wie der Browser (und Proxy-Server) die Server-Antworten speichert Zahl der Anfragen wird verringert Eine Anfrage, die nicht neu beantwortet werden muss, ist die am schnellsten verarbeitete Anfrage Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 23
  24. 24. HTTPZwei Arten von Caching Starkes Caching: − Der Browser versucht gar nicht erst, eine im Cache vorhandene Datei neu anzufordern − Ideal für statische Dateien Schwaches Caching: − Der Browser erwartet nur dann eine vollständige Antwort, wenn es eine neue Version der Datei gibt − Kann auch für dynamische Dateien genutzt werden Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 24
  25. 25. HTTPStarkes Caching GET 200 OK Expires: Fri, 13 Jul 2012 11:21:23 GMT Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 25
  26. 26. HTTPStarkes Caching - Expires-Header Header: Expires: Tue, 26 Mar 2013 10:00:00 GMT Serverkonfiguration: <filesMatch ".(jpg|png|gif|css|js)$"> ExpiresDefault "acces plus 1 years" </filesMatch> Der Server ruft erst nach dem angegebenen Datum eine neue Version ab Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 26
  27. 27. HTTPStarkes Caching - Cache-Control-Header Header: Cache-Control: max-age=31536000, public Serverkonfiguration: <filesMatch ".(jpg|png|gif|css|js)$"> Header set Cache-Control "max-age=31536000, public" </filesMatch> Angabe public bedeutet, dass auch Proxys die Datei speichern können Entweder Expires oder Cache-Control nutzen, nicht beides zusammen Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 27
  28. 28. HTTPSchwaches Caching GET 200 OK E-Tag: 123 GET E-Tag: 123 304 Not Modified Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 28
  29. 29. HTTPSchwaches Caching - ETag Header: ETag: „12bh-8f7g-1dsd" Serverkonfiguration: FileETag MTime Size Achtung: Ohne diese Konfiguration nutzt Apache die aktuelle inode-Nummer zur Berechnung des ETags. Dadurch erhalten Dateien unterschiedliche ETags, je nachdem, welcher Knoten die Anfrage beantwortet. Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 29
  30. 30. HTTPSchwaches Caching – Last-Modified Header: Last-Modified: Mon, 21 Feb 2011 10:00:00 GMT Serverkonfiguration: Nur notwendig, wenn der Header explizit gesetzt werden soll <filesMatch ".(jpg|png|gif|css|js)$"> Header set Last-Modified "Mon, 01 Jan 1970 10:00:00 GMT" </filesMatch> Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 30
  31. 31. HTTPPriorität Bei statischen Dateien, sollte starkes Caching dem schwachen Caching vorgezogen werden Um Anfragen durch den Browser für gecachte Seite komplett zu vermeiden, sollten sowohl das ETag als auch Last-Modfied sicherheitshalber deaktiviert werden, wenn starkes Caching angewandt wird: Header unset Last-Modified Header unset Etag Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 31
  32. 32. HTTPSPDY [SPeedY] Experimentelles Sitzungsprotokoll, das von Google entwickelt wird Eigenschaften: − Multiplexed Streams  Mehrere Streams über eine einzelne TCP-Verbindung − Request-Priorisierung − HTTP-Header-Kompression − Server-Push:  Der Server kann ungefragt Daten an den Client ausliefern, die dieser wahrscheinlich benötig. − Server-Hint  Der Server kann den Client auf weitere Daten hinweisen, die dieser wahrscheinlich benötigt. Von Firefox 11+ und Chrome unterstützt Eigenes Modul für Apache ist vorhanden Mehr Informationen: http://dev.chromium.org/spdy Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 32
  33. 33. HTML & CSSPerformance Optimierung im Quellcode Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 33
  34. 34. HTML & CSSBeschleunigung des „Start to Render“ Zeichensatz im Content-Type-Header (HTTP) − Der Browser kann gleich mit der Verarbeitung des Quellcodes beginnen und muss nicht erst den Zeichensatz ermitteln. Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 34
  35. 35. HTML & CSSBeschleunigung des „Start to Render“ CSS am Anfang der Seite − Der Browser beginnt erst mit dem Rendern, sobald das CSS vollständig geladen ist. Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 35
  36. 36. HTML & CSSBeschleunigung des „Start to Render“ JavaScript ganz am Ende der Seite − Der Browser unterbricht das Rendern des Seiteninhalts, bis er das komplette JavaScript gerendert hat Ideal: JavaScript nachladen, wenn „onLoad“ gefeuert wird: Quelle: https://developers.google.com/speed/docs/best-practices/payload?hl=de#DeferLoadingJS Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 36
  37. 37. HTML & CSSBeschleunigung des „Start to Render“ Bei der ersten Anfrage so wenige Inhalte wie möglich laden − Alles andere kann später noch geladen werden − Achtung: SEO-relevante Inhalte müssen immer geladen werden! Beispiel Amazon: Mit JavaScript Ohne JavaScript Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 37
  38. 38. HTML & CSSLangsame CSS-Selektoren Generische Selektoren: body * − Selektoren so spezifisch wie möglich machen, um unnötige Prüfungen zu vermeiden Tags als letzter Selektor: ul li a − Der Browser muss für jedes Tag ermitteln, ob der Selektor passt und dafür bei allen, wo er nicht passt, bis zur root-node zurückgehen − Besser Klassen verwenden: a.linkInAList Redundante Selektoren: ul#importantList − Die id ist sowieso eindeutig Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 38
  39. 39. HTML & CSSCSS beschleunigen Nur die CSS-Regeln angeben, die notwendig sind − Auch ungenutzte Regeln müssen vom Browser geprüft und verarbeitet werden − CSS-Dateien in Modulen aufsplitten und nur die benötigten beim Laden mergen und ausliefern − Payoff: CSS-Dateien können nicht mehr so gut gecachet werden (Ein großer Nachteil) @import vermeiden Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 39
  40. 40. HTML & CSSDiverses Keine leeren src- oder href-Attribute − Manche Browser senden bei nicht angegebenen Dateinamen noch einen Request für das Root- Verzeichnis der Domain Zahl der DOM-Elemente reduzieren Immer „width“ und „height“ von Bilder angeben AJAX beschleunigen und Browser Caching für AJAX ermöglichen Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 40
  41. 41. ToolsTools zum Testen Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 41
  42. 42. ToolsYSlow Bewertet verschiedene Faktoren, die zur FE- Performance beitragen Firefox-AddOn Integriert sich in Firebug Herausgegeben von Yahoo! Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 42
  43. 43. ToolsPage Speed von Google Ähnliches Prinzip wie YSlow, überprüft aber teilweise andere Faktoren Extension für Chrome Herausgegeben von Google Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 43
  44. 44. ToolsGTmetrix Online-Tool, das YSlow und Page Speed kombiniert http://gtmetrix.com/ Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 44
  45. 45. ToolsQuellen Sammlung von Best Practices bei Google - https://developers.google.com/speed/docs/best-practices/rules_intro Best Practices bei Yahoo! - http://developer.yahoo.com/performance/rules.html Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 45
  46. 46. BilderBildquellen Folie 1 − Bild von Mostly Dans (flickr), Lizenz: CC-BY 2.0 Folie 3 − Bild von wwarby (flickr), Lizenz: CC-BY 2.0 Folie 13 − Bild von internets_dairy (flickr), Lizenz: CC-BY 2.0 Folie 41 − Bild von mueritz (flickr), Lizenz, Lizenz: CC BY-SA 2.0 Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 46
  47. 47. dmc digital media center GmbHRommelstraße 1170376 StuttgartTelefon: +49 711 601747-0Telefax: +49 711 601747-141E-Mail: info@dmc.deInternet: www.dmc.de

×