Website Speed-Optimierung für Anfänger Teil 2

Online-Unternehmen und Webmaster, die für die Pflege leistungsstarker und vollständig optimierter Websites verantwortlich sind, neigen dazu, wichtige Webdesign-Elemente zu übersehen, die die Ladezeiten der Website beeinträchtigen. Entgegen der landläufigen Meinung wird die Geschwindigkeitsoptimierung idealerweise in allen Phasen der Website-Entwicklung implementiert und nicht erst nach dem Erstellen der gesamten Website.

Häufige Fehler, die die Leistung der Website beeinträchtigen

Mittelmäßiger Webhosting-Service
Der Fehler sich für einen mittelmäßigen Webhosting-Dienst zu entscheiden, kann noch lange spürbar sein. Die Nachfrage nach kostengünstigen Webhosting-Diensten steigt exponentiell und Hosting-Anbieter sind mehr als bereit, Kompromisse bei der Servicequalität einzugehen, um Marktanteile mit kostengünstigen Tarifen zu gewinnen. Nicht optimierte Server, auf denen Tausende von öffentlichen Websites auf einem einzigen Server-Stack ausgeführt werden, sind besonders schädlich für E-Commerce-Websites, die durch unkontrollierbare Web-Traffic-Spitzen, Multimedia-Inhalte und große Website-Dateien gekennzeichnet sind. Es ist auf jeden Fall sinnvoll, Zeit und Geld in die Suche nach Webhosting-Diensten von hoher Qualität zu investieren, die stabile Einnahmequellen generieren, indem sie die Aufmerksamkeit der Besucher effizient und genau auf sich ziehen.

Bandbreitendieben den Vortritt lassen
Die Optimierung der Website-Geschwindigkeit ist ein fortlaufender und sich weiterentwickelnder Prozess und geht weit über das Abonnieren von guten Webhosting-Dienste hinaus. Einige Geschäftsentscheidungen, die darauf abzielen, den Umsatz durch Änderung des Website-Designs und der Funktionen zu maximieren, wirken sich nachteilig auf die Leistung der Website aus, indem sie beträchtliche Teile der Bandbreite stehlen, die jedem einzelnen Besucher zugeteilt wird.

Zu viele Widgets oder Plugins
Zusätzliche Funktionen erfreuen Website-Eigentümer und -Entwickler immer. Widgets und Plugins ermöglichen zwar bequeme Änderungen an bestehenden Websites, können aber die Performance schwächen. Selbst mit den kleinsten Widgets, wie der Google+ Schaltflächenbox, kann die Belastung der Website-Performance in Bezug auf die Seitenladezeit in einigen Fällen um bis zu 2 Sekunden steigen. Die Begrenzung von Add-Ons auf ein absolutes Minimum ist unerlässlich, um eine optimale Website-Leistung aufrechtzuerhalten – selbst Plugins, die auf demselben Website-Kern installiert sind, konkurrieren um die schnellste Reaktion auf Browseranfragen und verbrauchen letztendlich Bandbreite. Somit ist die Qualität und Funktionalität der installierten Plugins weitaus wichtiger als die Anzahl selbst. Plugins, die große Datenströme abfragen, um komplexe Vorgänge auszuführen, sollten dies außerhalb des Servers tun und nicht innerhalb von Website-Hosting-Umgebungen wie Word Press.

Zu viele Anzeigen und externe Dienste
So verlockend es auch erscheinen mag, der Verkauf von zu vielen Werbeplätzen von Drittanbietern beeinträchtigt die Leistung der Website. Zu viele Anzeigen oder langsam ladende Anzeigen erhöhen die Absprungraten und wirken sich negativ auf die Online-Vermarktbarkeit aus. Die finanziellen Verluste, die mit hohen Absprungraten einhergehen, überwiegen die finanziellen Vorteile der Übergabe riesiger Website-Flächen an Werbetreibende.

