Wie kommt man an schnelle Ladezeiten?

Es gibt eine vielzahl von Maßnahmen, die man setzen kann, damit schnelle Ladezeiten erreicht werden. Zunächst werden wir uns hier den logischen zu, danach den technischen und dann noch dein Feinheiten. Die logischen Maßnahmen für die Reduktion der Ladezeiten ist klar: Weniger Dinge auf die Seite stellen, die geladen werden müssen um die Seite anzuzeigen. Bilder "herunterrechnen" ist nur eines dieser Themen...

Gute Webseiten laden schnell...

Eingangs auf der Seite über die Benutzerfreundlichkeit generell erklärt der Text schon, dass eine schnelle Ladezeit für die Benutzerfreundlichkeit - und im Übrigen auch für die Suchmaschinen-Optimierung - relevant ist. Und dass nicht alle Nutzer über High-Speed-Anbindungen verfügen, ist ebenfalls erklärt worden.

"I steh in da Kältn und woat auf a Taxi..." - DÖF hat es bei den Taxis gewußt, Sie sollten es bei Ihrer Webseite wissen: Es nützt die schönste multimediale Welt nichts, wenn sie einfach nicht daherkommt. Aber natürlich ist das auch kein Apell an Sie jetzt die Webseite auf Schwarz-Weiß-Text-Only zu reduzieren, denn schließlich ist Ihre Webseite auch ein Schaufenster, das hüsch und attraktiv für Ihre Kunden sein soll.

Was der Online-Redakteur tun kann...

Sorgen Sie zunächst einmal dafür, dass Ihre einzelnen Seiten zwar nicht zu kurz aber auch nicht zu lang werden. Das ist eine Maßnahme, die Ihnen auch bei der Suchmaschinen-Optimierung der Webseite hilft, denn wenn man Seiten macht bei denen man sich an den Grundsatz "Ein Thema ist ein Unterseite" hält, dann werden die Seiten auch nicht zu lange sein. Aber: Der Text ist meistens das geringste Problem in Sachen Ladezeit, Sie gewinnen wenig, wenn Sie Wörter entfernen.

  • Reduzieren Sie die Menge und die Auflösung bzw. den Speicherbedarf der Bilder
  • Sorgen Sie für schlanken HTML-Code auch per Content-Management-System

Auflösung und Speicherbedarf von Bildern

Es ist eine vielzahl an Internetseiten mit Bildern bestückt, die in einer unnötig hohen Auflösung geladen werden. Das passiert vor allem dann, wenn ein Bild in der Originalversion einfach in die Webseite geschoben wird und dann dort per HTML auf die richtige Größe verkleinert wird. Sie sehen zwar auf der Webseite nur das verkleinerte Bild, tatsächlich muss aber die volle Größe geladen werden.

Tipp zur Überprüfung: Rechte Maustaste auf das Bild klicken und dann "Original anzeigen" oder "Bild in neuem Tab öffnen" wählen. So erscheint das tatsächliche File - ist es nun viel größer am Bildschirm?

Aber nicht nur die Auflösung ist entscheidend. Es hat auch etwas mit dem Dateiformat zu tun, ob ein Bild in einer bestimmten Größe viel Speicherplatz braucht oder nicht. Wenn Sie ein typisches "Foto" abspeichern, sollten Sie das JPG-Format verwenden, wenn Sie eine "Grafik" speichern eher ein PNG oder GIF-Format. Am besten aber moderne Formate verwenden, die noch besser "Kompression" mit sich bringen.

Schlanker HTML-Code

Hier kann ein Online-Redakteur im Bereich der Webseiten-Verwaltung in einem Content-Management-System recht wenig tun, aber ein paar wichtige Dinge sind dabei, die man beachten könnte und sollte:

  • Relative statt absoluten Links setzen!
  • Vorsicht bei Copy-Paste aus Textverarbeitungsprogrammen in WYSIWYG-Editoren
Relative statt absoluten Links

Wenn Sie einen Link von einer Ihrer Seiten auf eine andere Webseite setzen, nutzen Sie relative Links. Das verkürzt den HTML-Code und spart Zeichen. Ein relativer Link beginnt in den besten Fällen mit "/", ganz relativ macht man die Links meistens nicht, weil man sonst Fehlerquellen produziert, die beim Verschieben von Webseiten einen 404-Error "Not found" auslösen könnten. Beispielsweise sieht das dann so aus.

Statt:

<a href="https://www.webseite-agentur.com/site/suchmaschinen-optimierung.html">

Eben:

<a href="/site/suchmaschinen-optimierung.html">

Den fett gedruckten Bereich im HTML-Code haben Sie damit eingespart. Und einen kleinen weiteren Vorsteil hat das auch noch: Auch wenn man es nicht allzuoft tun sollte, möglicherweise ist man irgendwann dazu gezwungen: Wenn Sie tatsächlich einmal die Domain für Ihren Internetauftritt ändern müssen, sind relative Links ein echter Rettungsanker, denn man muss dann nicht mehr alle Links durchforsten und korrigieren.

Vorsicht mit Copy-Paste aus Textverarbeitungen

In den meisten aktuellen Content-Mangagement-Systemen - sagen wir zumindest ab dem Jahr 2010 - sind üblicherweise "WYSIWYG"-Editoren für die Texteingabe verbaut. Diese bieten Ihnen Funktionen gleich so zu nutzen, wie sie dann auch auf der Webseite aussehen. Etwa Aufzählungen oder Einrückungen oder Zwischenüberschriften...

Leider sind in vielen Textverarbeitungsprogrammen hinter dem Text versteckt eine unendliche Anzahl von Steuerelementen und Hinweisen. Beispielsweise aus Textprogrammen wie Microsoft Word kann das geschehen. Man kopiert einen harmlosen einzeiligen Absatz heraus und in das Content-Management-System hinein.

Wie lautet der HTML-Code für diese eine Zeile?

<p>Mein Dokument</p>

Was kann tatsächlich der HTML-Code sein, der dann abgespeichert und letztlich geladen werden muß, wenn man unvorsichtig war?

<p>
&nbsp;</p>
<p class="MsoNormal"
style="tab-stops:76.0pt">
<span lang="EN-GB">Mein
Dokument</span></p>
<p>
&nbsp;</p>
<style type="text/css">
<!--
/* Font Definitions */
@font-face
{font-family:Cambria;
panose-1:2 4 5 3 5 4 6 3 2 4;
mso-font-charset:0;
mso-generic-font-family:auto;
mso-font-pitch:variable;
mso-font-signature:3 0 0 0 1 0;}
/* Style Definitions */
p.MsoNormal,
li.MsoNormal,
div.MsoNormal
{mso-style-parent:"";
margin:0cm;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-ascii-font-family:Cambria;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:Cambria;
mso-fareast-theme-font:minor-latin;
mso-hansi-font-family:Cambria;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;
mso-ansi-language:EN-GB;
mso-fareast-language:EN-US;}
@page Section1
{size:612.0pt 792.0pt;
margin:70.85pt 70.85pt 2.0cm 70.85pt;
mso-header-margin:36.0pt;
mso-footer-margin:36.0pt;
mso-paper-source:0;}
div.Section1
{page:Section1;}
--></style> 

Spätestens an diesem Beispiel sehen Sie die Gefahr. Und leider zeigt der WYSIWYG-Editor in vielen Fällen nicht sofort an, dass hier ein Problem besteht. Manchmal kommt man auch erst beim Betrachten der Webseite dahinter, weil sich plötzlich die Schriftart leicht verändert...

Thema fertiglesen...

Usability-Themen für Benutzerfreundlichkeit

Ladezeit optimieren und AMP-HTML-Webseiten machen!

(c) videomar.at

Ladezeit verbessern...

Ein wichtiges Kriterium auch für die Usability die sich dann auch gut auf die Suchmaschinen-Performance auswirkt, sind die schnellen Ladezeiten einer Webseite. Der reine Text ist dabei nicht das entscheidende Kriterium.

Schneller Laden!

Das Häuschen: Unsere Startseite als Home-Sweet-Home

(c) videomar.at

Die Bedeutung der Startseite

Ein wesentlicher Aspekt von Vertrauenswürdigkeit im Web ist natürlich Ihre eigene Sicherheit, aber auch Ihrer Marke und Ihrer Domain sollte man vertrauen können - ein paar Infos für alle über Credibility im Web.

Usability für Startseiten

Die heilige Drei-Spaltig-Keit von Webseiten

(c) videomar.at

Heilige Drei-Spaltigkeit

Weil die Heilige 3-Spaltigkeit als Briefing immer noch entsteht - das hat oftmals auch mit dem Programm Microsoft Excel zu tun - widmen wir der "Heiligen Drei-Spaltigkeit" einen eigenen Usability-Artikel.

Im Namen des Herrn

Formular-Usabability - Das Formular als wichtigstes Interaktionsmerkmal

(c) videomar.at

Freundliche Formulare

