Wie erreicht man eine PageSpeed von 100

Willkommen im zweiten Teil unserer Serie auf Google PageSpeed. In der ersten Folge habe ich die PageSpeed des Themes meiner Website, MySiteMyWays Construct, optimiert. Ich habe 70 Mobile und 86 Desktop erreicht.

Mit der Schließung von MySite wählte ich jedoch ein neues Thema und erreichte eine 100 PageSpeed für Mobile und Desktop. Es hat ungefähr 12 Stunden zusätzlicher Anstrengung gedauert, um dies zu erreichen. Jetzt ist die Leistung meiner Website eine der schnellsten WordPress-Seiten, die ich seit langem gesehen habe - schau es dir an. Das Browsen ist fast augenblicklich.

In diesem Tutorial zeige ich Ihnen, wie ich das erreicht habe und was ich über WordPress und Google PageSpeed gelernt habe. Den größten Teil des Tages, an dem ich daran gearbeitet habe, dachte ich, dass ich in den 90ern die Nase vorn haben könnte. Ich war ein wenig überrascht, als es plötzlich auf 100 für Desktop sprang - und es gab 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 Schlüsselelemente unseres SEO-Rankings zu bestimmen, d. H. Wie hoch wir in den Suchergebnissen erscheinen.

Wenn Sie mehr Hintergrundwissen über die Vorteile der erhöhten Website-Geschwindigkeit haben möchten, lesen Sie Mozs Warum Site Speed Optimization Teil Ihrer SEO-Strategie sein sollte. Es hebt hervor, "... mehrere Fallstudien haben gezeigt, dass schnellere Ladeseiten stark mit höheren Einnahmen korrelieren."

Google und WordPress machen das nicht einfach

Letztendlich hat die Optimierung meiner PageSpeed viel Zeit und Mühe gekostet und meine Site für zukünftige Plugins und Google Script Updates anfällig gemacht. Viele dieser Arbeiten sind ziemlich konfus, detailorientiert und zeitaufwendig. Es ist auch ein bisschen verrückt - machend und betäubend. Danke, Google.

Eine statische Site hat normalerweise eine Datei mit CSS- und JS-Includes, die leicht verkleinert und kombiniert werden kann. WordPress ist viel komplexer. So viel wird dynamisch durch die Architektur von WordPress erzeugt - nicht zu perfekt.

Es kann einige Zeit dauern, um herauszufinden, wo Dateien erstellt werden, ob sie in den Designs oder Plugins enthalten sind und wie diese Probleme behoben werden können. Es stellt sich heraus, dass es, wenn man sieben Plugins inklusive JavaScript-Dateien hat und diese zu einem Include minimieren und kombinieren möchte, regelmäßige Plugin-Upgrades erlaubt. Es ist eine Herausforderung in der WordPress-Welt mit ständig wechselnden Themes und Plugins.

Das macht viele Entwickler traurig:

Bildnachweis: Mein Foto von Picasso Museo in Paris. Könnte jetzt "Sad Developer Konfrontierung von PageSpeed of Mobile 55 / Desktop 62" genannt werden

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

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

Die grundlegenden Schritte zu PageSpeed 100

Auswählen eines neuen Designs

Wenn Sie auf dem Markt für ein neues WordPress-Theme sind und PageSpeed evaluieren möchten, werden Sie vielleicht überrascht sein, dass die Scores für bekannte Themen oft in den 60ern und 70ern, aber auch bis in die 90er Jahre gehen. Hier sind ein paar Artikel, die Themen und PageSpeed via ColorLib und WPMU bewerten. Auf jeden Fall habe ich höher erwartet.

Nur als Beispiel für die Erwartungen der Industrie, die New York Times Website punktet 53/55 für mich, weit unter 100.

