Optimieren von Google PageSpeed ​​auf 100 in WordPress

Was Sie erstellen werden

So erreichen Sie eine PageSpeed ​​von 100

Willkommen zum zweiten Teil unserer Serie bei Google PageSpeed. In der ersten Folge habe ich den PageSpeed ​​des damaligen Themas meiner Website, MySiteMyWay's Construct, optimiert. Es gelang mir, 70 Mobile und 86 Desktop zu erreichen. 

Mit dem Schließen von MySite wählte ich jedoch ein neues Design und erreichte 100 PageSpeed ​​für Mobile und Desktop. Es dauerte ungefähr 12 Stunden, um dies zu erreichen. Nun ist die Leistung meiner Website eine der schnellsten WordPress-Seiten, die ich seit langem gesehen habe - check it out. Das Browsen ist fast augenblicklich.

In diesem Tutorial gehe ich Ihnen durch, wie ich dies geschafft habe und was ich über WordPress und Google PageSpeed ​​gelernt habe. Den größten Teil des Tages habe ich daran gearbeitet, ich dachte, ich könnte in den Neunzigern ein Top-Ergebnis erzielen. Ich war ein wenig überrascht, als es plötzlich für Desktop 100 auf 100 sprang - und es waren nur noch ein paar Details, um Mobile zu maximieren.

Für diejenigen, die es nicht wissen, ist Google PageSpeed ​​ein kostenloses Tool, das die Leistung und Benutzerfreundlichkeit Ihrer Website für mobile und Desktop-Plattformen bewertet. Es ist besonders wichtig, weil Google es verwendet, um die wichtigsten Elemente unseres SEO-Rankings zu bestimmen, d. H. Wie hoch wir in ihren Suchergebnissen erscheinen.

Wenn Sie mehr über die Vorteile einer erhöhten Website-Geschwindigkeit erfahren möchten, lesen Sie die Gründe, warum die Optimierung der Website-Geschwindigkeit Teil Ihrer SEO-Strategie sein sollte. Es hebt hervor: "... mehrere Fallstudien haben gezeigt, dass das Laden von Seiten mit einem höheren Umsatz stark korreliert."

Google und WordPress machen dies nicht einfach 

Letztendlich hat die Optimierung meiner PageSpeed ​​viel Zeit und Mühe gekostet und meine Website für zukünftige Plugins und Google-Skriptupdates anfällig gemacht. Viele dieser Arbeiten sind ziemlich verwirrend, detailorientiert und zeitaufwändig. Es ist auch ein bisschen verrückt und verblüffend. Danke, Google. 

Eine statische Site enthält normalerweise eine Datei mit CSS und JS-Includes, die leicht minimiert und kombiniert werden kann. WordPress ist viel komplexer. Durch die WordPress-Ähem-weniger als perfekte Architektur wird so viel dynamisch erstellt.

Es kann einige Zeit dauern, um herauszufinden, wo Dateien erstellt werden, ob sie sich in den Designs oder Plugins befinden und wie diese Probleme behoben werden. Es stellt sich heraus, dass, wenn Sie sieben Plugins einschließlich JavaScript-Dateien haben und diese minimieren und zu einem Include zusammenfassen möchten, während Sie regelmäßige Plugin-Upgrades zulassen, es in der WordPress-Welt eine Herausforderung ist, ständig wechselnde Designs und Plugins zu ändern.

Das macht viele Entwickler traurig:

Bildnachweis: Mein Foto vom Picasso Museo in Paris. Könnte jetzt als "Sad Developer Confronting PageSpeed ​​of Mobile 55 / Desktop 62" bezeichnet werden

Lassen Sie mich Sie ermutigen, indem Sie zeigen, wie ich es getan habe (Sie haben heute nichts Nützliches zu tun, oder?). Denken Sie daran, dass die Anforderungen Ihrer Website von meinen etwas abweichen können. 

Bevor wir anfangen, denken Sie daran, ich versuche, an den folgenden Diskussionen teilzunehmen. Wenn Sie eine Frage oder ein Thema haben, schreiben Sie bitte einen Kommentar oder kontaktieren Sie mich unter Twitter @reifman. Ich bin an Ihren Erfahrungen mit WordPress und PageSpeed ​​interessiert.

