SlideShare a Scribd company logo
1 of 27
Download to read offline
High Performance Web Sites
Stefan Isak




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




                                                                  Text




                                                                         Response-Zeit




High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
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
NEU: Einfluss auf Google Suchergebnisse




High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
                                                                  http://www.flickr.com/photos/surroundsound5000/2713737042/
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
Warum ist High Performance wichtig?

          Google Webmaster Tools




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




                         Backend Performance



                         Server
                                                                  Frontend Performance
                         Hardware

                         Datenbank

                         Programmcode

                         ...




High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
Wo geht die Zeit verloren?




                                                                              20%




                                                                  80%




                                        HTML-Dokument               Komponenten (CSS, Javascript, Bilder, etc.)
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
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
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
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
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
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
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
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
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
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
Frontend Performance

          Goldene Regel: weniger HTTP-Requests

          CSS-Sprites - Beispiel




High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
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
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
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
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
Frontend Performance

          Weitere Regeln




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




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




High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
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
?
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
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

More Related Content

Viewers also liked

Virus y vacunas informaticas
Virus y vacunas informaticasVirus y vacunas informaticas
Virus y vacunas informaticasJavier Velasquez
 
presentación final
presentación finalpresentación final
presentación finalFatima Meza
 
Recuperación 1 periodo(2 parte)
Recuperación 1 periodo(2 parte)Recuperación 1 periodo(2 parte)
Recuperación 1 periodo(2 parte)jeffercarri064
 
Südafrikas zwei Seiten
Südafrikas zwei SeitenSüdafrikas zwei Seiten
Südafrikas zwei Seitenbiggeonline
 
Leo Hillinger
Leo HillingerLeo Hillinger
Leo HillingerMICEboard
 
R. Villano - Die fotos (de p.8)
R. Villano - Die fotos (de p.8)R. Villano - Die fotos (de p.8)
R. Villano - Die fotos (de p.8)Raimondo Villano
 
JACOB'S LADDER FESTIVAL
JACOB'S LADDER FESTIVALJACOB'S LADDER FESTIVAL
JACOB'S LADDER FESTIVALjacobsladder
 
Cuestionario cop
Cuestionario copCuestionario cop
Cuestionario copcrisol57
 
Webinar - CSR Academy
Webinar - CSR Academy Webinar - CSR Academy
Webinar - CSR Academy Foretica
 
Ost 1 10950 73
Ost 1 10950 73Ost 1 10950 73
Ost 1 10950 73Marc Holt
 
X-funktionale Teams
X-funktionale TeamsX-funktionale Teams
X-funktionale TeamsNadja Macht
 

Viewers also liked (17)

Virus y vacunas informaticas
Virus y vacunas informaticasVirus y vacunas informaticas
Virus y vacunas informaticas
 
presentación final
presentación finalpresentación final
presentación final
 
Recuperación 1 periodo(2 parte)
Recuperación 1 periodo(2 parte)Recuperación 1 periodo(2 parte)
Recuperación 1 periodo(2 parte)
 
MANUAL
MANUALMANUAL
MANUAL
 
Plantilla 903 icontec
Plantilla 903 icontecPlantilla 903 icontec
Plantilla 903 icontec
 
Gandia Cerrajeros
Gandia Cerrajeros
Gandia Cerrajeros
Gandia Cerrajeros
 
Kunden manifest
Kunden manifestKunden manifest
Kunden manifest
 
Südafrikas zwei Seiten
Südafrikas zwei SeitenSüdafrikas zwei Seiten
Südafrikas zwei Seiten
 
Leo Hillinger
Leo HillingerLeo Hillinger
Leo Hillinger
 
R. Villano - Die fotos (de p.8)
R. Villano - Die fotos (de p.8)R. Villano - Die fotos (de p.8)
R. Villano - Die fotos (de p.8)
 
JACOB'S LADDER FESTIVAL
JACOB'S LADDER FESTIVALJACOB'S LADDER FESTIVAL
JACOB'S LADDER FESTIVAL
 
File
FileFile
File
 
Cuestionario cop
Cuestionario copCuestionario cop
Cuestionario cop
 
Literaturverwaltung & Bibliotheken - Das zentrale Portal für Informationen ...
Literaturverwaltung & Bibliotheken  - Das zentrale Portal  für Informationen ...Literaturverwaltung & Bibliotheken  - Das zentrale Portal  für Informationen ...
Literaturverwaltung & Bibliotheken - Das zentrale Portal für Informationen ...
 
