Ladezeiten deiner Website optimieren

Viele Scripts, Grafiken, und nicht optimierte Stylesheets sorgen für eine große Datenflut. Selbst in Zeiten von DSL & Co. gehen noch viele Menschen mit einer langsamen Internetverbindung online, insbesondere auch Mobil. Schnelle Ladezeiten helfen allen. Daher solltest du auf jeden Fall die Ladezeiten deiner Website optimieren.

Eine einzelne Website sollte mit all ihren Elementen möglichst 100 KB nicht überschreiten. Dass dies nicht immer möglich ist, ist klar. Dennoch gibt es viele Tricks, wie man die Ladezeiten seiner Webseite optimieren kann.

In diesem Artikel zeige ich ein paar Ansätze, wie du die Ladezeiten deiner Webseite optimieren kannst.

 

Anzahl der Anfragen reduzieren

Die Anzahl der Anfragen an einen (oder mehrere) Webserver sind für Ladezeit ein großer Faktor. Ein Browser kann immer nur eine bestimmte Anzahl von Anfragen gleichzeitig abarbeiten. Jedes Stylesheet, jedes JavaScript, jede Grafik erhöht dabei die Anzahl der Anfragen. Genauer gesagt: Pro Element eine Anfrage. Jede Anfrage kostet eine gewisse Zeit. Antwortet der Server nur langsam, erhöht das die Wartezeit erneut. Gerade in diesem Bereich besteht ein großes Potential zur Optimierung.

 

CSS und JavaScript

Wenn du also diverse Scripts oder Stylesheets auf deiner Website einsetzt, solltest du dir überlegen, diese zusammenzufassen. Eigentlich kannst du dabei alle .js-Dateien und alle .css-Dateien in jeweils eine einzige Datei kopieren. Du musst nur auf die Reihenfolge achten, in der die Scripts aufgerufen werden.

Angenommen, du hast drei CSS-Dateien, die du für die Gestaltung deiner Website einsetzt. Eine für das Layout, eine für das Design und eine dritte Datei für eigenen CSS-Code. So solltest du die Layout-Befehle an erster, die Design-Angaben an zweiter und die eigenen CSS-Angaben an letzter Stelle kopieren. Hintergrund: Der Browser arbeitet die Befehle von oben nach unten ab.

Bei JavaScript verhält sich das ähnlich. Hier musst du schauen, welche Scripts als erstes auszuführen sind. Diese müssen auch als erstes in der Datei stehen.

 

Grafiken

Bei Grafiken und Bildern kannst du die Anzahl der Anfragen ebenfalls reduzieren. Hier könntest du Image Maps oder Image-Sprites einsetzen, sofern es sich anbietet. Dadurch muss der Browser nur eine Datei laden, anstelle von vielen einzelnen.

 

 

Tabellen

Eine Website, die auf komplizierte Tabellen-Konstrukte aufbaut, braucht in der Regel länger zum laden als eine Webseite ohne solche Konstruktionen. Dazu kommt, dass ein Browser den Inhalt einer Tabelle erst dann anzeigt, wenn diese vollständig geladen ist.

Für das Layout einer Webseite empfiehlt sich daher der Einsatz von DIV-Layern anstelle von Tabellen. Browser warten nicht erst darauf, dass die komplette Website geladen ist, bevor sie DIV-Layer anzeigen. Dies verhilft außerdem zu mehr Barrierefreiheit.

Darüber hinaus sind Tabellen als Design-Element heutzutage ohnehin verpönt.

 

Überflüssige HTML Tags

WYSIWYG-Editoren oder CMS können unnötige Tags in den Quellcode deiner Website einbauen. Gerade einige WYSIWYG-Editoren sind hierfür bekannt. Problematisch wird es auch dann, wenn du deine Website in einem nicht speziell dafür vorgesehenen Programm erzeugst. Hier sei bspw. Microsoft Word aus dem Paket Office benannt.

Diese überflüssigen Tags sorgen nicht nur für mehr Datenmüll in deiner Website. Sie bewirken unter Umständen dadurch höhere Ladezeiten. Oder sie erzeugen HTML-Code, der nicht valide ist. Valider HTML-Code ist wichtig, weil dies für Barrierefreiheit und Kompatibilität sorgt.

Die beste Methode ist, entweder Programme einzusetzen, die validen Quellcode erstellen, oder aber die Website von Hand anzulegen. Letzteres ist bei großen Webseiten hingegen nur schwer möglich. Zum Glück erstellen die meisten CMS heute validen HTML-Quellcode.

 

Anbieter von kostenlosem Webspace

Anbieter von kostenlosem Webspace hosten oftmals hunderte Kunden auf einem einzigen Webserver. Dies hat zur Folge, dass du die Ressourcen eines Servers nicht für dich alleine nutzen kannst. Du musst sie hingegen mit allen Nutzern des Servers teilen. Je nachdem, welche Webseiten zusammen mit deiner auf einem Server liegen, kann dies zu Überlastungen führen. Darunter leidet am Ende auch deine Website.

