OnPage’s Eleven Nr. 6 - Dateien (statische Inhalte)

Unser Superhero Stephan hat Dir im letzten Artikel gezeigt, was benutzerdefinierte Felder und Zähler sind und wie man diese effizient nutzt.
Der erste Artikel im neuen Jahr stellt Dir den Report "Dateien - statische Inhalte" vor und zeigt Dir die Wichtigkeit der statischen Inhalte, häufige Fehler und wie Du diese ganz einfach identifizieren kannst.

Was sind statische Dateien?

Im Allgemeinen wird zwischen statischen und dynamischen Inhalten einer Webseite unterschieden. Während dynamische Inhalte vom Webserver via Script generiert werden (z.B. PHP), liegen statische Inhalte als Dateien auf dem Server. Zu den statischen Inhalten zählen beispielsweise Bild-, Javascript- und CSS-Dateien.

Warum ist es wichtig, statische Dateien zu optimieren?

Statische Dateien sind maßgeblich für die Darstellung und die Funktionalität einer Webseite verantwortlich. Hier ein Beispiel: ein Besucher ruft eine Produktdetailseite auf. Nach langer Ladezeit werden auf der Seite jedoch keine Produktbilder anzeigt.

Hier treffen zwei Faktoren zusammen, die beide von statischen Inhalten bestimmt werden: Ladezeit und Erscheinungsbild der Webseite. Beide Faktoren senden potentiell negative Signale an Suchmaschinen und können auch die User-Experience und das Vertrauen des Users in die Webseite negativ beeinflussen.

Daher ist es wichtig, Bild-, Javascript- und CSS-Dateien auf der Webseite korrekt zu integrieren und deren Funktion permanent zu kontrollieren.
Dieser Artikel zeigt wie Du mit unserem "Dateien"-Report die statischen Inhalte Deiner Seite überprüfen kannst. Lange Ladezeiten sowie Funktions- oder Darstellungsfehler kannst Du damit ebenfalls aktiv vermeiden und den Status der Seite dauerhaft überwachen.

Wo findet man die Auswertung?

Die Auswertung der statischen Inhalte findest Du im Modul Zoom im Report "Dateien (statische Inhalte)". Im Report werden Bild-, Javascript- und CSS-Dateien der Webseite analysiert und ausgewertet.

Bilder

Bedeutung für Webseiten

Die korrekte Anzeige der Bilder auf einer Webseite kann für einen Besucher durchaus entscheidend sein. Wenn Bilder auf einer Webseite nicht geladen werden, macht dies keinen professionellen Eindruck. Darüber hinaus kann auch schon ein einziges nicht angezeigtes Bild ausreichen, um die Conversion-Rate zu senken. Klassisches Beispiel für einen Conversion-Rate Einbruch ist, wenn ein Besucher auf der Suche nach einem konkreten Produkt ist, das Produktdetailbild jedoch nicht angezeigt wird.

Der Status Code der Bilder ist ebenfalls entscheidend. Im Optimalfall sollten alle Bilder der Webseite stets einen Status Code 200 aufweisen. Der Status Code Report der Bilder informiert Dich über den Status Code jeder einzelnen Bilddatei. Kontrolliere diese konstant, um fehlerhafte Darstellung der Abbildungen zu vermeiden.

Sollte das Bild einmal nicht angezeigt werden können, dann wird an dieser Stelle das ALT-Attribut des Bildes angezeigt. Das ALT-Attribut bzw. der ALT-Text ist aber vor allem für sehbehinderte Webseitenbesucher hilfreich, die über die Sprachausgabe das ALT-Attribut des Bildes abrufen können. Auch für Suchmaschinen ist das ALT-Attribut wichtig, da sie den Bildinhalt in der Regel nicht auswerten können.
Achte daher auf die Verwendung des ALT-Attributs.

Häufige Fehler

Nichtsdestotrotz gibt es häufig Fehler, die im Zusammenhang mit Bildern gemacht werden, die Du aber vermeiden solltest:

404 Status Code: Überprüfe mit dem Status Code Report stets, ob alle Bilder korrekt angezeigt werden. Bilder, die einen 404 Status Code aufweisen, sollten schnellstmöglich korrigiert werden.