Die grundlegenden Schritte zu PageSpeed ​​100

Ein neues Thema auswählen

Wenn Sie auf dem Markt für ein neues WordPress-Design sind und PageSpeed ​​bewerten möchten, sind Sie vielleicht überrascht, dass die Bewertungen für bekannte Themen häufig in den 60er und 70er Jahren, aber auch bis in die 90er Jahre gehen. Hier sind ein paar Artikel zu Themen und PageSpeed ​​über ColorLib und WPMU. In jedem Fall habe ich höher erwartet. 

Als Beispiel für die Erwartungen der Branche zählt die Website der New York Times 53/55 für mich, weit unter 100. 

Der PageSpeed ​​verschiedener Themes wird stark durch die Anzahl und Größe der verwendeten JavaScript-Dateien und CSS, die Anzahl der verwendeten Bilder und deren Größe sowie den Ansatz ihrer mobilen Implementierung beeinflusst, d. H. Einige Ersteller scheinen ihre PageSpeeds beim Erstellen nicht zu betrachten.

Array-Themen Medium

In diesem Tutorial werde ich mich auf die Verbesserung meiner persönlichen Website JeffReifman.com konzentrieren. Ich habe mich aus verschiedenen Gründen für Medium by Array Themes entschieden.

Der erste war die Grundgeschwindigkeit. Mobile 74 und Desktop 89 können von ihrem Demoserver aus gestartet werden. Dies war zwar schon etwas besser als ich es auf Construct maximiert hatte, aber es war ein moderneres Thema und es gab viele verbleibende Optimierungsschritte, die ich versuchen konnte. Ich hatte gehofft, PageSpeed ​​in die hohen 80er oder niedrigen 90er zu bringen.

Angesichts des Wachstums der mobilen Leserschaft wollte ich mich auch von Sidebars abwenden, insbesondere bei der Anzeigenplatzierung (Ich hoffe, ich schreibe über meine neuen Umsatzrichtungen in unserem laufende Google DFP-Serie). Das Medium-Design eignet sich gut, um die linke Seitenleiste in ein ansprechendes Menü zu falten und die rechte Seitenleiste zu verbergen.

Anfängliche PageSpeeds des Mediums

Hier war der erste PageSpeed ​​für die Demo von Medium (Demo-Hosting ist nie streng optimiert). Es war tatsächlich ermutigend zu sehen, dass es viele nicht adressierte Probleme gab, weil es zeigte, dass es besser war als mein optimiertes Konstrukt, bevor zusätzliche Anstrengungen unternommen wurden und ähnliche Aufgaben zur Maximierung der Punktzahl ausgeführt wurden:

Hier sind weitere Themen:

Und mehr:

Und die User Experience-Herausforderungen, die lokaler waren:

Schließlich ist hier der Demo-Desktop-Score:

Ermutigt durch die Foundation-Bewertung kaufte und installierte ich das Medium-Design auf meinem Server und machte mich an die Arbeit.

Denken Sie daran, dass das Ändern von Themen ziemlich kompliziert sein kann. Für mich hat das Ersetzen, Entfernen und Aktualisieren von integrierten Kurzcodes aus dem Konstruktionsdesign die meiste Zeit in Anspruch genommen, und ich bin noch nicht vollständig fertig, z. Dropcaps, Pullquote-Variationen, Schaltflächen, Registerkarten und seitenbasierte Navigationsmenüs. Meine 100er Fahrt drängte mich ungeachtet des Vorwärtskommens. Das Durchsuchen und Ersetzen in WordPress bietet einige gute Lösungen zum Suchen und Ersetzen von Shortcodes.

Während dieses Tutorial Sie nicht durch die genauen Schritte zum Erhöhen des PageSpeed ​​Ihrer Website auf 100 führt, führt es Sie durch viele mögliche Lösungen und die Identifizierung allgemeiner Straßensperren. Es gibt eine weitere großartige verallgemeinerte Ressource, die ich am Ende mitteilen möchte.

Eckpfeiler der Leistung in WordPress

