Die Schritt-für-Schritt-Anleitung, wie Sie Ihre WordPress-Site für Nicht-Techniker beschleunigen können!

Hier ist mein Problem Nr. 1: Ich bin ungeduldig.Ich will alles, was ich gestern beschlossen habe.Ich will nicht warten, ich will mit niemandem reden, ich will es nur jetzt.Ich habe kürzlich einen brandneuen iMac gekauft und die 2-wöchige Lieferwartezeit war unerträglich.

Hier ist der Kicker, ich bin nicht allein.

Es scheint, dass Menschen wie wir und möglicherweise der Rest der Menschheit irgendeine Form von ADHS haben, und wenn wir nicht bekommen, was wir jetzt wollen, lassen Sie uns zur nächsten Sache übergehen.Deshalb MÜSSEN unsere Websites schnell und schön sein.Denn sonst springen Ihre Besucher in einen neuen Tab und gehen zu Ihrem Konkurrenten.

Einige Gründe, warum Sie an der Geschwindigkeit Ihrer Website arbeiten möchten:

  • Eine höhere Seitengeschwindigkeit korreliert stark mit Warenkorbabbruch und Absprungrate
  • Die Seitengeschwindigkeit ist ein Google-Rankingfaktor.Schneller = mehr Traffic
  • Schnellere Websites bieten eine bessere Benutzererfahrung.

Das Problem ist, dass ich mich die meiste Zeit, wenn die Leute über die Geschwindigkeit der Website sprechen, verlaufe.Sie sprechen über Apache-Optimierung oder Serverkonfigurationsdateien und um ehrlich zu sein, als Nicht-Ingenieur dachte ich immer, das sei jenseits von mir und ich könnte nie eine schnelle Website bekommen, es sei denn, ich verlor Tausende von Dollar für jemand anderen, um es für mich zu tun.

Dies war ärgerlich, da die Geschwindigkeit der Website sowohl für den Suchmaschinenverkehr als auch für die Optimierung der Conversion-Rate wichtig ist.Aber ich grub mich ein und entschied, dass dies verstanden werden musste.Um ehrlich zu sein, habe ich auch ein paar Mal den Gesundheitsehrgeiz gebrochen, indem ich mit DNS herumgespielt habe, aber schließlich habe ich es geschafft.

Website-Geschwindigkeitstest

Unsere Homepage lädt jetzt weniger als 1 Sekunde statt 4. Dies ist eine enorme Verbesserung und unsere Analyse bezeugt, wie Sie unten sehen werden.

Dieses Handbuch ist nicht der perfekte Leitfaden zur Optimierung der Seitengeschwindigkeit.Dies ist ein Leitfaden zur Optimierung der Seitengeschwindigkeit, den Sie tatsächlich tun können, ohne viel Geld auszugeben, und der Ihnen signifikante Ergebnisse liefert.80/20 Seitengeschwindigkeitsoptimierung für diejenigen, die Angst haben, wenn sie aufgefordert werden, eine JavaScript- oder PHP-Funktion zu ändern.

Bevor ich mit dem Kommentieren beginne, möchte ich auch sagen, dass diese Seite diese Behandlung noch nicht erhalten hat und möglicherweise etwas schneller geladen wird.Es steht auf meiner To-Do-Liste, behalte den Hass in den Kommentaren :).

Was Sie lernen werden

  • Warum die Seitengeschwindigkeit wichtig ist, wenn Sie es ernst meinen, online Geld zu verdienen
  • Die realen Ergebnisse der in diesem Beitrag diskutierten Taktiken
  • Der detaillierte Schritt für Schritt folgt den Anweisungen, wie ich es gemacht habe.
  • Die Extras, die Sie für noch schnellere Websites tun können

Der Benchmark und die Ergebnisse dieses Leitfadens

Wie unterscheidet sich dieser Leitfaden von den meisten Guides, die Sie online finden?Nun, die Sache ist, ich habe tatsächlich all die Dinge getan, über die ich auf unserer Health Ambition-Website sprechen werde .

Um die Website-Geschwindigkeit zu testen, habe ich 2 kostenlose Tools verwendet, mit denen Sie die Website-Geschwindigkeit zusammen mit einigen Verbesserungstipps überprüfen können: Google-Seitengeschwindigkeitsinformationen und Pingdom.