Aufgeblähtes Designthema und inkompatible Multimedia
Verlockende Website-Design-Themen und Multimedia-Inhalte sind Hingucker für den Online-Traffic. Hochqualitative Bilder und Videos (große Pixel, große Dateigröße) brauchen zwar länger zum Herunterladen, jedoch ziehen minderwertige, Grafiken trotz ihrer geringeren Ladezeiten kaum die Aufmerksamkeit des Benutzers auf sich ziehen. Grafikintensive Inhalte sind jedoch nicht immer der entscheidende Faktor für die Steigerung von Conversions und Verkäufen. Dies gilt insbesondere für E-Commerce-Websites, die schnell ladende Produktbilder und Videos enthalten müssen, die den Wert von Produkten und nicht unbedingt ihre visuelle Schönheit beschreiben. Es liegt an den Website-Eigentümern, eine optimierte Wartbarkeit über alle Browserplattformen, Geräteformfaktoren und geografischen Standorte hinweg sicherzustellen, da sich die Regierungsrichtlinien und die Browserkompatibilität im Laufe der Zeit möglicherweise ändern und meistens auch unvorhersehbar sind.

Anmeldeformulare und Analysen
Anmeldeformulare und Analysecodes fügen den Kerndateien der Website nur wenige Zeilen hinzu. Aber wenn zu viele einzelne Codezeilen Platz im Website-Backend einnehmen, konkurrieren Web-Content-Assets und Plugins mit langem Code in kurzen Verarbeitungszyklen um winzige Speicherplätze. Infolgedessen tritt das beliebte physikalische Phänomen der Nichtlinearität auf und jede Komponente benötigt mehr Verarbeitungszyklen als erwartet.
Aus Sicht der Endnutzer sind exzessive Dienste oft unnötig oder werden höchstens als zweitrangig gegenüber dem eigentlichen Inhalt der Website betrachtet. Viele Websites hosten mehr als 80 Assets (Bilder, Plugins, Add-Ons und andere Multimedia-Inhalte), und all diese Inhalte werden nicht unbedingt gemäß den Benutzereinstellungen an anfordernde Browser geliefert. Zusätzliche Investitionen in die Entwicklung von medienreichen Websites schlagen letztendlich fehl, wenn die Informationen, die tatsächlich angefordert werden, um Endbenutzer zu erreichen, in irrelevanten Anmeldeformularen, Analysecodes und anderen Inhalten enthalten sind, die der Website unnötiges Gewicht verleihen.

Mobile Fehler und fehlgeleitete Weiterleitungen
Websites, die nicht für mobile Geräte geschwindigkeitsoptimiert sind, leiden unter häufigen Problemen, die die mobile Benutzererfahrung beeinträchtigen. Probleme wie fehlerhafte Weiterleitungen, nicht abspielbare Videos, aufgeblähte Bilder und Grafiken, irrelevante Querverweise und unnötige Assets, die mobilen Besuchern bereitgestellt werden, beeinträchtigen die Website-Performance und erhöhen letztendlich die Absprungraten. Nur 10 Prozent der Wartezeit werden durch die HTML-Antwort auf Browseranfragen definiert, und die restlichen 90 Prozent der Verzögerung werden durch das Rendern von Seiten, das Analysieren von HTML, das Ausführen von Codeskripten und das Abrufen eingebetteter Assets verursacht. Die Überarbeitung der Website-Leistung mit Optimierungstools und Skript-Optimierungen kann beträchtliche Teile der Seitenladezeiten abkratzen, ist aber möglicherweise nicht so effektiv wie die Entwicklung einer geschwindigkeitsoptimierten Website von Grund auf neu. Und letzteres ist eher eine Marketingstrategie, eine Geschäftsentscheidung und ein leichtes Bewusstsein, um die häufigsten Fehler zu vermeiden, die möglicherweise Online-Unternehmen ruinieren können, indem sie die Leistung der Website beeinträchtigen.

Website-Geschwindigkeitstest – Identifizieren Sie Leistungsengpässe!