Die PageSpeed von verschiedenen Themen wird stark von der Anzahl und Größe von JavaScript-Dateien und CSS, die sie verwenden, die Anzahl der verwendeten Bilder und ihre Größe und der Ansatz ihrer mobilen Implementierung, d. Einige YouTuber scheinen ihre PageSpeeds beim Erstellen nicht zu sehen.

Array-Motive Mittel

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

Die erste war seine Grundgeschwindigkeit. Mittleres Ergebnis Mobile 74 und Desktop 89 starten von ihrem Demo-Server. Das war zwar schon etwas besser, als ich Construct to maximiert hatte, aber es war ein moderneres Thema und es gab viele verbleibende Optimierungsschritte, die ich ausprobieren konnte. Ich hoffte, PageSpeed in die hohen 80er oder 90er Jahre zu bringen.

Angesichts der wachsenden Leserschaft auf Mobilgeräten wollte ich mich von Seitenleisten abwenden, vor allem für Werbeplazierung (ich hoffe, dass ich in meiner laufenden Google DFP-Serie über meine neuen Umsatzrichtungen schreiben kann). Das Medium-Thema macht einen guten Job, die linke Seitenleiste in ein responsives Menü zu klappen und die rechte Seitenleiste zu verbergen.

Mittlere Initial PageSpeeds

Hier war die anfängliche PageSpeed für die Demo von Medium (Demo-Hosting ist nie eng optimiert). Es war ermutigend zu sehen, dass es viele unadressierte Probleme gab, weil es zeigte, dass es besser war als mein optimiertes Konstrukt, bevor zusätzlicher Aufwand angewendet wurde und ähnliche Aufgaben, die ich ausführen musste, um den Punktestand zu maximieren:

Hier sind mehr der Probleme:

Und mehr:

Und die Benutzererfahrungsherausforderungen, die lokalisierter waren:

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

Ermutigt durch den Foundation Score, kaufte und installierte ich das Medium Theme auf meinem Server und machte mich an die Arbeit.

Beachten Sie, dass das Ändern von Themen ziemlich kompliziert sein kann. Für mich hat das Ersetzen, Eliminieren und Aktualisieren von integrierten Shortcodes aus dem Construct-Design die meiste Zeit in Anspruch genommen, und ich bin nicht vollständig fertig, z. Dropcaps, Pullquote-Variationen, Schaltflächen, Registerkarten und seitenbasierte Navigationsmenüs. Mein Antrieb für 100 brachte mich dazu, trotzdem voranzukommen. Wie man Massensuche und Ersetzen in WordPress durchführt, bietet einige gute Lösungen zum Suchen und Ersetzen von Shortcodes.

Dieses Tutorial führt Sie zwar nicht durch die genauen Schritte zum Erhöhen der PageSpeed Ihrer Website auf 100, führt Sie jedoch durch viele der möglichen Lösungen und identifiziert häufige Roadblocks. Es gibt eine weitere großartige verallgemeinerte Ressource, die ich am Ende teilen werde.

Eckpfeiler der Leistung in WordPress

Ich habe ArrayThemes ein wenig über die Sub-100-Demo-Performance des Mediums Theme kontaktiert. Sie haben eine ausgezeichnete Antwort gesendet:

Der PageSpeed-Optimierungs-Test sollte mit einer Prise Genauigkeit durchgeführt werden ... unsere Demo wird für Nicht-Caching entwickelt, aber wir müssen nicht wirklich auf unseren Demos cachen. PageSpeed-Vorschläge sind nicht ganz genau oder beispielhaft für die Leistung eines Themas. Es hängt vollständig von Ihrem Setup, Server, Caching und anderen Optimierungen ab, die Sie vornehmen möchten.

Dies ist ein perfekter Ausgangspunkt für die Überprüfung der grundlegenden Elemente für WordPress-Leistung. Alle unten aufgeführten Leistungsbereiche behandeln die zugrundeliegenden PageSpeed-Scores nicht vollständig, sondern die Grundlagen.

Zwischenspeichern

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

