Meistern Sie Ihre Website Geschwindigkeit mit diesen kostenlosen Tools

Geschwindigkeit ist wichtig! Zumindest, wenn es darum geht, die richtigen Informationen zur richtigen Zeit zu erhalten. Beim Surfen im Internet ist einer der auffälligsten Aspekte einer Website die Ladegeschwindigkeit. Nach der Eingabe einer URL oder dem Anklicken eines Links erwartet jeder, dass er in weniger als einer Sekunde oder, wenn nicht, in höchstens 2 Sekunden auf seine gewünschte Website weitergeleitet wird. Und jede Website, die mehr als das braucht, um Informationen zu liefern, geht dem Benutzer auf die Nerven. Endergebnis – der Nutzer wechselt zu einer anderen Website, die die von ihm gesuchten Daten schneller bereitstellt. Schließlich hat in dieser geschäftigen Welt niemand die Zeit, auf das Ende des Ladevorgangs von Webseiten zu warten.

Dieses Bedürfnis, Informationen in kürzester Zeit in die Hände zu bekommen, hat zu einer ganz besonderen Anforderung an das Webdesign geführt – wenn es nicht schnell genug ist, ist es nicht gut genug. Aber dieses Mantra ist oft schwer zu erfüllen, besonders für Websites, die viele dynamische Inhalte auf ihren Homepages haben. Designer und Entwickler im Außendienst kämpfen immer wieder mit Strategien, um die Zeit, die benötigt wird, um Websites so schnell wie möglich zu laden, damit sich ihre potenziellen Kunden nicht abwenden, ohne ihre Inhalte überhaupt zu überprüfen.

Shout Out an alle da draußen die das jeden Tag tun. Wir verstehen die Art von Druck, dem Sie standhalten müssen, um Ihre Website so inhaltsreich, ansprechend, einzigartig und leicht wie möglich zu gestalten und gleichzeitig sicherzustellen, dass sie sich jedes Mal unter einer Sekunde öffnet.
Aber wir geben auch zu bedenken, dass Internetnutzer im Allgemeinen nicht sehr geduldig sind, zumal wenn sie durch ihr Handy surfen. So müssen Sie als Designer sicherstellen, dass Ihre Website so wendig wie möglich ist, damit Ihr organischer Traffic nicht aufgrund von Ladeverzögerungen auf eine andere Website umgeleitet wird. Und so hilfreich wir auch sind, um Ihnen bei dieser kleinen Situation zu helfen, haben wir eine Liste einfacher Möglichkeiten zusammengestellt, mit denen Sie die Ladegeschwindigkeit Ihrer Website verbessern können. Schauen Sie sich diese an und probieren Sie sie aus, wenn Sie können. Wir würden uns freuen zu erfahren, wie sie für Sie gearbeitet haben.

Warum ist schnelle Reaktion ein absolutes Muss für Websites?

Unabhängig davon, wie neuartig Ihr Produkt oder wie zuverlässig Ihre Dienstleistungen sind, wenn Sie Ihre Produkte nicht innerhalb weniger Sekunden der Welt präsentieren können, werden Sie mit Sicherheit den Verlust von eingehenden Geschäften erleiden. Zu jedem Zeitpunkt gibt es mehr als ein Unternehmen, das die gleiche Produkt- und Dienstleistungspalette anbietet (mit anderen Worten, Sie haben immer Wettbewerb). Wenn Sie nicht sicherstellen, dass Ihr Produkt dasjenige ist, das ein Kunde beim Kauf zuerst ansieht, dann überreichen Sie praktisch Ihren Mitbewerbern das Geschäft in Geschenkverpackung!

Lassen Sie uns einen kurzen Blick auf die wichtigsten Statistiken werfen, die unseren Standpunkt belegen:

• Laut einer von Amazon durchgeführten Studie¹ stieg der Umsatz pro 100 ms verbesserter Seitenladezeit um mindestens 1%.
• Berichte¹ behaupten, dass Shopzilla begonnen hat, etwa 12% mehr Umsatz zu erzielen, indem es einfach die Ladezeit der Seite von 6 Sekunden auf 1,2 Sekunden reduziert hat. Außerdem half es, den Seitentraffic um 25% zu erhöhen.
• Auf der negativen Seite führte eine experimentelle bewusste¹ Verlangsamung der Suchanfragenergebnisse durch Bing zu einem Rückgang des Umsatzes pro Benutzer um 4,3%.