Vor

Einblicke in die Seitengeschwindigkeit

Wir waren also sehr unvorsichtig mit der Geschwindigkeit unserer Website, aber die bisherigen Ergebnisse sind nicht so schlecht.Das liegt zum Teil an Performag, dem Theme, das speziell für uns von den Jungs an gut entwickelten Themen entwickelt wurde.Bevor ich zum Thema überging, war die Seite Mitte der 50er Jahre erfolgreich, aber ich habe damals keinen Screenshot gemacht.

Nach

Einblicke in die Seitengeschwindigkeit

Nachdem ich 5 Stunden auf der Website gearbeitet habe, ist hier das Ergebnis, das ich erreicht habe.Es ist nicht perfekt und ich bin in den 90er Jahren nicht für Googles Tool eingebrochen, aber laut Pingdom lädt die Seite in weniger als 1 Sekunde und ist schneller als 90% aller getesteten Websites.

Dies ist auch unser Fortschritt der Analyse, seit wir die Änderungen vorgenommen haben.Wie Sie sehen können, ist alles grün, und das Seitenaufrufwachstum von 8,35% bedeutet für uns 20.000 Extras in knapp einem Monat.Darüber hinaus ist die Absprungrate etwas besser, ebenso wie die Ausgabefrequenz und -zeit auf der Seite.

Google Analytics Health Ambition-Seiten

Lassen Sie mich Ihnen nun zeigen, wie genau ich es erreicht habe und wie Sie dasselbe tun können.

Der Plan Schritt für Schritt

Schritt 1: Ich habe ein geschwindigkeitsoptimiertes Design ersetzt

Schwierigkeiten

40%
Erforderliche Arbeiten

60%
Wirksamkeit

80%

Was diese Optimierung tut: Es gibt Ihnen ein WordPress-Theme, das bereits für die Seitengeschwindigkeit optimiert ist Warum tun Sie es: Ihr Theme ist im Wesentlichen eine WordPress-Schicht, die einen Großteil Ihrer Inhalte ausmacht.

Es ist auch der Code, der an den Browser Ihrer Besucher gesendet wird.Wenn es schlecht optimiert ist, werden Ihre Seiten schwerer und langsamer.

Kosten: $ 49 einmalig.

Alternative: Wählen Sie ein beliebiges Theme und bezahlen Sie einen Page-Speed-Experten, um Ihr Theme zu optimieren (mehrere hundert Dollar)

Nichts begeistert mich mehr als auf Forest Theme und ich durchsuche das Thema, um sofort Dutzende von Website-Ideen zu erhalten.Es gibt jedoch ein Problem.Die meisten Themen auf den meisten Märkten sind so gestaltet, dass sie schön aussehen und ausgefallene Effekte haben.

Weil?

Warum sie dadurch mehr verkaufen: Menschen denken bei der Auswahl eines Themas selten an Leistung, da Design und Aussehen zu dieser Zeit viel lebendiger und attraktiver für ihre emotionale Seite sind.

Dies ist der Fehler, den wir gemacht haben, als wir Health Ambition gestartet haben, obwohl das Thema nicht so aufwendig war, es wurde nicht für Geschwindigkeit geschaffen. Die Seite lud eine Menge doppelter und unbenutzter Javascript-Bibliothek, CSS und HTML wurden nicht komprimiert oder optimiert und als Ergebnis war die Seite sloooooow.

In dem Moment, als ich entschied, dass die Website ein Redesign benötigte, kontaktierten mich die Jungs von Thrive Themes und boten mir an, das WordPress-Theme für die beste Autoritätsseite auf dem Markt (Performag) zu erstellen.Und eines der Hauptkriterien dafür war die Seitengeschwindigkeit.

Dies wurde mit folgenden Methoden erreicht:

  • Das gesamte HTML/CSS/Javascript wird standardmäßig komprimiert und minimiert
  • Kein unnötiger ausgefallener Effekt, nur Einfachheit und Geschwindigkeit
  • Reduzieren Sie die Anzahl der benötigten Plug-Ins, indem Sie Werbesysteme, Sharing-Systeme usw. einfügen.
  • Reduzieren Sie die Anzahl der Elemente, die auf Ihr Mobiltelefon hochgeladen werden