Es stellt sich heraus, dass es eine Handvoll Plugins gibt, die entwickelt wurden, um Ihnen die Herausforderung des effizienten Caching zu bieten. Hier sind zwei der besten, die ich ausprobiert habe:

• Minit: Ein WordPress-Plugin zum Kombinieren von CSS- und JavaScript-Dateien.
• Abhängigkeitsminimierung: Verkettet automatisch alle Skripte und Stylesheets, die mit dem Standardabhängigkeitssystem in die Warteschlange eingereiht werden, und minimiert sie.

Bildnachweis: WordPress Tavern

Beide waren hilfreich, aber für mich, die mit PageSpeed in Zusammenhang stehen, wurden keine Barrieren beseitigt, wie das Einbetten von CSS in mein <head>-Tag, um PageSpeed-Probleme zu entfernen. Mit anderen Worten, dieses Plugin wird Sie wahrscheinlich nicht den ganzen Weg zu 100 PageSpeed bekommen. Ich fand Dependency Minification als effizient und hilfreich, aber seine mangelnde Flexibilität ließ mich gehen.

Letztendlich würde ich immer wieder zu W3 Total Cache zurückkehren und neue, leistungsfähigere Wege finden, um es für die Leistung zu drücken. Es ist nicht perfekt und hat definitiv einige UX-Fehler, es hat gut genug funktioniert, dass ich meinen Weg mit anderen Ansätzen zu PageSpeed 100 gefunden habe.

Am Ende habe ich nur ein neues Plugin ausgewählt, das das Entfernen von PageSpeed-Problemen mit Disqus einfach macht - ich werde das weiter unten besprechen.

Content Delivery-Netzwerke (CDN)

Ein weiterer wichtiger Service ist ein Content-Delivery-Netzwerk. Zuvor schrieb ich über Accelerate Your Content Delivery mit KeyCDN bei Envato Tuts+ und entschied mich dann, zu diesen Kunden zu wechseln.

Am Ende gibt es eine Vielzahl von CDNs, wie CloudFlare und RackSpace, um nur einige zu nennen.

Bildoptimierung

Vor kurzem habe ich mit KeyCDNs neuem Optimus-Bildoptimierungs-Service und WordPress-Plugin experimentiert. Es gibt eine kleine Möglichkeit, dass es von Robotern mit alten Apple Lisas und Macs betrieben wird:

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

Eliminierung von Renderblockierung

Wenn Sie viele verschiedene Dateien laden müssen, um die Funktionalität Ihrer Webseite zu stylen (CSS) und zu aktivieren (JS), werden die meisten Browser langsamer, wenn vier Ressourcen gleichzeitig angefordert werden.

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

Dies kann ein hartes WordPress-Element sein, das aufgrund der Design- und Plugin-Architektur eliminiert wird. Wir werden darauf zurückkommen.

Mit welchen Schritten wurde meine Website letztendlich auf 100 gesetzt?

Gezielte Optimierungsansätze

Wenn Sie alle wichtigen Grundlagen oben getan haben, stellt die Verbesserung Ihrer PageSpeed mit WordPress einen erheblichen Aufwand dar und kann ziemlich zeitaufwendig sein.

Gehen wir Schritt für Schritt durch die identifizierten Problembereiche und die Wege, wie ich sie gelöst habe. In Wahrheit habe ich sehr viel mit verschiedenen Tools und Ansätzen experimentiert. Ich ließ regelmäßig einen Ansatz fallen und kehrte zu einem anderen zurück. Meine Lösung erwies sich als ziemlich gut gemanagtes Patchwork von Lösungen. Der Weg war nicht direkt Yoda.

Minimierung von HTML, JavaScript und CSS

Zum Beispiel, wie Sie HTML in W3 Total Cache minimieren:

JavaScript am Ende der Seite bündeln

