34 Tipps für schnellere Webseiten: Was hilft wirklich?

Schnelle Websites, Quelle: YahooAnsätze für die Geschwindigkeits-Optimierung von Webseiten und insbesondere Shops finden sich zu Genüge, sodass man schnell den Überblick über die wirkungsvollsten Handgriffe verlieren kann. Experten haben daher jetzt Tipps zusammengestellt, die Techniker als Checkliste nutzen können.

Hier finden Sie die 34 Tipps sowie ein Video und ein Tool dazu.

Yahoos Exceptional-Performance-Team beschäftigt sich mit der Frage, wie man Webseiten schneller macht, von Maßnahmen auf Serverseite über die Inhalte bis hin zu Cookies, JavaScript, CSS-Bildern und den speziellen Anforderungen mobiler Webseiten. Nach den ersten 14 Regeln für schnellere Webseiten hat Yahoo nun 20 weitere Tipps veröffentlicht.

Im September 2007 erschien bei O'Reilly das Buch "High Performance Web Sites - Essential Knowledge for Front-End Engineers" von Steve Souders, in dem er 14 Regeln beschreibt, mit denen sich die Antwortzeit von Webseiten um 20 bis 25 Prozent verkürzen lassen soll. Unter der Überschrift "Best Practices for Speeding Up Your Web Site" hat Yahoo diese Regeln auf seinen Entwicklerseiten veröffentlicht. (via Golem)

Diese 14 Punkte in der Übersicht, genauere Erklärungen hier.

  1. Make Fewer HTTP Requests
  2. Use a Content Delivery Network
  3. Add an Expires Header
  4. Gzip Components
  5. Put Stylesheets at the Top
  6. Put Scripts at the Bottom
  7. Avoid CSS Expressions
  8. Make JavaScript and CSS External
  9. Reduce DNS Lookups
  10. Minify JavaScript
  11. Avoid Redirects
  12. Remove Duplicate Scripts
  13. Configure ETags
  14. Make Ajax Cacheable

Auf einer Entwicklerkonferenz stellte jetzt Yahoo-Ingenieur Stoyan Stefanov noch 20 weitere Tipps für schnellere Webseiten vor:

  1. Flush the buffer early
  2. Use GET for AJAX requests
  3. Post-load components
  4. Preload components
  5. Reduce the number of DOM elements
  6. Split compontents across domains
  7. Minimize the number of iframes
  8. No 404s
  9. Reduce cookie size 
  10. Reduce cookie-free domains for components
  11. Minimize DOM access
  12. Develop smart event handlers
  13. Chosse over @import
  14. Avoid filters
  15. Optimize images
  16. Optimize CSS sprites
  17. Don't scale images in html
  18. Make favicon.ico small and cacheable
  19. Keep components under 25k
  20. Pack components into multipart document

Klarer werden die Punkte (für Techniker!) erst, wenn man sich die Präsentation zu Gemüte führt.

Die Firefox-Erweiterung YSlow hilft Technikern, die Ursachen für langsame Website ausfindig zu machen:

YSlow analyzes web pages and tells you why they're slow based on the rules for high performance web sites. YSlow is a Firefox add-on integrated with the popular Firebug web development tool. YSlow gives you:

  • Performance report card
  • HTTP/HTML summary
  • List of components in the page
  • Tools including JSLint

This tool has helped improve the performance on over 50 Yahoo! properties by 25-50%. We're pleased to be able to share this with the development community so that others can join us in accelerating the user experience on the web.

Ein erklärendes Video erläutert Hintergründe:

Yahoo!'s Exceptional Performance team evangelizes best practices for improving web performance. They conduct research, build tools, write articles and blogs, and speak at conferences. Their best practices center around the rules for high performance web sites.

25.03.08
Ulrich Hafenbradl

Ulrich Hafenbradl