Website Technik

Frameset

Ungeeignet für die Suchmaschinenoptimierung

Ein Frame (zu deutsch Rahmen) bezeichnet einen Bereich einer HTML-Seite, in dem eine andere HTML-Seite eingebunden werden kann. Das einzelne Segment wird dabei als Frame, die Gesamtheit der Frames als Frameset bezeichnet. Ursprünglich von Netscape entwickelt, ist von der Verwendung von Frames heute eher abzuraten. Gedacht war damals, die Navigation vom Inhalt zu trennen. Der Vorteil dabei war, dass die eigentliche Navigation nicht beim Seitenaufbau neugeladen werden musste. Allerdings haben Suchmaschinen mit diesem Verhalten ein Problem, da sich Teile der Navigation ggf. in einer für die Suchmaschine völlig anderen HTML-Seite befinden und die eigentliche Contentseite demnach meist gar keine Links enthält.
Auch ist es der Suchmaschine in der Regel nicht möglich, einzelne Seiten anzusprechen, da in diesem Fall nur die Contentseite ohne das umgebende Frameset indiziert wird. Die Website würde also ohne Navigation geladen und wäre somit für den Benutzer nicht nutzbar. Für die Suchmaschinenoptimierung ist dieses Verhalten natürlich ungeeignet. Auf Grund dessen wertet unser Website Check die Verwendung von Frames ebenfalls als negativ.

Menge geladener Scriptdateien

Javascript Dateien zusammenfassen

Ein wichtiger Faktor bei der Optimierung von Webseiten ist seit eh und je die Seitenladezeit (PageSpeed) einer Webseite. Waren es früher langsame Internetverbindungen, sind es heute die steigende Nutzung von Websites via mobilem Netz und die sinkende Bereitschaft der User, lange Ladezeiten in Kauf zu nehmen.

Durch die Einbindung von vielen Javascript Dateien wird die Ladezeit von Webseiten negativ beeinträchtigt, da jede Datei einzeln beim Webserver angefragt und geladen werden muss. Unser Website Check wertet zu viele geladene Dateien indes ebenfalls als negativ. Durch die Zusammenfassung verschiedener Scripte lässt sich die Geschwindigkeit der Seiten aber oftmals erheblich verbessern.

Ein Tool zum Testen der Seitenladezeit wird übrigens u.a. direkt von Google bereit gestellt:https://developers.google.com/speed/pagespeed/insights/

Scriptgrößen

Javascript komprimieren

Nicht nur die Menge der geladenen Dateien sind für die Performance der Webseiten ausschlaggebend, sondern natürlich auch deren Größe und werden daher ebenfalls durch unseren Website Check anaylsiert. 

Wenn Ihre Seite hierbei noch Defizite aufweist und Sie auf die Scripte nicht verzichten können oder wollen, gibt es Abhilfe: Oftmals lassen sich die Dateien von ihrer ursprünglichen Größe mittels Komprimierung verkleinern. Hierbei werden nicht nur unnötige Zeichen (Leerzeilen, etc.) entfernt und dadurch die Script Dateien verkleinert, auch der Diebstahl von Code wird erschwert.

Stylesheets

CSS zusammenfassen und komprimieren

Wie Javascript Dateien können auch CSS Dateien von Webseiten zusammengefasst und komprimiert werden um die Seitenladezeit einer Webseite zu verbessern. Viele Content Management Systeme bieten, eine Funktion an, die die CSS Dateien automatisch zusammenfasst und komprimiert. Das bedeutet, dass Sie Ihr CSS immer noch lesbar schreiben können und sich keine Gedanken über die Größe der Datei machen müssen. Bei manuellen Webseiten müssen Sie allerdings selbst darauf achten.

GZIP Komprimierung

Eine weitere Möglichkeit, die Übertragung der Website zu beschleunigen, ist die serverseitige GZIP Komprimierung. Diese lässt sich beim Apache Webserver über die htaccess Konfigurations-Datei ein und ausschalten. Voraussetzung ist das der Apache mod_deflate unterstützt.
In der bei Contao beiliegenden Default .htaccess Datei ist die GZIP Komprimierung bereits eingeschaltet.

Tabellen

Im Allgemein und Besonderen

Tabellen wurden früher standardmäßig für den Aufbau von Webseiten verwendet, mittlerweile ist diese Technik veraltet. Unsere Website Analyse bewertet den Einsatz daher negativ. Insbesondere für mobile Layouts ist der umfassende Einsatz von Tabellen nicht geeignet, da die Darstellung auf mobilen Geräten meist einfach zu breit wird und horizontales Scollen für den Benutzer nicht gern gesehen wird.
Trotz allem ist von der gänzlichen Verdammung der Tabelle im Webdesign dennoch abzusehen. Für die tabellarische Darstellung einzelner Inhaltselemente eignen sich Tabellen hervorrangend. Wie auch Tabellen mithilfe von z.B. Scripten für mobile Webseiten optimiert werden können, haben wir in unserem Blogbeitrag "Tabellen im Responsive Webdesign" beschrieben.