Online-Unternehmen, die sich auf die Verbesserung der Website-Performance konzentrieren, erleben sofortige Ergebnisse in Form von höheren Konversionsraten. Insbesondere die Seitengeschwindigkeit füllt die Lücke bei der Verbesserung der Marktfähigkeit, indem die Benutzererfahrung der Website verbessert wird, um ungeduldige Online-Kunden zu beschäftigen und zufrieden zu stellen. Das Streben nach einer geschwindigkeitsoptimierten Website beginnt mit der Identifizierung kritischer Front-End-Probleme, die bei Standard-Website-Performance-Testprozessen am deutlichsten werden. Bevor die Suche nach Seitengeschwindigkeitsschwellen beginnt, hilft das Verständnis des Verhaltens der aussagekräftigsten Leistungsindikatoren für die Website-Geschwindigkeit, Leistungslücken in Websites genau zu identifizieren.
Das Wissen, in die richtigen Lösungen und Dienste zur Optimierung der Website-Geschwindigkeit zu investieren, in das Website-Management und vielleicht sogar in regelrechte Codierungstricks zu investieren, ist unerlässlich, um eine maximale Website-Leistung zu erzielen. Strategische Geschäftsentscheidungen, die auf diesem Wissen basieren, tragen direkt zur Verbesserung der Website-Performance bei, was wiederum zu besseren Online-Verkäufen, Leads, Conversions und letztendlich zum Geschäftserfolg führt. Online-Geschäftsinhaber und Webmaster passen ihre Websites an, um unter dem ständigen Eindruck von Veränderungen optimale Ergebnisse zu erzielen, indem sie Schlüsselelemente des Website-Designs, die die Seitengeschwindigkeit beeinflussen oder beeinträchtigen, improvisieren und optimieren.

Als Faustregel gilt, dass das Herunterladen größerer Dateien länger dauert als das Herunterladen kleinerer Dateien. Die Downloadzeit von Webseiten, auch bekannt als Seitenladezeit, hängt von der Gesamtgröße der Inhaltsressourcen ab, die von Hosting-Servern auf den anfordernden Browser heruntergeladen werden. Sperrige Bilder in hoher Qualität tragen am meisten zur Webseitengröße bei, verschlechtern die Seitengeschwindigkeit und verunsichern Besucher, die eifrig darauf warten, dass die Webseite geladen wird.

Bildoptimierung
Die folgenden Best Practices zur Bildoptimierung tragen wesentlich dazu bei, die negativen Auswirkungen von Bildern auf die Website-Geschwindigkeit zu reduzieren:

• Formatauswahl: Verwenden Sie JPGs oder WEBPs wenn die Qualität eine hohe Priorität hat und Bildänderungen vor dem Hochladen nicht erforderlich sind. JPGs können nur begrenzt verarbeitet und modifiziert werden, bevor die Bildqualität stark abnimmt. Verwenden Sie für Bilder mit Symbolen, Logos, Illustrationen, Zeichen und Text das PNG-Format. Verwenden Sie GIFs nur für kleine oder einfache Bilder und vermeiden Sie BMPs oder TIFFs.
• Richtige Dimensionierung: Sparen Sie wertvolle Bytes an Bildnutzlast und passen Sie die Abmessungen (Breite) Ihrer Webseitenvorlage an. Verwenden Sie die Größenanpassungsfunktionen des Browsers, um Bilder reaktionsschnell zu machen, indem Sie Anweisungen für die feste Breite und die automatische Höhe festlegen.
• Komprimierung: Die Bildkomprimierung sollte ein wohlüberlegter Kompromiss zwischen Bildgröße und -qualität sein. Bei JPGs ergibt eine Komprimierung von 60-70 Prozent eine gute Balance. Erhöhen Sie bei Retina-Bildschirmen die Bildgröße (JPGs) um 150-200 Prozent, komprimieren Sie sie um 30-40 Prozent und skalieren Sie sie wieder gemäß den erforderlichen Abmessungen.
• Weniger Bilder: Beschränken Sie die Anzahl der Bilder auf ein absolutes Minimum.

Optimieren Sie den CSS-Code
Vor nicht allzu langer Zeit galten 30 KB als ideale Webseitengröße. Und das beinhaltete Bilder, Inhalte, Grafiken und Code, der die gesamte Seite ausmacht. Die Popularität von CSS und JavaScript hat die Obergrenze von 30 KB Seitengröße bei der Bereitstellung einer verbesserten Website-Benutzererfahrung durchbrochen. Moderne Websites, die in CSS codiert sind, sind jedoch besser darin, Inhalte effizient und genau von Hosting-Servern auf anfordernde Browser herunterzuladen. Bei der Optimierung geht es also nicht nur darum, die Dateigröße zu minimieren. Die folgenden Best Practices gewährleisten eine geschwindigkeitsoptimierte CSS-Bereitstellung:

• Shorthand Coding: Reduzieren Sie die Größe Ihres Codes, indem Sie weniger Deklarationen und Operatoren verwenden. Weniger Codezeilen bedeuten weniger Verarbeitungszyklen und eine effiziente Bereitstellung von Website-Dateien an anfragende Browser.
• Ax Browserspezifische CSS-Hacks: CSS ist durch endlos komplizierte browserspezifische Hacks – oder Korrekturdeklarationen, wie sie genannt werden – gefährdet, die CSS-Skriptdateien unnötiges Gewicht verleihen. Geschwindigkeitsoptimierter CSS-Code ist sowohl leicht als auch einfach für Server, um ihn effizient zu verarbeiten.
• CSS minimieren: Fast alle Tools zur Überwachung der Website-Geschwindigkeit geben einen gemeinsamen Vorschlag, das Gewicht des CSS-Codes zu reduzieren, um die Geschwindigkeit zu verbessern. Leichter und kompakter Code hilft, das Herunterladen, Analysieren und Ausführen zu beschleunigen, um die Ladezeit von Seiten drastisch zu verkürzen.
• Codepositionierung: Laden Sie CSS-Code innerhalb des <head> und JavaScript innerhalb des Bodys, da das Verweisen auf CSS außerhalb dieses Abschnitts verhindert, dass Webbrowser CSS-Inhalte unmittelbar nach dem Herunterladen anzeigen.
• Best Practices für die CSS-Bereitstellung:
• Verwenden Sie keinen @import-Aufruf.
• Entfernen Sie unbenutztes CSS.
• Verwenden Sie kein CSS in HTML wie H1- und DIV-Tags.
• Verwenden Sie kleines Inline-CSS

Minifizierung – JavaScript, CSS, HTML
Tatsächlich geht es bei der Geschwindigkeitsoptimierung nicht (nur) um das Verkleinern der Seitengröße. Die Reduzierung der Anzahl von Client-Server-Anfragen bei der Bereitstellung von Website-Inhalten an Webbrowser ist ein wesentlicher Bestandteil der Optimierung der Website-Geschwindigkeit. Webmaster können dies erreichen, indem sie nicht zu viele Leute mit CSS-, HTML- und JavaScript-Anfragen auffordern. Die Minimierung von CSS, JavaScript und HTML hat gemeinsame Vorteile: reduzierte Netzwerklatenz, weniger HTML-Anforderungen, verbesserte Komprimierung, schnelleres Herunterladen und Ausführen des Browsers, was letztendlich die Seitengeschwindigkeit erhöht und höhere Ergebnisse bei Tools zur Messung der Website-Geschwindigkeit erzielt.

Plugins – Weniger ist mehr
Zusätzliche Website-Funktionalität mit Plugins hat ihren Preis: Leistungseinbußen. Leider setzen Webmaster eine Vielzahl von Plugins ein, um attraktive, aber oft unnötige Funktionen wie Gravatar, Profil-Tools, Website-Statistiken und Schriftart-Tools hinzuzufügen – einige verwenden sogar 10 verschiedene Plugins für die Integration in soziale Medien. Der einzige Vorteil hier ist die erfolgreiche Vermeidung von manueller Codierung. Viele beliebte Websites enthalten bis zu 80 Plugins. Die Anzahl ist jedoch kein Problem, wenn die installierten Plugins gut entwickelt sind, um komplexe Aktionen und teure Serververarbeitung zu vermeiden.

Datenbanken optimieren
Bei der Datenbankoptimierung geht es darum, Datenmüll und nutzlosen Inhalt aus überfüllten Datenbanken zu entfernen, sie zu verkleinern und es Website-Hosting-Servern zu erleichtern, angeforderte Inhalte effizient und innerhalb minimaler Verarbeitungszyklen abzurufen.