Ebenso ist es einfach, JavaScript in W3 Total Cache zu minimieren. Beachten Sie unten, dass ich W3TC anwies, die komprimierte Datei nicht in <head> einzubetten, sondern direkt vor </body>. Das Verzögern von JavaScript kann Ihren PageSpeed-Score verbessern.

Minimierung des kombinierten CSS aus Themen und Plugins

Da sowohl Themen als auch Plugins JavaScript und CSS verwenden, ist es ein wenig Arbeit, sie zusammen zu minimieren und zu einer einzigen Datei zusammenzufassen (was für PageSpeed nicht ausreicht, auf die ich weiter unten eingehen werde).

Um zu verhindern, dass Plugins ihr eigenes CSS laden und W3TC laden, um komprimierte und kombinierte Versionen zu laden, müssen Sie das Handle des Plugins für die CSS-Datei finden (anders als Dateinamen) und Code zu Ihrem Theme hinzufügen, um die Ladeanweisungen des Plugins zu unterbrechen. Geben Sie dann 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 erklärt wurde, wie WordPress gebeten wurde, die CSS-Dateien, die meine Plugins zum Laden in die Warteschlange gestellt hatten, nicht zu laden. Die Lösung besteht darin, sie zu entfernen und dann eine kombinierte Datei selbst zu laden.

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

