0
Client-side Performance
     Optimizations
       Jakob Schröter




           22.01.2010
20%



      80%
Wahrgenommene Ladezeit
      einer Webseite


20%



                   80%
Wahrgenommene Ladezeit
         einer Webseite


20%
Server




                      80%
                      Client
Wahrgenommene Ladezeit
         einer Webseite


20%
Server




                      80%
                      Client
Frontend Engineer


            Kajona³ CMS
                                                   BESTTRICK.COM




Bachelor ...
LADEZEIT?
          Spalte2

                    1000 ms


          500 ms


 100 ms


50 ms
Einfluss der Ladezeit
Amazon: +100 ms = 1 % weniger Verkäufe
Yahoo:  +400 ms = 5-9 % weniger Anfragen
Google: +500 ms = 20...
WAS PASSIERT IM BROWSER?
Your best friends
• Firebug
• Yahoo YSlow
• Google PageSpeed

• Speed limiter: Webscarab
HTML (Server)   Ressources (Client)
HTTP Requests are expensive!

ANZAHL DER REQUESTS REDUZIEREN
HTTP Requests reduzieren
• Redirects vermeiden

• Dateien sinnvoll kombinieren
  – base.js, dragndrop.js, animation.js, …
...
CSS Sprites
sprites.png

                                        40px

                              110px