Ich habe mich mit ArrayThemes über die Sub-100-Demo-Performance des Medium-Themas in Verbindung gesetzt. Sie schickten eine hervorragende Antwort:

Der PageSpeed-Optimierungstest sollte mit einem Körnchen Salz durchgeführt werden… unsere Demo wird für das Zwischenspeichern nicht verwendet, aber wir brauchen eigentlich keine Zwischenspeicherung in unseren Demos… PageSpeed-Vorschläge sind nicht ganz genau oder beispielhaft für die Leistung eines Themas. Dies hängt vollständig von Ihrem Setup, Server, Caching und anderen Optimierungen ab, die Sie vornehmen möchten.

Dies ist ein idealer Ausgangspunkt für die Überprüfung der gemeinsamen grundlegenden Elemente für die WordPress-Leistung. Alle unten aufgeführten Leistungsbereiche beziehen sich auf die zugrunde liegenden PageSpeed-Werte, nicht auf die Grundlagen.

Caching

WordPress-Caching ist entscheidend für die Leistung, und ich habe regelmäßig über meine Favoriten geschrieben: W3TC und Varnish Cache, z. Optimierung von WordPress mit Lack und W3 Total Cache.

Es stellt sich heraus, dass es eine Handvoll Plugins gibt, die Sie dabei unterstützen, die Herausforderung des effizienten Caching zu meistern. Hier sind zwei der besten, die ich ausprobiert habe:

  • Minit: Ein WordPress-Plugin zum Kombinieren von CSS- und JavaScript-Dateien.
  • Minimierung der Abhängigkeit: Verkettet und minimiert automatisch alle in die Warteschlange eingereihten Skripts und Stylesheets mithilfe des Standardabhängigkeitssystems.

Bildgutschrift: WordPress-Taverne

Beides war hilfreich, aber für mich war ich mit PageSpeed ​​nicht ganz beseitigt, wie z. B. das Einbetten von CSS in mein Tag zum Entfernen von PageSpeed-Problemen; Mit anderen Worten, dieses Plugin wird Sie wahrscheinlich nicht bis zu 100 PageSpeed ​​führen. Ich fand Dependency Minification für effizient und hilfreich, aber aufgrund der mangelnden Flexibilität bin ich weggegangen.

Letztendlich würde ich immer wieder zu W3 Total Cache zurückkehren und neue, leistungsfähigere Methoden finden, um die Performance zu verbessern. Es ist nicht perfekt und hat definitiv ein paar UX-Fehler. Es hat auf so gute Weise funktioniert, dass ich meinen Weg mit anderen Ansätzen zu PageSpeed ​​100 finden kann. 

Am Ende habe ich nur ein neues Plugin gewählt, das das Entfernen von PageSpeed-Problemen mit Disqus erleichtert. Ich werde dies weiter unten wiederholen.

Content Delivery Networks (CDN)

Ein weiterer wichtiger Dienst ist ein Netzwerk zur Bereitstellung von Inhalten. Zuvor habe ich bei Envato Tuts + über Accelerate Your Content Delivery mit KeyCDN geschrieben und dann beschlossen, als Kunde zu ihnen zu wechseln.

Am Ende stehen Ihnen verschiedene CDNs zur Auswahl, wie zum Beispiel CloudFlare und RackSpace, um nur einige zu nennen.

Bildoptimierung

Vor kurzem begann ich mit dem neuen Optimus-Bildoptimierungsdienst von KeyCDN und dem WordPress-Plugin zu experimentieren. Es gibt eine kleine Möglichkeit, dass es von Robotern betrieben wird, die mit alten Apple Lisas und Macs gebaut wurden:

Es funktioniert gut, aber eine andere beliebte Alternative ist WP-Smush, ein älteres Plugin mit mehr als 300.000 Benutzern.

Aufhebung der Render-Blockierung

Wenn Sie über eine Vielzahl von Dateien verfügen, die im Style (CSS) geladen und die Funktionalität Ihrer Webseite aktiviert werden müssen, verlangsamen sich die meisten Browser, wenn vier Ressourcen parallel angefordert werden. 

Hier ein Beispiel für die CSS-Rendering-Beanstandung in PageSpeed:

Dies kann ein hartes WordPress-Element sein, das aufgrund der Design- und Plugin-Architektur entfernt werden muss. Wir kommen darauf zurück.

Welche Schritte haben meine Site letztendlich auf 100 verschoben?

Gezielte Optimierungsansätze

Wenn Sie alle oben genannten wichtigen Grundlagen erfüllt haben, ist die Verbesserung Ihrer PageSpeed ​​mit WordPress sehr aufwändig und kann sehr zeitaufwändig sein. 

Gehen wir Schritt für Schritt durch die identifizierten Problembereiche und die Art und Weise, wie ich sie gelöst habe. In Wahrheit experimentierte ich mit verschiedenen Werkzeugen und Ansätzen. Ich lehnte regelmäßig einen Ansatz ab und kehrte zu einem anderen zurück. Meine Lösung erwies sich als ein ziemlich gut verwaltetes Patchwork von Lösungen. Der Weg war nicht direkt Yoda.

Minimierung von HTML, JavaScript und CSS

So minimieren Sie beispielsweise HTML in W3 Total Cache:

JavaScript bündeln am Ende der Seite

Ebenso ist es einfach, JavaScript in W3 Total Cache zu minimieren. Beachten Sie unten, dass ich W3TC angewiesen habe, die komprimierte Datei nicht in die Datei einzubetten aber stattdessen kurz davor . Das Verzögern von JavaScript kann Ihren PageSpeed-Score verbessern.

Minimieren von kombiniertem CSS aus Designs und Plugins

Da sowohl Themes als auch Plugins JavaScript und CSS verwenden, ist es ein bisschen Arbeit, sie zu minimieren und in einer einzigen Datei zu kombinieren (und das ist nicht einmal genug für PageSpeed, was ich weiter unten besprechen werde)..

Um zu verhindern, dass Plugins ihr eigenes CSS laden und W3TC anweisen, komprimierte und kombinierte Versionen zu laden, müssen Sie das Handle des Plugins für die CSS-Datei (abgesehen von Dateinamen) suchen und Ihrem Design Code hinzufügen, um die Anweisungen zum Laden des Plugins zu unterbrechen. Geben Sie anschließend den Pfad zu jeder CSS-Datei im obigen W3TC-Dialogfeld ein, um mit den anderen geladen zu werden.

Blogger Justin Tadlock bot einige Anleitungen an, in denen erläutert wurde, wie WordPress gebeten wird, die CSS-Dateien nicht zu laden, die meine Plugins zum Laden in die Warteschlange gestellt hatten. Sie müssen sich abmelden und dann eine kombinierte Datei selbst laden.

Hier ist mein Inhaltsverzeichnis-Plugin, das seine JS- und CSS-Dateien in eine Warteschlange stellt:

/ ** * Registrieren und Laden von CSS- und Javascript-Dateien für das Frontend. * / function wp_enqueue_scripts () $ js_vars = array (); // unsere CSS und Skripte registrieren wp_register_style ('toc-screen', $ this-> path. '/screen.min.css', array (), TOC_VERSION); wp_register_script ('toc-front', $ this-> path. '/front.min.js', array ('jquery'), TOC_VERSION, true); // Enqueue sie! if (! $ this-> options ['exclude_css']) wp_enqueue_style ("toc-screen"); if ($ this-> options ['smooth_scroll']) $ js_vars ['smooth_scroll'] = true; wp_enqueue_script ('toc-front');

Dem Vorschlag von Tadlock folgend, habe ich mein Plugin abgemeldet und fügt es in die functions.php meines Themes ein. Beginnen wir mit dem CSS. Man muss die Referenzen finden, die vom Plugin-Entwickler verwendet werden:

 add_action ('wp_print_styles', 'my_deregister_styles', 100); function my_deregister_styles () wp_deregister_style ('toc-screen');  

Ich habe manuell eine kombinierte CSS-Datei mit diesen drei Plugin-Stylesheets erstellt. Dann bat ich W3TC, diese Datei zu minimieren und zu einem eigenen Mega-Stylesheet zu kombinieren, wie oben gezeigt.

Optimieren des CSS-Ladevorgangs für PageSpeed