Genügend, um zu sagen, dass eine Website, die zu viel Zeit zum Laden benötigt, unter einer Verringerung der Conversion Rate und dem Verlust von Neukunden leiden wird. Diese Tatsache wird durch ein Umfrageergebnis¹ bestätigt, das besagt, dass für 39% der täglichen Internetnutzer die Leistung wichtiger ist als die Funktionalität einer Website.

Auswirkungen auf den organischen Traffic

Die Geschwindigkeit des Seitenladens ist ein wesentlicher Faktor bei der Bestimmung des Google-Rankings Ihrer Website. Vor einiger Zeit begann Google, die Seitengeschwindigkeit bei der Bewertung von Websites zu berücksichtigen; daher wird eine Website, die zu langsam zum Laden ist, nicht als so nützlich angesehen. Selbst wenn Ihre Website-Inhalte großartig sind, werden sie in den ersten paar Suchergebnisseiten nicht angezeigt, wenn das Laden zu lange dauert.
Jetzt, da Sie das Warum, wissen, sind wir sicher, dass Sie etwas über das Wie wissen wollen.

Tricks & Tools, die Ihnen helfen, die Ladezeit Ihrer Website zu verkürzen

Es gibt eine ganze Reihe von Artikeln, die Ihnen mit Tipps zur Verbesserung der Ladegeschwindigkeit Ihrer Website helfen können. Hierin machen wir Sie mit den aktuellen Tools vertraut, die Ihnen helfen können, die Tricks, die Sie gelesen haben, anzuwenden, um eine echte Veränderung herbeizuführen. Jeder Tipp ist mit den Namen der Werkzeuge versehen, mit denen Sie die Wirkung des Tipps wirklich erleben können.

Messen Sie die aktuelle Ladegeschwindigkeit Ihrer Website

Zuerst müssen Sie Ihren Ausgangspunkt kennen (alias wie schlimm es ist). Ermitteln Sie die aktuelle Ladegeschwindigkeit Ihrer Website mit einem dieser Tools:

• Google Page Speed Insights & ihr Mobile Website Speed Test Modul – Online Page Speed Test Site, die einige großartige Einblicke in das bietet, was Sie tun müssen, um die Leistung Ihrer Website zu verbessern. Diese Tools hilft Ihnen, die genauen Fehlerpunkte zu erkennen, die die Rolle von Engpässen bei der Ladegeschwindigkeit Ihrer Website spielen. Bei der Durchführung des Tests erhält Ihre Website eine Bewertung von 0-100. Wenn es über 90 liegt, sind Sie in guter Verfassung. Andernfalls könnte es Ihnen gut tun, Googles Vorschläge zu beachten, warum Ihre Seite langsam geladen wird und wie Sie sie verbessern können.
• WebPageTest.org – Eines der vielseitigsten Tools zum Testen der Seitenladezeit, das Ihre Website von mehreren Standorten weltweit mit Hilfe von echten Browsern testen kann. Standardmäßig macht es 3 Läufe und zeigt dann Ladezeiten, ein detailliertes Wasserfalldiagramm, Anforderungsdetails und natürlich Optimierungsvorschläge an. Es hat auch sein eigenes Bewertungsschema (6 Stufen von F bis A). Es kann sogar ein Video vom Laden Ihrer Website aufnehmen.
• GTmetrix – Bietet eine hervorragende Analyse von Websites, indem es Noten für Page Speed und YSlow gibt. Zusätzlich zur Messung der Geschwindigkeit gibt Ihnen dieses Tool auch Informationen darüber, warum Ihre Seitengeschwindigkeit langsam ist.

Nachdem Sie herausgefunden haben, ob Ihre Seitengeschwindigkeit langsam ist, verwenden Sie eine oder mehrere der unten genannten Methoden, um sie um eine Stufe zu erhöhen. Stellen Sie außerdem während des gesamten Prozesses sicher, dass Sie die Auswirkungen jeder Änderung auf die Geschwindigkeit Ihrer Website überprüfen, indem Sie diesen Schritt wiederholen.

Optimieren Sie Bilder

Es versteht sich von selbst, dass die wichtigste Komponente eines Beitrages seine Bilder sind. Großformatige Bilder sind der Hauptfaktor für das langsame Laden von Websites. Aber das bedeutet nicht, dass Sie sie nicht zur Verbesserung Ihres Textes verwenden sollten. Sie müssen sie nur mit den richtigen Werkzeugen komprimieren, um sicherzustellen, dass sie kleiner werden und viel schneller laden. Sie können die Größe von Bitmap-Dateien mit verlustfreier Kompression verringern, indem Sie folgendes verwenden:

• TinyPNG (funktioniert auch für JPG)
• Optimizilla
• Compressor

Und wenn Sie schon dabei sind, können Sie auch animierte GIFs und SVG-Vektorbilder mit speziellen Werkzeugen für diese Art von Bildern optimieren. Ein großartiges Werkzeug zur Optimierung von GIF-Bildern ist ezGIF and SVG Optimizer by Peter Collingridge works great for SVG images.

Bonus-Tipp: Während das Komprimieren eine großartige Idee ist, sollten Sie wahrscheinlich weiterhin den tatsächlichen Bedarf an all diesen hochauflösenden Bildern auf Ihrer Website ermitteln.

Optimierung des Seitencodes

Zusätzlich zur Reduzierung der Bildgröße können Sie auch die Gesamtgröße Ihres Codes reduzieren. Dieser Mechanismus, der als “Codeoptimierung” bezeichnet wird, reduziert die Last, die an den Browser gesendet wird, indem unnötige Zeichen wie Leerzeichen, Tabulatoren, Zeilenende usw. entfernt werden. Sie können jede Art von Code, der an den Browser gesendet wird, minimieren – HTML, CSS oder JavaScript. Außerdem können Sie intelligente Techniken wie das Verschieben von Webressourcen wie Schriften, CSS-Dateien und JavaScript am unteren Rand der Seite anwenden, um das Laden von Text vor anderen Webkomponenten zu erleichtern; auf diese Weise kann zumindest der Benutzer Ihren Inhalt lesen und sich engagieren, wenn Ihre Bilder oder Videos zufällig ein paar Sekunden zum Laden benötigen. Sie können den Webseitencode manuell optimieren oder ein Tool wie Refresh-SF oder Minify Code verwenden.

Verwenden Sie Caching

Das Browsing-Caching eignet sich in erster Linie für Websites mit Datenbankanbindung wie E-Commerce oder Content Management Plattformen, kann aber für alle Websites im Allgemeinen verwendet werden. Die Idee hinter dem Konzept ist es, in den HTTP-Headern für statische Ressourcen wie Bilder, CSS, JavaScript, PDF-Dateien usw. ein Verfallsdatum oder eine maximale Altersgrenze festzulegen. Das Caching speichert grundsätzlich “Snapshots” Ihrer Webseiten und liefert sie als statisches HTML, was der schnellste Weg ist, um auf Daten im Web zuzugreifen. Durch die Aktivierung des Caching laden Browser automatisch zuvor heruntergeladene statische Ressourcen von lokalen Festplatten und nicht über das Netzwerk, wodurch direkte Datenanforderungen an die Datenbank vermieden werden, was wiederum zu einer schnelleren Ladezeit für Ihre Website beiträgt. Überprüfen Sie, ob Ihre Website das Caching mit dem Browser Caching Checker. nutzt. Um das Caching auf Ihrer Website zu aktivieren, können Sie entweder direkte Code-Änderungen durch Skripte vornehmen oder ein Plugin wie W3 Total Cache for WordPress oder WP Super Cache.

Bonus-Tipp: In manchen Fällen kann ein nicht so großer Hosting-Provider die Seitengeschwindigkeit von Websites mit Datenbanken beeinflussen. Bevor Sie also Zeit mit der Optimierung des Cachings verbringen, wäre es eine gute Idee, über die Wahl eines besseren Hosting-Providers nachzudenken.

Generieren Sie CSS-Sprites

Eine weitere gute Möglichkeit, um einige Last von Ihrer Website zu erleichtern, ist die Verwendung von CSS-Sprites. Diese Technik kombiniert im Wesentlichen mehrere kleine Bilder (Symbole, Schaltflächen usw.) zu einer einzigen Datei namens “sprite” und zeigt sie auf einmal an. Durch die Kombination kleinerer Bilder zu einem einzigen größeren Bild und die Anforderung dieses einzelnen großen Bildes reduzieren Sie effektiv die Anzahl der HTTP-Anfragen, die der Browser stellen muss und tragen so zu einem schnelleren Laden der Website bei. Sie können solche zusammengeführten Dateien einfach generieren und gleichzeitig CSS-Code mit dem CSS Sprites Tool oder dem CSS Sprites Generator erhalten.

Schauen Sie sich GZIP-Komprimierung an