Fehlende ALT-Attribute: Häufig wird für ein Bild nur einmal ein ALT-Attribut gesetzt. Dies ist korrekt, solange das Bild genau auf einer Webseite integriert ist. Oft wird ein Bild aber auf mehreren Webseiten verwendet. Dann muss auf jeder Webseite das entsprechende ALT-Attribut für das Bild hinterlegt werden. Im Idealfall verwendet man für ein Bild immer das identische ALT-Attribut.

Mit folgenden Schritten kannst Du fehlende ALT-Attribute ganz einfach identifizieren:

Gehe dafür in den Report "Dateien (statische Inhalte)" > Bilder > ALT-Texte. Dort siehst Du eine Auflistung aller Bilder, auf welcher URL sie verwendet werden und welchen ALT-Text sie jeweils besitzen.

Füge einen Filter hinzu und verwende folgende Werte:

• Suche nach "ALT-Texte" und wähle diesen in der Liste aus.
• Stelle anschließend das Drop-Down Menü auf "ist" und lasse das Eingabefeld anschließend leer.
• Klicke auf "Speichern & Schließen".

Abbildung 1: Filter hinzufügen - Alle Bilder, die keinen ALT-Text besitzen.

Nun werden Dir alle Bilder angezeigt, die keinen ALT-Text besitzen.

Abbildung 2: Auswertung aller Bilder ohne ALT-Text.

Die URL in der linken Spalte zeigt Dir zusätzlich an, auf welcher Seite das Bild mit dem fehlenden ALT-Text verwendet wird.

JavaScript

Bedeutung für Webseiten

JavaScripts können über vielfache Wege auf der Webseite eingebunden werden und sind gerade für den Besucher wertvoll, da sie Interaktionselemente anbieten. Eine falsche Implementierung, kaputte oder zu viele JavaScript Dateien können sich negativ auf die Funktionalität der Webseite und deren Ladezeit auswirken. Eine Webseite, die beispielsweise Probleme hat den Warenkorb anzuzeigen, kann für eine schlechte User-Experience sorgen.

Behalte daher stets den Überblick über die JavaScripts Deiner Webseite und vermeide negative Auswirkungen auf die Conversion-Rate.
Die Reports "JavaScript Status Codes" und "JavaScript Verwendung" helfen Dir dabei, den Zustand der Seite nicht aus den Augen zu verlieren. Versuche die folgenden Fehler zu vermeiden:

Häufige Fehler

404 Status Codes: Auch bei den JavaScript Dateien ist darauf zu achten, dass diese erfolgreich abgerufen werden können. Vermeide 404 Status Codes um die Funktionalität der Interaktionselemente, die per JavaScript umgesetzt werden, zu gewährleisten.

Zu häufige Verwendung: Verwendet eine Seite sehr viele JavaScript Dateien, wirkt sich das auf die Dateigröße der jeweiligen Seite aus. Dies beeinflusst zum einen die Crawlingzeit für Bots, zum anderen kann sich dadurch die Seitenladezeit für Besucher erhöhen.

Daher ist es empfehlenswert eine sinnvolle Grenze an JavaScript Dateien pro Seite einzuhalten. Wir empfehlen die Verwendung von JavaScripten pro Seite unter vier Dateien zu halten.

Im Report "JavaScript Verwendung" kannst Du die Tabelle über das Zahnrad-Symbol anpassen und die Spalte "Ladezeit (Gruppe)" hinzufügen.

Abbildung 3: Spalte ‘Ladezeit’ in Tabelle hinzufügen.

Dieses Beispiel zeigt, wie sich die Anzahl der JavaScript Dateien auf die Ladezeit der Seite auswirken kann.

Abbildung 4: Auswertung Anzahl JavaScript Dateien und Ladezeit.

Oft kann es sinnvoll sein, JavaScripte zusammenzufassen bzw. zu komprimieren. Für die Zusammenfassung eignen sich besonders die Scripte, die auf allen Seiten verwendet werden. Eine JavaScript Datei, die nur auf einer speziellen Seite verwendet wird, sollte nicht mit anderen JavaScript Dateien zusammen gefasst werden.

CSS

Bedeutung für Webseiten

Als Stilsprache legen CSS-Dateien die grafische Darstellung der Webseite fest. Gerade weil das Design der Seite dem Besucher als erstes in Auge sticht, sollten die verwendeten CSS-Dateien einwandfrei integriert sein.

Mit dem CSS Report kannst Du sowohl die Status Codes, als auch die Verwendung der CSS-Dateien pro Seite überprüfen, um die folgenden typischen Fehler zu vermeiden.