W3TC kombiniert möglicherweise alle meine Theme- und Plug-In-Dateien, aber PageSpeed ​​mag es nicht, auch nur ein CSS-Include zu sehen (so viel für gute HTML-Entwicklungsmethoden):

Ich habe letztendlich neun CSS-Dateien geladen (nur sieben unten). Zunächst müssen Sie Plugin-Handles für CSS finden und sie wie oben beschrieben in Ihrem Design abmelden. Dann müssen Sie alle auf W3TC zeigen. 

Zwar gibt es mehrere Möglichkeiten, eine verkleinerte Version von allen zu erhalten, aber ich habe mir die komprimierte Datei von W3TC gekauft. Ich habe alle Cache-Abfrage-Argumente entfernt, z. ?cbe3w2, mit Suchen und Ersetzen in TextEditor. Ich bin immer noch ein treuer TextMate-Benutzer, aber es gab tatsächlich große Verzögerungen und Blockierungen, wenn ich versuchte, durch eine minimierte CSS-Datei zu navigieren. TextEditor hat mir also geholfen, diese Dateien einzeln zu bearbeiten. Entschuldigung bei Puristen, ich bin noch nicht zu Sublime gewechselt.

Während es mir gelang, mein vermindertes CSS in meine Kopfzeile einzufügen, musste ich es später ändern, um den Inhalt der CSS-Dateien dynamisch abzurufen und sie wiederzugeben. 

  

Nachdem ich ein weiteres Plugin für Social Sharing hinzugefügt hatte, funktionierte das Einfügen nicht mehr und ich musste die Dateien mit dem obigen Mechanismus trennen. Dies bietet auch mehr Flexibilität für die Zukunft. Google PageSpeed ​​sieht das nie und mein Varnish-Cache verbirgt die Verlangsamung der Aufnahme von zwei Dateien.

Letztendlich habe ich alle meine CSS-Dateien in W3TC konfiguriert, Kopien der komprimierten Dateien erstellt und diese Include-Funktion dann deaktiviert:

Ein Nachteil von W3TC ist, dass es wiederholt störende Fehlermeldungen anzeigt, obwohl Sie es absichtlich auf ungewöhnliche Weise verwenden.

Stellen Sie beim Verschieben von CSS-Dateien aus Plugin-Verzeichnissen sicher, dass Sie korrekte relative Pfade zu Images usw. festlegen, um vom Stammverzeichnis der Site aus zu arbeiten. Ich hatte eine Menge Situationen, in denen Bilder nicht geladen wurden, bis ich herausgefunden hatte, wo ich diese Dinge lösen konnte. Ich teile ein Beispiel in der Fehlerbehebung Abschnitt unten.

Externe Skripts im Browser zwischenspeichern

Komischerweise beschwert sich Googles PageSpeed, wenn Sie seine JavaScript-Bibliotheken extern laden. Ich habe Fehler für externe Skripts erhalten, die sich auf Flickr, Disqus und Google Analytics beziehen:

Dies stellte sich als großes Hindernis heraus und erfordert viel Zeit und Komplexität, um diese Probleme vollständig zu lösen. 

Probleme beim Einbetten von Flickr entfernen

Erstens war ich kürzlich von einer Indienreise zurückgekehrt und habe einzelne Blogeinträge mit in Flickr eingebetteten Fotos auf die Startseite gestellt. Mein Medium-Thema blättert schnell durch eine Reihe von Posts, daher beschwert sich PageSpeed ​​darüber.

Nachdem ich festgestellt hatte, dass PageSpeed ​​sowohl über Flickr-gehostete Embedded-Image-Größen (bei verschiedenen Pixelzahlen) als auch über diese externen JavaScript-Fehler klagte, kehrte ich zu auf Self-Hosting optimierten Images auf meiner Website zurück. Sie haben immer noch einen Link zu Flickr für mein laufendes Indien-Album.

