Ladezeiten Verbessern - Css Und JavaScript Komprimieren

Kai Greinke

Ladezeiten verbessern

page load time

CSS und JavaScript komprimieren

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 …

Browser Webserver

Browser fordert Seite an

GET / HTTP/1.1

1 KByte Server stellt Seite bereit

/…/index.html

Browser verarbeitet Inhalte, fordert weitere Dateien an, rendert die Seite und zeigt sie an.

32 KByte

Server sendet Seite

HTTP/1.0 200 OK

Date: Fri, 15 Jun 2009 16:04:22 GMTContent-Language: deContent-Type: text/html;charset=utf-8

Browser verarbeitet Inhalte …

<title> gesetzt und favicon dargestellt

Es folgen die JavaScript Dateien im Quellcode… der Browser fordert die Dateien sofort an …

Dann kommen die CSS Dateien… der Browser fordert auch diese an …

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

Online Tools

www.webpagetest.org

Firefox Add-on

Firebug

Firefox Add-on

Google Page

Add-On für den Firefox

Sniffer

Wireshark

Analysieren der Inhalte

Wo kann man optimieren?

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

Quelle: www.webpagetest.org

Analysieren der Inhalte

BROWSER … WARTET

HTML CSS JavaScript

BROWSER … RENDERT

Bilder (in- und extern) Audio / Video RSS (fremde Inhalte)

<img src=“images/bild.jpg“ width=“100“ height=“

Möglichkeiten beim CSS

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);}

Verkürzte Schreibweise nutzen

.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);}

.button { border-left: 6px solid #999999; border-bottom: 2px solid #999999;}

Verkürzte Schreibweise (Farben)

Zeilenumbrüche & Leerzeichen

.button{border-left: 6px solid #999;border-bottom: 2px solid #999}

Vorher Nachher

.button{border-left: 6px solid #999;border-bottom: 2px solid #999}

Online Tools (compressor.ebiene.de)

.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

.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

.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)

.button{border-left:2px solid #999;border-bottom:6px solid #999}

JavaScript komprimieren

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

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 …

IE 7, Firefox 2 (zwei)

IE 8, Firefox 3 (sechs) Safari, Opera (vier)

Anzahl gleichzeitiger Verbindungen früher

Anzahl gleichzeitiger Verbindungen heute

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

Browser

Server1

Server2

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

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

template.css template.php

template.css ohne gzip = 12,7 kByte

template.php mit gzip = 3,4 kByte

mootools als php einbinden

Die index.php des Templates entsprechend anpassen

mootools.js ohne gzip = 72 kByte

mootools.js.php mit gzip = 20 kByte

Cache aktivieren

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 deaktiviertStylesheets 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

Wiederholter Aufruf (56k)

Ab 1,4 Sekunden rendern … Nach 4 Sek komplett

.htaccess nutzen

Prima Ideen auch mit Hilfe der .htaccess

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

Ladezeiten Verbessern - Css Und JavaScript Komprimieren

Education

JavaScript Qualitätssicherung

Anforderungsanalsyse - Prototyping mit JavaScript

Innehåll JavaScript - Grundkurs · 2013. 11. 25. · 1 JavaScript - Grundkurs Mahmud Al Hakim mahmud@dynamicos.se Innehåll Introduktion till JavaScript JavaScript i HTML-dokument

JavaScript Handbuch

JavaScript-Grundlagen - eberhart.mediaeberhart.media/pdfs/javascript/1.javascript.pdf · Eberhart 1.javascript.docx 2 JavaScript fand schnell breite Unterstützung durch namhafte

MVC und JavaScript

OpenStreetMap Gebäudevisualisierung mit JavaScript · •HTML5, JavaScript, Canvas - kein WebGL, Java, Flash •vereinfachte Matrixoperationen für räumlichen Effekt •3D Modelle:

Einführung in JavaScript II

JavaScript und Security - JavaScript Days 2013 Berlin

Lean Startup mit JavaScript

JavaScript Grundkurs - DynamicOSdynamicos.se/kurser/javascript/javascript-grundkurs.pdfTitle JavaScript Grundkurs Author Mahmud Al Hakim Created Date 11/25/2013 10:21:48 PM

JavaScript und trotzdem Softwerker

HTML CSS JavaScript & jQuery Prez

Übungsaufgabe - indesign xml scripting and javascript GREP€¦ · InDesign Satzautomation Übersicht JavaScript InDesign Objektmodell InDesign Programmierung InDesign ML Suchen

BBZ ME HKB6.0 Projektm. V 1€¦ · 1.2.1 JavaScript Basics 10 Lekt 1.2.2 Einbinden Flash Banner 10 Lekt 1.2.3 JavaScript in bestehende Webseite integrieren 10 Lekt 1.2.1 JavaScript

Javascript Einfache Ausgabeanweisung Autor: H.Sporenberg JavaScript - Einführung

JavaScript - Einführung 1. Ein Wort zuvordigilib.happy-security.de/files/JavaScript-leichte-einfuehrung.pdf · JavaScript - Einführung 1. Ein Wort zuvor Leider muss ich gestehen,

JavaScript Grundlagen

CSS,Javascript Maya. Javascript-banner Man bindet die Javascript Datei zepto.js in html ein mit den Tag „script“ und mit der Quellen Angabe „src“

Ladezeiten Verbessern - Css Und JavaScript Komprimieren