GZIP ist ein Dateiformat und ein Algorithmus zur Komprimierung und Dekomprimierung von Dateien. Es ist allgemein bekannt, dass es 50 bis 80% Bandbreite spart, was die Ladegeschwindigkeit der Website deutlich erhöht und wird daher von Page Speed Tools wie Google Page Speed empfohlen. Wenn die GZIP-Komprimierung für Ihre Website deaktiviert ist, werden Ihnen diese Geschwindigkeitstests das sagen und Ihnen vorschlagen, sie einzuschalten. Mit Check GZIP Compression können Sie sehr schnell überprüfen, ob die Kompression vorhanden ist und sehen, wie viel Transfer dadurch eingespart wird.

Verwenden Sie ein Content Delivery Network (CDN)

Während das Internet eine große unsichtbare “Verbindung” von Netzwerken ist, die über den ganzen Globus verteilt sind, für die Entfernungen keine Rolle spielen sollten, ist die Grundrealität: Je weiter Ihre Website-Besucher vom Server entfernt sind, der die Informationen zurückgibt, desto langsamer lädt Ihre Website für sie. Der Grund dafür ist, dass die Daten mehr “Internet Nodes” durchlaufen müssen, um zu diesen Besuchern zu gelangen. Aus diesem Grund wurde zunächst an Content Delivery Networks (CDNs) gedacht. Ein CDN ist ein leistungsstarkes Netzwerk von Servern, das die statischen Werte Ihrer Website repliziert und sie den Besuchern aus dem nächstgelegenen POP zur Verfügung stellt. Einfach ausgedrückt, ein CDN enthält Proxy-Server auf der ganzen Welt. Wenn Besucher Ihre Website besuchen, werden ihnen Inhalte von dem Mega-Server angezeigt, der geografisch am nächsten an ihrem Standort liegt. Diese “Clone-and-Relay”-Aktion führt zu einer viel schnelleren Bedienung einer Website, und es ist diese Fähigkeit der CDN-Netzwerke, die sie zu einer der effektivsten Möglichkeiten gemacht hat, die Geschwindigkeit Ihrer Website zu erhöhen.
Mit dem CDN Finder können Sie überprüfen, welche CDN-Anbieter auf einer Website verwendet werden.

Bearbeiten Sie die .htaccess-Datei, um die Dinge zu beschleunigen.

Hier ist ein echter Gewinner für einen Tipps. Ein großer Teil der Serverkonfiguration, die für die Beschleunigung einer Website erforderlich ist, erfolgt über die Bearbeitung der .htaccess-Datei. Tatsächlich ist die Bearbeitung dieser Datei der wichtigste Weg, um die GZIP-Kompression und das Caching von Websites zu implementieren. Wir haben keinen Online-Datei-Generator .htaccess gefunden, der Pro-Speed-Code fokussieren (oder einbinden) würde. Stattdessen haben wir einige der besten Codeausschnitte gesammelt, die in vielen Blogs immer wieder auftauchen und zu einer Art Boilerplate² kombiniert werden:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
php_flag zlib.output_compression on
</IfModule>
<Files *.php>
SetOutputFilter DEFLATE
</Files>
<IfModule mod_headers.c>
Header unset ETag
Header unset Last-Modified
</IfModule>
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/cgi-php5
AddOutputFilterByType DEFLATE application/cgi-php53
AddOutputFilterByType DEFLATE application/cgi-php54
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:pdf|doc)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:avi|mov|mp3|mp4|rm)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
</IfModule>
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
</ifModule>
FileETag None

Kopieren Sie diese einfach und fügen Sie sie am Anfang Ihrer .htaccess-Datei ein und überprüfen Sie die Ergebnisse.

Abschließende Bemerkung

Wir hoffen, dass die oben aufgeführten Tricks und Tools Ihnen helfen werden, Ihre Website deutlich schneller zu gestalten. Es ist ein tolles Gefühl, wenn Sie sich einem 100/100 Google Page Speed Ergebnis nähern. Aber vergessen Sie nicht, dass Ihre Website eine lebendige Einheit ist. Sie ändert sich, ebenso wie ihre Ladegeschwindigkeit. Das Monitoring der Ladezeiten ist ein intelligenter Schritt. So können Sie reagieren, bevor die Nutzer mit der Abstimmung mit ihrem Feed beginnen und bevor Google Ihre Website-Note herabsetzt.

¹ Statistische Datenquelle: https://www.fldtrace.com/why-a-fast-loading-website-is-good-for-your-business
² .htaccess-Datei, die hauptsächlich auf magento-htaccess basiert