Einfache Schritte zur Beschleunigung Ihrer bildlastigen Website

Der Website-Eigentümer möchte eventuell seine Download-Geschwindigkeit erhöhen. Dadurch wird das Ranking der Suchergebnisse erhöht; Außerdem ist es für Website-Besucher angenehmer, damit zu arbeiten, da sie eine schnellere Reaktion auf ihre Aktionen erhalten.

Auf der Suche nach einer schnellen und unkomplizierten Lösung installieren Websitebesitzer eine Vielzahl von Plug-Ins, die wiederum Ressourcen verbrauchen und ihre Arbeit nur verlangsamen. Wir haben nichts gegen Optimierungs-Plugins, aber sie müssen zielgerichtet und mit Kenntnis der Prinzipien ihrer Arbeit eingesetzt werden.

Außerdem haben Websitebesitzer, die noch nie mit Administration zu tun hatten, oft ein falsches Verständnis von Optimierung. Optimierung ist in ihrem Verständnis die Beschleunigung des Skripts um jeden Preis. Die Aufgabe der Optimierung besteht darin, die optimale Geschwindigkeit der Site zum optimalen Ressourcenpreis zu erzeugen. Daher kann es keine universellen Anweisungen für alle Standorte geben.

Ihre Website schnell zu machen, ist eine dringende Aufgabe für jeden Ressourcenbesitzer oder Webmaster. Schließlich ist die Seitenladegeschwindigkeit einer der wichtigsten Faktoren für den Erfolg einer Webressource, zusammen mit qualitativ hochwertigen Inhalten und schönem Grafikdesign.

Langsames Laden erhöht die Wahrscheinlichkeit, dass Benutzer manchmal verloren gehen. Vor allem, wenn Besucher von mobilen Geräten kommen. Einfache Empfehlungen zur Beschleunigung des Seitenladevorgangs, die selbst ein unerfahrener Benutzer in die Praxis umsetzen kann, tragen dazu bei, die Wahrscheinlichkeit von Verkehrsverlusten zu minimieren.

1. HTML-Code und CSS-, JS-Dateien optimieren

Eine Download-Optimierung ist ohne Rücksicht auf die „Sauberkeit“ des Codes, der beim Aufrufen der Seite an den Browser des Benutzers übermittelt wird, nicht möglich. Eine große Anzahl von Zeichen im Quellcode beeinflusst die Ladegeschwindigkeit erheblich, daher ist seine Kürze ein kritischer Erfolgsfaktor.

So minimieren Sie Code, um das Laden der Website zu beschleunigen

Entfernen Sie unnötige Zeichen, Markup-Elemente und Quellcode-Tags. Die Automatisierung des Prozesses hilft dabei, eine kleine Einfügung am Anfang und am Ende des HTML-Codes der Website hinzuzufügen.

Diese Methode zum Puffern von HTML-Inhalten ist sehr nützlich, kann jedoch eine zusätzliche Belastung des Arbeitsspeichers verursachen.

Gruppieren Sie den gleichen Typ von CSS-Dateien und JS-Dateien. Kostenlose PHP-Anwendungen wie JCH Optimize, Cloudflare oder Minify, die in ein separates Verzeichnis kopiert werden und alle Site-Dateien durchlaufen, helfen dabei, die Elemente zu kombinieren.

2. Entfernen Sie zusätzliche HTTP-Anforderungen

Das Hochladen von Seitenelementen (Javascript, Bilder, CSS und Flash-Dateien) beansprucht den Löwenanteil der Systemressourcen beim Laden einer Website. HTTP-Anfragen für solche Elemente verlangsamen die Seite merklich.

Um „zusätzliche“ Anfragen zu vermeiden, müssen Sie die Anzahl der Komponenten der Seite reduzieren. Dies führt zu einer proportionalen Verringerung der Serveraufrufe und beschleunigt das Laden der Website.

Dies kann auf verschiedene Arten erfolgen:

• Kombinieren Sie mehrere Bilder in einer einzigen Grafikdatei (CSS-Sprite);
• Verwenden Sie Inline-Bilder (Inline-Bilder) im Seiten-Stylesheet;
• Mehrere CSS-Dateien oder Skripte auf einer Seite werden zu einer Datei zusammengeführt;
• Minimieren Sie die Anzahl der Szenarien und Plugins.

3. Ordnen Sie JavaScript und CSS in der richtigen Reihenfolge an

Es wird empfohlen, die CSS-Dateien oben im Seitencode und das JavaScript unten zu platzieren. Nach dieser Optimierung werden zuerst statische Inhalte geladen und dann nur noch dynamische Grafiken.

Flash-Elemente oder Animationen, die mehr Ressourcen zum Herunterladen benötigen, „ziehen“ sich nicht nach vorne und verderben den Eindruck der Website von den ersten Sekunden an. Dies gewährleistet einen reibungslosen Download von Inhalten und erhöht die ästhetische Attraktivität der Ressource.