Auch günstige Anbieter von Webspace verfahren oftmals nach den gleichen Prinzipien. Jedoch hast du hier den Vorteil, dass diese die zur Verfügung stehenden Ressourcen meist optimal verwalten. So sollte es nicht zu größeren Leistungseinbrüchen kommen.

Du solltest dir daher überlegen, ob nicht ein paar Euro mehr im Monat gut investiert wären. Insbesondere dann, wenn du eine professionelle Website erstellen möchtest. In diesem Fall solltest du Abstand von kostenlosem Webspace nehmen.

 

Fremde Inhalte

Als „fremder Inhalt“ bezeichnet man die Dinge, die du in deine Webseite einbaust, dabei jedoch nicht auf deinem Server liegen. Dies kann zum Beispiel ein externes Script sein. Es kann vorkommen, je nach Einstellung des Browsers, dass Besucher erst sehr lange warten müssen bis der Browser etwas anzeigt. Meist passiert dies, wenn ein externer Inhalt nicht aufrufbar sind. Der Browser versucht in der vorgegebenen Zeit eine Verbindung zu diesem Inhalt aufzubauen. Ist der Verbindungsaufbau nach einer bestimmten Zeit nicht erfolgreich, wird dieser dann abgebrochen.

 

Java und Flash

Gerade Java-Applets verlängern die Ladezeit einer Website extrem. Du solltest daher genau prüfen, ob der Einsatz von Java oder Flash auf deiner Webseite wirklich nötig ist. Bedenke beim Einsatz von Scripts und Flash auch, dass die Suchmaschinen-Crawler diese in der Regel nicht indexieren können. Wenn deine Webseite nur aus Scripts besteht, können Suchmaschinen sie womöglich gar nicht im Index aufnehmen. Es gibt schließlich keine verwertbaren Inhalte auf deiner Website.

Möchtest du Flash einsetzen solltest du ohnehin bedenken, ob du nicht lieber etwas anderes machen möchtet. Immer mehr Browser blockieren Flash bzw. stellen die Unterstützung dafür ein. Setze anstelle von Flash lieber HTML 5 ein. Damit lassen sich ähnliche Effekte erzeugen.

 

Bilder

Die Bilder einer Website nehmen meist den größten Teil der Datenmenge in Anspruch. Daher solltest du Bilder nie unkomprimiert ins Netz stellen. Als JPG gespeichert, sind Bilder wesentlich kleiner. Du kannst ebenso das PNG-Format verwenden. Gegenüber JPG hat PNG den Vorteil, dass es ähnlich niedrige Dateigrößen erreichen kann. Der Verlust von Qualität durch die Komprimierung der Grafik fällt dafür nicht ganz so hoch aus, wie im JPG-Format. Hier lohnt sich aber ein Vergleich, denn manchmal ist das eine, manchmal das andere Format besser.

Ein weiterer Fehler ist, große Bilder lediglich mit  width="..." und height="..." klein darzustellen. An der Datei ändert sich dadurch nichts, das Bild wirkt nur optisch kleiner. Die Größe bleibt also gleich. Mache von großen Grafiken daher lieber kleine Thumbnails. Diese kannst du mit der Original-Grafik verlinken. So kannst du ein Thumbnail per Mausklick in Originalgröße dargestellen.

Die Angaben zur Breite und Höhe von Bildern solltest du dennoch immer machen. Das ist ohnehin vorgeschrieben, je nachdem welchen HTML-Standard du verwendest. Der Browser kann somit Platzhalter der Bilder anzeigen, wenn diese noch nicht geladen sind. Somit verhinderst du „springenden Text“. Deine Besucher wissen überdies, dass zu deinem Artikel auch Grafiken gehören.

Prüfe deine Website ebenso auf überflüssige Bilder. Ist ein roter Kreis als grafisches Element im Menü wirklich sinnvoll, oder kann man dies hingegen auch mit CSS erzeugen? Manchmal kann man so einige Bilder durch CSS ersetzen. Setzt du darüber hinaus die FontAwesome-Bibliothek ein? Falls ja, und du sie sowieso einbindest, kannst du hiermit ggf. auch Bilder sparen.

 

Fazit

Prüfe deine Website auf überflüssige Grafiken und Scripts. Einen roten Kreis kannst du bspw. auch mit CSS erzeugen, dafür brauchst du keine Grafik. Die Uhrzeit hat jeder PC-Benutzer zudem in seiner Taskleiste stehen. Das Datum haben die meisten ebenso im Kopf. Bedenke, dass du mit unnötigen Scripts und schlecht optimierten Grafiken eine Menge Traffic erzeugst. Das ist einfach unnötig.

Google bietet dir jedoch mit dem Tool PageSpeed Insights eine Möglichkeit, die Performance der Website zu testen. Ebenso zeigt PageSpeed Insights direkt Vorschläge zur Verbesserung und gibt Tipps zur Umsetzung.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.