/**
* Register and load CSS and javascript files for frontend.
*/
function wp_enqueue_scripts()
{
    $js_vars = array();
  
	// register our CSS and scripts
	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 them!
	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' );

Nach dem Vorschlag von Tadlock habe ich die Registrierung meines Plugins in der functions.php meines Themes, beginnend mit dem CSS, abgemeldet - du musst 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 verkleinern und zu einem eigenen Mega-Stylesheet zu kombinieren, wie oben gezeigt.

Optimieren des Ladens von CSS für PageSpeed

W3TC kann alle meine Theme- und Plugin-Dateien kombinieren, aber PageSpeed mag immer noch nicht einmal ein CSS-Include zu sehen (so viel zu guten HTML-Entwicklungspraktiken):

Ich habe schließlich neun CSS-Dateien geladen (nur sieben unten gezeigt). Zuerst müssen Sie Plugin-Handles für CSS finden und sie in Ihrem Theme wie oben beschrieben abmelden. Dann müssen Sie alle auf W3TC zeigen.

Während es mehrere Möglichkeiten gibt, eine verkleinerte Version von all diesen zu bekommen, habe ich nur die komprimierte Datei von W3TC gepackt. Ich habe alle Caching-Abfrageargumente entfernt, z. ?cbe3w2, mit Suchen und Ersetzen in TextEditor. Ich bin immer noch ein loyaler TextMate-Benutzer, aber es hatte wirklich große Verzögerungen und hängt, wenn ich versuchte, in einer minimierten CSS-Datei zu navigieren. So hat TextEditor mir geholfen, diese Dateien einzeln zu bearbeiten. Entschuldigung für Puristen, ich bin noch nicht zum Sublime übergegangen.

Während es für mich funktionierte, mein minimiertes CSS in meinen Header einzufügen, musste ich es später ändern, um den Inhalt von CSS-Dateien dynamisch zu erhalten und sie an ihren Platz zu bringen.

<![endif]-->
<style type="text/css">
<?php 
$css = file_get_contents('/mypathtowp/wp-content/themes/medium/includes/styles/combined.min.css');
$css2=file_get_contents('/mypathtowp/wp-content/themes/medium/includes/styles/osd-social.css'); 
echo $css.$css2; 
?>
</style>
    <!-- add js class -->

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 dies nie, und mein Varnish-Cache verbirgt jede Verlangsamung von zwei Dateien.

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

Ein Nachteil von W3TC ist, dass es immer wieder nervende Fehlermeldungen anzeigt, obwohl Sie es bewusst auf ungewöhnliche Weise verwenden.

Stellen Sie beim Verschieben von CSS-Dateien aus Plug-in-Verzeichnissen sicher, dass Sie die richtigen relativen Pfade zu Bildern usw. für den Betrieb im Stammverzeichnis der Site festlegen. Ich hatte viele Situationen, in denen Bilder nicht geladen wurden, bis ich herausgefunden hatte, wo diese Dinge gelöst werden sollten. Ich werde ein Beispiel im Abschnitt Problembehandlung unten teilen.

Externe Skripts im Browser zwischenspeichern

Amüsant klagt Google's PageSpeed, wenn Sie seine JavaScript-Bibliotheken extern laden. Ich habe Nachteile für externe Skripts in Bezug auf Flickr, Disqus und Google Analytics erhalten:

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

Flickr Embed Probleme entfernen

Zuerst war ich kürzlich von einer Reise nach Indien zurückgekommen und habe einzelne Blogposts mit Flickr-eingebetteten Fotos auf der Homepage veröffentlicht. Mein Medium-Theme scrollt schnell durch eine Reihe von Posts, so dass PageSpeed sich über alle von ihnen beschwert hat.

Nachdem ich beobachtet hatte, dass PageSpeed sich sowohl über von Flickr gehostete eingebettete Bildgrößen (bei verschiedenen Pixelzahlen) beschwerte als auch um diese externen JavaScript-Fehler, beschwerte ich mich auf meiner Website wieder zu selbst-hosting-optimierten Bildern. Sie verlinken immer noch zu Flickr für mein fortlaufendes Indien Album.

Dies ist ein gutes Beispiel dafür, wie der Versuch, einen leistungsstarken Drittanbieterdienst mit dem einfachen Zweck der Einbettung von Fotos zu verwenden, Ihren PageSpeed-Score zunichte macht. Flickr hat WordPress-Benutzern nicht optimal geholfen, dies zu lösen. Nur als ein Beispiel müssten sie:

• bieten eingebettete Größen an, die die Bildoptimierung von PageSpeed unterstützen (möglicherweise als separate Exportoptionen für die Bildqualität von PageSpeed-Flickr)
• Publiziere den JavaScript-Code auf einfache Weise, um ihn in WordPress- und W3TC-Dateien zu integrieren

Self-Hosting externe JavaScript-Dateien

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

Zuerst habe ich aufgehört, mein Google Analytics-Plug-in zu verwenden und manuell modifizierten Code zu meinem Themenheader hinzugefügt:

//...
<!-- add js class -->
    <script type="text/javascript">document.documentElement.className = 'js';</script>
	<!-- add custom GA -->
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','/wp-content/themes/medium/includes/js/external/analytics.js','ga');
    ga('create', 'UA-37244292-1', 'auto');
    ga('send', 'pageview');
  </script>
	<?php wp_head(); ?>
</head>

Beachten Sie, dass ich die Pfade zu meinen lokalen Kopien der Skripts geändert habe. Dann habe ich lokale Kopien der Skripts für Google Analytics und Google DFP erstellt, und kurz danach wurde mein Browser-Caching in PageSpeed mit Ausnahme von Disqus aufgelöst.

Lösen des Disqus Plugin Loading Problem

Ich bin mir nicht sicher, ob es für Sicherheit oder Multi-Plattform-Unterstützung oder reine "Cleverness" ist, aber Disqus und andere Anbieter wie Flickr scheinen die tatsächlichen Dateien zu verschleiern, die sie mit anderen Dateien laden. Dies macht die Optimierung von PageSpeed deutlich schwieriger und oft unlösbar.

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

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

Obwohl es viele Dinge erledigen soll, ermöglicht es auch, PageSpeed mit der Installation zu optimieren.

Plötzlich waren PageSpeed's Browser-Caching-Schwachstellen 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 beieinander liegen. Ich experimentierte mit ein paar Ansätzen und hörte schließlich damit auf, Tags auf mobilen Geräten anzuzeigen.

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

<?php if( is_page() ) {} else { ?>
  <ul class="meta">
    <li ><span><?php _e( 'Category: ', 'medium' ); ?></span><span><?php the_category( ', ' ); ?></span><br /></li>
  <?php if (!wp_is_mobile()) { ?>
    <!--  not mobile -->
    	<?php $posttags = get_the_tags(); if ( $posttags ) { ?>
			<li><span><?php _e( 'Tag: ', 'medium' ); ?></span> <?php the_tags( '', ', ', '' ); ?></li>
		<?php } ?>
	<?php } ?> <!-- end not mobile -->
	<?php if( is_single() ) { ?>
		<li><?php previous_post_link( '%link', __( '<strong>Previous Post: </strong>', 'medium' ) . '%title' ); ?></li>
		<li><?php next_post_link( '%link', __( '<strong>Next Post: </strong>', 'medium' ) . '%title' ); ?></li>
	<?php } ?>

  </ul>								
	
<?php } ?>

Fehlerbehebung

Fehlende Bilder aus komprimiertem und kombiniertem CSS

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

Letztendlich habe ich diese Pfade mit korrigierten relativen Pfaden zum ursprünglichen Plugin-Verzeichnis gefunden und ersetzt:

// Had to put path in plugin 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');
  font-weight: normal;
  font-style: normal;
}