Kompression
Obwohl die meisten der neuesten Webbrowser Komprimierungsfunktionen für Inhalte unterstützen, liefert nicht jede Website komprimierte Inhalte. Besucher dieser bandbreitenintensiven Websites erleben wahnsinnig langsame Interaktionen mit Webseiten. Zu den Hauptgründen für dieses ungünstige (und meist unbeabsichtigte) Website-Verhalten gehören falsch konfigurierte Hosting-Server, Web-Proxys, alte oder fehlerhafte Browser und Antivirensoftware. Unkomprimierter Inhalt schadet Benutzern mit begrenzter Bandbreite, die den Webinhalt in quälend langen Seitenladezeiten empfangen. Hier ist die Abschrift einer üblichen Browser-Server-Kommunikation bei der Bereitstellung unkomprimierter Inhalte.

Zwischenspeicher
Entwickler sehnen sich nach Einfachheit im Website-Design-Code. Website-Code, der einfacher zu erstellen, zu lesen und zu pflegen ist, führt zu effizienten Website-Entwicklungsprozessen. Dazu gehört die häufige Verwendung der verfügbaren Codefunktionen, um umfangreiche Codierungen für bestimmte Website-Funktionen zu kürzen. Das Hinzufügen zu vieler überflüssiger Schleifen und unnötiger Codezeilen erhöht jedoch die Seitenwiedergabezeiten um einige Millisekunden. Laden Sie eine Flut von Website-Traffic ein, und die Millisekunden vergehen, um die Seitengeschwindigkeit weit unter akzeptable Standards zu senken. Webmaster können diese Antwortzeiten verkürzen, indem sie zwischengespeicherte Kopien des angeforderten Inhalts bereitstellen, anstatt ihn wiederholt als Antwort auf jede einzelne Benutzeranfrage zu rendern, die ihren Server anpingt. Web-Cache ist der Mechanismus zum vorübergehenden Speichern von Kopien von Webinhalten, um nachfolgende Benutzeranforderungen aus der Cache-Datenbank zu erfüllen, wenn bestimmte Bedingungen erfüllt sind. Dieser Prozess reduziert die Anzahl der Client-Server-Roundtrips bei der Bereitstellung (statischer) Website-Inhalte an anfordernde Browser. Neben statischen cachefähigen Inhalten hosten Websites auch dynamische Informationen mit eindeutigen Attributen, die sich regelmäßig für jeden Endbenutzer ändern. Das Speichern zwischengespeicherter Kopien von nicht wiederverwendbaren dynamischen Inhalten ist daher nicht sinnvoll, auch wenn das Rendern von nicht zwischengespeicherten Inhalten ein mühsam langsamer Prozess ist.

Fragment-Caching
Dies ist die Kunst, kleinere Elemente von nicht cachefähigen dynamischen Website-Inhalten zwischenzuspeichern. Wenn Websites mit statischen und/oder dynamischen Inhalten geladen werden, verarbeiten Hosting-Server PHP-Code und fragen MySQL-Datenbanken ab, um die angeforderten Inhalte abzurufen. Diese zeit- und ressourcenintensiven Prozesse werden umgangen, indem die gewünschte Ausgabe als zwischengespeicherte Kopie gespeichert wird. Fragment-Caching speichert die Ausgabe einiger Codeblöcke, die über verschiedene Versionen des dynamischen Inhalts hinweg unverändert bleiben. Wenn der Code ausgeführt wird und den für eine vorbestimmte Zeit zwischengespeicherten Codeblock erreicht, fragt der Server die zwischengespeicherte Ausgabe dieses Codes ab und liefert sie, anstatt ihn wiederholt auszuführen, bis das Zeitlimit erreicht ist. Das Endergebnis ist ein Cache-optimierter Website-Inhalt für maximale Seitengeschwindigkeit, selbst für E-Commerce- und Mitgliedschafts-Websites, die intensiv dynamische Inhalte verarbeiten. Kinsta bietet tatsächlich vier verschiedene Arten von Caching , die alle automatisch auf Software- oder Serverebene durchgeführt werden. Es besteht also keine Notwendigkeit, sich mit Plugins von Drittanbietern herumzuschlagen.