SlideShare ist ein Scribd-Unternehmen logo
Ladezeiten verbessern CSS und JavaScript komprimieren Kai Greinke pageload time tacho 3d © vege – Fotolia.com
Auf die Plätze …, Fertig … URL eingeben   ENTER    Warten
Was passiert in der Zeit Was passiert in der Zeit Werkzeuge für die Analyse Analysieren der Inhalte Möglichkeiten beim CSS JavaScript Komprimieren Weitere Optimierung GZIP Komprimierung nutzen Cache aktivieren Zusammenfassung
Was passiert in der Zeit … HTTP/1.0 200 OK Date: Fri, 15 Jun 2009 16:04:22 GMT Content-Language: de Content-Type: text/html;charset=utf-8 <HTML>…</HTML>
Browser verarbeitet Inhalte … <title> gesetzt und favicon dargestellt
Browser verarbeitet Inhalte  … Es folgen die JavaScript Dateien im Quellcode … der Browser fordert die Dateien sofort an …
Browser verarbeitet Inhalte  … Dann kommen die CSS Dateien … der Browser fordert auch diese an …
Browser verarbeitet Inhalte  … Der <body> beginnt … der Browser könnte loslegen …
Wie viel Zeit ist verstrichen? Quelle: www.webpagetest.org Der Browser könnte loslegen, wenn schon alle Dateien da wären!
Werkzeuge für die Analyse Was passiert in der Zeit Werkzeuge für die Analyse Analysieren der Inhalte Möglichkeiten beim CSS JavaScript Komprimieren Weitere Optimierung GZIP Komprimierung nutzen Cache aktivieren Zusammenfassung
Online Tools z. B.  www.webpagetest.org Werkzeuge für die Analyse
Werkzeuge für die Analyse Firefox Add-on Firebug
Werkzeuge für die Analyse Firefox Add-on YSlow
Werkzeuge für die Analyse Google  Page Speed  Add-On für den Firefox
Werkzeuge für die Analyse Sniffer z. B.  Wireshark
Analysieren der Inhalte Was passiert in der Zeit Werkzeuge für die Analyse Analysieren der Inhalte Möglichkeiten beim CSS JavaScript Komprimieren Weitere Optimierung GZIP Komprimierung nutzen Cache aktivieren Zusammenfassung
Wo kann man optimieren? Quelle: www.webpagetest.org Nach 6 Sekunden beginnt der Browser die Seite zu rendern (letzt CSS / JS Datei). Nach 11,8 Sekunden ist die Seite fertig geladen. Test mit einer 1.5 Mbit/s aDSL Leitung in den USA … Erster Aufruf
Analysieren der Inhalte Browser … wartet HTML CSS JavaScript Browser … rendert Bilder (in- und extern) Audio / Video RSS  (fremde Inhalte) <imgsrc=“images/bild.jpg“ width=“100“  height=“
Möglichkeiten beim CSS Was passiert in der Zeit Werkzeuge für die Analyse Analysieren der Inhalte Möglichkeiten beim CSS JavaScript Komprimieren Weitere Optimierung GZIP Komprimierung nutzen Cache aktivieren Zusammenfassung
Beispiel für die CSS Komprimierung .button {   border-left-width: 6px;   border-left-style: solid;   border-left-color: rgb(153,153,153);   border-bottom-width: 2px;   border-bottom-style: solid;   border-bottom-color: rgb(153,153,153);} 216
Verkürzte Schreibweise nutzen .button {   border-left-width: 6px;   border-left-style: solid;   border-left-color: rgb(153,153,153);   border-bottom-width: 2px;   border-bottom-style: solid;   border-bottom-color: rgb(153,153,153);} 216 106 .button {    border-left: 6px solid rgb(153,153,153);    border-bottom: 2px solid rgb(153,153,153);}
HEX- statt RGB-Notation .button {    border-left: 6px solid rgb(153,153,153);    border-bottom: 2px solid rgb(153,153,153);} 106 88 .button {    border-left: 6px solid #999999;    border-bottom: 2px solid #999999;}
Verkürzte Schreibweise (Farben) .button {    border-left: 6px solid #999999;    border-bottom: 2px solid #999999;} 88 82 .button {    border-left: 6px solid #999;    border-bottom: 2px solid #999;}
Zeilenumbrüche & Leerzeichen .button {    border-left: 6px solid #999;    border-bottom: 2px solid #999;} 82 66 .button{border-left: 6px solid #999;border-bottom: 2px solid #999}
Vorher   Nachher .button {   border-left-width: 6px;   border-left-style: solid;   border-left-color: rgb(153,153,153);   border-bottom-width: 2px;   border-bottom-style: solid;   border-bottom-color: rgb(153,153,153);} 216 66 .button{border-left: 6px solid #999;border-bottom: 2px solid #999}
Online Tools (compressor.ebiene.de) 177 .button{border-left-width:6px;border-left-style: solid;border-left-color:rgb(153,153,153);border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:rgb(153,153,153);}
YUI Compressor 153 .button{border-left-width:6px;border-left-style:solid;border-left-color:#999;border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:#999;}
Free CSS Toolbox 152 .button{border-bottom-color:#999;border-bottom-style:solid;border-bottom-width:2px;border-left-color:#999;border-left-style:solid;border-left-width:6px}
Pingates CSS Compressor (tools.pingates.com) 66 .button{border-left:2px solid #999;border-bottom:6px solid #999}
JavaScript komprimieren Was passiert in der Zeit Werkzeuge für die Analyse Analysieren der Inhalte Möglichkeiten beim CSS JavaScript Komprimieren Weitere Optimierung GZIP Komprimierung nutzen Cache aktivieren Zusammenfassung
Das JavaScript Framework „mootools“ hat ca. 72 KByte Kann man „mootools.js“ komprimieren? Werden die „mootools.js“ überhaupt benötigt?
mootools komprimieren? 179 KByte
mootools komprimieren… 179 kByte      JavaScript Minifier      72 kByte nachher
mootools komprimieren… 179 kByte      YUI Compressor      63 kByte nachher
mootools  - YUI statt JSMin 63 kByte  72 kByte
mootools deaktivieren In der index.php des Templates direkt nach <head>
Ladezeit ohne caption.js und mootools.js  Die Seite wird nach 1.8 Sekunden gerendert und ist nach 5 Sekunden fertig geladen.
Nochmals zumVergleichmit und ohne mootools
Weitere Optimierungen Was passiert in der Zeit Werkzeuge für die Analyse Analysieren der Inhalte Möglichkeiten beim CSS JavaScript Komprimieren Weitere Optimierung GZIP Komprimierung nutzen Cache aktivieren Zusammenfassung
Korrekte Reihenfolge von CSS und JavaScript Dateien
Deklaration von JavaScript Funktionen Der Aufruf der Funktion kann vor oder nach der Deklaration der Funktion sein. Probleme (z. B. mit Simple Mooticker) wenn mootools erst zum Schluss geladen werden.
Probleme beim sofortigen ausführen von Skripten Werden Funktionen  nicht über Ereignisse, sondern direkt im Quelltext aufgerufen, so muss die Funktion vorher deklariert worden sein. Daher werden manche Erweiterungen laufen und manche nicht. Testen, testen, testen …
CSS- und JavaScript-Dateien zusammenführen … Alle JavaScripts in eine Datei  (1 statt 2 Requests) Alle CSS-Formatierungen in eine Datei (1 statt 5 Requests) Reduziert die Anforderungen von 7 auf 2
Der Browser hat Schuld … Anzahl gleichzeitiger Verbindungen früher IE 7, Firefox 2 (zwei) Anzahl gleichzeitiger Verbindungen heute IE 8, Firefox 3 (sechs)  Safari, Opera (vier)
Inhalte auf mehrere Server verteilen HTTP 1.1 Spezifikation: Max. zwei gleichzeitige Verbindung zum Server Firefox 2			  zwei Firefox 3			  sechs Opera 9.26:		  vier Opera 10.50:		  16 … !!! Safari 3 Max/Windows:	  vier IE 7:				  zwei  IE 8:			  sechs / zwei Server 1 Server 2 Browser
Inhalte auf mehrere Server verteilen Hauptinhalte:		www.joomla-fulda.de Bilder			img.joomla-fulda.de
Brandbreite hilft … Vernetzung © Mardre - Fotolia.com Cell phone on white © Mellow - Fotolia.com
? Gedanken zum Hosting Der Server des Billighosters ist für 1,45 € im Monat  genau so schnell wie der Server  des Premium Hosters für  79,00 € im Monat
GZIP Komprimierung nutzen Was passiert in der Zeit Werkzeuge für die Analyse Analysieren der Inhalte Möglichkeiten beim CSS JavaScript Komprimieren Weitere Optimierung GZIP Komprimierung nutzen Cache aktivieren Zusammenfassung
mod_deflate ist i.d.R. aktiv
gzip für Joomla! aktivieren
Kommunikation ohne GZIP
Kommunikation mit GZIP
Serverseitige Komprimierung (gzip komprimiert php-Dateien) index.php ohne gzip = 23 kByte. index.php mit gzip = 8 kByte.
css als php einbinden template.css ohne gzip = 12,7 kByte
css als php einbinden template.css              template.php
css als php einbinden
css als php einbinden template.css ohne gzip = 12,7 kByte template.php mit gzip = 3,4 kByte
mootools als php einbinden
mootools als php einbinden Die index.php des Templates entsprechend anpassen
mootools.jsohne gzip = 72 kByte mootools.js.php mit gzip = 20 kByte mootools als php einbinden
Cache aktivieren Was passiert in der Zeit Werkzeuge für die Analyse Analysieren der Inhalte Möglichkeiten beim CSS JavaScript Komprimieren Weitere Optimierung GZIP Komprimierung nutzen Cache aktivieren Zusammenfassung
Schalter im Backend
ETag (entity tag)Server generiert Etag … Inode   +   Filesize   +   Date Last Modification
ETag (entity tag)Erste Anfrage …
ETag (entity tag)Erneute Anfrage …
ETag (entity tag)Prüfen, ob Etag gleich …
ETag (entity tag)304 Not Modified
Alle Techniken kombiniert
CSS – Alle Zusammen … (1/2)css_together.php
CSS – Alle Zusammen … (2/2)css_together.php
Index.php des Templates mootools.js und caption.js deaktiviert Stylesheets rausgeschmissen js_together.php und css_together.php übernehmen
Ergebnis – Erste Anfrage
Ergebnis – Zweite Anfrage
Langsame Verbindung (56k) Ab 28 Sekunden rendern … Nach 49 Sek komplett Ab 11 Sekunden rendern … Nach 22 Sek komplett
Wiederholter Aufruf (56k) Ab 9 Sekunden rendern … Nach 25 Sek komplett Ab 1,4 Sekunden rendern … Nach 4 Sek komplett
.htaccess nutzen Prima Ideen auch mit Hilfe der .htaccess
Zusammenfassung Was passiert in der Zeit Werkzeuge für die Analyse Analysieren der Inhalte Möglichkeiten beim CSS JavaScript Komprimieren Weitere Optimierung GZIP Komprimierung nutzen Cache aktivieren Zusammenfassung
Zusammenfassung (1/3)Requests minimieren Alle Dateien vom selben Server _oder_Dateien auf max. 2-4 Server verteilen Fremde Inhalte erhöhen Zeit um eine weitere Sekunde, können Anz. Download aber erhöhen Anzahl der Serverzugriffe minimieren Alle CSS Dateien in eine Datei zusammenfassen Alle JS Dateien in eine Datei zusammenfassen
Zusammenfassung (2/3)Dateigröße reduzieren Code optimieren CSS-Farben: z. B. Hex Schreibweise statt RGB JavaScript: z. B. Kommentare entfernen CSS und JavaScript auslagern Wir nur einmal geladen GZIP nutzen PHP-Dateien meist kein Problem CSS, JavaScripts als php
Zusammenfassung (3/3)Rendern optimieren Erneutes „Rendern“ vermeiden Höhe und Breite von Bildern und Tabellen angeben. CSS Dateien in den <head> „Rendern“ früher beginnen JavaScripts am Ende (vor dem </body>) einbinden
Vielen Dank Präsentation auf webdevfulda.de Beitrag auf joomla-fulda.de Viel Spaß beim Testen der Möglichkeiten Kai Greinke

Weitere ähnliche Inhalte

Was ist angesagt?

PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-PerformancePHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-Performance
Nico Steiner
 
Einführung in Clean Code mit .NET - Teil 1
Einführung in Clean Code mit .NET - Teil 1Einführung in Clean Code mit .NET - Teil 1
Einführung in Clean Code mit .NET - Teil 1
Gregor Biswanger
 
MongoDB - Riesige Datenmengen schemafrei verwalten
MongoDB - Riesige Datenmengen schemafrei verwaltenMongoDB - Riesige Datenmengen schemafrei verwalten
MongoDB - Riesige Datenmengen schemafrei verwaltenTobias Trelle
 
Varnish PHP Unconference Hamburg 2012
Varnish PHP Unconference Hamburg 2012Varnish PHP Unconference Hamburg 2012
Varnish PHP Unconference Hamburg 2012Florian Holzhauer
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
Sebastian Springer
 
Wordpress Security
Wordpress SecurityWordpress Security
Wordpress Security
Daniel Potthast
 
5 Tweaks für 500 % bessere Performance
5 Tweaks für 500 % bessere Performance5 Tweaks für 500 % bessere Performance
5 Tweaks für 500 % bessere Performance
Jonas Hünig
 
WordPress Professional II
WordPress Professional IIWordPress Professional II
WordPress Professional II
Sebastian Blum
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
Sebastian Springer
 
Let’s groove with Groovy
Let’s groove with GroovyLet’s groove with Groovy
Let’s groove with Groovy
Thorsten Kamann
 
MongoDB: Security-Tipps gegen Hacker
MongoDB: Security-Tipps gegen HackerMongoDB: Security-Tipps gegen Hacker
MongoDB: Security-Tipps gegen Hacker
Gregor Biswanger
 
Webanwendungen mit Apache HBase entwickeln
Webanwendungen mit Apache HBase entwickelnWebanwendungen mit Apache HBase entwickeln
Webanwendungen mit Apache HBase entwickeln
Roman Roelofsen
 
Einführung in Laravel und GulpJS
Einführung in Laravel und GulpJSEinführung in Laravel und GulpJS
Einführung in Laravel und GulpJS
thespazecookie
 
Back to Basics - Webinar 6: Produktivsetzung einer Anwendung
Back to Basics - Webinar 6: Produktivsetzung einer AnwendungBack to Basics - Webinar 6: Produktivsetzung einer Anwendung
Back to Basics - Webinar 6: Produktivsetzung einer Anwendung
MongoDB
 
mongoDB im Einsatz - Grundlagen
mongoDB im Einsatz - GrundlagenmongoDB im Einsatz - Grundlagen
mongoDB im Einsatz - Grundlagen
inovex GmbH
 
Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
Performance Optimierung - Barrierefreiheit beginnt mit LadezeitenPerformance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
Performance Optimierung - Barrierefreiheit beginnt mit LadezeitenDavid Maciejewski
 
Typo3 und Varnish
Typo3 und VarnishTypo3 und Varnish
Typo3 und Varnish
Oliver Thiele
 
WordPress Professional III
WordPress Professional IIIWordPress Professional III
WordPress Professional III
Sebastian Blum
 
Morphia, Spring Data & Co
Morphia, Spring Data & CoMorphia, Spring Data & Co
Morphia, Spring Data & CoTobias Trelle
 

Was ist angesagt? (20)

PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-PerformancePHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-Performance
 
Einführung in Clean Code mit .NET - Teil 1
Einführung in Clean Code mit .NET - Teil 1Einführung in Clean Code mit .NET - Teil 1
Einführung in Clean Code mit .NET - Teil 1
 
MongoDB - Riesige Datenmengen schemafrei verwalten
MongoDB - Riesige Datenmengen schemafrei verwaltenMongoDB - Riesige Datenmengen schemafrei verwalten
MongoDB - Riesige Datenmengen schemafrei verwalten
 
Varnish PHP Unconference Hamburg 2012
Varnish PHP Unconference Hamburg 2012Varnish PHP Unconference Hamburg 2012
Varnish PHP Unconference Hamburg 2012
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
 
Wordpress Security
Wordpress SecurityWordpress Security
Wordpress Security
 
5 Tweaks für 500 % bessere Performance
5 Tweaks für 500 % bessere Performance5 Tweaks für 500 % bessere Performance
5 Tweaks für 500 % bessere Performance
 
WordPress Professional II
WordPress Professional IIWordPress Professional II
WordPress Professional II
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
 
Let’s groove with Groovy
Let’s groove with GroovyLet’s groove with Groovy
Let’s groove with Groovy
 
MongoDB: Security-Tipps gegen Hacker
MongoDB: Security-Tipps gegen HackerMongoDB: Security-Tipps gegen Hacker
MongoDB: Security-Tipps gegen Hacker
 
Webanwendungen mit Apache HBase entwickeln
Webanwendungen mit Apache HBase entwickelnWebanwendungen mit Apache HBase entwickeln
Webanwendungen mit Apache HBase entwickeln
 
Einführung in Laravel und GulpJS
Einführung in Laravel und GulpJSEinführung in Laravel und GulpJS
Einführung in Laravel und GulpJS
 
Back to Basics - Webinar 6: Produktivsetzung einer Anwendung
Back to Basics - Webinar 6: Produktivsetzung einer AnwendungBack to Basics - Webinar 6: Produktivsetzung einer Anwendung
Back to Basics - Webinar 6: Produktivsetzung einer Anwendung
 
mongoDB im Einsatz - Grundlagen
mongoDB im Einsatz - GrundlagenmongoDB im Einsatz - Grundlagen
mongoDB im Einsatz - Grundlagen
 
Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
Performance Optimierung - Barrierefreiheit beginnt mit LadezeitenPerformance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
 
Typo3 und Varnish
Typo3 und VarnishTypo3 und Varnish
Typo3 und Varnish
 
WordPress Professional III
WordPress Professional IIIWordPress Professional III
WordPress Professional III
 
Cache me if you can
Cache me if you canCache me if you can
Cache me if you can
 
Morphia, Spring Data & Co
Morphia, Spring Data & CoMorphia, Spring Data & Co
Morphia, Spring Data & Co
 

Andere mochten auch

ACC-before & after pics
ACC-before & after picsACC-before & after pics
ACC-before & after pics
Bill Montague
 
Stuttgart
StuttgartStuttgart
Stuttgart
marinapietra
 
Extreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI CompressorExtreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI Compressor
Nicholas Zakas
 
Basics of Compressor
Basics of CompressorBasics of Compressor
Basics of Compressor
SLA1987
 
Compressor And Compressed Air Systems
Compressor And Compressed Air SystemsCompressor And Compressed Air Systems
Compressor And Compressed Air Systems
Saurabh Jain
 
Compressor
CompressorCompressor
Compressor
Kushal Navandar
 
Romeo & juliet themes lesson
Romeo & juliet themes lessonRomeo & juliet themes lesson
Romeo & juliet themes lesson
Kathy Strelow
 
Water Chilled Airconditioning
Water Chilled AirconditioningWater Chilled Airconditioning
Water Chilled Airconditioning
Aljon Altiche
 
Fate of pyruvate - A quick review
Fate of pyruvate - A quick reviewFate of pyruvate - A quick review
Fate of pyruvate - A quick review
Namrata Chhabra
 
WordPress State of the Word 2012
WordPress State of the Word 2012WordPress State of the Word 2012
WordPress State of the Word 2012
photomatt
 
Civilizaciones Precolombinas Aztecas Mayas E Incas
Civilizaciones Precolombinas   Aztecas Mayas E IncasCivilizaciones Precolombinas   Aztecas Mayas E Incas
Civilizaciones Precolombinas Aztecas Mayas E Incas
C.R.A
 
Bermuda Dreieck7
Bermuda Dreieck7Bermuda Dreieck7
Bermuda Dreieck7Erasmus+
 
Writing Skills (Written Communication)
Writing Skills (Written Communication)Writing Skills (Written Communication)
Writing Skills (Written Communication)
Mudasir Khan
 
Industrial Air Compressors, Air Compressor Manufacturers Ahmedabad
Industrial Air Compressors, Air Compressor Manufacturers AhmedabadIndustrial Air Compressors, Air Compressor Manufacturers Ahmedabad
Industrial Air Compressors, Air Compressor Manufacturers Ahmedabad
Airtech Engineers
 
Intellectual Property Rights
Intellectual Property RightsIntellectual Property Rights
Intellectual Property Rights
harshhanu
 
Atlas copco nutzen instandhaltung 2011
Atlas copco nutzen instandhaltung 2011Atlas copco nutzen instandhaltung 2011
Atlas copco nutzen instandhaltung 2011
Marketing CTS
 
Atlas copco nutzen produkte service instandhaltung 2011
Atlas copco nutzen produkte service instandhaltung 2011Atlas copco nutzen produkte service instandhaltung 2011
Atlas copco nutzen produkte service instandhaltung 2011
Marketing CTS
 
Thermal power plant
Thermal power plantThermal power plant
Thermal power plant
Shikhar Sodhani
 
The Ultimate Guide to Creating Visually Appealing Content
The Ultimate Guide to Creating Visually Appealing ContentThe Ultimate Guide to Creating Visually Appealing Content
The Ultimate Guide to Creating Visually Appealing Content
Neil Patel
 

Andere mochten auch (20)

ACC-before & after pics
ACC-before & after picsACC-before & after pics
ACC-before & after pics
 
Stuttgart
StuttgartStuttgart
Stuttgart
 
Fate zero
Fate zeroFate zero
Fate zero
 
Extreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI CompressorExtreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI Compressor
 
Basics of Compressor
Basics of CompressorBasics of Compressor
Basics of Compressor
 
Compressor And Compressed Air Systems
Compressor And Compressed Air SystemsCompressor And Compressed Air Systems
Compressor And Compressed Air Systems
 
Compressor
CompressorCompressor
Compressor
 
Romeo & juliet themes lesson
Romeo & juliet themes lessonRomeo & juliet themes lesson
Romeo & juliet themes lesson
 
Water Chilled Airconditioning
Water Chilled AirconditioningWater Chilled Airconditioning
Water Chilled Airconditioning
 
Fate of pyruvate - A quick review
Fate of pyruvate - A quick reviewFate of pyruvate - A quick review
Fate of pyruvate - A quick review
 
WordPress State of the Word 2012
WordPress State of the Word 2012WordPress State of the Word 2012
WordPress State of the Word 2012
 
Civilizaciones Precolombinas Aztecas Mayas E Incas
Civilizaciones Precolombinas   Aztecas Mayas E IncasCivilizaciones Precolombinas   Aztecas Mayas E Incas
Civilizaciones Precolombinas Aztecas Mayas E Incas
 
Bermuda Dreieck7
Bermuda Dreieck7Bermuda Dreieck7
Bermuda Dreieck7
 
Writing Skills (Written Communication)
Writing Skills (Written Communication)Writing Skills (Written Communication)
Writing Skills (Written Communication)
 
Industrial Air Compressors, Air Compressor Manufacturers Ahmedabad
Industrial Air Compressors, Air Compressor Manufacturers AhmedabadIndustrial Air Compressors, Air Compressor Manufacturers Ahmedabad
Industrial Air Compressors, Air Compressor Manufacturers Ahmedabad
 
Intellectual Property Rights
Intellectual Property RightsIntellectual Property Rights
Intellectual Property Rights
 
Atlas copco nutzen instandhaltung 2011
Atlas copco nutzen instandhaltung 2011Atlas copco nutzen instandhaltung 2011
Atlas copco nutzen instandhaltung 2011
 
Atlas copco nutzen produkte service instandhaltung 2011
Atlas copco nutzen produkte service instandhaltung 2011Atlas copco nutzen produkte service instandhaltung 2011
Atlas copco nutzen produkte service instandhaltung 2011
 
Thermal power plant
Thermal power plantThermal power plant
Thermal power plant
 
The Ultimate Guide to Creating Visually Appealing Content
The Ultimate Guide to Creating Visually Appealing ContentThe Ultimate Guide to Creating Visually Appealing Content
The Ultimate Guide to Creating Visually Appealing Content
 

Ähnlich wie Ladezeiten Verbessern - Css Und JavaScript Komprimieren

Frontend Performance
Frontend PerformanceFrontend Performance
Frontend Performance
Nico Steiner
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
Bastian Grimm
 
Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015
Bastian Grimm
 
Website Optimierungen
Website OptimierungenWebsite Optimierungen
Website Optimierungen
guest5d1fb2
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
Frank Kleine
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
Nico Steiner
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
Bastian Feder
 
Debugging und Profiling
Debugging und ProfilingDebugging und Profiling
Debugging und Profiling
Sebastian Springer
 
Developing UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und ArgumenteDeveloping UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und Argumente
Developing UXD
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
Alexander Schmidt
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Gregor Biswanger
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
Sebastian Springer
 
Neuerungen in TypoScript in TYPO3 Version 4.7
Neuerungen in TypoScript in TYPO3 Version 4.7Neuerungen in TypoScript in TYPO3 Version 4.7
Neuerungen in TypoScript in TYPO3 Version 4.7
Steffen Ritter
 
Performance durch Caching
Performance durch CachingPerformance durch Caching
Performance durch Caching
AOE
 
Performance durch Caching
Performance durch CachingPerformance durch Caching
Performance durch Caching
AOE
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
Noël Bossart
 
JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...
JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...
JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...
Artur Kosch
 
Campixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extremeCampixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extreme
Alexander Merkel
 
HTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich istHTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich ist
Renate Hermanns
 
Fanstatic pycon.de 2012
Fanstatic pycon.de 2012Fanstatic pycon.de 2012
Fanstatic pycon.de 2012Daniel Havlik
 

Ähnlich wie Ladezeiten Verbessern - Css Und JavaScript Komprimieren (20)

Frontend Performance
Frontend PerformanceFrontend Performance
Frontend Performance
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
 
Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015
 
Website Optimierungen
Website OptimierungenWebsite Optimierungen
Website Optimierungen
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
 
Debugging und Profiling
Debugging und ProfilingDebugging und Profiling
Debugging und Profiling
 
Developing UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und ArgumenteDeveloping UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und Argumente
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 
Neuerungen in TypoScript in TYPO3 Version 4.7
Neuerungen in TypoScript in TYPO3 Version 4.7Neuerungen in TypoScript in TYPO3 Version 4.7
Neuerungen in TypoScript in TYPO3 Version 4.7
 
Performance durch Caching
Performance durch CachingPerformance durch Caching
Performance durch Caching
 
Performance durch Caching
Performance durch CachingPerformance durch Caching
Performance durch Caching
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...
JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...
JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...
 
Campixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extremeCampixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extreme
 
HTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich istHTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich ist
 
Fanstatic pycon.de 2012
Fanstatic pycon.de 2012Fanstatic pycon.de 2012
Fanstatic pycon.de 2012
 

Ladezeiten Verbessern - Css Und JavaScript Komprimieren

  • 1. Ladezeiten verbessern CSS und JavaScript komprimieren Kai Greinke pageload time tacho 3d © vege – Fotolia.com
  • 2. Auf die Plätze …, Fertig … URL eingeben  ENTER  Warten
  • 3. Was passiert in der Zeit Was passiert in der Zeit Werkzeuge für die Analyse Analysieren der Inhalte Möglichkeiten beim CSS JavaScript Komprimieren Weitere Optimierung GZIP Komprimierung nutzen Cache aktivieren Zusammenfassung
  • 4. Was passiert in der Zeit … HTTP/1.0 200 OK Date: Fri, 15 Jun 2009 16:04:22 GMT Content-Language: de Content-Type: text/html;charset=utf-8 <HTML>…</HTML>
  • 5. Browser verarbeitet Inhalte … <title> gesetzt und favicon dargestellt
  • 6. Browser verarbeitet Inhalte … Es folgen die JavaScript Dateien im Quellcode … der Browser fordert die Dateien sofort an …
  • 7. Browser verarbeitet Inhalte … Dann kommen die CSS Dateien … der Browser fordert auch diese an …
  • 8. Browser verarbeitet Inhalte … Der <body> beginnt … der Browser könnte loslegen …
  • 9. Wie viel Zeit ist verstrichen? Quelle: www.webpagetest.org Der Browser könnte loslegen, wenn schon alle Dateien da wären!
  • 10. Werkzeuge für die Analyse Was passiert in der Zeit Werkzeuge für die Analyse Analysieren der Inhalte Möglichkeiten beim CSS JavaScript Komprimieren Weitere Optimierung GZIP Komprimierung nutzen Cache aktivieren Zusammenfassung
  • 11. Online Tools z. B. www.webpagetest.org Werkzeuge für die Analyse
  • 12. Werkzeuge für die Analyse Firefox Add-on Firebug
  • 13. Werkzeuge für die Analyse Firefox Add-on YSlow
  • 14. Werkzeuge für die Analyse Google Page Speed Add-On für den Firefox
  • 15. Werkzeuge für die Analyse Sniffer z. B. Wireshark
  • 16. Analysieren der Inhalte Was passiert in der Zeit Werkzeuge für die Analyse Analysieren der Inhalte Möglichkeiten beim CSS JavaScript Komprimieren Weitere Optimierung GZIP Komprimierung nutzen Cache aktivieren Zusammenfassung
  • 17. Wo kann man optimieren? Quelle: www.webpagetest.org Nach 6 Sekunden beginnt der Browser die Seite zu rendern (letzt CSS / JS Datei). Nach 11,8 Sekunden ist die Seite fertig geladen. Test mit einer 1.5 Mbit/s aDSL Leitung in den USA … Erster Aufruf
  • 18. Analysieren der Inhalte Browser … wartet HTML CSS JavaScript Browser … rendert Bilder (in- und extern) Audio / Video RSS (fremde Inhalte) <imgsrc=“images/bild.jpg“ width=“100“ height=“
  • 19. Möglichkeiten beim CSS Was passiert in der Zeit Werkzeuge für die Analyse Analysieren der Inhalte Möglichkeiten beim CSS JavaScript Komprimieren Weitere Optimierung GZIP Komprimierung nutzen Cache aktivieren Zusammenfassung
  • 20. Beispiel für die CSS Komprimierung .button {   border-left-width: 6px;   border-left-style: solid;   border-left-color: rgb(153,153,153);   border-bottom-width: 2px;   border-bottom-style: solid;   border-bottom-color: rgb(153,153,153);} 216
  • 21. Verkürzte Schreibweise nutzen .button {   border-left-width: 6px;   border-left-style: solid;   border-left-color: rgb(153,153,153);   border-bottom-width: 2px;   border-bottom-style: solid;   border-bottom-color: rgb(153,153,153);} 216 106 .button {    border-left: 6px solid rgb(153,153,153);    border-bottom: 2px solid rgb(153,153,153);}
  • 22. HEX- statt RGB-Notation .button {    border-left: 6px solid rgb(153,153,153);    border-bottom: 2px solid rgb(153,153,153);} 106 88 .button {    border-left: 6px solid #999999;    border-bottom: 2px solid #999999;}
  • 23. Verkürzte Schreibweise (Farben) .button {    border-left: 6px solid #999999;    border-bottom: 2px solid #999999;} 88 82 .button {    border-left: 6px solid #999;    border-bottom: 2px solid #999;}
  • 24. Zeilenumbrüche & Leerzeichen .button {    border-left: 6px solid #999;    border-bottom: 2px solid #999;} 82 66 .button{border-left: 6px solid #999;border-bottom: 2px solid #999}
  • 25. Vorher  Nachher .button {   border-left-width: 6px;   border-left-style: solid;   border-left-color: rgb(153,153,153);   border-bottom-width: 2px;   border-bottom-style: solid;   border-bottom-color: rgb(153,153,153);} 216 66 .button{border-left: 6px solid #999;border-bottom: 2px solid #999}
  • 26. Online Tools (compressor.ebiene.de) 177 .button{border-left-width:6px;border-left-style: solid;border-left-color:rgb(153,153,153);border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:rgb(153,153,153);}
  • 27. YUI Compressor 153 .button{border-left-width:6px;border-left-style:solid;border-left-color:#999;border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:#999;}
  • 28. Free CSS Toolbox 152 .button{border-bottom-color:#999;border-bottom-style:solid;border-bottom-width:2px;border-left-color:#999;border-left-style:solid;border-left-width:6px}
  • 29. Pingates CSS Compressor (tools.pingates.com) 66 .button{border-left:2px solid #999;border-bottom:6px solid #999}
  • 30. JavaScript komprimieren Was passiert in der Zeit Werkzeuge für die Analyse Analysieren der Inhalte Möglichkeiten beim CSS JavaScript Komprimieren Weitere Optimierung GZIP Komprimierung nutzen Cache aktivieren Zusammenfassung
  • 31. Das JavaScript Framework „mootools“ hat ca. 72 KByte Kann man „mootools.js“ komprimieren? Werden die „mootools.js“ überhaupt benötigt?
  • 33. mootools komprimieren… 179 kByte  JavaScript Minifier  72 kByte nachher
  • 34. mootools komprimieren… 179 kByte  YUI Compressor  63 kByte nachher
  • 35. mootools - YUI statt JSMin 63 kByte  72 kByte
  • 36. mootools deaktivieren In der index.php des Templates direkt nach <head>
  • 37. Ladezeit ohne caption.js und mootools.js Die Seite wird nach 1.8 Sekunden gerendert und ist nach 5 Sekunden fertig geladen.
  • 39. Weitere Optimierungen Was passiert in der Zeit Werkzeuge für die Analyse Analysieren der Inhalte Möglichkeiten beim CSS JavaScript Komprimieren Weitere Optimierung GZIP Komprimierung nutzen Cache aktivieren Zusammenfassung
  • 40. Korrekte Reihenfolge von CSS und JavaScript Dateien
  • 41. Deklaration von JavaScript Funktionen Der Aufruf der Funktion kann vor oder nach der Deklaration der Funktion sein. Probleme (z. B. mit Simple Mooticker) wenn mootools erst zum Schluss geladen werden.
  • 42. Probleme beim sofortigen ausführen von Skripten Werden Funktionen nicht über Ereignisse, sondern direkt im Quelltext aufgerufen, so muss die Funktion vorher deklariert worden sein. Daher werden manche Erweiterungen laufen und manche nicht. Testen, testen, testen …
  • 43. CSS- und JavaScript-Dateien zusammenführen … Alle JavaScripts in eine Datei (1 statt 2 Requests) Alle CSS-Formatierungen in eine Datei (1 statt 5 Requests) Reduziert die Anforderungen von 7 auf 2
  • 44. Der Browser hat Schuld … Anzahl gleichzeitiger Verbindungen früher IE 7, Firefox 2 (zwei) Anzahl gleichzeitiger Verbindungen heute IE 8, Firefox 3 (sechs) Safari, Opera (vier)
  • 45. Inhalte auf mehrere Server verteilen HTTP 1.1 Spezifikation: Max. zwei gleichzeitige Verbindung zum Server Firefox 2 zwei Firefox 3 sechs Opera 9.26: vier Opera 10.50: 16 … !!! Safari 3 Max/Windows: vier IE 7: zwei IE 8: sechs / zwei Server 1 Server 2 Browser
  • 46. Inhalte auf mehrere Server verteilen Hauptinhalte: www.joomla-fulda.de Bilder img.joomla-fulda.de
  • 47. Brandbreite hilft … Vernetzung © Mardre - Fotolia.com Cell phone on white © Mellow - Fotolia.com
  • 48. ? Gedanken zum Hosting Der Server des Billighosters ist für 1,45 € im Monat genau so schnell wie der Server des Premium Hosters für 79,00 € im Monat
  • 49. GZIP Komprimierung nutzen Was passiert in der Zeit Werkzeuge für die Analyse Analysieren der Inhalte Möglichkeiten beim CSS JavaScript Komprimieren Weitere Optimierung GZIP Komprimierung nutzen Cache aktivieren Zusammenfassung
  • 51. gzip für Joomla! aktivieren
  • 54. Serverseitige Komprimierung (gzip komprimiert php-Dateien) index.php ohne gzip = 23 kByte. index.php mit gzip = 8 kByte.
  • 55. css als php einbinden template.css ohne gzip = 12,7 kByte
  • 56. css als php einbinden template.css  template.php
  • 57. css als php einbinden
  • 58. css als php einbinden template.css ohne gzip = 12,7 kByte template.php mit gzip = 3,4 kByte
  • 59. mootools als php einbinden
  • 60. mootools als php einbinden Die index.php des Templates entsprechend anpassen
  • 61. mootools.jsohne gzip = 72 kByte mootools.js.php mit gzip = 20 kByte mootools als php einbinden
  • 62. Cache aktivieren Was passiert in der Zeit Werkzeuge für die Analyse Analysieren der Inhalte Möglichkeiten beim CSS JavaScript Komprimieren Weitere Optimierung GZIP Komprimierung nutzen Cache aktivieren Zusammenfassung
  • 64. ETag (entity tag)Server generiert Etag … Inode + Filesize + Date Last Modification
  • 65. ETag (entity tag)Erste Anfrage …
  • 67. ETag (entity tag)Prüfen, ob Etag gleich …
  • 68. ETag (entity tag)304 Not Modified
  • 70. CSS – Alle Zusammen … (1/2)css_together.php
  • 71. CSS – Alle Zusammen … (2/2)css_together.php
  • 72. Index.php des Templates mootools.js und caption.js deaktiviert Stylesheets rausgeschmissen js_together.php und css_together.php übernehmen
  • 75. Langsame Verbindung (56k) Ab 28 Sekunden rendern … Nach 49 Sek komplett Ab 11 Sekunden rendern … Nach 22 Sek komplett
  • 76. Wiederholter Aufruf (56k) Ab 9 Sekunden rendern … Nach 25 Sek komplett Ab 1,4 Sekunden rendern … Nach 4 Sek komplett
  • 77. .htaccess nutzen Prima Ideen auch mit Hilfe der .htaccess
  • 78. Zusammenfassung Was passiert in der Zeit Werkzeuge für die Analyse Analysieren der Inhalte Möglichkeiten beim CSS JavaScript Komprimieren Weitere Optimierung GZIP Komprimierung nutzen Cache aktivieren Zusammenfassung
  • 79. Zusammenfassung (1/3)Requests minimieren Alle Dateien vom selben Server _oder_Dateien auf max. 2-4 Server verteilen Fremde Inhalte erhöhen Zeit um eine weitere Sekunde, können Anz. Download aber erhöhen Anzahl der Serverzugriffe minimieren Alle CSS Dateien in eine Datei zusammenfassen Alle JS Dateien in eine Datei zusammenfassen
  • 80. Zusammenfassung (2/3)Dateigröße reduzieren Code optimieren CSS-Farben: z. B. Hex Schreibweise statt RGB JavaScript: z. B. Kommentare entfernen CSS und JavaScript auslagern Wir nur einmal geladen GZIP nutzen PHP-Dateien meist kein Problem CSS, JavaScripts als php
  • 81. Zusammenfassung (3/3)Rendern optimieren Erneutes „Rendern“ vermeiden Höhe und Breite von Bildern und Tabellen angeben. CSS Dateien in den <head> „Rendern“ früher beginnen JavaScripts am Ende (vor dem </body>) einbinden
  • 82. Vielen Dank Präsentation auf webdevfulda.de Beitrag auf joomla-fulda.de Viel Spaß beim Testen der Möglichkeiten Kai Greinke