Unterbrochenes JavaScript

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

Auswahl des besten Minifiers

Ich habe mit YUI Compressor mit W3TC experimentiert, um meine JavaScript- und CSS-Dateien zu komprimieren. Anstatt zu erhöhter Geschwindigkeit zu führen, ist alles kaputt gegangen.

Wenn Sie herausfinden möchten, was ich falsch gemacht habe, können Sie Java und YUICompressor wie folgt 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 poste in den Kommentaren, wenn du weißt, wie man WordPress gut spielen lässt.

Abschließend

Nach dieser zweiten Runde der Arbeit am neuen Thema lief alles besser als erhofft. Ich war nie sicher, ob ich mein optimales Ziel erreichen würde.

Meine letzten Seitengeschwindigkeiten

Ich habe 100 PageSpeed für Mobile und Desktop erzielt. Noch bemerkenswerter war, dass meine Seite superschnell lief - schneller als je zuvor. Ich bin sehr gespannt, wie der eingehende Suchverkehr und die Leseraktivität auf die schnelleren Ergebnisse und Leistungen in den nächsten Monaten reagieren.

Hier sind meine letzten PageSpeed Ergebnisse, zuerst Mobile:

Und jetzt Desktop:

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

Und wieder macht die Geschwindigkeit der Website einen schnellen Besuch wert. Wenn Sie andere kommerzielle Webseiten kennen, die mit 100 PageSpeed laufen, teilen Sie sie bitte in den Kommentaren mit. Ich würde es genießen, sie zu sehen.

Gerade als ein Beispiel für SEO Änderungen, mein beliebter Essay über Dating sprang auf den dritten Platz auf mobilen Ergebnissen unter "Seattle Dating" (noch nicht auf dem Desktop.) Das sagt mir, dass die Geschichten auf großen Websites, die es schlagen, schlechte mobile PageSpeeds haben, weil es nicht einfach ist.

Die Herausforderung der zukünftigen Wartung

Um die PageSpeed meiner Site zu maximieren, musste ich einige Änderungen an meinem Theme vornehmen, die nun Abhängigkeiten von Änderungen an externen Skripten und Updates für das Theme und die Plugins erzeugen. Jetzt, wo ich mit meinem kurzfristigen Ziel fertig bin, habe ich viel zu tun, um meine Systeme besser zu verwalten.

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, und der letzte Punkt in Google PageSpeed Insights behoben wird. Ich würde mich lieber nicht auf andere Dritte verlassen.

Verwalten von Themenupdates

Ich muss auch die Theme-Updates von Medium besser verfolgen und Änderungen integrieren. Das Erstellen eines untergeordneten Themas aus meinen Änderungen kann diesen Prozess ebenfalls erleichtern. Meistens suche ich nach Änderungen, die meine, aktualisierte (oder zusätzliche) JavaScript- und CSS-Dateien überschreiben.