Dies ist ein gutes Beispiel dafür, wie der Versuch, einen leistungsstarken Dienst eines Drittanbieters zu verwenden, der Fotos einfach einbinden kann, Ihren PageSpeed-Score tötet. Flickr hat WordPress-Benutzern bei der Lösung dieses Problems nicht optimal geholfen. Als Beispiel müssten sie:

  • bieten eingebettete Größen, die die Bildoptimierung von PageSpeed ​​unterstützen (möglicherweise als separate Exportoptionen, die für Ihre PageSpeed-Flickr hinsichtlich der Bildqualität beeinträchtigt werden)
  • Publizieren Sie den JavaScript-Code auf einfache Weise, um ihn in WordPress- und W3TC-Kombinationsdateien zu integrieren

Selbsthosting von externen JavaScript-Dateien

Bei meinen verbleibenden Google-Dateien bestand die beste Lösung darin, eine Kopie von Skripts für Analytics und DFP lokal zu hosten und Cron-Skripts zu verwenden, um sie regelmäßig auf einem Server zu aktualisieren. 

Zuerst habe ich mein Google Analytics-Plugin nicht mehr verwendet und manuell modifizierten Code in den Header meines Themes eingefügt:

//…      

Beachten Sie, dass ich die Pfade in meine lokalen Kopien der Skripts geändert habe. Dann habe ich lokale Kopien der Skripts für Google Analytics und Google DFP erstellt und kurz nachdem mein Browser-Caching in PageSpeed ​​außer Disqus aufgelöst wurde. 

Beheben des Disqus-Plugin-Ladeproblems

Ich weiß nicht genau, ob es sich um Sicherheits- oder Multiplattform-Support oder um reine "Klugheit" handelt, aber Disqus und andere Anbieter wie Flickr scheinen die eigentlichen Dateien zu verdecken, die sie mit anderen Dateien laden. Dies macht das Optimieren von PageSpeed ​​viel schwieriger und oft unlösbar.

Zugegebenermaßen habe ich zwei bis drei Stunden damit verbracht, verschiedene Ansätze zu testen, um das Disqus-Plugin zu optimieren - nichts hat für mich funktioniert.

Letztendlich habe ich das Disqus-Plugin deinstalliert und Disqus Conditional Load installiert:

Es ist für viele Zwecke gedacht, ermöglicht aber auch die Optimierung von PageSpeed ​​bei der Installation.

Plötzlich waren die Nachteile von PageSpeeds Leverage-Browser-Caching verschwunden. Ein großes Lob an DCL!

Fixieren der Tap-Ziele

PageSpeed ​​beschwert sich häufig über Links, die in mobilen Geräten zu eng angeordnet sind. Ich habe mit ein paar Ansätzen experimentiert und letztendlich einfach keine Tags mehr auf mobilen Geräten angezeigt. 

Wenn ich mehr Zeit verbringe, kann ich wahrscheinlich ihre UX verbessern und mit PageSpeed ​​bestehen.

 

  • Vorherigen Post: ', 'Mittel' ) . '%Titel' ); ?>
  • Nächster Beitrag: ', 'Mittel' ) . '%Titel' ); ?>

Fehlerbehebung

Fehlende Bilder aus komprimiertem und kombiniertem CSS

Das ArrayToolkit-Plugin, das in der rechten Seitenleiste Folge-Symbole anzeigt, funktioniert für mich nicht mehr. Ich brauchte eine Weile, um herauszufinden, welche Pfade mit absoluten Pfaden codiert werden mussten, damit es funktioniert.

Letztendlich habe ich diese Pfade gefunden und durch korrigierte relative Pfade zum ursprünglichen Plugin-Verzeichnis ersetzt:

// Musste Pfad in Plugin einfügen css @ font-face font-family: 'array'; src: url ('./ fontello / array.eot'); src: url ('./ fontello / array.eot # iefix') format ('embedded-opentype'), url ('./ fontello / array.woff') format ('woff'), url ('./ fontello) /array.ttf ') format (' truetype '), URL (' ./ fontello / array.svg # array ') format (' svg '); Schriftgewicht: normal; font-style: normal; 

Defektes JavaScript

Ich habe immer noch ein Problem, das ich lösen muss. Mein neues Tabs-Plugin (Construct hatte integrierte Tabs) funktionierte auf dem Weg nicht mehr. Ich muss nur Zeit damit verbringen, es zu debuggen, aber es sollte ziemlich einfach zu finden sein.

