Website Optimierungen

1,155 views
1,105 views

Published on

Website Optimierungen

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,155
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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>

×