Wie man das Laden der Website beschleunigt - Unabhängig davon, ob Sie einen Blog oder eine Website betreiben, ist die Geschwindigkeit der Website einer der wichtigsten Faktoren für den Erfolg, wenn es darum geht, den Traffic anzuziehen und zu erhalten.
Alle großen Suchmaschinen, einschließlich Google, ermutigen und empfehlen, Websites ansprechend und schnell zu gestalten. Heute konzentrieren wir uns auf das letztere Feature und speziell auf Blogs, die auf der Blogger-Plattform von Google gehostet werden. Vorher tauchen wir in das Tutorial ein; Ich empfehle Ihnen, grundlegende oder praktische Kenntnisse über das Kopieren und Einfügen von HTML- oder CSS-Code in Blogger-Vorlagen zu erlangen.
Wenn Sie bereits mit Ihrem Schablonendesign arbeiten, kann nichts besser als das sein. Nachdem Sie die unten genannten Schritte ausgeführt haben, können Sie Ihr Blog um viele Schritte beschleunigen. Einige der hier genannten Prinzipien können auch auf andere Plattformen angewendet werden.
Wie immer warne ich Sie, diese Techniken zuerst auf einem Dummy-Blog auszuprobieren. Behalten Sie während des Trainings in Ihrem Live-Blog eine Sicherungskopie Ihres vorhandenen Designs und Inhalts bei. Lassen Sie uns diesen Optimierungsprozess beginnen, um aus unserem Blogger-Blog einen Flyer zu machen.
Wir beginnen mit der Analyse des aktuellen Status des betreffenden Blogger-Blogs. Dafür bietet Google ein hervorragendes Tool namens PageSpeed Insights. Geben Sie die Adresse Ihres Blogs in das Textfeld ein und drücken Sie die Eingabetaste. Nach der Bearbeitung zeigt das Tool den Geschwindigkeitsfaktor für den Mobil- und den Desktop-Modus sowie die Fallstricke und die Vorschläge zur Behebung an.
Google PageSpeed-Score für Desktop
Wie im Bild oben gezeigt, können Sie eine Beispielbewertung für den Desktop-Modus sehen. Idealerweise sollte dieser Wert für den Mobil- und Desktop-Modus mindestens 85+ betragen. Alles, was darunter liegt, erfordert Aufmerksamkeit. Denken Sie daran, wenn Sie lange Beiträge mit einer großen Anzahl von Bildern veröffentlichen, bleibt ihre Bewertung immer noch unter 85, was durchaus vernünftig ist und auch nach Abschluss des Optimierungsprozesses ignoriert werden kann.
Ich gehe also davon aus, dass Sie dieses Tool verwendet haben und Ihren PageSpeed-Score sowohl für den Desktop- als auch für den Mobile-Modus erreicht haben. Sie liegen weit unter 85. Direkt unterhalb dieser Werte finden Sie die Gründe und beschreibenden Vorschläge zur Behebung des Problems Engpässe.
Wir werden uns auf den wichtigsten Abschnitt konzentrieren, der die Blockierung von Ressourcen für die Verlangsamung Ihres Blogger-Blogs behandelt.
Die Hauptverantwortlichen sind daher externe CSS- und JavaScript-Ressourcen, die Sie mit Ihrer vorhandenen Vorlage verwenden. Dies kann Google-Fonts-CSS, eine beliebte JavaScript-Bibliothek wie jQuery und zusätzliche CSS-Dateien einschließen. Dies ist nur ein Beispiel für Dateien, die möglicherweise die rechtzeitige Wiedergabe von Webseiten blockieren, die Ihrem Blogger-Blog zugeordnet sind.
Auf der PageSpeed-Ergebnisseite erhalten Sie eine vollständige Liste solcher Render-Blockierungsdateien, damit Sie daran arbeiten können. Beginnen wir also mit dem Geschwindigkeitsoptimierungsprozess.
Beseitigen Sie Schriftdateien
Die meisten Blogger-Publisher verwenden Google-Schriftarten, um die Typografie ihres Blogs zu verbessern. Diese Schriftarten können Ihre Vorlage aufpeppen, sind jedoch mit Kosten verbunden. Dies ist eine der Render-Blocking-Ressourcen, die das Blog verlangsamen. Also, was ist die Lösung? Falls Sie WordPress oder ein anderes CMS mit Ihrem eigenen Webserver verwenden, empfehle ich Ihnen einmal, diese Methode zu verwenden, um die Ladezeiten der Schriftarten zu optimieren.
Ich habe diese Technik nicht getestet, daher bin ich mir nicht sicher, ob sie auf Ihrem Server richtig funktioniert. Nun zurück zu unserem Blogger Blog, der unsere Aufmerksamkeit braucht. Die Lösung ist einfach. Verwenden Sie KEINE Schriftartdateien. Ich verwende in diesem Blog Georgia, Arial und Helvetica und es funktioniert ohne externe CSS-Datei. Wenn Sie Google-Schriftarten entfernen, stellen Sie sicher, dass Sie diese durch eine richtige Kombination von Web-sicheren Schriftarten ersetzen, die gut mit Ihrer Designvorlage übereinstimmt.
Wenn Sie also wirklich daran interessiert sind, Ihren Blogger-Blog als Reißverschluss zu erstellen, entfernen Sie einfach alle CSS-Dateianforderungen in Ihrer Vorlage.
Beenden Sie das Vertrauen auf jQuery und machen Sie kleine Skriptdateien zu Inline
Die meisten Blogs verlassen sich jetzt stark auf jQuery, um verschiedene Funktionen und Effekte nahtlos zu bearbeiten. Mit der Verbesserung neuer HTML- und CSS-Standards können die meisten dieser Funktionen jedoch mit reinem CSS- und HTML-Code ergänzt werden.
Wenn Sie noch einige der Funktionen verwenden, für die jQuery erforderlich ist, versuchen Sie, eine Lösung zu finden, die keine benötigt. An diesem Punkt ist die Google-Suchmaschine Ihr bester Freund. Wenn Sie sichergestellt haben, dass Sie jQuery nicht mehr benötigen, löschen Sie einfach die Einschlussanforderung dieser Datei.
Es ist entweder in der Kopfzeile oder in der Fußzeile einer Blogger-Vorlage vorhanden.
Möglicherweise verwenden Sie noch eine oder mehrere JavaScript-Dateien, die keine Abhängigkeiten haben. Während Ihr Blog diese Dateien von einem externen Server abruft, wird der Prozess zum Rendern von Webseiten blockiert. Die Lösung für dieses Problem ist sehr einfach. Wenn diese Dateien nicht sehr groß sind, müssen Sie ihren Code einfach in Ihre Vorlage integrieren.
In einfachen Worten, anstatt diese Dateien von einem externen Server aufzurufen, fügen Sie ihren Code direkt in Ihre Blogger-Vorlage ein. Speichern Sie alle diese Dateien auf Ihrem Desktop und öffnen Sie sie nacheinander in Ihrem bevorzugten Code-Editor. Stellen Sie sicher, dass Sie diese Skriptdatei-Einschluss-Tags in Ihrer Vorlage auskommentieren, damit das Funktionieren von Inline-Code getestet werden kann.
Denken Sie daran, öffnen Sie diese Dateien nicht in einem Rich-Text-Editor (z. B. Microsoft Word). Andernfalls kann Ihr Code beschädigt werden. Erstellen Sie für jeden Dateicode den folgenden Code-Block mit Script-Inklusion entweder in der Kopfzeile oder direkt vor dem Ende des Vorlagentexts in der Vorlage. Lassen Sie mich das in den folgenden Schritten erklären.
Kopieren Sie ihn für jeden Dateicode aus dem Texteditor und fügen Sie ihn an der oben im Code-Snippet angegebenen Stelle ein. Kopieren Sie nun das gesamte Code-Snippet und fügen Sie es direkt vor dem </ body> -Tag ein. Öffnen Sie jetzt die Beiträge Ihres Blogs, um zu überprüfen, ob die Funktion / Funktion, die den Skriptcode erfordert, einwandfrei funktioniert oder nicht. Wenn es nicht funktioniert, übertragen Sie den Code in den Vorlagenheader und fügen Sie ihn vor dem </ header> -Tag ein.
Wiederholen Sie diesen Vorgang für alle kleinen Skripts, die Sie in Ihren Code integrieren möchten.
Übertragen Sie den gesamten CSS-Code im Header
Blogger-Vorlage CSS ist in 3 Teile unterteilt. Der häufigste und sichtbarste Teil ist der in der Inline-Form innerhalb des Headers eingebettete Template-Design-Code. Benutzer arbeiten an diesem CSS-Code, um Änderungen am Vorlagendesign vorzunehmen. Es gibt jedoch zwei weitere externe CSS-Dateien, die unter die Kategorie der Renderblockierungsressourcen fallen, die zur Verlangsamung des Blogs beitragen.
Diese beiden Dateien sind:
728935430-widget_css_bindle.css - Diese CSS-Datei enthält den Standardcode für generische Blogger-Widgets wie das Widget für beliebte Posts, das Widget für Labels und vieles mehr. (Das numerische Präfix dieser Datei kann in Ihrer Vorlage unterschiedlich sein.)
Authorization.css - Diese Datei besteht aus zwei oder mehr Zeilen CSS-Code. Um ehrlich zu sein, ich bin mir nicht sicher, was es bedeutet.
Die Blogger-Plattform ruft diese beiden Renderer automatisch mit jeder Seitenanforderung ab. Um dieses Problem zu beseitigen, müssen wir diese beiden Dateien entfernen. Wenn Sie diese Dateien jedoch direkt entfernen, kann die Vorlage, die generische Blogger-Widgets verwendet, das gesamte Design verzerren.
Daher ist es eine ideale Lösung, diese Dateien nicht nur zu entfernen, sondern ihren Code direkt vor unserem vorhandenen Schablonendesign zu kopieren. Dies ist ein zweistufiger Prozess, der sorgfältig abgeschlossen werden sollte. Stellen Sie sicher, dass Sie eine Sicherungskopie Ihrer Vorlage erstellen, bevor Sie diesen Schritt ausführen.
Speichern Sie zunächst den Inhalt dieser beiden Dateien in separaten Textdateien. Suchen Sie nun den folgenden Code in Ihrer Blogger-Vorlage. Es ist am Anfang Ihres Vorlagen-CSS-Codes in der Kopfzeile vorhanden.
Widgets und Google+ Skriptdateien ausschließen (Fußzeile)
Weitere zwei Ressourcen zum Blockieren von Rendern sind zwei JavaScript-Dateien, die automatisch von der Blogger-Plattform enthalten sind. Eines davon ist ein Google+ Skript und das andere bezieht sich auf alle Blogger-Widgets, die im Blog verwendet werden. Diese beiden Dateien werden am Ende der Vorlage aufgerufen.
Das Deaktivieren der Aufnahme dieser beiden Dateien ist denkbar einfach. Nachdem Sie diese beiden Dateien jedoch ausgeschlossen haben, werden im Layoutbereich des Blogger-Dashboards nur wenige Änderungen vorgenommen, und einige andere wichtige Dinge müssen beachtet werden, um sicherzustellen, dass Ihre Entwurfsvorlage nicht beschädigt wird.
Sehen wir uns zunächst an, wie Sie diese beiden Dateien problemlos aus unserer Vorlage ausschließen können. Gehen Sie zum Ende Ihres Vorlagencodes und suchen Sie das </ body> -Tag. Ersetzen Sie es durch den folgenden Code-Ausschnitt.
Wie bereits gesagt, erfordert der Ausschluss dieser beiden Dateien beim Arbeiten mit der Vorlage mehr Aufmerksamkeit vom Blogbesitzer. Wenn Sie einen Ihrer Blogbeiträge in einem Webbrowser öffnen und den Quellcode überprüfen, werden Sie am Ende der Vorlage eine Menge Code sehen, der auskommentiert wurde. Dazu gehören auch die beiden Dateien, die wir entfernen wollten.
Blogger-Widgetcode in der Fußzeile
Wie in der Abbildung oben gezeigt, können Sie sehen, dass beide Skriptdateien jetzt auskommentiert sind und den Seitenrenderungsprozess nicht mehr behindern, wodurch Ihr Blog erheblich beschleunigt wird.
Wenn Sie jetzt auf die Option Layout in Ihrem Dashboard klicken, werden Sie feststellen, dass die gesamte Layoutstruktur jetzt vertikal ausgerichtet ist, wie ein Stapel von Boxen, die wie in der Abbildung unten übereinander gehalten werden.
Es besteht keine Notwendigkeit zur Panik. Kümmern Sie sich einfach um eine äußerst wichtige Sache von hier an. Wenn Sie einige Änderungen an vorhandenen Widgets in Ihrer Entwurfsvorlage vornehmen, müssen Sie nichts tun und Sie können sie frei bearbeiten. Wenn Sie jedoch ein neues Widget hinzufügen oder ein älteres Widget löschen möchten, ersetzen Sie den Code-Snippet wieder mit dem ursprünglichen </ body> -Tag.
Nachdem Sie diese Änderung vorgenommen und die Vorlage gespeichert haben, können Sie Widgets hinzufügen oder löschen. Wenn Sie den Widget-Hinzufügungs- oder Löschvorgang abgeschlossen haben, können Sie das </ body> -Tag erneut durch den oben genannten Code-Snippet ersetzen. Auf diese Weise wird Ihre Vorlage nicht beschädigt und sie funktioniert reibungslos.
Damit ist der Optimierungsprozess für die Beschleunigung Ihres Blogger-Blogs abgeschlossen. Sie können die Geschwindigkeit Ihres Blogs erneut mit dem PageSpeed Insights-Tool überprüfen und Sie werden feststellen, dass Sie eine gute Punktzahl erhalten, die weit über der Ihrer älteren Punktzahl liegt. Ihre Blogbesucher werden auch überrascht sein, die Ladezeiten Ihrer Blogbeiträge deutlich zu verkürzen.
Verschiedene Richtlinien zur Geschwindigkeitsoptimierung
- Abgesehen von diesen wichtigen Schritten können Sie zusätzliche Best Practices und Richtlinien befolgen, um sicherzustellen, dass Ihr Blog weiterhin schnell läuft und den Besuchern das beste Browsing-Erlebnis bietet. Hier sind einige dieser Tipps.
- Stellen Sie beim Verwenden von Bildern in Blogbeiträgen sicher, dass Sie diese im Internet optimieren, um die Gesamtseitengröße zu reduzieren.
- Komprimieren Sie den CSS-Code Ihres Vorlagendesigns, um die Webseitengröße weiter zu reduzieren.
- Stellen Sie beim Hinzufügen aller Inline-JavaScript-Codeausschnitte sicher, dass Sie auch diese Skripts komprimieren.
- Reduzieren Sie nach Möglichkeit die Anzahl der in Ihrem Blog verwendeten Widgets.
- Verwenden Sie nach Möglichkeit Bild-Sprites.
- Erstellen Sie ein responsives Design und schneiden Sie unnötige Elemente im Design für kleine Geräte ab. Klingt Geeky?