Den besten Minifier auswählen

Ich habe mit YUI Compressor mit W3TC experimentiert, um meine JavaScript- und CSS-Dateien zu komprimieren. Anstatt zu einer erhöhten Geschwindigkeit zu führen, brach alles irgendwie zusammen.

Wenn Sie wissen möchten, was ich falsch gemacht habe, können Sie Java und YUICompressor folgendermaßen installieren:

#good luck sudo apt-get install openjdk-6-jre cd / usr / local / lib sudo wget https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar

Bitte posten Sie in den Kommentaren, wenn Sie wissen, wie man es gut mit WordPress spielt.

Abschließend

Nach dieser zweiten Runde des neuen Themas lief alles besser als ich gehofft hatte. Ich war mir nie sicher, ob ich mein optimales Ziel erreichen würde.

Meine letzten PageSpeed ​​Scores

Ich habe 100 PageSpeed ​​sowohl für Mobile als auch für Desktop erzielt. Noch bemerkenswerter war, dass meine Website superschnell und schneller lief, als ich jemals einen Blog-Lauf hatte. Ich bin sehr gespannt, wie der eingehende Suchverkehr und die Leseaktivität auf die schnelleren Ergebnisse und die Leistung in den nächsten Monaten reagieren.

Hier sind meine letzten PageSpeed-Ergebnisse, zuerst Mobile:

Und jetzt Desktop:

Desktop erreichte zuerst 100, und ich musste zurückgehen und einige Anpassungen (Adressierungsziele) abschließen, um Mobile dorthin zu bringen.

Auch hier ist die Geschwindigkeit der Website einen Besuch wert. Wenn Sie von anderen kommerziellen Websites mit 100 PageSpeed ​​wissen, teilen Sie diese bitte in den Kommentaren mit. Ich würde sie gerne sehen.

Als ein Beispiel für SEO-Änderungen sprang mein beliebter Essay über Dating auf den dritten Platz bei den mobilen Ergebnissen unter "Seattle aus"(noch nicht auf dem Desktop.) Dies sagt mir, dass Geschichten auf wichtigen Websites, die es schlagen, schlechte mobile PageSpeeds haben, weil es nicht einfach ist.

Die Herausforderung der zukünftigen Instandhaltung

Um den PageSpeed ​​meiner Website zu maximieren, musste ich einige Änderungen an meinem Design vornehmen, wodurch nun Abhängigkeiten von Änderungen an externen Skripts und Aktualisierungen des Designs und der Plugins erstellt werden. Nun, da ich mit meinem kurzfristigen Ziel fertig bin, muss ich meine Systeme so organisieren, dass dies einfacher zu handhaben ist.

Cron für externe Dateien

Bald muss ich dieses cron-Skript implementieren, um meine selbst gehosteten Google-Skripts für Analytics und DFP zu synchronisieren.

Hier ist ein Unternehmen, das einen einfacheren Ansatz für die Verwendung von Analytics bietet, ohne dass PageSpeed ​​bestraft wird, wodurch der letzte Punkt in Google PageSpeed ​​Insights behoben wird. Ich möchte mich nicht auf andere Dritte verlassen.

Theme-Updates verwalten

Ich muss auch die Aktualisierungen des Mediums besser nachverfolgen und Änderungen integrieren. Das Erstellen eines untergeordneten Themas aus meinen Änderungen kann diesen Prozess ebenfalls erleichtern. Meistens werde ich nach Änderungen suchen, die meine, aktualisierte (oder zusätzliche) JavaScript- und CSS-Dateien überschreiben.

Plugin-Updates verwalten

Ebenso muss ich beim Update der Plugins nach den gleichen Updates suchen. Es kann mir helfen, meine Verwendung von GitHub mit WordPress-Plugins besser zu organisieren. Ich benutze es bereits für mein Thema.

Automatisierung

Ich möchte vielleicht etwas Zeit damit verbringen, Skripts zu schreiben, um zu verfolgen, welche JavaScript- und CSS-Dateien mit dem aktualisierten Design und den Plugins verwendet werden, sie auf meinen Server herunterzuladen und die entsprechenden Dateien zu minimieren und zu packen oder einzubinden.

