16. November 2014 tecker2010

Tutorial – Ladezeit von Webseiten optimieren

Das Thema Ladezeiten und Performance von Webseiten beschäftigt mich schon eine Weile, aber die nötige Inspiration dahingehend auch einmal etwas zu unternehmen und mich tiefer damit zu befassen, bekam ich erst beim Hören der aktuellen OnlineRadar Folge „Ladezeiten Optimierung von Webseiten“ (sehr zu empfehlen). Ich habe einige Maßnahmen durchgeführt und die Ladezeit dadurch nicht unwesentlich minimieren können. Was genau ich gemacht habe und wie, will ich hier kurz erläutern. Ich beschränke mich dabei zunächst nur auf die Rubriken, die ich auch optimiert habe.

Wie ist eigentlich meine derzeitige Ladezeit?

Hierzu gibt es neben dem Firefox Addon YSlow und Pagespeed (nur zusammen mit Firebug möglich) auch Online-Tools wie gtmetrix.com, welche keine Registrierung benötigt. Hat man seine Seite analysieren lassen, erhält man eine ausführliche Auswertung seiner Seite. Diese gilt es nun zu verstehen und entsprechend zuoptimieren, sofern einem auch die Möglichkeiten dazu gegeben sind. Mein Ergebnis nach der ersten Auswertung betrug 73% (Pagespeed), also optimierungswürdig.

Was kann ich tun um die Ladezeit zu optimieren?

Nachfolgend will ich die wichtigesten Punkte und die von mir durchgeführten Schritte, welche mich inzwischen immerhin auf 92% bringen, einmal näher erläutern. Im Allgemeinen lässt sich sagen, je weniger Requests beim Laden der Seite ausgeführt werden müssen und je geringer die Datenmenge ist, desto besser.

Reduce DNS lookups

Werden Dateien von unterschiedlichen Hosts eingebunden, so folgt für jede Anfrage zunächst ein DNS Lookup zur Auflösung des Domainnames auf eine IP-Adresse. Ich hatte bspw. Google+ Skripte direkt über „<script type=“text/javascript“ src=“https://apis.google.com/js/plusone.js“></script>“ eingebunden. Dieses habe ich nun vollständig mit in meine lokal zu ladene Javascript-Datei integriert.

Combine external JavaScript / Combine external CSS

Der auf der Webseite verwendete JavaScript Code und CSS-Dateien werden in der Regel im Header eingebunden. Nicht selten sind das mehrere Dateien (z.B. für jQuery, Lytebox, verschiedene Stylesheets oder eigene Javascript-Dateien), welche jeweils einen eigenen Request bedeuten und Zeit kosten. Was hier gegen unternommen werden kann ist offensichtlich. Die Dateien werden in eine einzelne Datei zusammengefasst (bestenfalls je eine Javascript und eine CSS-Datei).

Minify CSS / Minify Javascript / Minify HTML

Ziemlich eindeutig was hier zu tun ist – die Dateigröße der CSS und Javascript Dateien wird durch Verwendung von Zeilenumbrüchen und Leerzeichen zwar übersichtlich aber dennoch aufgebläht. Auf gtmetrix.com bekommt man für beides eine bereits optimierte Version der entsprechenden Datei und kann diese ersetzen. Bei verschiedenen Javascript Bibiliotheken, wie z.B. Lytebox wird i.d.R eine bereits minimierte Version der Form *.min.js mitgeliefert. Gleiches gilt natürlich für die HTML Dateien.

Remove unused CSS

Selbstverständlich sollten nicht benötigte Stylesheets aus der CSS Datei entfernt werden, da diese natürlich unnötige Datenmenge verursachen (Kleinvieh macht auch  Mist).

Enable gzip compression

Die Dateigröße kann mit GZip-Komprimierung auf ca. 25% der ursprünglichen Größe reduziert werden. Die notwendige Konfiguration wird i nder .htaccess Datei vorgenommen.