4. Reduzieren Sie die Anzahl externer Skripte

Externe Skripte sind Codestücke (Texte), die über einen externen Link aufgerufen werden. Links erzeugen zusätzliche Anfragen an viele verschiedene Server, was letztendlich die Seite verlangsamt. Um dies zu vermeiden, wird empfohlen, hauptsächlich lokale Skripte zu verwenden, die in die Struktur des Quellcodes der Seite eingebettet sind.

Die Konzentration auf lokale Skripte führt natürlich zu gewissen Einschränkungen im Erscheinungsbild und in der Funktionalität der Site. Aber der daraus resultierende Vorteil der Download-Geschwindigkeit ist diese „Opfer“ wert.

5. Spülen aktivieren

Diese PHP-Funktionalität ermöglicht es, nicht zu warten, bis der Server des Benutzers Informationen von der Ressource lädt, sondern sie in Teilen auszugeben. Während die Daten an den Browser übermittelt werden, bleibt das geöffnete Fenster nicht leer, sondern wird nahtlos mit ladbaren Elementen der Seite gefüllt. Eine solche Beschleunigung ist besonders für Webressourcen mit einer komplexen Schnittstelle und hohem Datenverkehr erforderlich.

Es ist besser, die Flush-Funktion am Anfang des Seitenquellcodes direkt nach dem Kopf zu platzieren. Aus der Kopfzeile werden HTML-Inhalte schneller geöffnet, und Sie können auch das parallele Laden von CSS- und JavaScript-Elementen aktivieren.

6. Cachen Sie die Seiten

Caching speichert einige Informationen von den Seiten der Website (Flash, Grafiken, JavaScript und CSS) im Browser des Benutzers. Beim nächsten Aufruf werden diese Dateien sofort vom Browser heruntergeladen, was der Website zusätzliche Geschwindigkeit verleiht.

Sie können das Caching aktivieren, indem Sie dem HTML-Code einen Expires-Header hinzufügen. WordPress-Sites können einfach zwischengespeichert werden, indem Plug-Ins mit kostenlosen oder teilweise kostenlosen Funktionen wie W3 Total Cache, Cache Enabler oder Zen Cach installiert werden.

Für neue Websites ist es besser, Caching erst nach vollständiger Startbereitschaft zu verwenden. Wenn Sie die Funktion während der Entwicklung aktivieren, werden weitere Änderungen möglicherweise nicht korrekt auf der Website angezeigt.

7. Verwenden Sie ein CDN

Content Delivery Network – eine Kette von Servern, die in Rechenzentren auf der ganzen Welt verstreut sind, um die Geschwindigkeit zu erhöhen, mit der Inhalte an Besucher übertragen werden. Je näher der Besucher geografisch von CDN-Servern entfernt ist, desto schneller werden die Datenpakete der Seite übermittelt.

Die Verwendung von CDN ist besonders wichtig für Content- und hochbelastete Portale, deren primäre Zielgruppe sehr weit von physischen Servern entfernt ist. Dieser Service minimiert die Wartezeit für Downloads von ausländischen Websites und trägt zu einer Erhöhung ihres Rankings in lokalen Suchergebnissen bei. Schließlich werden die Inhalte von dem Serverspeicher heruntergeladen, der dem Benutzer in seinem Land am nächsten ist.

8. Optimieren Sie Grafiken und Videos

Sie müssen das richtige Grafik- und Videoformat auswählen, da sich das Dateiformat direkt auf die Geschwindigkeit auswirkt, mit der Informationen den Besuchern präsentiert werden.

Empfohlene Formate für verschiedene Webinhalte:

• SVG – für Vektorlogos und einfache Elemente der Benutzeroberfläche;
• PNG – für Schemata und Nicht-Vektor-Logos;
• JPG – für Fotos und Bilder;
• MPEG4 – für Video und Animation.

Auch für Video und Animation steht ein relativ neues WEBM-Format zur Verfügung. In den meisten Fällen bietet es eine kleinere Videogröße bei gleicher Qualität. Das Formular hat jedoch eine eingeschränkte Browserunterstützung (z. B. gibt es keine Unterstützung im macOS / iOS-Safari-Browser). Daher wird empfohlen, eine WEBM-Datei als vorrangige Videoquelle zu verwenden und MPEG4 als alternative Quelle zu installieren. Sie können auch nur MPEG4 verwenden, wenn die gemeinsame Nutzung nicht akzeptabel oder unbequem ist.

Unabhängig davon weisen wir darauf hin, dass das Vektorformat (SVG) eine Skalierung ohne Verlust der Grafikqualität ermöglicht.

Phasen der Bildoptimierung

Schritt 1 – Reduzieren der Bildgröße.