Performag

Ich habe den Screenshot verloren, aber die Geschwindigkeit unserer Seite war anfangs 55 und sie stiegen auf 67, nachdem sie das Thema gewechselt hatten.

Eine gute Sache an den Jungs von Thrive Themes ist, dass sie Ihre neuen Bilder automatisch über kraken.io, den besten Bildoptimierungsservice, komprimieren, aber dazu später mehr.

Wie machen Sie das für Ihre Website?

  1. Gehen Sie zu Thrive-Designs und wählen Sie ein Thema aus, das dem Aussehen Ihrer Website entspricht.
  2. Gehen Sie nach dem Kauf zu Ihrem WordPress-Dashboard und klicken Sie auf Erscheinungsbild> Themes> Neu hinzufügen.
  3. Klicken Sie auf Design hochladen und laden Sie die Theme-Datei hoch, die Sie von Thrive Themes heruntergeladen haben.
  4. Aktivieren Sie das Theme und geben Sie Ihren Lizenzschlüssel in die drei Optionsoptionen ein.
  5. Gehen Sie zu Erscheinungsbild> Passen Sie das Designdesign an und ändern Sie es, um es an Ihre Marke anzupassen.
  6. Gehen Sie zu den Hauptseiten Ihrer Websites und stellen Sie sicher, dass nichts mit dem neuen Thema kaputt gegangen ist, und beheben Sie sie manuell.

Schritt 2: Ich habe unser Hosting aktualisiert

Schwierigkeiten

40%
Erforderliche Arbeiten

20%
Wirksamkeit

60%

Was dieser Tweak bewirkt: Wir empfehlen einen Hosting-Anbieter, der für uns besser und schneller war als viele andere auf dem Markt.

Warum so: Das ist eigentlich komplizierter zu erklären.Einfach ausgedrückt, ist Ihr Hosting der Computer, der Ihre Dateien und seine Internetverbindung bedient.Ihr Hosting-Provider wirkt sich auch auf die Betriebszeit Ihrer Website aus.

Kosten: $ 24.95 / Monat für bis zu 5 WebsitesAlternative: Günstigeres, aber langsameres Shared Hosting oder teureres und günstigeres "WordPress-Hosting"

Ich muss sagen, dass unser Hosting nicht schlecht war, aber es war auch nicht ideal.Wir haben Synthesis von Copyblogger verwendet.Als ich den Seitengeschwindigkeitstest durchführte, gab er immer wieder die Empfehlung "Verbesserung der Serverantwortzeiten" zurück.Dies bedeutet im Grunde, dass unser Server angesichts des Verkehrsvolumens, mit dem wir es zu tun hatten, nicht großartig war.

Fügen Sie das der Tatsache hinzu, dass wir keine Bildoptimierungsdienste durchführen konnten, es war eindeutig nicht $ 150 + wert, die wir monatlich bezahlten.

Traffic Planet Hosting betreten

Hosting WordPress Traffic Planet Hosting

Nachdem ich Bewertungen von mehreren Bloggern gelesen hatte, beschloss ich, Traffic Planet Hosting auszuprobieren.Der Grund, warum ich zu ihnen gegangen bin, ist, dass sie sich in Bezug auf Server tatsächlich auf Amazon S3 verlassen, so dass sie, obwohl sie ein kleines Unternehmen sind, auf eine der leistungsfähigsten Serverinfrastrukturen der Welt angewiesen sind.

Darüber hinaus bieten sie einen erstklassigen 24-Stunden-Service.Ich bin ein bisschen eine Nachteule und nerve sie sogar um 2 Uhr morgens im Chat, sie konnten mir immer helfen. Nicht schlecht.

Aber der eigentliche Vorteil von Traffic Planet Hosting im Zusammenhang mit diesem Beitrag ist, dass ich es geschafft habe, meine Seitengeschwindigkeit von 67 auf 71 zu erhöhen, nachdem ich zu ihnen gewechselt bin.Keine Tonne, aber denken Sie daran, dass ich bereits auf einem Hosting war, das als Premium und schnell galt.Wenn Sie auf etwas wie Bluehost sind, werden Sie höchstwahrscheinlich höhere Einnahmen sehen.