Das Formular ist das wichtigste Interaktions-Medium im Web. Nichts ist für E-Commerce jeder Art so wichtig wie das Formular, denn es bringt Kunden und Anbieter zusammen, daher legen Sie Augenmerk darauf!

Freundliche Formulare

Ladezeiten optimieren...

Bei den technischen Maßnahmen gibt es eine wahre Vielzahl von unendlich scheinenden Möglichkeiten, die man einsetzen kann um die Ladezeit einer Internetseite zu verbessern. Machen Sie das jedenfalls immer im Dienste Ihrer User. Die Kollegen, die sich mit der Suchmaschinen-Optimierung beschäftigen, werden Ihnen dankbar dafür sein, aber sie sind nicht der Grund für die Optimierung von Ladezeiten. Die Suchmaschine sollte man keinesfalls versuchen auszuticksen, durch das Nicht-Laden von Inhalten die bei den normalen Usern sehr wohl sofort geladen werden und zum frustrierenden "Warten auf ein Taxi"-Effekt führen...

Ladezeit-Maßnahmen

  • Caching benutzen - lassen Sie per Server-Einstellung die Dateien mit einem Browser-Caching versehen, damit diese nicht jedes Mal neu geladen werden müssen.
  • Lazy-Load-Verfahren: Bilder müssen erst geladen werden, wenn der User auch an die Stelle scrollt - achten Sie darauf, dass nicht notwendige Inhalte schon geladen werden, wenn diese nicht auf dem Bildschirm des Nutzers auch angezeigt werden müssen.

Ladezeit per AMP HTML

Eine weitere, nicht ganz auf Ladezeit selbst ausgelegte, Maßnahme ist die Einrichtung von "Accellerated Mobile Pages" (AMP). Wenn man das genauer ansieht, klingt es ein wenig nach einem Schwindel, denn die bei AMP Seiten meistens eingebetteten Ressourcen (so wie auch bei unseren AMP-Seiten der Fall) sind manchmal größer als die Ressourcen der Original-Version, das Boilerplate, die eingebundenen JavaScript-Frameworks sind mehrere hundert Kilobyte schwer, obwohl das oftmals gar nicht nötig wäre.

Trotzdem: Sie erkennen die sogenannten AMP-Seiten daran, wenn Sie mit dem Smartphone auf Google eine Webseite suchen und dann neben der Webseite so einen kleinen Blitz in einem Icon vorfinden. Das ist ein Icon, das von Google bei diesem Suchergebnis hinzugefügt wird und Sie benutzen, weil diese Seiten bei Google zwischengespeichert werden, quasi die Server-Power und die "Preloadings" von Google insbesondere von Google Chrome. Das macht die Seiten, die mit AMP-HTML programmiert wurden besonders schnell, nach dem Klick auf das Suchergebnis ist man da - ohne dass der User eine faktische Verzögerung merkt.

Tatsächlich AMP am Webserver aufrufen...?

Das geht natürlich auch, Sie können auch auf einer AMP-Seite in den meisten modernen Browsern surfen. Sie werden ein etwas - insbesondere was die Desktop-Ansicht betrifft - eingeschränktes Bild bekommen, einige nette hübsche Effekte sind in AMP (noch) nicht machbar. Aber Sie werden dann vor allem eines merken: Diese Seiten sind in der Realität kaum schneller, als ihre "originalen Schwestern". Trotzdem zahlt sich der Einsatz von AMP bei Suchmaschinen durchaus aus, weil die schnelle Ladeperformance auch für die User eine sehr schöne Erfahrung ist. Sie punkten also bei der User-Experience und parallel dazu bei der Suchmaschinen-Optimierung. Und was AMP-HTML für eine Steigerung bringen kann, darüber informieren wir Sie auf dieser gesonderten Seite zum Thema Suchmaschinen-Optimierung mit AMP-HTML noch steigern.

Startseite Inhaltsverzeichnis

Links zu digitalen Angeboten

Einladungsmanagement und Gästelistenmanagement
Einladungsmanagement

Einladungsmanagement und Gästelisten verwalten auf ganz einfache Art und Weise mit einem professionellen Tool. Keine Software muss installiert werden, einzig und allein ein Webbrowser genügt.

Einladungsmanagement

Usability-Test mit bDigital machen - zum Pauschalpreis
Usability-Test

Machen Sie jetzt für Ihren Webauftritt einen Usability-Test mit bis zu 5 Teilnehmern per Video-Schaltung. Damit eliminieren Sie 80 Prozent der Probleme, die Ihre Webseite für einen Task aufweist.

Usability-Test