Analytics und Fonts

Verwendung und Page Speed

Die Verwendung von Monitoring Tools wie Google Analytics oder Piwik ist mittlerweile fast unabdingbar, wenn Webseiten überwacht und optimiert werden sollen. Da die Analysetools allerdings ebenfalls per Script eingebunden werden, kann auch hierdurch die Seitenladezeit negativ beeinflusst werden. (s.o. Script Dateien).

Für Web Fonts, wie sie z.B. über Google (LINK) eingebunden werden können, gilt dies ebenfalls:
Unter dem übermäßigen Einsatz der Fonts leidet die Geschwindigkeit der Seite.

Es empfiehlt sich bei der Einbindung der Google Fonts:

• nur die Schriftschnitte einzuinden, die wirklich benötigt werden
• den "Tachometer" als Richtwert zu beachten
• die Lesbarkeit der Texte auf unterschiedlichen Devices zu beachten
• ggf. die Web Fonts nur für Überschriften zu verwenden und für Fließtexte auf Webschriften wie Arial und Verdana zurück greifen

Werbung

Wenn auf die Monetarisierung der Webseite mittels Werbung nicht verzichtet werden kann, empfiehlt es sich dennoch diese auf ein erträgliches Maß zu reduzieren, um weder die Seitenladezeit zu sehr strapazieren, noch die Nerven der User.

Durch den steigenden Einsatz von AdBlockern wird das Erlösmodell der Online Werbung ohnehin immer schwieriger. Die gängigen Bezahlmodelle werden von den Usern kaum angenommen. Man darf gespannt sein, wie sich dieser Bereich weiter entwickelt.

Einen Ansatz bietet z.B. das Startup Sourcepoint, welches Publishern weitere Möglichkeiten mit dem Umgang von AdBlockern bieten will: Unter anderem schlägt Sourcepoint die vollständige Blockierung von Inhalten bei eingeschalteten AdBlockern vor.

Größe der Webseite

Neben dem HTML Gerüst und den Script Dateien führen vor allem die verwendeten Bilder zu großen Webseiten, die die Ladezeit vergrößern. 

Neben der Komprimierung von Javascript und CSS kann auch das Markup der Seite komprimiert werden. Vor allem kann die Größe einer Webseite aber durch die richtige Handhabung der eingesetzten Bilder reduziert werden, die oft den größten Teil einer Seite ausmachen.

Es ist daher ratsam, die Bildern bereits über ein Bildbearbeitungsprogramm wie Photoshop in der Größe abzuspeichern, wie sie später auch auf der Webseite dargestellt werden sollen.

Flash

Vor HTML5 war Flash weitestgehend die einzige Möglichkeit interaktive und animierte Inhalte im Web zu zeigen. Diese Technik hatte allerdings einige gravierende Nachteile. So ist es Adobe, nachdem Sie Flash gekauft hatten, zum Beispiel nie gelungen, den Ressourcenhunger von Flash zu beseitigen. Es konnte durchaus passieren, dass ein an und für sich kleines Flash-basierendes Spiel einfach mal so 4 GB Speicher belegte und damit den Rechner bzw. das Handy in die Knie zwang. Dieses war unter anderen auch der Grund, warum Apple sich gegen die Unterstützung des Flash Players auf iOS Geräten entschied und gänzlich auf HTML 5 setzte.

Auch unter dem Gesichtspunkt der Suchmaschinenoptimierung ist Flash nicht unbedingt hilfreich. Ohne spezielle Tricks kann die Suchmaschine in einem Flashfilm keine Inhalte erkennen. Zwar gibt es Möglichkeiten der Suchmaschine die Inhalte sichtbar zu machen, aber diese kosten Zeit und Geld um sie zu implementieren.

Deshalb wird der Einsatz von Flash von unserem Webcheck als sehr negativ bewertet.

SVG Grafiken

Seit einigen Jahren ist es möglich Vektorgrafiken direkt im Browser anzuzeigen. Allerdings ist die Unterstützung von SVG Grafiken auch nach mehr als 10 Jahren immer noch nicht vollständig in den Browsern angekommen. So sind manche Funktionen - auch heute noch - nur sehr halbherzig unterstützt. Wenn man auf eine vollständige Kompatibilität in allen Browsern nicht angewiesen ist, sind SVGs allerdings eine wirklich hinreissende Möglichkeit, responsive Grafiken zu erzeugen.

Vorsichtig sein muss man bei SVGs vor allem unter dem Internet Explorer: Wird die Anzahl der Pfade in einer SVG Grafik zu groß, geht die Leistung des IE sehr schnell in die Knie.