Wenn Sie das mit der Tatsache verbinden, dass ich buchstäblich $ 600 / Jahr an Hosting-Kosten gespart habe und sie alle Site-Transfers für mich durchgeführt haben, war dies es wert und half mir, meine Seitenladegeschwindigkeit in weniger als 1 Sekunde zu erreichen.

Ihre Pläne beginnen bei $ 24.99 / Monat.Es ist nicht das billigste und wenn Sie gerade erst anfangen, empfehle ich Bluehost, weil es gut genug für eine erste Seite ist.

Aber sobald Sie ein Upgrade auf etwas Robusteres mit echter, optimierter Unterstützung für WordPress-Hosting durchführen möchten, empfehle ich jetzt Traffic Planet Hosting auf WPEngine oder einem anderen für Preis und Leistung.

Wie machen Sie das für Ihre Website?

  1. Gehe zu Trafficplanethosting.com
  2. Wählen Sie den Plan, den Sie für die Anzahl der von Ihnen verwalteten Websites benötigen (die meisten von Ihnen sollten mit dem billigsten Plan einverstanden sein)
  3. Wenn Sie möchten, dass sie Ihre Websites von Ihrem vorherigen Host übertragen, ein neues Ticket mit Ihrem WordPress-Login und Ihren Hosting-Informationen einreichen, erledigen sie den Rest.

Hinweis zur Standortübertragung: Sie haben 9 unserer Standorte in 24 Stunden übertragen, es war alles ziemlich gut, aber einige Bilder gingen bei der Übertragung verloren.Stellen Sie sicher, dass Sie eine Sicherungskopie erstellen, bevor Sie das Hosting-Unternehmen wechseln.

Schritt 3: Ich habe unsere Bilder korrigiert

Schwierigkeiten

20%
Erforderliche Arbeiten

40%
Wirksamkeit

100%

Was diese Anpassung bewirkt: Sie ermöglicht es Ihnen, Ihre Bilder mit verschiedenen Bildoptimierungsalgorithmen direkt aus Ihrem WordPress-Dashboard ohne Qualitätsverlust zu verkleinern.

Warum so: Bilder sind der schwerste Teil der meisten Websites, das Reduzieren von Bildern macht Ihre Seiten viel kleiner und schneller.

Kosten: Ab $ 9Alternative: Kostenloses Bildkomprimierungswerkzeug Weniger fähig smush.it

In 90% der Fälle sind Bilder die größten Dateien, die auf einer Webseite heruntergeladen werden können.Tatsächlich machen sie 70% der gesamten Bandbreitennutzung weltweit aus.Deshalb sind sie das einzige, bei dem Sie signifikante Seitengeschwindigkeitsgewinne erzielen können.

Sie sehen, es gibt mehrere Bildkomprimierungsdienste, mit denen Sie Ihre Bilder verkleinern können, wodurch Ihre Seiten schneller geladen werden.Die 2 Hauptanwärter sind Yahoos Smush.it Yslow It und Kraken.io.

Smushit

Vs

Logo Kraken

Beide können als Plugins auf WordPress installiert werden, weshalb ich diese beiden behalten habe und das Bild im Grunde durch ihre API laufen ließ, während es sie lädt.Wenn Sie ein Thrive-Thema wie oben empfohlen verwenden, ist die Kraken-Mitgliedschaft enthalten, sodass Sie sich um diesen Schritt keine Sorgen machen müssen.

Der Unterschied zwischen den beiden ist, dass Kraken weitgehend überlegen ist, aber es ist ein kostenpflichtiger Service, während Smush nur halb gut, aber kostenlos ist.Entscheiden Sie mit Ihrem Portemonnaie, was die beste Gelegenheit für Sie ist.

Der Grund, warum ich Kraken beigetreten bin, war, unsere zuvor hochgeladenen Bilder zu optimieren, da Thrive-Themen nur neu hochgeladene Bilder optimieren.Mit $9 Guthaben konnte ich die gesamte Bildbibliothek optimieren und die Bildgröße um bis zu 85% reduzieren!Es ist riesig!

