High Performance Web Sites
Stefan Isak




                             http://www.flickr.com/photos/didier57/2423562782/
Was bedeutet Web Site Performance?




                                                                  Text




        ...
Warum ist die Performance wichtig?




           User experience
           Joy of use
           Usability
          ...
NEU: Einfluss auf Google Suchergebnisse




High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
              ...
Warum ist High Performance wichtig?

          NEU: Einfluss auf Google Suchergebnisse


           Bis jetzt < 1% für en...
Warum ist High Performance wichtig?

          Google Webmaster Tools




High Performance Web Sites, Stefan Isak, Webmont...
Web Site Performance




                         Backend Performance



                         Server
                 ...
Wo geht die Zeit verloren?




                                                                              20%




     ...
Wo geht die Zeit verloren?
     Ein Beispiel - heise.de




                                                              ...
Wo geht die Zeit verloren?
     Ein Beispiel - heise.de




                                             ~8%




         ...
Wo geht die Zeit verloren?
     Ein Beispiel - heise.de




                                             ~8%              ...
Analyse Werkzeuge




                         Safari Web Inspector                        Firefox Addon Firebug
         ...
Analyse Werkzeuge




               developer.yahoo.com/yslow/                         code.google.com/speed/page-speed/
...
Frontend Performance - Analyse mit YSlow
    Beispiel - heise.de




                                                     ...
Frontend Performance

          Goldene Regel: weniger HTTP-Requests




                          106 Request für 1 Seite...
Frontend Performance

          Goldene Regel: weniger HTTP-Requests




                          103 Request für 1 Seite...
Frontend Performance

          Goldene Regel: weniger HTTP-Requests

          CSS-Sprites

           mehrere Bilder zu...
Frontend Performance

          Goldene Regel: weniger HTTP-Requests

          CSS-Sprites - Beispiel




High Performanc...
Frontend Performance

          Goldene Regel: weniger HTTP-Requests

          mehrere Javascript Dateien kombinieren



...
Frontend Performance

          Goldene Regel: weniger HTTP-Requests

          mehrere Stylesheets kombinieren




      ...
Frontend Performance

          Goldene Regel: weniger HTTP-Requests

          Expires Headers einsetzen

           Kom...
Frontend Performance

          Goldene Regel: weniger HTTP-Requests

          Expires Headers einsetzen




            ...
Frontend Performance

          Weitere Regeln




High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
Weitere Informationen




        developer.yahoo.com/performance/                          code.google.com/speed/




Hig...
Bücher




                       High Performance Web Sites                  Even Faster Web Sites
                      ...
?
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
Vielen Dank!


          Stefan Isak

          kuehlhaus AG
          N7, 5-6
          D-68161 Mannheim

          Telef...
Upcoming SlideShare
Loading in...5
×

High Performance Websites und Google

1,171

Published on

High Performance Websites und Google von Stefan Isak, kuehlhaus AG, am 3. Mai 2010 beim 4. Webmontag.talk in Manhheim.

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,171
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

