Ansä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.
- Make Fewer HTTP Requests
- Use a Content Delivery Network
- Add an Expires Header
- Gzip Components
- Put Stylesheets at the Top
- Put Scripts at the Bottom
- Avoid CSS Expressions
- Make JavaScript and CSS External
- Reduce DNS Lookups
- Minify JavaScript
- Avoid Redirects
- Remove Duplicate Scripts
- Configure ETags
- Make Ajax Cacheable
Auf einer Entwicklerkonferenz stellte jetzt Yahoo-Ingenieur Stoyan Stefanov noch 20 weitere Tipps für schnellere Webseiten vor:
- Flush the buffer early
- Use GET for AJAX requests
- Post-load components
- Preload components
- Reduce the number of DOM elements
- Split compontents across domains
- Minimize the number of iframes
- No 404s
- Reduce cookie size
- Reduce cookie-free domains for components
- Minimize DOM access
- Develop smart event handlers
- Chosse over @import
- Avoid filters
- Optimize images
- Optimize CSS sprites
- Don't scale images in html
- Make favicon.ico small and cacheable
- Keep components under 25k
- 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.