Mediathek Gesundheit Ambition WordPress
Durch die Optimierung unserer Bilder mit Kraken.io konnten wir ihre Größe auf Autopilot mit dem WordPress-Plugin um bis zu 80% reduzieren.

Die Website war nach dieser Änderung deutlich schneller und leichter.Es ist schwierig, einen Benchmark anzugeben, da die Geschwindigkeitsgewinne von Seite zu Seite variieren, aber einige unserer Seiten sind von mehreren Megabit auf einige hundert Kilobyte gestiegen.Nicht schlecht für eine einmalige Investition von $ 9.

Wie machen Sie das?

  1. Gehen Sie zu kraken.io und wählen Sie den $ 9-Plan, es sei denn, Sie haben eine große Bildbibliothek
  2. Gehen Sie zu WordPress.org und installieren Sie das Kraken .io-Plugin und fügen Sie Ihren API-Schlüssel in den Plugin-Einstellungen hinzu
  3. Gehen Sie zu Ihrer Medienbibliothek, wählen Sie alles aus und klicken Sie auf die Schaltfläche "krak 'em all", wählen Sie verlustbehaftet aus und führen Sie das Plugin aus
  4. Wiederholen Sie den Vorgang auf jeder Seite Ihrer Website.

Schritt 4: Ich habe das Caching auf unserer Domain erfolgreich eingerichtet

Schwierigkeiten

60%
Erforderliche Arbeiten

40%
Wirksamkeit

60%

Funktionsweise dieser Anpassung: Da Ihr CMS bei jedem Laden dynamisch Seiten generiert, ermöglicht das "Caching" Ihrer Website, feste Inhalte nicht bei jedem Seitenladen neu zu generieren, was die Seitengenerierung beschleunigt.

Warum so: Weil es kostenlos ist und es eine einmalige Aufgabe ist, die Ihre Website dauerhaft schneller laufen lässtKosten: KostenloseAlternativen: Verwenden Sie kein Caching

Ich muss zugeben, WordPress hat mein Leben verändert.Ich bin kein Programmierer und es gab mir die Werkzeuge, um mit Webdesignern zu konkurrieren, wenn es darum geht, Websites zu erstellen.Aufgrund der Funktionsweise muss es jedoch jedes Mal, wenn eine Seite geladen wird, viele Daten berechnen.

Caching hilft, diese Arbeit zu vereinfachen, indem verhindert wird, dass Ihre Website die gesamte Seite neu berechnen muss und die bereits geleistete Arbeit im Grunde genommen "speichert".In der Praxis bedeutet dies Dinge wie Kopfzeile, Seitenleiste, Fußzeile usw. Was zwischen den Seiten tendenziell ähnlich ist, sollte nicht immer wieder heruntergeladen werden.

W3-Cache insgesamt

Das empfohlene WordPress-Plugin zum Konfigurieren von Seiten- und Browser-Caching ist W3 Total cache.Es ist das beliebteste in dieser Kategorie und wahrscheinlich das am meisten integrierte.Es verbindet sich mit Yoast SEO, es verbindet sich mit den meisten Content-Delivery-Netzwerken.

Achtung, wenn Sie es falsch einstellen, kann dieses Plug-In die Website beschädigen und manchmal vollständig löschen.

Wie machen Sie das?

  1. Gehen Sie zur WordPress-Plugin-Suchmaschine und suchen Sie nach W3 Total Cache
  2. Installieren und Aktivieren des Plug-Ins
  3. Gehen Sie zu Leistung> Allgemeine Einstellungen
  4. Aktivieren Sie den Seitencache, minimieren Sie den Browsercache und klicken Sie auf Speichern

W3 Total Cache ist ein kompliziertes Plugin und könnte Ihre Website beschädigen. 

Schritt 5: Installieren Sie das Google Page Speed Module

Hinweis: Es sieht so aus, als hätte Google es gerade entfernt, als ich den Beitrag veröffentlicht habe. Sie können jedoch den gleichen Satz von Skripten kostenlos mit dem Seitengeschwindigkeitsmodul auf Ihren Servern installieren. Schaut es euch hier an.