High Performance Websites und Google

  1. 1. High Performance Web Sites Stefan Isak http://www.flickr.com/photos/didier57/2423562782/
  2. 2. Was bedeutet Web Site Performance? Text Response-Zeit High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  3. 3. Warum ist die Performance wichtig?  User experience  Joy of use  Usability  ...  Erfolgsfaktor http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html http://www.stevesouders.com/blog/2009/07/27/wikia-fast-pages-retain-users/ http://www.strangeloopnetworks.com/files/Webinars/Performance_Impact_Webinar.m4v High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  4. 4. NEU: Einfluss auf Google Suchergebnisse High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010 http://www.flickr.com/photos/surroundsound5000/2713737042/
  5. 5. Warum ist High Performance wichtig? NEU: Einfluss auf Google Suchergebnisse  Bis jetzt < 1% für englische Anfragen auf google.com  Relevanz wird steigen http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  6. 6. Warum ist High Performance wichtig? Google Webmaster Tools High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  7. 7. Web Site Performance Backend Performance Server Frontend Performance Hardware Datenbank Programmcode ... High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  8. 8. Wo geht die Zeit verloren? 20% 80% HTML-Dokument Komponenten (CSS, Javascript, Bilder, etc.) High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  9. 9. Wo geht die Zeit verloren? Ein Beispiel - heise.de Zugriff: 02.05.2010, DSL 16.000 kbit/s, leerer Cache High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  10. 10. Wo geht die Zeit verloren? Ein Beispiel - heise.de ~8% Zugriff: 02.05.2010, DSL 16.000 kbit/s, leerer Cache High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  11. 11. Wo geht die Zeit verloren? Ein Beispiel - heise.de ~8% ~92% Zugriff: 02.05.2010, DSL 16.000 kbit/s, leerer Cache High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  12. 12. Analyse Werkzeuge Safari Web Inspector Firefox Addon Firebug developer.apple.com/safari/ addons.mozilla.org/de/firefox/ addon/1843 High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  13. 13. Analyse Werkzeuge developer.yahoo.com/yslow/ code.google.com/speed/page-speed/ (benötigt Firebug) (benötigt Firebug) High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  14. 14. Frontend Performance - Analyse mit YSlow Beispiel - heise.de heise.de 02.05.2010, DSL 16.000 kbit/s, voller Cache High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  15. 15. Frontend Performance Goldene Regel: weniger HTTP-Requests 106 Request für 1 Seite bei leerem Browser Cache heise.de 02.05.2010, DSL 16.000 kbit/s, leerer Cache High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  16. 16. Frontend Performance Goldene Regel: weniger HTTP-Requests 103 Request für 1 Seite bei vollem Browser Cache heise.de 02.05.2010, DSL 16.000 kbit/s, voller Cache High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  17. 17. Frontend Performance Goldene Regel: weniger HTTP-Requests CSS-Sprites  mehrere Bilder zu einem Einzigen zusammenfassen  Bilder die hauptsächlich dem Layout/Design dienen sind für CSS-Sprites gut geeignet  ACHTUNG: Bilder die zum Inhalt gehören nie in einen Sprite High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  18. 18. Frontend Performance Goldene Regel: weniger HTTP-Requests CSS-Sprites - Beispiel High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  19. 19. Frontend Performance Goldene Regel: weniger HTTP-Requests mehrere Javascript Dateien kombinieren 27 Javascript Dateien für die Startseite heise.de 02.05.2010, DSL 16.000 kbit/s, voller Cache High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  20. 20. Frontend Performance Goldene Regel: weniger HTTP-Requests mehrere Stylesheets kombinieren heise.de 02.05.2010, DSL 16.000 kbit/s, voller Cache High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  21. 21. Frontend Performance Goldene Regel: weniger HTTP-Requests Expires Headers einsetzen  Komponenten bekommen ein “Verfallsdatum”  Der Browser kann die Komponente bis zum Verfallsdatum aus dem Cache laden  Spielt keine Rolle beim ersten Besuch einer Webseite. Beispiel Konfiguration für Apache <FilesMatch “.(png|gif|jpg|js|css)$”> ExpiresDefault “access plus 2 years” </FilesMatch> High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  22. 22. Frontend Performance Goldene Regel: weniger HTTP-Requests Expires Headers einsetzen Komponente wird aus dem Cache geladen. Dennoch ist ein HTTP-Request nötig um zu prüfen, ob die Komponente verändert wurde. Mit Expires Headers entfallen diese Requests. High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  23. 23. Frontend Performance Weitere Regeln High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  24. 24. Weitere Informationen developer.yahoo.com/performance/ code.google.com/speed/ High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  25. 25. Bücher High Performance Web Sites Even Faster Web Sites Steve Souders, O’REILLY Steve Souders, O’REILLY 978-3-89721-850-5 978-0596522308 High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  26. 26. ? High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  27. 27. Vielen Dank! Stefan Isak kuehlhaus AG N7, 5-6 D-68161 Mannheim Telefon +49.621.496083-0 E-Mail info@kuehlhaus.com Internet www.kuehlhaus.com High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  1. A particular slide catching your eye?

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

×