Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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...
Nächste SlideShare
Wird geladen in …5
×

Front End Performance Optimierung

1.194 Aufrufe

Veröffentlicht am

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/

Veröffentlicht in: Technologie

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

×