Schwierigkeiten

60%
Erforderliche Arbeiten

60%
Wirksamkeit

80%

Was dieser Tweak tut: Es verwendet die Server und Algorithmen von Google, um Ihre Website zu bedienen und das Laden noch weiter zu beschleunigen, mit Dingen wie Over-the-Fold-Ladepriorität, faulem Laden von Bildern usw. Warum so: Weil es kostenlos ist, und wenn einer der Gründe, Ihre Seitengeschwindigkeit zu verbessern, der Suchverkehr ist, wer könnte es besser als Google passiv für Sie optimieren?

Kosten: Kostenlos (pro Stunde)Alternativen: Benutzerdefinierte Codierung und Ratschläge zur Geschwindigkeit der Website

Ich halte mich für ziemlich schlau, aber ich bin mir sicher, dass Googles PhDs wahrscheinlich schlauer sind.Der Page Speed Service von Google ist (vorerst) ein kostenloser Service von Google, der es jedem mit einer Website ermöglicht, die Infrastruktur von Google zu nutzen, um einige seiner Ressourcen zu bedienen.

Hier sind die Hauptmerkmale der Google-Seitengeschwindigkeit:

  • Stellt wichtige Dateien aus den lokalen Rechenzentren von Google bereit (fungiert als netzwerkbasiertes CDN von Google)
  • Umschreiben und Kombinieren von HTML, CSS und Javascript, um die Anzahl der Serveranfragen zu reduzieren
  • Bereinigen von Code, um seine Größe zu reduzieren
  • Optimieren Sie die Upload-Priorität, um sichtbare Inhalte zuerst zu laden (wahrgenommene Verbesserung der Upload-Geschwindigkeit).
  • Passt die Größe von Bildern an die Rendergröße an.

Eine sehr interessante Sache an diesem Service ist die Erhöhung der Geschwindigkeit der "wahrgenommenen" Seite.Dies bedeutet, dass sie die Priorität haben, zuerst Above-the-Fold-Inhalte zu laden, wodurch Ihre Website für den Besucher schneller wird (und Ihren SEO-Seitengeschwindigkeitskern erhöht).

Ein weiteres interessantes Feature ist, dass der Dienst im Grunde ein kostenloses CDN ist und dass es sich viel besser anfühlt als die kostenlose Version von Cloudflare.Normalerweise beginnen Premium-CDN-Dienste wie Max CDN bei $ 9 / Monat.Das sind Einsparungen von $ 108 / Jahr zusammen mit der Optimierung Ihres Codes.

Wenn Sie verstehen möchten, wie der Dienst technisch funktioniert, sehen Sie sich dieses Video an:

Wie machen Sie das?

Ich hätte eine Schritt-für-Schritt-Anleitung machen können, aber Google hat es besser gemacht als ich :).

Schlussfolgerung

Hier ist.Nachdem ich viel online recherchiert hatte, habe ich diese 5 Dinge auf unsere Website angewendet und es geschafft, die Top 10% der Websites in Bezug auf die Geschwindigkeit zu erreichen, obwohl ich sehr niedrig angefangen habe.

Verstehe ich die genauen technischen Implikationen der einzelnen Schritte?Natürlich nicht. Ich bin kein Ingenieur, und viele der vorgeschlagenen Schritte basieren auf fortschrittlichen Webtechnologien, die nicht einmal die meisten Ingenieure unbedingt erklären könnten.

Aber der Beweis liegt im Pudding: Es funktioniert und ist bequem.Wenn Sie alles anwenden würden, was Sie in diesem Leitfaden gefunden haben, würden Sie einmalige Kosten von $ 58 zusammen mit Kosten von $ 24.99 / Monat für das Hosting anstelle von $ 7.99 für billigere Hosting-Anbieter sehen.

Das ist ein kleiner Kostenfaktor im Vergleich zur Alternative: einen High-End-Entwickler einzustellen, der all dies für viel Geld für Sie erledigt.

Ich würde gerne Ihr Feedback in den Kommentaren dazu erhalten und vielleicht die anderen Tricks lernen, die Sie verwendet haben, um Ihre Website schneller zu machen!

Open

info.ibdi.it@gmail.com

Close