Frontend Performance

1,055 views

Published on

A short introduction to frontend performance optimization. Held on the 2009-02-27 at the Railslove office:

http://wiki.railslabs.com/index.php?title=LightningTalks

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,055
On SlideShare
0
From Embeds
0
Number of Embeds
51
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide




  • Bei Spriting: Demo-Sprites zeigen
    304 Not Modified
    Redirects:
    * Asset hinter Redirect: Nicht gecached
    * HTML hinter Redirect: Schlägt voll durch
    * Trailing-Slash-Problematik: Immer Trailing-Slash anhängen

  • Minification: Kommentare, Whitespace, teilweise: optimierte CSS-Anweisungen...
    Obfuscation: JS-Funktionsaufrufe
    Cookies: Größe und Domain, XING: 1TB pro Monat = 1000 GB

  • Asset-Hosts: PDF S. 30 f.
    CDN: Edge-Server, Prefetching
    Benutzer: Stylesheets zuerst, schnell Interaktionsbereitschaft herstellen, Nicht-blockierende JS-Downloads




  • Frontend Performance

    1. 1. Frontend Performance Ralph von der Heyden Saturday, February 28, 2009
    2. 2. Über mich: Wirtschaftsinformatiker Spaß an Ruby on Rails Master’s thesis über Frontend-Performance Ab Mai bei XING Saturday, February 28, 2009
    3. 3. Warum das Frontend optimieren? Frontend: Alles das, was nicht Backend ist :) Macht ca. 90% der Endbenutzer-Zugriffszeit aus Verdoppelung der Backend-Geschwindigkeit: 5% kommen beim User an Verdoppelung der Frontend-Geschwindigkeit: 47,5% kommen beim User an Es ist leicht! Saturday, February 28, 2009
    4. 4. Wie macht man das? Weniger Requests Kleinere Requests Andere Tricks Saturday, February 28, 2009
    5. 5. Weniger Requests Stylesheets und JavaScripts zusammenfassen stylesheet_link_tag ['st1', 'st2'], :cache => quot;stylequot; Spriting Clientseitiges Caching optimieren Redirects vermeiden Saturday, February 28, 2009
    6. 6. Kleinere Requests gzip Minification und Obfuscation Das richtige Bildformat wählen, z.B. PNG JavaScripts und Stylesheets extern Cookies optimieren Saturday, February 28, 2009
    7. 7. Andere Tricks Asset-Hosts Content Delivery Network (CDN) Google AJAX Libs Requests zerlegen Vom Benutzer wahrgenommene Geschwindigkeit optimieren Saturday, February 28, 2009
    8. 8. Weapon of choice: YSlow Firebug-Plugin Performance Grade mit Verbesserungsvorschlägen Wie groß ist meine Website? Aufgeteilt in HTML, JS, CSS, Bilder... Mit leerem und mit vollem Cache Weitere Tools wie All JS/CSS Saturday, February 28, 2009
    9. 9. Fragen? Saturday, February 28, 2009
    10. 10. Danke! Saturday, February 28, 2009
    11. 11. @ralph http://rvdh.de http://blog.rvdh.de Saturday, February 28, 2009

    ×