# ENABLE REWRITING
RewriteEngine On
RewriteBase /

AddEncoding gzip .gz
<filesmatch "\.js\.gz$">
AddType "text/javascript" .gz
</filesmatch>
<filesmatch "\.css\.gz$">
AddType "text/css" .gz
</filesmatch>

# CSS/JS Dateien => GZ
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME} \.(js|css)$
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]

Die einzelnen Dateien auf dem Server müssen schließlich noch komprimiert werden.

gzip -c styles.css > styles.css.gz

Specify image dimensions

Die Angabe von Bild-Dimensionen der Form <img width=“20″ height=“30″ … /> beschleunigen den Aufbau der Seite, da bereits beim Rendern des HTML Codes der genau Platz für das noch zu ladene Bild reserviert wird. Wichtig ist dabei auch, dass die Angabe von width und height nicht für On-The-Fly-Skalierung „missbraucht“ wird, denn dadurch geht wieder Zeit durch den Komprimierungsvorgang verloren. Ist euer Bild 40x40px groß, dann gebt auch entsprechend die Attribute mit height=“40″ und width=“40″ an.

Combine images using CSS sprites

Werden auf der Webseite Icons eingesetzt, sollte man diese in ein einzelnes Bild packen und per CSS mit Anagbe der entsprechenden Position eingebunden (Bsp. für ein Sprite Image Link). Der Vorteil ist offensichtlich – die Anzahl der zu ladenen Icons wird auf ein einzelnes reduziert, das spart Request und Datenmenge. Ein Sprite kann man sich u.a. bei csssprites.com generieren lassen. In der entsprechenden CSS Klasse wird das gewünschte Icon mit „background: url(path/sprite.png) no-repeat 10px 20px“ eingebunden, wobei natürlich die 10 bzw 20px entsprechend der Position angepasst werden müssen.

Optimize images

Bilder im .png oder .jpg sind zwar komprimiert, aber hier lässt doch weit aus mehr rausholen als man denkt. Bei gtmetrix wird einem für alle Images eine optimierte Version zum Download angeboten. Für das bloße Auge ist die Qualität nicht zu unterscheiden.

Leverage browser caching (expiration not specified)

Beim Besuch einer Webseite werden vom Browser sämtliche Dateien, wie JavaScript-, CSS-, Images-Dateien heruntergeladen. Ist für diese Dateien kein „Expiration Date“ (Gültigkeitsdatum) angegeben, geht der Browser beim erneuten Besuch der Webseite davon aus, dass sich diese evtl. geändert haben und lädt sie erneut herunter. Mit der Angabe eines Expire Datums wird festgelegt, wie lange der Browser die Dateien bei einem erneuten Besuch aus dem Cache laden soll, um somit das erneute Laden zu vermeiden.

Das Umsetzen erfolgte wieder mit einer entsprechen Konfiguration in der .htaccess Datei, vorausgesetzt das Modul „mod_expires“ ist vom Apache geladen. Bei mir war es nicht der Fall, also habe ich das Modul in der Apache-Konfiguration hinzugefügt und ihn neugestartet. Anschließend war das Modul geladen (kann auch mit phpinfo() geprüft werden) und be meine .htaccess Datei wie folgt angepasst:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType application/x-javascript "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType image/x-icon "access plus 1 week"
</IfModule>

Was ist ein CDN und lohnt sich der Einsatz?

Ich mit meinem nicht allzu ausgeprägten Fachwissen was CDN’s angeht würde pauschal sagen: Für große Webseites ja, für kleine eher nein. Erst ab einer gewissen Anzahl von Bildern und Dateien die auf der Webseite geladen werden müssen lohnt sich wohl der Aufwand eines CDN’s. Ich habe es trotzdem gemacht 🙂

Hier nur ein paar Erläuterungen dazu.

Was ist ein CDN?

