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.
Website Optimierungen
Einleitung <ul><li>Tools zum Messen der Ladezeiten </li></ul><ul><li>Methoden zum Verringern der Website Ladezeiten. </li>...
Tools <ul><li>Firebug </li></ul><ul><ul><li>YSlow </li></ul></ul><ul><li>Google PageSpeed </li></ul>
Ladezeiten verringern - Regeln <ul><li>Weniger HTTP Requests </li></ul><ul><li>CDN benutzen </li></ul><ul><li>Expire Heade...
Weniger HTTP Requests <ul><li>JS/CSS zusammenfassen </li></ul><ul><li>CSS Sprites verwenden </li></ul>laut Yahoo: ~ 20% de...
Komponenten auslagern <ul><li>JS/CSS extern </li></ul><ul><ul><li>JS Frameworks von Google laden http://ajax.googleapis.co...
Komponenten verkleinern <ul><li>JS/CSS </li></ul><ul><ul><li>minify (YUI Compressor)  ( http://bit.ly/AWec ) </li></ul></u...
Server Konfiguration <ul><li>ETag oder Expire Header </li></ul><ul><li>GZIP/deflate für CSS/JS </li></ul><ul><ul><li>htacc...
Code richtig formatieren <ul><li>CSS im <head> </li></ul><ul><ul><li>Kein @import verwenden </li></ul></ul><ul><li>JS vor ...
Code richtig formatieren <ul><li>Cuzillion  ( http://bit.ly/2oLs2 ) </li></ul><ul><li>Datenkraft jetzt  ( http://bit.ly/Eh...
Code richtig formatieren <ul><li>Datenkraft optimiert  ( http://bit.ly/J8Saa ) </li></ul><ul><li>FF3 (~ 1s) </li></ul><ul>...
Fazit <ul><li>Was bringt am meisten? </li></ul><ul><ul><li>Die Summe aller Teile = sehr schnelle Seite </li></ul></ul><ul>...
Nächste SlideShare
Wird geladen in …5
×

Website Optimierungen

1.425 Aufrufe

Veröffentlicht am

Website Optimierungen

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Website Optimierungen

  1. 1. Website Optimierungen
  2. 2. Einleitung <ul><li>Tools zum Messen der Ladezeiten </li></ul><ul><li>Methoden zum Verringern der Website Ladezeiten. </li></ul><ul><ul><li>Was bringt am meisten? </li></ul></ul><ul><ul><li>Was davon ist wirklich sinnvoll? </li></ul></ul><ul><ul><li>Lohnt sich der Aufwand? </li></ul></ul>
  3. 3. Tools <ul><li>Firebug </li></ul><ul><ul><li>YSlow </li></ul></ul><ul><li>Google PageSpeed </li></ul>
  4. 4. Ladezeiten verringern - Regeln <ul><li>Weniger HTTP Requests </li></ul><ul><li>CDN benutzen </li></ul><ul><li>Expire Header hinzufügen </li></ul><ul><li>Statische Komponenten GZIP‘n </li></ul><ul><li>CSS in <head> </li></ul><ul><li>JS vor </body> </li></ul><ul><li>CSS Expressions vermeiden </li></ul><ul><li>JS/CSS immer in externe Files lagern </li></ul><ul><li>DNS Lookups reduzieren </li></ul><ul><li>JS minify‘n </li></ul><ul><li>Redirects vermeiden </li></ul><ul><li>Doppelte Scripts entfernen </li></ul><ul><li>Etags richtig konfigurieren </li></ul><ul><li>AJAX cachable machen </li></ul><ul><li>Weniger HTTP Requests </li></ul><ul><li>Komponenten auslagern </li></ul><ul><li>Komponenten verkleinern </li></ul><ul><li>Server Konfiguration </li></ul><ul><li>Code richtig formatieren </li></ul>
  5. 5. Weniger HTTP Requests <ul><li>JS/CSS zusammenfassen </li></ul><ul><li>CSS Sprites verwenden </li></ul>laut Yahoo: ~ 20% der User haben keinen Cache ( http://bit.ly/dALBT )
  6. 6. Komponenten auslagern <ul><li>JS/CSS extern </li></ul><ul><ul><li>JS Frameworks von Google laden http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js </li></ul></ul><ul><li>CDN Workaround </li></ul><ul><ul><li>Komponenten in Subdomains auslagern (cookieless) </li></ul></ul>
  7. 7. Komponenten verkleinern <ul><li>JS/CSS </li></ul><ul><ul><li>minify (YUI Compressor) ( http://bit.ly/AWec ) </li></ul></ul><ul><ul><li>GZIP/deflate (apache/php) </li></ul></ul><ul><li>Bilder optimieren </li></ul><ul><ul><li>Smush.it ( http://bit.ly/tRyRq ) </li></ul></ul><ul><li>JS/CSS -> Smarty Plugin automatisches zusammenfassen/verkleinern </li></ul>
  8. 8. Server Konfiguration <ul><li>ETag oder Expire Header </li></ul><ul><li>GZIP/deflate für CSS/JS </li></ul><ul><ul><li>htaccess </li></ul></ul><ul><ul><li>php </li></ul></ul><ul><li>Apache Cache Module </li></ul><ul><ul><li>mod_expire </li></ul></ul><ul><ul><li>mod_cache > </li></ul></ul><ul><ul><li>mod_disk_cache (stabiler, langsamer, funktioniert über mehrere Apache Prozesse) </li></ul></ul><ul><ul><li>mod_mem_cache (nicht so stabil, schneller) </li></ul></ul><IfModule mod_deflate.c> <FilesMatch &quot;.(css|js)$&quot;> SetOutputFilter DEFLATE </FilesMatch> </IfModule> <IfModule mod_expires.c> ExpiresActive on ExpiresByType image/gif &quot;access plus 2 years&quot; ExpiresDefault &quot;access plus 1 days&quot; </IfModule>
  9. 9. Code richtig formatieren <ul><li>CSS im <head> </li></ul><ul><ul><li>Kein @import verwenden </li></ul></ul><ul><li>JS vor </body> </li></ul><ul><li>Keine Inline-Scripts </li></ul><ul><li>CSS: Universelle / Nachfolge-Selektoren vermeiden </li></ul><ul><li>CSS-Sprites verwenden (z.B. Menü) > weniger Requests </li></ul><ul><li>HTML Code reduzieren </li></ul><ul><li>Struktur ist sehr wichtig </li></ul><ul><ul><li>Schnellerer Seitenaufbau </li></ul></ul><ul><ul><li>Browser wird weniger belastet </li></ul></ul>
  10. 10. Code richtig formatieren <ul><li>Cuzillion ( http://bit.ly/2oLs2 ) </li></ul><ul><li>Datenkraft jetzt ( http://bit.ly/EhHUZ ) </li></ul><ul><li>FF3 (~ 2s) </li></ul><ul><li>IE7 (~ 5s) </li></ul><ul><li>Chrome (~ 3s) </li></ul>
  11. 11. Code richtig formatieren <ul><li>Datenkraft optimiert ( http://bit.ly/J8Saa ) </li></ul><ul><li>FF3 (~ 1s) </li></ul><ul><li>IE7 (~ 3s) </li></ul><ul><li>Chrome (~ 1,5s) </li></ul><ul><li>kurz gesagt ca. 50% schneller </li></ul>
  12. 12. Fazit <ul><li>Was bringt am meisten? </li></ul><ul><ul><li>Die Summe aller Teile = sehr schnelle Seite </li></ul></ul><ul><ul><li>Apache/Server Cache Einstellungen unbedingt notwendig </li></ul></ul><ul><li>Was ist wirklich sinnvoll? </li></ul><ul><ul><li>Eigentlich alles was ich erwähnt habe </li></ul></ul><ul><li>Lohnt sich der Aufwand? </li></ul><ul><ul><li>Wenn die serverseitige Belastung auf ein Minimum gebracht wurde. </li></ul></ul>

×