Plugin-Updates verwalten

Ähnlich, wenn Plugins aktualisiert werden, muss ich auf die gleichen Arten von Updates achten. 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, Skripte 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 zum Verknüpfen oder Einschließen zu minimieren und zu packen.

SSL

Schließlich ist eine meiner Überraschungen, dass SSL nicht erforderlich ist, um eine PageSpeed von 100 zu erreichen. Dies macht zwar Sinn, hebt jedoch hervor, dass eine Vielzahl verschiedener Komponenten das Google-Suchranking beeinflussen kann. Ich werde bald über die Implementierung von Let's Encrypt's gratis SSL mit WordPress schreiben.

Was kommt als nächstes?

Wenn Sie dies genossen haben, aber ein allgemeineres Tutorial lesen möchten, das nicht so detailliert auf Details eingeht, die möglicherweise auf Sie zutreffen, ist KeyCDNs Google PageSpeed Scoring 100/100 mit WordPress ein ausgezeichnetes ergänzendes Werk. Ich habe auch ein gesponsertes Stück über ihr CDN bei Envato Tuts + geschrieben (Accelerate Your Content Delivery mit KeyCDN) und fuhr fort, mit ihnen als Kunde fortzufahren.

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

• Überprüfen Sie die einzelnen PageSpeeds meiner beliebtesten Posts wie Amazon Marketplace Fraud Made Easy (derzeit 97), um sicherzustellen, dass sie alle mit 100 ausgeführt werden. Wie in diesem Beispiel sind es oft nur eingebettete Bildgrößen, die PageSpeed stört.
  
• Verbesserung der Verwaltung meines Themas und der Plugins, um diese Optimierungen so einfach wie möglich zu erhalten, wenn Updates ankommen, z. Verfolgen von Änderungen an JS- und CSS-Dateien in Updates, Beibehalten von Kopien externer JS-Dateien wie Analytics aktualisiert, erneutes Komprimieren aktualisierter Dateien usw.
• Upgrade meines Servers auf PHP7. Das Upgrade verspricht fast 2x Leistungsverbesserungen. Es ist nicht einfach, vor der gebündelten Ubuntu-Version zu aktualisieren, aber es ist nicht zu schwierig.
  
• Upgrade meines Servers auf Varnish4. Das Upgrade erfordert einige Überarbeitung der Konfigurationsdateien, und ich bin mir nicht sicher über die Leistungsverbesserung und Kompatibilität mit W3 Total Cache, aber ich bin bereit, es zu versuchen.
• Erkunden Sie den CacheEnabler von KeyCDN, um Chrome-Nutzern effizientere Webp-Bilder bereitzustellen. Die Größe der Webp-Dateien ist wesentlich kleiner, wird aber von Safari noch nicht unterstützt. Ich bin eigentlich ziemlich aufgeregt, die Benutzererfahrung damit zu verbessern.

Wenn Sie Fragen haben, senden Sie diese bitte unten. Oder Sie können mich auf Twitter @reifman kontaktieren. Bitte schaue auf meiner Envato Tuts+ Instructor Seite nach, um andere Tutorials zu sehen, die ich geschrieben habe, wie zum Beispiel WordPress in Linux klonen (in 90 Sekunden).

verwandte Links

• Google PageSpeed
• Google PageSpeed Scoring 100/100 mit WordPress
• Web Page Test
• 12 Website Speed Test Tools zum Analysieren der Webleistung
  
• Websitegeschwindigkeitstest: Leistungsprüfung auf der ganzen Seite
• Array-Themen Mittleres Thema
• Online JavaScript und CSS Compressor (Aktualisieren SF)
  
• Checkliste: 15 Dinge, die Sie tun müssen, bevor Sie WordPress Themes ändern