Vielen kein Fremdwort, aber der Vollständigkeit halber sei kurz gesagt, ein Content Distirbution Network ist ein Verbund von performanten Servern auf dem Inhalte ausgelagert und gecached werden, um sie bei Bedarf (dem Laden der Webseite) in sehr kurzer Zeit zurVerfügung stellen zu können. Angeboten wie das u.a. von Amazon Web Services (AWS) mit den Webservices AmazonS3 zum Speichern der Dateien und Amazon CloudFront als CDN.

Was kostet es?

Die Preise laut der Preistabelle von AWS belaufen sich auf $0,120 / GB für die ersten 10TB im MOnat. Also günstig genug um es einfach mal auszuprobieren.

Wie wird es eingerichtet?

Unter http://aws.amazon.com/de/ habe ich mir einen Account eingerichtet und per Telefonpin bestätigt. Ist dieser aktiviert, kann man unter Sicherheitsnachweise bzw. Security Credentials seine Zugangsschlüssel/Accesskeys einsehen. Mit Hilfe der AWS Managment Console habe ich unter Amazon S3 ein neues „Bucket“ angelegt und meine Dateien hochgeladen.

Tip: In den Properties der einzelnen Dateien kann man Metadaten ergänzen. Durch hinzufügen von „Cache-Control“ mit dem entsprechenden Valuekann man das Caching der Dateien angeben (ich habe hier ‚max-age=604800‘ genommen, also 1 Woche Gültigkeit) und sich noch ein paar Extra-Punkte für seine Pagespeed-Note holen.

Anschließend kann unter Amazon CloudeFront in der Management Console dieses Bucket über „Create Distribution“ hinzugefügt werden. Das „Origin-Bucket“ welches ihr anschließend seht nachdem eure Distribution aktiviert ist, entspricht nun der URL wo zukünftig eure Bilder zu finden sind. In meinem Fall ist dasimages.webentwickler24.com.s3.amazonaws.com (mein Bucket trägt also den Namen images.webentwickler24.com). Diese URL + den entsprechenden Dateinamen gebt ihr nun im src-Attribut eurer Images an. Sollte sie nicht geladen werden, sollte ihr die prüfen ob die Leserechte für die einzelenen Dateien auch richtig gesetzt sind. Schaut euch dazu die Permissions in der Management-Console an die für die Bilder gesetzt sind. Wenn hier die Gruppe „Everyone“ keine Leserechte besitzt, könnte es Probleme geben.

Das Thema Ladezeiten und Performance von Webseiten beschäftigt mich schon eine Weile, aber die nötige Inspiration dahingehend auch einmal etwas zu unternehmen und mich tiefer damit zu befassen, bekam ich erst beim Hören der aktuellen OnlineRadar Folge „Ladezeiten Optimierung von Webseiten“ (zu empfehlen). Ich habe einige Maßnahmen durchgeführt und die Ladezeit dadurch nicht unwesentlich minimieren können. Was genau ich gemacht habe und wie, will ich hier kurz erläutern. Ich beschränke mich dabei zunächst nur auf die Rubriken, die ich auch optimiert habe.

Fazit

Ich habe zwar noch nicht alles aus der Seite rausgekitzelt was möglich ist, aber mit den hier beschriebenen Schritten habe ich meine Ladezeit um immerhin ~1.5s verbessert. Schön zu wissen, welche Möglichkeiten man doch hat die bin evtl. garnicht kennt oder einfach nur vergessen hat richtig zu optimieren. Natürlich muss man selbst abwegen ab wann z.B. der Einsatz eines CDN’s lohnt (in meinem Fall wäre es wohl eher nicht der Fall) und welche Schritte wenig Aufwand bedeuten, aber dafür ein hohes Optimierungspotential haben.

Links

Tagged: , ,

Kontakt & Angebot

Webdesign, Webanwendungen oder IT-Beratung - ich helfe Ihnen gern weiter! Nutzen Sie das Kontaktformular für Fragen oder ein kostenloses Angebot.