Häufige Fehler

404 Status Codes: Fehlerhafte CSS-Dateien bleiben bei den Besuchern nicht lange unentdeckt und resultieren in einer negativen User-Experience. Überprüfe daher die Status Codes der CSS-Dateien mit dem "CSS Status Codes" Report und korrigiere CSS-Dateien mit Status Code 4xx umgehend.

Zu häufige Verwendung: Ähnliche wie JavaScript Dateien kann sich auch die Verwendung zu vieler CSS-Dateien negativ auf die Ladezeit auswirken.
Bei CSS-Dateien ist vor allem zu beachten, dass diese sich gegenseitig überschreiben können. Daher ist beim Copy-Paste Übertragen von CSS-Dateien in einen bestehenden Quellcode Vorsicht geboten, damit keine bereits bestehenden Dateien überschrieben werden. Wir empfehlen daher im Optimalfall maximal vier CSS Dateien pro Seite zu verwenden.

Aggregierte Dateigröße und Performance einer URL

Im Report "Performance" > "Dateigröße" > "Aggregierte Dateigröße" findest Du die Dateigröße der URL mitsamt allen statischen Dateien. Die aggregierte Dateigröße wird aus dem jeweiligen HTML-Dokument + Bilder + CSS-Dateien + JavaScripte der URL berechnet. Im Report kann man erneut innerhalb der Tabelle über das Zahnrad weitere Spalten hinzufügen. Interessant sind hier vor allem die Spalten "Ladezeit (Gruppe)", "Anzahl an CSS-Dateien", "Anzahl JavaScript Dateien" und "Eingebundene Bilder (Zähler)".

Abbildung 5: Aggregierte Dateigröße und Verwendung statischer Inhalte.

Empfehlung für eine nachhaltige Optimierung:

Monitoring der Daten durch regelmäßig durchgeführte Crawls

Die Auswertung des Crawls, die im Report "Dateien (statische Inhalte)" angezeigt werden, sind die Ergebnisse einer Momentaufnahme und beziehen sich auf den Zustand der Webseite zum Zeitpunkt des letzten Crawls. Da sich Inhalte schnell und ohne eigene Kenntnis ändern können, sollte man regelmäßige Crawls der Webseite durchführen, um auf dem aktuellen Stand der Seite zu sein. Jedes Paket, ausschließlich des Free Accounts, besitzt die Möglichkeit, beliebig viele Crawls pro Monat durchzuführen. Zudem kann man über die Crawler-Einstellungen einen automatischen Crawl mit zeitlichen Abständen definieren.

Abbildung 6: Automatische Crawls festlegen.

Erfolgskontrolle über das Dashboard

Überprüfe nach jedem Crawl, ob sich die statischen Inhalte verändert haben. Die Veränderung siehst Du immer anhand der farbigen Checkbox hinter den KPIs. Ein grüner Pfeil nach oben bedeutet, dass Du Dich verbessert hast, während ein roter Pfeil nach unten signalisiert, dass sich in diesem Bereich etwas verschlechtert hat.

Im Dashboard findest Du zu den statischen Inhalten folgende KPIs:

Abbildung 7: KPIs für statische Inhalte im Dashboard überprüfen.

Fazit

Google und Webseitenbesucher legen großen Wert auf die fehlerfreie Funktion und Darstellung von Seiten. Denke daher immer daran, die statischen Inhalte Deiner Seite konstant zu kontrollieren. Der "Dateien"-Report in OnPage.org Zoom und regelmäßige Crawls unterstützen Dich dabei, Deine Seite noch besser zu machen.

Folgende Beiträge sind bisher in dieser Artikelserie erschienen:

OnPage.org startet OnPage’s Eleven - Willkommen im V3 Dashboard
OnPage's Eleven Nr. 2 - Die einzelnen Module und deren Einsatz
OnPage’s Eleven Nr. 3 - Verbesserte Reportansicht
OnPage’s Eleven Nr. 4 - Was ist indexierbar?
OnPage’s Eleven Nr. 5 – Benutzerdefinierte Felder und Zähler
OnPage's Eleven Nr. 7 - PDF-Exports
OnPage's Eleven Nr. 8 - Das neue OnPage.org Keywords Modul
OnPage’s Eleven Nr. 9 - robots.txt Monitoring
OnPage’s Eleven Nr. 10 - Crawler Einstellungen