Webinar - CSR Academy
Webinar - CSR Academy Webinar - CSR Academy
Webinar - CSR Academy
 
Ost 1 10950 73
Ost 1 10950 73Ost 1 10950 73
Ost 1 10950 73
 
X-funktionale Teams
X-funktionale TeamsX-funktionale Teams
X-funktionale Teams
 

Similar to High Performance Websites und Google

Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Martin Kliehm
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Martin Kliehm
 
Web Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkWeb Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkFabian Lange
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021SEARCH ONE
 
SDC2011: Web Performance Optimization
SDC2011: Web Performance OptimizationSDC2011: Web Performance Optimization
SDC2011: Web Performance OptimizationJakob
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeNico Steiner
 
PageSpeed für Einsteiger SEO Day 2014
PageSpeed für Einsteiger SEO Day 2014PageSpeed für Einsteiger SEO Day 2014
PageSpeed für Einsteiger SEO Day 2014Franz Hernschier
 
Webtechnologien Grundlagen und Auswahl geeigneter Web Rahmenwerke
Webtechnologien Grundlagen und Auswahl geeigneter Web RahmenwerkeWebtechnologien Grundlagen und Auswahl geeigneter Web Rahmenwerke
Webtechnologien Grundlagen und Auswahl geeigneter Web Rahmenwerkeadoubleu
 
7 Top Internet-Trends
7 Top Internet-Trends7 Top Internet-Trends
7 Top Internet-TrendsMarkus Tressl
 
Frontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien StuttgartFrontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien StuttgartJakob
 
Client-side Performance Optimizations
Client-side Performance OptimizationsClient-side Performance Optimizations
Client-side Performance OptimizationsJakob
 
HTTP/2 – Ist das auch gut für java-basierte Webservices?
HTTP/2 – Ist das auch gut für java-basierte Webservices?HTTP/2 – Ist das auch gut für java-basierte Webservices?
HTTP/2 – Ist das auch gut für java-basierte Webservices?JanWeinschenker
 
Web Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkWeb Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkFabian Lange
 
Website Speed mit CDN
Website Speed mit CDNWebsite Speed mit CDN
Website Speed mit CDNMariano Glas
 
Morning Session: Qualitätskriterien für erfolgreiche Websites - für "Nicht-Te...
Morning Session: Qualitätskriterien für erfolgreiche Websites - für "Nicht-Te...Morning Session: Qualitätskriterien für erfolgreiche Websites - für "Nicht-Te...
Morning Session: Qualitätskriterien für erfolgreiche Websites - für "Nicht-Te...Stefan Seifarth
 
Top 10 Internet Trends 2011
Top 10 Internet Trends 2011Top 10 Internet Trends 2011
Top 10 Internet Trends 2011Jürg Stuker
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenAutomatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenJakob
 
Infopark CMS Fiona mit Ruby on Rails
Infopark CMS Fiona mit Ruby on RailsInfopark CMS Fiona mit Ruby on Rails
Infopark CMS Fiona mit Ruby on RailsJustRelate
 

Similar to High Performance Websites und Google (20)

Top 10 Internet-Trends
Top 10 Internet-TrendsTop 10 Internet-Trends
Top 10 Internet-Trends
 
SEOs als Dienstleister
SEOs als DienstleisterSEOs als Dienstleister
SEOs als Dienstleister
 
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
 
Web Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkWeb Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 Talk
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
 
SDC2011: Web Performance Optimization
SDC2011: Web Performance OptimizationSDC2011: Web Performance Optimization
SDC2011: Web Performance Optimization
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
PageSpeed für Einsteiger SEO Day 2014
PageSpeed für Einsteiger SEO Day 2014PageSpeed für Einsteiger SEO Day 2014
PageSpeed für Einsteiger SEO Day 2014
 
Webtechnologien Grundlagen und Auswahl geeigneter Web Rahmenwerke
Webtechnologien Grundlagen und Auswahl geeigneter Web RahmenwerkeWebtechnologien Grundlagen und Auswahl geeigneter Web Rahmenwerke
Webtechnologien Grundlagen und Auswahl geeigneter Web Rahmenwerke
 
7 Top Internet-Trends
7 Top Internet-Trends7 Top Internet-Trends
7 Top Internet-Trends
 
Frontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien StuttgartFrontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien Stuttgart
 