Viele beliebte CMS, wie WordPress oder Joomla, haben eingebaute Plug-Ins, um Bilder vom Original zu optimieren. Diese Methode erzeugt jedoch eine zusätzliche Last und kann die Website verlangsamen. Jedes Mal, wenn die Seite geladen wird, greift der Browser zuerst auf den Quellcode zu und ändert erst dann die Größe des Bildes im laufenden Betrieb.

Um Geschwindigkeitsverluste beim Laden von Bildern zu vermeiden, helfen im Betriebssystem integrierte Grafikeditoren wie Preview (Mac) oder Microsoft Paint (Windows) sowie Online-Dienste mit ähnlicher Funktionalität. Die Arbeit mit ihnen erfordert minimale Kenntnisse im Umgang mit Grafiken.

Schritt 2 – Komprimieren Sie die Datei vor dem Herunterladen.

Auch nach Optimierung der Bildgröße ist sein „Gewicht“ meist noch weit vom Optimum entfernt. Bequeme und kostenlose Dienste wie ImageResize oder TinyPNG helfen, die Größe ohne Qualitätsverlust zu reduzieren. Die meisten Prozesse hier sind automatisiert. Der Benutzer muss nur Dateien hochladen und bereits auf die optimale Bildgröße komprimiert herunterladen.

9. Wenden Sie die Gzip-Dateikomprimierung an

Gzip ist eine einfache Methode zum Komprimieren von Site-Dateien, um Kanalressourcen zu sparen und das Laden zu beschleunigen. Mit Gzip werden Dateien in ein Archiv komprimiert, das der Browser schneller herunterladen und den Inhalt dann entpacken und anzeigen kann.

Die Aktivierung der Verwendung von Gzip ist ganz einfach – Sie müssen nur ein paar Codezeilen zur .htaccess-Datei hinzufügen. Bei Verwendung des Apache-Webservers steht beispielsweise das Modul mod_gzip für Webmaster zur Verfügung, um Gzip zu aktivieren, in diesem Fall müssen Sie einen solchen Code zu .htaccess hinzufügen

Die Komprimierung der Gzip-Datei wird durchgeführt, um die Anzahl der Anfragen an den Server von einem Browser zu reduzieren. Diese Technologie reduziert das anfängliche Gewicht der Dateien auf 70 %, um den Download zu beschleunigen.

Weg zum Einbetten der Gzip-Komprimierung

Fügen Sie das folgende Code-Snippet zur Konfigurationsdatei des Webservers „.htaccess“ hinzu.

Auf dem Apache-Server

# BEGIN GZIP COMPRESSION
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(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>
# END GZIP COMPRESSION

Auf dem Nginx-Server

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

10. Hosting ändern

Die grundlegendste Methode, um Downloads zu beschleunigen, besteht darin, den Hosting-Provider zu wechseln. Einsparungen bei der Ressourcenallokation führen oft zu einer erheblichen Verschlechterung der Servicequalität, was alle Versuche untergräbt, die Site on the Vine zu beschleunigen.

Wenn Manipulationen mit Inhalten, Code und Plugins keine Ergebnisse bringen, ist es an der Zeit, darüber nachzudenken, ein anständigeres „Zuhause“ für die Website zu wählen. Bei einem hochwertigen Hosting mit hoher Verfügbarkeit und durchdachtem technischen Support erhält die Internetressource einen starken Impuls, um die Arbeitsgeschwindigkeit zu erhöhen. Und das wird ein dankbares Publikum zu schätzen wissen.

Die wichtigste Sache ist…

Es ist notwendig, sich um den Zugriff auf die Website nicht länger als 2-3 Sekunden zu bemühen. Es spielt keine Rolle, ob die Site 2 oder sogar 3 Sekunden lang geöffnet wird, aber wenn es länger dauert, ist dies ein Grund, darüber nachzudenken, das Laden der Site zu beschleunigen.

Sie müssen auch verstehen, dass es zwei Parameter für die Seitenladegeschwindigkeit gibt.

Die erste ist die Geschwindigkeit, mit der Inhalte angezeigt werden (zu diesem Zeitpunkt ist die Seite bereits geöffnet und wird dem Benutzer angezeigt, während der transparente Seitenindikator weiterhin angezeigt wird, bis alle statischen Dateien und asynchronen Skripte verbunden sind).

Darüber hinaus ist die zweite die Geschwindigkeit der tatsächlichen Bildung der Seite, wenn alles, was verbunden werden musste, verbunden war. Sie müssen sich auf den ersten Parameter konzentrieren, dh es dürfen nicht mehr als drei Sekunden vergehen, bevor das Site-Layout angezeigt wird.

Fazit

Sie können eine solche Zahl wie die Ladegeschwindigkeit der Site nicht ignorieren. Er war es, der von den ersten Sekunden an eine angenehme Umgebung für die Besucher schafft. Je schneller der Nutzer die gewünschten Inhalte erhält, desto höher ist die Wahrscheinlichkeit, dass sich ein positives Bild von der Ressource bildet und Loyalität zu ihr aufgebaut wird.