Más contenido relacionado Similar a Front End Performance Optimierung (20) Front End Performance Optimierung2. Überblick
Worum 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. Relevanz
Warum 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. Relevanz
Auswirkung 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. 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. Messen
Was 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. Messen
Time to first Byte
Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 7
8. Messen
Time 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. Messen
Start Render / DOMContentLoaded
Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 9
10. Messen
Start 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. Messen
Document Complete
Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 11
12. Messen
Document 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. HTTP
HTTP – 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. HTTP
Zahl 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. HTTP
Komprimierung
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. HTTP
Cookies
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. HTTP
Cookies
~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. HTTP
Cookies
= 70 x 415 Bytes = ~ 29 kB unnötiger Upload Traffic bei jedem Seitenaufruf
Deshalb:
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. HTTP
Cookie freie (Sub-)Domain mit TYPO3
1. Neuen ServerAlias eingerichtet
Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 19
20. HTTP
Cookie freie (Sub-)Domain mit TYPO3
2. 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. HTTP
Cookie 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. HTTP
Ein 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. HTTP
Clientseitiges 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. HTTP
Zwei 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. HTTP
Starkes 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. HTTP
Starkes 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. HTTP
Starkes 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. HTTP
Schwaches 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. HTTP
Schwaches 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. HTTP
Schwaches 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. HTTP
Prioritä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. HTTP
SPDY [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. HTML & CSS
Performance Optimierung im Quellcode
Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 33
34. HTML & CSS
Beschleunigung 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. HTML & CSS
Beschleunigung 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. HTML & CSS
Beschleunigung 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. HTML & CSS
Beschleunigung 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. HTML & CSS
Langsame 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. HTML & CSS
CSS 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. HTML & CSS
Diverses
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. Tools
Tools zum Testen
Front End Performance – Mehr Geschwindigkeit für Webseiten | © dmc digital media center GmbH 2012 | 12.07.2012 | Folie 41
42. Tools
YSlow
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. Tools
Page 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. Tools
GTmetrix
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. Tools
Quellen
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. Bilder
Bildquellen
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. dmc digital media center GmbH
Rommelstraße 11
70376 Stuttgart
Telefon: +49 711 601747-0
Telefax: +49 711 601747-141
E-Mail: info@dmc.de
Internet: www.dmc.de