.button {
 ...
Intelligentes Browser-Caching
          Use HTTPs potential!
• Achtung, ETag!
                                 GET File
  ...
Intelligentes Browser-Caching
• Besser: Expires-Header
                                GET File
     Server               ...
Cache busters
…um ein Neuladen zu erzwingen

• (Expire-Header vorher anpassen)

• base-12.js
• styles.css?67
• /890/backgr...
HTTP Requests are expensive!

REQUESTS VERKLEINERN
Compression & Minifying
• alles was geht: HTML, CSS, JS, JSON, XML,
  …aber keine Bilder, PDFs, SWFs, …

• Compression
  –...
Compression & Minifying
hdm-stuttgart.de




                                             Komprimiert
         Original   ...
IMAGE
OPTIMIZATION
Image Optimization
          JPG         PNG   (GIF)




         Farbanzahl



• „Für Web speichern“
• CSS-Sprites
smushit.com
hdm-stuttgart.de




               130 x 86 px
HDM-STUTTGART.DE


           -325 KB         Compression & Minifying



            -97 KB         Image Optimization



...
HTTP Requests are expensive!

REIHENFOLGE DER REQUESTS
Order of loading ressources
• Achtung <script>!
  – blockiert weitere Downloads




• JS/CSS nicht doppelt einbinden
Order of loading ressources

                                   DOM-ready                        onLoad




              ...
PRELOADING
Preloading
• Z.B. Loginseite
LAZY-LOADING
Post-loading
Domain sharding / CDN
• Parallele Downloads (für ältere Browser)
  – nur 2 Requests per Host


• Schnellere Antwortzeiten/...
NOCH NICHT SCHNELL GENUG?
JS performance
• Passende AJAX-Bibliothek wählen

• Aktionen bei window.onload reduzieren

• Best practices
CSS performance
• Selektoren

     #myElement > li {}

     .myElement-li {}


• Best practices
Chrome Speed Tracer
Client-Side Performance Optimization

„IST JA GANZ SCHÖN
AUFWÄNDIG…“
Vieles lässt sich automatisieren
Integration in den Deployment-Prozess

  – JS/CSS-Dateien kombinieren
  – Compression & M...
Entlastet auch
          Enorme
                                    die Server             Oft einfach
        Auswirkunge...
Weiterführend
•   Steve Souders: High Performance Websites
•   Steve Souders: Even Faster Websites
•   http://developer.ya...
Client-side Performance
     Optimizations
        Jakob Schröter




      xing.com/profile/Jakob_Schroeter
Client-side Performance Optimizations
Client-side Performance Optimizations
Client-side Performance Optimizations
Upcoming SlideShare
Loading in...5
×

Client-side Performance Optimizations

2,090

Published on

Was kann im Frontend bei Webseite optimiert werden, um die vom Nutzer wahrgenommene Ladezeit zu verkürzen? 30 Minuten Einführung in Client-Side Performance Optimization im Rahmen der Veranstaltung "StudiVZ, Xing und Co - Die Langsamen werden verlassen" an der Hochschule der Medien Stuttgart (http://www.hdm-stuttgart.de/view_news?ident=news20100122085221)

Published in: Technology, Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,090
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
34
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Client-side Performance Optimizations"

  1. 1. Client-side Performance Optimizations Jakob Schröter 22.01.2010
  2. 2. 20% 80%
  3. 3. Wahrgenommene Ladezeit einer Webseite 20% 80%
  4. 4. Wahrgenommene Ladezeit einer Webseite 20% Server 80% Client
  5. 5. Wahrgenommene Ladezeit einer Webseite 20% Server 80% Client
  6. 6. Frontend Engineer Kajona³ CMS BESTTRICK.COM Bachelor of Computer Science in Media Jakob Schröter Master of Computer Science and Media Schlagzeuger
  7. 7. LADEZEIT? Spalte2 1000 ms 500 ms 100 ms 50 ms
  8. 8. Einfluss der Ladezeit Amazon: +100 ms = 1 % weniger Verkäufe Yahoo: +400 ms = 5-9 % weniger Anfragen Google: +500 ms = 20 % weniger Anfragen Glückliche User Mehr User Mehr Geld Kurze Ladezeit
  9. 9. WAS PASSIERT IM BROWSER?
  10. 10. Your best friends • Firebug • Yahoo YSlow • Google PageSpeed • Speed limiter: Webscarab
  11. 11. HTML (Server) Ressources (Client)
  12. 12. HTTP Requests are expensive! ANZAHL DER REQUESTS REDUZIEREN
  13. 13. HTTP Requests reduzieren • Redirects vermeiden • Dateien sinnvoll kombinieren – base.js, dragndrop.js, animation.js, … – master.css, dashboard.css, lightbox.css • Auch Grafiken – CSS Sprites! – button.png, button_hover.png, button_active.png, …
  14. 14. CSS Sprites sprites.png 40px 110px .button { width: 10px; height: 10px; background-image: url(sprites.png); background-position: 100px 40px; } .button:hover { background-position: 110px 40px; }
  15. 15. Intelligentes Browser-Caching Use HTTPs potential! • Achtung, ETag! GET File Server Client File GET File, if modified Server Client 304 not modified File Weniger Daten, aber trotzdem ein Request!
  16. 16. Intelligentes Browser-Caching • Besser: Expires-Header GET File Server Client File Expires 01.01.2011 Server Client File Kein Request! Erst wieder ab 02.01.2011
  17. 17. Cache busters …um ein Neuladen zu erzwingen • (Expire-Header vorher anpassen) • base-12.js • styles.css?67 • /890/background.png
  18. 18. HTTP Requests are expensive! REQUESTS VERKLEINERN
  19. 19. Compression & Minifying • alles was geht: HTML, CSS, JS, JSON, XML, …aber keine Bilder, PDFs, SWFs, … • Compression – mod_deflate / mod_gzip • Minifying
  20. 20. Compression & Minifying hdm-stuttgart.de Komprimiert Original Minified Komprimiert + Minified HTML 101 KB 97 KB 17 KB 16 KB CSS 90 KB 68 KB 19 KB 14 KB JS 243 KB 195 KB 73 KB 63 KB 434 KB 360 KB 109 KB 93 KB -341 KB ≈ -79%!
  21. 21. IMAGE OPTIMIZATION
  22. 22. Image Optimization JPG PNG (GIF) Farbanzahl • „Für Web speichern“ • CSS-Sprites
  23. 23. smushit.com hdm-stuttgart.de 130 x 86 px
  24. 24. HDM-STUTTGART.DE -325 KB Compression & Minifying -97 KB Image Optimization Facebook -422 KB -49% x 200.000.000 Unique Visitors = -82 TB/Monat
  25. 25. HTTP Requests are expensive! REIHENFOLGE DER REQUESTS
  26. 26. Order of loading ressources • Achtung <script>! – blockiert weitere Downloads • JS/CSS nicht doppelt einbinden
  27. 27. Order of loading ressources DOM-ready onLoad Zwingend Ergänzende CSS notwendige Scripts Grafiken Scripts master.css base.js background.jpg dragndrop.js button.png lightbox.js
  28. 28. PRELOADING
  29. 29. Preloading • Z.B. Loginseite
  30. 30. LAZY-LOADING
  31. 31. Post-loading
  32. 32. Domain sharding / CDN • Parallele Downloads (für ältere Browser) – nur 2 Requests per Host • Schnellere Antwortzeiten/Übertragungsraten – Schlanker Webserver – Cookie-free Domain static.ak.studivz.net
  33. 33. NOCH NICHT SCHNELL GENUG?
  34. 34. JS performance • Passende AJAX-Bibliothek wählen • Aktionen bei window.onload reduzieren • Best practices
  35. 35. CSS performance • Selektoren #myElement > li {} .myElement-li {} • Best practices
  36. 36. Chrome Speed Tracer
  37. 37. Client-Side Performance Optimization „IST JA GANZ SCHÖN AUFWÄNDIG…“
  38. 38. Vieles lässt sich automatisieren Integration in den Deployment-Prozess – JS/CSS-Dateien kombinieren – Compression & Minifying – Cache busters – Image optimization
  39. 39. Entlastet auch Enorme die Server Oft einfach Auswirkungen Von Anfang an Grundregeln Client-side beachten & ggf. weiter optimieren matters! Direkte Verbesserung Kostenersparnis für die Nutzer don‘t fiddle – analyse first
  40. 40. Weiterführend • Steve Souders: High Performance Websites • Steve Souders: Even Faster Websites • http://developer.yahoo.com/performance/rules.html • Test-Webseite: http://stevesouders.com/cuzillion
  41. 41. Client-side Performance Optimizations Jakob Schröter xing.com/profile/Jakob_Schroeter
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×