fbpx
Entwicklung

Ladezeit einer Website mit kleinen Programmiertricks reduzieren

Die Usability einer Website wird von den Nutzern aufgrund verschiedener Kriterien bewertet. Ein sehr wichtiger Aspekt ist die Ladezeit, die auch bei der Suchmaschinenoptimierung eine wichtige Rolle spielt. Mit ein paar kleinen Tricks lassen sich hier deutliche Verbesserungen erzielen. Es sind Tricks, die Google bei seinem Browser Chrome im Hintergrund schon längere Zeit angewendet hat, um im Vergleich zu Mozilla Firefox und dem Internetexplorer einen beschleunigten Seitenaufbau zu bewirken.

Ladezeit mit DNS-Prefetching reduzieren

Beim DNS-Prefetching wird die Ladezeit einer Website dadurch verkürzt, dass dem Browser mitgeteilt wird, welche Ressource demnächst benötigt wird. So kann die DNS-Abfrage bereits gestartet werden, bevor der User den Link zur Ressource anklickt. Das verschafft dem Browser einen Vorsprung im Bereich von Millisekunden. Aber wenn professionelle Webdesigner mehrere Elemente in eine Website eingebunden haben, die von außerhalb geholt werden müssen, macht sich das dennoch bei der Ladezeit spürbar bemerkbar. Der dazu verwendete Befehl ist denkbar einfach:
<Link rel = „dns-Prefetch“ href =“//baseplus.de“>

Eine Steigerung dieses Effekts zu Gunsten einer kurzen Ladezeit ist das Prefetching, bei dem Inhalte von Drittseiten oder Mediatheken bereits im Hintergrund in den Cache des Browsers geladen werden. Wissenswert ist jedoch, dass nicht jeder Browser mit dieser Anforderung umgehen kann. Mozilla Firefox wird diese nur dann ausführen, wenn er im Leerlauf ist. Das wäre dann der Fall, wenn der User die Inhalte einer bereits angezeigten Website liest. Mit dem Prefetching durch Vorladen von Daten kann die Reaktionszeit einer Website erheblich verkürzt werden. Mit diesem Befehl kann der Browser dazu aufgefordert werden:
<Link rel = „Prefetch“ href =“beispielimage.png“>

Ein weiteres Plus bei der Ladezeit bietet das Prefetching für Subressourcen. Damit erhalten bestimmte Inhalte beim Vorladen eine höhere Priorität. Bei Content Magament Systemen wie WordPress sollten beispielsweise die Stylesheets eine solche bevorzugte Behandlung bekommen. Aber auch hier gilt: Nicht alle Browser bieten dafür einen Support. Bei Google Chrome und Opera funktioniert dieser kleine Trick zuverlässig. Abrufbar ist das bevorzugte Vorladen mit diesem String:
<Link rel = „subresource“ href =“beispielstyles.css“>

Ein weiteres Plus bei der Ladezeit: Preconnect

Wie die Bezeichnung Preconnect zutreffend nahe legt, bekommt der Browser von diesem Aufruf den Hinweis, eine bestimmte Verbindung bereits aufzubauen, bevor sie angefordert wird. Das heißt, die TCP- oder TLS-Aushandlungen finden bereits im Hintergrund statt. Das erspart dem Browser die Zeit, die gesamten Inhalte einer angezeigten Website danach zu durchsuchen, wo eventuell Verbindungen aufgebaut werden müssen. Auch diese Einsparungen bei der Ladezeit liegen bei schnellen Systemen und DSL-Verbindungen im Millisekundenbereich und machen sich in der Masse bei der Ladezeit bezahlt. Beim Aufruf von Websites von mobilen Endgeräten aus sind die Verkürzungen der Ladezeit aufgrund der (noch) geringeren Übertragungsgeschwindigkeiten deutlicher als bei DSL-Verbindungen zu spüren. Der Aufruf Preconnect kann auf folgende Weise gestartet werden:
<Link rel = „preconnect“ href =“http://baseplus.de“>

Auch Prerendering bringt Vorteile bei der Ladezeit

Sind in den angezeigten Inhalten einer Website Backlinks enthalten, bei denen eine hohe Wahrscheinlichkeit besteht, dass sie vom Besucher angeklickt werden, macht es Sinn, diese Seiten im Hintergrund bereits vom Browser vorbereiten zu lassen. Bei der Aufbereitung der Inhalte benötigen die Rendering Engines der Browser einige Zeit. Sie können mit folgendem Befehl dazu aufgefordert werden, mit der Arbeit schon zu beginnen, bevor der Besucher den Backlink angeklickt hat:
<Link rel = „prerender“ href =“http://baseplus.de“>
Damit ist eine erhebliche Reduzierung der Ladezeit beim Aufruf von verbundenen Inhalten zu erzielen, die sich positiv auf die vom Besucher empfundene Usability auswirken. Diese Vorgehensweise ist vor allem dort ratsam, wo einzelne Artikel aus mehreren Unterseiten bestehen.

Lassen Sie sich von unseren Experten beraten!

We create for you

Unter der Überschrift „Kreation“ vereinen wir die 4 Kernkompetenzen von baseplus®: Das Design, die Entwicklung, das Online Marketing und Print, in der jeweils anmutenden Farbe. Das konsequente Color-Coding dient der optimierten Benutzerführung, die Claims kommunizieren jeden Bereich zusätzlich.

Klicken Sie hier, um zu sehen was wir meinen