Client-side Performance Optimizations
Client-side Performance OptimizationsClient-side Performance Optimizations
Client-side Performance Optimizations
 
HTTP/2 – Ist das auch gut für java-basierte Webservices?
HTTP/2 – Ist das auch gut für java-basierte Webservices?HTTP/2 – Ist das auch gut für java-basierte Webservices?
HTTP/2 – Ist das auch gut für java-basierte Webservices?
 
Web Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkWeb Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 Talk
 
Website Speed mit CDN
Website Speed mit CDNWebsite Speed mit CDN
Website Speed mit CDN
 
Morning Session: Qualitätskriterien für erfolgreiche Websites - für "Nicht-Te...
Morning Session: Qualitätskriterien für erfolgreiche Websites - für "Nicht-Te...Morning Session: Qualitätskriterien für erfolgreiche Websites - für "Nicht-Te...
Morning Session: Qualitätskriterien für erfolgreiche Websites - für "Nicht-Te...
 
Top 10 Internet Trends 2011
Top 10 Internet Trends 2011Top 10 Internet Trends 2011
Top 10 Internet Trends 2011
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenAutomatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-Optimierungen
 
Infopark CMS Fiona mit Ruby on Rails
Infopark CMS Fiona mit Ruby on RailsInfopark CMS Fiona mit Ruby on Rails
Infopark CMS Fiona mit Ruby on Rails
 

More from Webmontag MRN

"Das neue Gesicht für Ludwigshafen – Stadt am Rhein. Wie der Anker ein Gesich...
"Das neue Gesicht für Ludwigshafen – Stadt am Rhein. Wie der Anker ein Gesich..."Das neue Gesicht für Ludwigshafen – Stadt am Rhein. Wie der Anker ein Gesich...
"Das neue Gesicht für Ludwigshafen – Stadt am Rhein. Wie der Anker ein Gesich...Webmontag MRN
 
Interaktion & Persuasion in sozialen Netzwerken
Interaktion & Persuasion in sozialen NetzwerkenInteraktion & Persuasion in sozialen Netzwerken
Interaktion & Persuasion in sozialen NetzwerkenWebmontag MRN
 
Open Source Software und Recht
Open Source Software und RechtOpen Source Software und Recht
Open Source Software und RechtWebmontag MRN
 
Impulsvortrag Urheberrecht & Internet
Impulsvortrag Urheberrecht & InternetImpulsvortrag Urheberrecht & Internet
Impulsvortrag Urheberrecht & InternetWebmontag MRN
 
Persuasives Webdesign
Persuasives WebdesignPersuasives Webdesign
Persuasives WebdesignWebmontag MRN
 
Xmachina mobile publishing
Xmachina mobile publishingXmachina mobile publishing
Xmachina mobile publishingWebmontag MRN
 
Performance Now! Was tun bei Besucherspitzen?
Performance Now! Was tun bei Besucherspitzen?Performance Now! Was tun bei Besucherspitzen?
Performance Now! Was tun bei Besucherspitzen?Webmontag MRN
 
It's all about Communication, Baby! - oder: Mensch-Maschine Kommunikation mad...
It's all about Communication, Baby! - oder: Mensch-Maschine Kommunikation mad...It's all about Communication, Baby! - oder: Mensch-Maschine Kommunikation mad...
It's all about Communication, Baby! - oder: Mensch-Maschine Kommunikation mad...Webmontag MRN
 
Wir sind das Netz – Kommunikationspsychologische Faktoren für den Erfolg in s...
Wir sind das Netz – Kommunikationspsychologische Faktoren für den Erfolg in s...Wir sind das Netz – Kommunikationspsychologische Faktoren für den Erfolg in s...
Wir sind das Netz – Kommunikationspsychologische Faktoren für den Erfolg in s...Webmontag MRN
 
Vom Blog zum Magazin, Ein Blick hinter die Kulissen des Smashing Magazine
Vom Blog zum Magazin, Ein Blick hinter die Kulissen des Smashing MagazineVom Blog zum Magazin, Ein Blick hinter die Kulissen des Smashing Magazine
Vom Blog zum Magazin, Ein Blick hinter die Kulissen des Smashing MagazineWebmontag MRN
 
Online Media Planung
Online Media PlanungOnline Media Planung
Online Media PlanungWebmontag MRN
 
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, NotizenWireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, NotizenWebmontag MRN
 
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein
Wireframes und Co.: Conceptual Design als elementarer ProjektbausteinWireframes und Co.: Conceptual Design als elementarer Projektbaustein
Wireframes und Co.: Conceptual Design als elementarer ProjektbausteinWebmontag MRN
 