SSL

Eine meiner Überraschungen ist schließlich, dass SSL nicht erforderlich ist, um einen PageSpeed ​​von 100 zu erreichen. Dies macht zwar etwas Sinn, unterstreicht jedoch, dass eine Vielzahl verschiedener Komponenten das Ranking Ihrer Google-Suche beeinflussen kann. Ich werde in Kürze über das Implementieren des kostenlosen SSL-Protokolls von Let's Encrypt mit WordPress schreiben.

Was kommt als nächstes?

Wenn Ihnen dies gefallen hat, Sie aber ein allgemeineres Tutorial lesen möchten, das nicht so genau auf Details eingeht, die für Sie zutreffen könnten oder nicht, ist Google PageSpeed ​​Scoring 100/100 von KeyCDN mit WordPress eine hervorragende Ergänzung. Ich habe auch ein gesponsertes Stück über ihr CDN bei Envato Tuts + (Beschleunigen Sie die Bereitstellung Ihrer Inhalte mit KeyCDN) geschrieben und fuhr fort, sie als Kunde fortzusetzen.

Wenn Sie nach anderen Dienstprogrammen suchen, die Sie dabei unterstützen, Ihre wachsenden Werkzeuge für WordPress aufzubauen oder um Code zu lernen und sich mit WordPress vertraut zu machen, sollten Sie nicht vergessen, was wir in Envato zur Verfügung haben Markt.

In der Zukunft werde ich mir ein paar weitere Verbesserungen ansehen, um die Gesamtleistung meiner Website zu verbessern. Diese schließen ein:

  • Überprüfen Sie die individuelle PageSpeed ​​meiner beliebtesten Beiträge B. Amazon Marketplace Fraud Made Easy (derzeit 97), um sicherzustellen, dass sie alle bei 100 laufen. Wie in diesem Beispiel ist es oft nur eingebettete Bildgrößen, die PageSpeed ​​stören.
  • Verbesserung der Verwaltung meines Themes und meiner Plugins um diese Optimierungen so leicht wie möglich aufrechtzuerhalten, wenn Updates eintreffen, z. Änderungen an JS- und CSS-Dateien in Updates verfolgen, Kopien externer JS-Dateien (z. B. Analytics) auf dem neuesten Stand halten, aktualisierte Dateien erneut komprimieren usw..
  • Upgrade meines Servers auf PHP7. Das Upgrade verspricht fast 2x die Verbesserung der Leistung. Ein Upgrade vor der Ubuntu-Version ist nicht einfach, aber es ist nicht zu schwierig.
  • Upgrade meines Servers auf Varnish4. Das Upgrade erfordert einige Überarbeitungen der Konfigurationsdateien. Ich bin mir nicht sicher, ob es eine Verbesserung der Leistung und Kompatibilität mit W3 Total Cache gibt, aber ich bin bereit, es auszuprobieren.
  • Erkunden Der CacheEnabler von KeyCDN für effizientere Webp-Bilder für Chrome-Benutzer. Die Webp-Dateigrößen sind erheblich kleiner, werden jedoch von Safari noch nicht unterstützt. Ich bin eigentlich ziemlich aufgeregt, das Benutzererlebnis damit zu verbessern.

Wenn Sie Fragen haben, posten Sie diese bitte weiter unten. Sie können mich auch auf Twitter @reifman kontaktieren. Bitte sehen Sie sich meine Envato Tuts + Instructor-Seite an, um andere Tutorials zu sehen, die ich geschrieben habe, wie beispielsweise das Klonen von WordPress unter Linux (in 90 Sekunden)..

ähnliche Links

  • Google PageSpeed
  • Google PageSpeed ​​Scoring 100/100 mit WordPress
  • Webseiten-Test
  • 12 Website-Geschwindigkeitstest-Tools zur Analyse der Web-Performance
  • Website-Geschwindigkeitstest: Vollständiger Seiten-Performance-Check
  • Array-Themen mittleres Thema
  • Online JavaScript und CSS Compressor (SF aktualisieren)
  • Checkliste: 15 Dinge, die Sie tun müssen, bevor Sie WordPress-Themes ändern