Frontend Performance

Performance-Optimierung

The hardis what makes itgreat

Der Performance-Gott

Steve Souders

Frher bei Yahoo!

Heute bei Google

Sprecher auf groen
internationalen Konferenzen
und Performance-Evangelist

Autor zweier Bchern zum Thema

Entwickler von YSlow

Argumente

Google: +0.4 Sekunden 0.6% weniger Suchanfragen

Yahoo!: 0.4 Sekunden 5-9% weniger Traffic

Bing: +2 Sekunden 4.3% weniger Umsatz

Shopzilla: -5 Sekunden 12% mehr Umsatz, 50% weniger Hardware

Netflix: 43% weniger Bandbreite

Quelle: Fronteers-Vortrag fast by default 2009

Argumente

Verbesserte User Experience

Mehr Traffic

Mehr Umsatz

Weniger Kosten


Die Regeln

Best Practices for Speeding Up Your Web Site
(http://developer.yahoo.com/performance/rules.html)

Ursprnglich 14, heute 34 Regeln

discuss this rule

Web Performance Best Practices
(http://code.google.com/speed/page-speed/docs/rules_intro.html)

10 wichtigste Regeln, die unbedingt beachtet werden sollten

Die Regeln

90-95% der Ladezeit entsteht im Frontend, nur 5-10% auf dem Server


Die wichtigsten Regeln

Minimize HTTP Requests

Use a Content Delivery Network

Add an Expires or a Cache-Control Header

Gzip Components

Put Stylesheets at the Top

Put Scripts at the Bottom

Make JavaScript and CSS External

Reduce DNS Lookups

Minify JavaScript and CSS

Configure ETags

Das Jasmin-Servlet

Ressourcen

CSS/JavaScript

Quellen

localhost, classpath, http

Orte / Geltungsbereiche

Projekt (auf ein Projekt beschrnkt)

Common (auf mehrere Projekte beschrnkt)

Modul (kann auf alle Projekte angewendet werden)

Das Jasmin-Servlet

Seitenbezogene Konfiguration

Liefere fr alle Seiten nur im Stage-Modus die Ressourcen des Stage-Assistent

Liefere fr alle Seiten sowohl auf der Stage als auch Online die Ressourcen fr den Seitenrahmen

Liefere nur fr die Seiten Kundendaten und Lieferadresse die Ressourcen fr die Address-Autocompletion

Das Jasmin-Servlet




Gzip Components




Reduce DNS Lookups


Configure ETags

Das Jasmin-Servlet

CSS wird minimiert und komprimiert (gZip)

Einsparung von ca. 70%

JavaScript wird minimiert, obfuscated und komprimiert


Beide Ressourcen werden in je 2 Requests ausgeliefert

1. Request: Ressourcen, welche fr alle Seiten ausgeliefert werden (ab dem 2. Request immer aus dem Cache)

2. Request: Seitenspezifische Ressourcen

Das Jasmin-Servlet




Gzip Components




Reduce DNS Lookups


Configure ETags

Das Jasmin-Servlet

Hinzufgen von Expires-Headern

Diese Ressource (CSS/JavaScript) ndert sich fr die nchsten 10 Jahre nicht mehr

Browser holt Ressource immer aus dem Cache

Problem: Was, wenn sich die Ressourcen doch ndern (fr gewhnlich nach einem Publish)?

Lsung: Versionierung beim Publish

http://dsl.1und1.de/xml/jasmin/1205031209/get/...

Das Jasmin-Servlet




Gzip Components




Reduce DNS Lookups


Configure ETags

Das Jasmin-Servlet

Weitere Features

Korrekte Reihenfolge durch Dependencies

Laden der Stylesheets im Head

Laden der Scripte am Ende der Seite ber XHR

Ermglicht generell Progressive Rendering

XHR ermglicht weiterhin parallele Downloads

Registrieren der Inline-Scripte fr eine sptere Ausfhrung

Variantenfhig

Spezielle Ressourcen fr GMX/WEB.DE Skin

Prfix / Suffix

Das Jasmin-Servlet




Gzip Components




Reduce DNS Lookups


Configure ETags

Weitere Optimierungen

Minimierung von Inline-Scripten

Komprimierung des HTML-Dokuments (gZip)


Korrekte eTags fr das HTML-Dokument und fr Grafiken

Configure ETags

Einsatz von CSS-Sprites


Conditional Comments fr IE6/IE7

Das Jasmin-Servlet




Gzip Components




Reduce DNS Lookups


Configure ETags

Project Mess Tool

Wertet Daten (u.a. vom Jasmin-Servlet) aus und liefert Kennzahlen

Wie gro sind CSS/Scripte/HTML/Grafiken in einem Projekt pro Seite und im Durchschnitt

Gibt es Ausreier? (Error-Tool)

Welche CSS-Selektoren werden nicht genutzt und knnen gelscht werden?

Werden fehlende Grafiken angefordert? (Error-Tool)

Werden Grafiken nie ausgeliefert und knnen gelscht werden?

Gibt es invalide HTML- oder CSS-Dokumente?

Geplante Systeme

Content Delivery Server

Automatische Versionierung

Far Future Expires Header

Ermittlung von Kennzahlen

Automatisches Preloading von Ressourcen

Lade nach dem vollstndigen Laden der Seite im Hintergrund ber XHR die 10 Grafiken, welche statistisch als nchstes abgerufen werden

Bezug der Ressourcen von verschiedenen Rechenzentren (besonders USA)

Aufhebung der Beschrnkung von maximal 2 parallelen Requests durch Subdomains

Cookie-freie Domain

Geplante Systeme

Tracking-Pixel-Script

Nimmt Tracking-Informationen ber standardisierte Schnittstelle entgegen und reicht diese durch

Muss auch fr Cookies und Header-Daten funktionieren

Das Jasmin-Servlet




Gzip Components




Reduce DNS Lookups


Configure ETags

Werkzeuge

YSlow (Yahoo!)

Firefox Extension

Integriert sich in Firebug

Grade / Components / Statistics / Tools

YSlow - Grade

Benotung der Seite (Performance Score)

Vorgefertigte oder individuelle Tests

Unterteilung in Content / CSS / JavaScript und Server

YSlow - Components

Detaillierte performance-relevante Daten

doc, js, css, cssimage, image

Detaildaten zu jeder Ressource

YSlow - Statistics

Empty Cache / Primed Cache

HTTP-Requests / Total Weight

YSlow - Tools

JSLint (JavaScript QA-Tool)

Smush.it (Optimierung von Grafiken)

...

Werkzeuge

Page Speed (Google)

Firefox Extension

Integriert sich in Firebug

hnlich wie YSlow mit etwas anderen Kriterien

Werkzeuge

webpagetest.org

Werkzeuge

webpagetest.org

Weitere Informationen

stevesouders.com

Best Practices for Speeding Up Your Web Site (Yahoo!)

Web Performance Best Practices (Google)

High Performance Websites (Steve Souders)

Even Faster Websites (Steve Souders u.a.)

YouTube even faster websites / yslow

Slideshare

http://www.websiteoptimization.com/publications/

Danke!

Fragen?

Nico Steiner

[email protected]

http://www.nicosteiner.de

Frontend Performance

Technology

Transcript of Frontend Performance