More from Webmontag MRN (19)

"Das neue Gesicht für Ludwigshafen – Stadt am Rhein. Wie der Anker ein Gesich...
"Das neue Gesicht für Ludwigshafen – Stadt am Rhein. Wie der Anker ein Gesich..."Das neue Gesicht für Ludwigshafen – Stadt am Rhein. Wie der Anker ein Gesich...
"Das neue Gesicht für Ludwigshafen – Stadt am Rhein. Wie der Anker ein Gesich...
 
Interaktion & Persuasion in sozialen Netzwerken
Interaktion & Persuasion in sozialen NetzwerkenInteraktion & Persuasion in sozialen Netzwerken
Interaktion & Persuasion in sozialen Netzwerken
 
Open Source Software und Recht
Open Source Software und RechtOpen Source Software und Recht
Open Source Software und Recht
 
Impulsvortrag Urheberrecht & Internet
Impulsvortrag Urheberrecht & InternetImpulsvortrag Urheberrecht & Internet
Impulsvortrag Urheberrecht & Internet
 
Good Choice Table
Good Choice TableGood Choice Table
Good Choice Table
 
Persuasives Webdesign
Persuasives WebdesignPersuasives Webdesign
Persuasives Webdesign
 
Social Media Trends
Social Media TrendsSocial Media Trends
Social Media Trends
 
Xmachina mobile publishing
Xmachina mobile publishingXmachina mobile publishing
Xmachina mobile publishing
 
Performance Now! Was tun bei Besucherspitzen?
Performance Now! Was tun bei Besucherspitzen?Performance Now! Was tun bei Besucherspitzen?
Performance Now! Was tun bei Besucherspitzen?
 
It's all about Communication, Baby! - oder: Mensch-Maschine Kommunikation mad...
It's all about Communication, Baby! - oder: Mensch-Maschine Kommunikation mad...It's all about Communication, Baby! - oder: Mensch-Maschine Kommunikation mad...
It's all about Communication, Baby! - oder: Mensch-Maschine Kommunikation mad...
 
Wir sind das Netz – Kommunikationspsychologische Faktoren für den Erfolg in s...
Wir sind das Netz – Kommunikationspsychologische Faktoren für den Erfolg in s...Wir sind das Netz – Kommunikationspsychologische Faktoren für den Erfolg in s...
Wir sind das Netz – Kommunikationspsychologische Faktoren für den Erfolg in s...
 
Screen Sharing
Screen SharingScreen Sharing
Screen Sharing
 
Vom Blog zum Magazin, Ein Blick hinter die Kulissen des Smashing Magazine
Vom Blog zum Magazin, Ein Blick hinter die Kulissen des Smashing MagazineVom Blog zum Magazin, Ein Blick hinter die Kulissen des Smashing Magazine
Vom Blog zum Magazin, Ein Blick hinter die Kulissen des Smashing Magazine
 
OpenID
OpenIDOpenID
OpenID
 
Zootool
ZootoolZootool
Zootool
 
Mobile Tagging
Mobile TaggingMobile Tagging
Mobile Tagging
 
Online Media Planung
Online Media PlanungOnline Media Planung
Online Media Planung
 
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, NotizenWireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
 
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein
Wireframes und Co.: Conceptual Design als elementarer ProjektbausteinWireframes und Co.: Conceptual Design als elementarer Projektbaustein
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein
 

High Performance Websites und Google

  • 1. High Performance Web Sites Stefan Isak http://www.flickr.com/photos/didier57/2423562782/
  • 2. Was bedeutet Web Site Performance? Text Response-Zeit High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  • 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. NEU: Einfluss auf Google Suchergebnisse High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010 http://www.flickr.com/photos/surroundsound5000/2713737042/
  • 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. Warum ist High Performance wichtig? Google Webmaster Tools High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  • 7. Web Site Performance Backend Performance Server Frontend Performance Hardware Datenbank Programmcode ... High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Frontend Performance Goldene Regel: weniger HTTP-Requests CSS-Sprites - Beispiel High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  • 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. 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. 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. 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. Frontend Performance Weitere Regeln High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  • 24. Weitere Informationen developer.yahoo.com/performance/ code.google.com/speed/ High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  • 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. ? High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
  • 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