Share
Verleihen Sie Ihrer Site einen Schub! Implementieren Sie entscheidende Optimierungstechniken, die nicht nur Ihre verbessern ySlow Punktzahl, aber auch Ihr Google-Rang. In diesem Tutorial werden wir alle Aspekte des W3-Caching, von ySlow, der Google-Seitengeschwindigkeit, von CSS-Sprites und von Htaccess-Regeln behandeln, um einen hohen ySlow-Score zu erreichen, wie ich es in meinem Blog getan habe.
Eine kurze Notiz, bevor wir beginnen, obwohl dieses Tutorial alles so detailliert wie nötig abdeckt, es werden (wo immer möglich) Abkürzungen vorhanden sein, um Ihnen etwas Zeit zu sparen.
Installieren Sie ein Caching-Plugin: Zuerst, was auch immer das Caching-Plugin benutzt, schalte es JETZT aus! Es sei denn, es ist der mächtige W3 Total-Cache, mit dem wir hier arbeiten werden. (Ok, das war ein bisschen stark, aber ich habe viele Caching-Plugins verwendet und W3 ist mein Favorit. Wenn Sie aus irgendeinem Grund einen anderen verwenden, ist das wahrscheinlich in Ordnung - wir gehen mit dem W3 mit Empfehlung.) Gehen Sie zu Ihrem Plugin-Bereich "Hinzufügen" in WordPress, suchen Sie nach "W3 Total Cache", laden Sie ihn herunter, installieren Sie ihn, aber schalten Sie ihn nicht ein. Nun noch nicht.
Installieren Sie ein Database Manager Plugin: Als Nächstes benötigen Sie ein weiteres Plugin namens "WP-DBmanager". Suchen Sie dann erneut und installieren Sie es. Stellen Sie sicher, dass keine anderen Datenbank-Plugins installiert sind.
Bevor wir loslegen und mit der Verbesserung Ihrer Website beginnen, können wir zuerst sehen, mit was es zu tun hatte. Öffnen Sie Google Chrome oder installieren Sie es, wenn Sie es noch nicht haben. Wenn Sie sich in Chrome befinden, installieren Sie das ySlow-Plugin HIER nach der Installation oben rechts auf Ihrem Bildschirm. Klick es. (Sicherstellen, dass Sie sich auf der Startseite Ihrer Website befinden)
ySlow überprüft dann Ihre Website und sagt Ihnen, was gut ist, was schlecht ist und was dazwischen liegt. Wir wollen uns zunächst auf alles konzentrieren, was unterhalb der Note B liegt. Im Folgenden werden alle W3-Einstellungen beschrieben, die Sie zur Verbesserung der Ladezeit Ihrer Websites benötigen.
Sobald der W3 Total Cache aktiviert ist, wird eine neue Seitenleiste mit dem Namen "Performance" angezeigt. Klicken Sie darauf. Jetzt werden wir natürlich alle verschiedenen Abschnitte von W3 durchlaufen, aber um Zeit zu sparen, könnten Sie die W3-Einstellungsdatei, gebündelt in den "Quelldateien", importieren und zu Schritt 2C springen.
Hier sitzen alle Einstellungen für W3. Schauen wir uns zuerst die „Allgemeinen Einstellungen“ an. Sie müssen die folgenden Kontrollkästchen aktivieren (aktivieren):
Seiten-Cache (wählen Sie in der Dropdown-Liste "Datenträger: Erweitert") - Durch das Zwischenspeichern von Seiten wird die Antwortzeit Ihrer Site verkürzt und der Umfang Ihres Webservers vergrößert.
Minify (Wählen Sie "Manual", verlassen Sie die anderen Einstellungen). - Durch Minification kann die Dateigröße von HTML, CSS, JS und Feeds im Durchschnitt um ~ 10% verringert werden.
Kreuzen Sie nicht den Datenbankcache an (wir werden das später über eine andere Methode sortieren)
Objektcache (wählen Sie "Datenträger" in der Dropdown-Liste aus) - Die Objektcache erhöht die Leistung für hochdynamische Sites (die die Objektcache-API verwenden) erheblich..
Browser-Cache - Aktivieren Sie die HTTP-Komprimierung und fügen Sie Header hinzu, um die Serverlast und die Dateiladezeit zu reduzieren.
Lassen Sie CDN, Lack & Cloudflare unberührt. (Erneutes Hochladen der in den "Quelldateien" enthaltenen Einstellungsdatei über die Option unter "Allgemeine Einstellungen".)
Klicken Sie oben im W3-Bedienfeld / auf der Seite auf den Link „Minify“. Vergewissern Sie sich im Abschnitt „HTML & XML“, dass die ersten drei Kontrollkästchen aktiviert sind. Klicken Sie dann oben auf die Schaltfläche "Hilfe".
Sobald dieser Popover geladen ist, werden Sie mit einer Liste von Javascript-Dateien konfrontiert, gefolgt von Stylesheets, zu denen Ihre Site verlinkt. Im Grunde wollen wir alles versuchen und alles ankreuzen, AUSSER:
Jquery-Dateien
Google-Anzeigen (oder beliebige Anzeigen für diese Angelegenheit)
Alle stats.wordpress.js-Dateien (Sie haben diese, wenn Sie Jetpack installiert haben
Für CSS können Sie jedoch alle sicher auswählen. Nun, dies ist keine exakte Wissenschaft, da dies Ihre Themendateien minimiert (machen Sie sich keine Sorgen, es ist nicht destruktiv), und es gibt viele verschiedene Motive, die alle eine Vielzahl unterschiedlicher Dateien, Plugins und Funktionen verwenden. Zeigen Sie Ihre Änderungen grundsätzlich an, bevor Sie sie abschicken.
Minify ist eine der größten Verbesserungen, die Sie integrieren werden. Wenn Sie alle Dateien ausgewählt haben (und bei jedem Thema dasselbe tun, wenn Sie mehrere verwenden), klicken Sie auf "Übernehmen & schließen" und direkt auf "Alle speichern" Einstellungen ”(Bereitstellen, wenn Ihre Site immer noch gleich aussieht / funktioniert).
Sobald Sie sich im Tab "Browser Cache" / Seite befinden, müssen Sie die Lebensdauer des "Expires-Headers" auf 691200 Sekunden ändern. Dadurch wird Ihre ySlow-Punktzahl sofort erhöht.
Gehen Sie nun zurück zu "Allgemeine Einstellungen" und klicken Sie auf "Alle Caches leeren". Gehen Sie dann zu Ihrer Startseite und führen Sie den ySlow-Test erneut aus. Sie sollten eine Verbesserung sehen.
Unter dem Seitenleisten-Tab "Performance" im WordPress-Backend sollte sich ein weiterer Tab mit dem Namen "Database" befinden (wenn nicht, dann gehen Sie zurück und aktivieren Sie ihn)..
Nun ist dies sehr einfach, Sie müssen drei Dinge tun: Sichern, Reparieren, Optimieren.
Klicken Sie zum Sichern auf "Backup DB" und dann unten auf "Backup"..
Als nächstes möchten wir Ihre Datenbank reparieren (nur Incase), also gehen Sie zur "Repair DB" in der Seitenleiste. Klicken Sie unten auf die Schaltfläche "Reparieren".
Schließlich optimieren Sie es. Klicken Sie auf die Sidebar-Schaltfläche "Optimize DB" und yep Sie haben es erraten, klicken Sie unten auf die Schaltfläche "Optimize".
Um diesen Vorgang zu vermeiden, gehen Sie erneut in die Seitenleiste der Registerkarte "DB-Optionen". Am unteren Rand befindet sich ein Abschnitt "Automatische Zeitplanung". Stellen Sie sicher, dass Backups JEDEN TAG durchgeführt werden (Sie können nicht zu vorsichtig sein), stellen Sie dann ein, um alle paar Tage zu optimieren und einmal pro Woche zu reparieren. Speichern Sie dann die Änderungen.
In ySlow haben Sie wahrscheinlich im Abschnitt "Weniger HTTP-Anforderungen erstellen" eine Textzeichenfolge mit der Aufschrift "Diese Seite enthält 10 externe Hintergrundbilder" festgestellt. Versuchen Sie, sie mit CSS-Sprites zu kombinieren. "
Stellen Sie sich die Einsparungen vor, wenn all diese kleinen Bilder nur ein Bild sein könnten. Das würde die Sache sicherlich beschleunigen. Dazu verwenden wir ein kostenloses Tool namens "Spriteme", also gehen Sie HIER zu der Website (tun Sie dies jedoch in einem neuen Tab, stellen Sie sicher, dass sich Ihre Website auf der Startseite befindet)..
Sobald Sie sowohl Ihre Startseite in einem Tab als auch Spriteme in einem anderen geöffnet haben, ziehen Sie den Text "SpriteMe" auf den Tab mit Ihrer Site. In der rechten oberen Ecke der Registerkarte / des Fensters wird ein Feld angezeigt. Klicken Sie auf die Schaltfläche "Sprite erstellen", die sich im Feld "Vorgeschlagene Sprites" befindet. Sobald dies der Fall ist, laden Sie das erstellte Bild auf magische Weise herunter und laden es an einen beliebigen Ort auf Ihrer Website hoch (vorzugsweise innerhalb des von Ihnen verwendeten Designs).. 
Klicken Sie nun oben rechts im Popover "SpriteMe" auf die Schaltfläche "CSS exportieren", kopieren Sie den von Ihnen angegebenen CSS-Code (das ist ALLE davon), und fügen Sie ihn direkt in das Motiv Ihrer "style.css" oder an eine beliebige andere Stelle ein Es wird anstelle des Standardcodes verwendet (da wir den Standarddesigncode nicht wirklich überschreiben möchten). Sie müssen sicherstellen, dass das zweite "Hintergrundbild: URL" von "http://www.jaredhirsch.com" in das Verzeichnis geändert wird, in dem Sie das Sprite-Bild von früher gespeichert haben.
Wenn Sie dies getan haben, leeren Sie bitte alle Caches in der Seitenleiste der Registerkarte "Leistung".
Meistens benutze ich Photoshop immer zum Komprimieren meiner Bilder vor dem Hochladen, aber für viele von Ihnen ist dies keine Option, da Sie keinen Photoshop haben. Hier werde ich Sie dabei unterstützen, die Dateigröße Ihrer Bilder zu verringern.
Als Erstes sollten Sie sicherstellen, dass alle Motivbilder optimiert sind, und Sie können es mit diesem Kauf erledigen, indem Sie alle in dieser fantastischen kleinen App namens "ImageOptim" packen.
Sobald Ihre Themenbilder schön komprimiert und komprimiert sind, möchten Sie möglicherweise Plugins wie „Smush.it“ für Wordpress betrachten, um Bilder zu optimieren, die Sie in Beiträgen und Ähnlichem verwenden können.
Dies ist sicherlich eine entscheidende Optimierungstechnik. Um die PHP-GZIP-Komprimierung zu aktivieren, bearbeiten Sie die php.ini (Beispielpositionen wie in / etc / oder / usr / local / lib) mit einem beliebigen Texteditor wie vi und suchen Sie die folgende Anweisung:
zlib.output_compression
Der Standardwert ist "Off". Ändern Sie die Einstellung in "On", damit die Zeile wie folgt aussieht:
zlib.output_compression = Ein
Starten Sie den Apache HTTPD-Server nach der Änderung neu. Jede von PHP erstellte Webseite wird nun komprimiert, bevor sie über das Internet an den Webbrowser gesendet wird, um sie zu decodieren.
PHP hat auch eine Direktive, mit der der Komprimierungsgrad angepasst werden kann. Um den Komprimierungsgrad festzulegen, verwenden Sie die folgende Zeile in php.ini mit gültigen Werten zwischen 1 und 9, wobei 1 die geringste Komprimierung und 9 die höchste Komprimierung ist. Die Standardkomprimierungsstufe ist 6, wodurch die beste Komprimierung erreicht wird, ohne die Serverleistung zu beeinträchtigen.
zlib.output_compression_level = 6
Bisher wurde die PHP-Komprimierung durch Eingabe erreicht Code am Anfang jedes PHP-Skripts. Die Methode wird nicht empfohlen, da jedes Skript geändert werden muss. Die Aktivierung von zlib in der php.ini wird ohne Ausschluss auf alle PHP-Skripts auf dem Webserver angewendet.
Wenn die php.ini-Datei nicht geändert werden kann oder die Kontrolle über php.ini, insbesondere bei einem gemeinsam genutzten Hosting, nicht möglich ist, kann die PHP-GZIP-Komprimierung auch über die .htaccess-Datei eingerichtet werden, die sich normalerweise im Stammverzeichnis der Website befindet. Um die PHP-GZIP-Komprimierung über Zlib zu aktivieren, fügen Sie der .htaccess-Datei die folgende Zeile hinzu. Beachten Sie, dass jede Website einzeln geändert werden muss.
php_flag zlib.output_compression ein
Das Aktivieren der GZIP-Komprimierung über PHP hat den Nachteil, dass nur von PHP-Skripts erstellte Webseiten durch die GZIP-Codierung komprimiert werden. Alle externen CSS- oder JavaScript-Dateien werden nicht komprimiert. Um die GZIP-Komprimierung für alle Dateitypen zu aktivieren, verwenden Sie stattdessen mod_deflate oder mod_gzip auf dem HTTPD-Webserver.
Überprüfen und überprüfen Sie, ob die GZIP-Komprimierung ordnungsgemäß ausgeführt wird
Am Ende dieses Tutorials möchte ich nur ein paar letzte Dinge durchgehen. Jetzt, da Ihre Bilder zerquetscht und Sprites erstellt wurden, möchten Sie möglicherweise sowohl Ihren Browser-Cache löschen als auch "Alle Caches leeren" auf der Seitenleiste der Registerkarte "Leistung" löschen.
Lassen Sie uns jetzt zurückgehen, sich von WordPress abmelden, die Startseite Ihrer Website laden und einen ySlow-Test durchführen. Es sollte wieder gestiegen sein, im CDN-Bereich von ySlow haben Sie die Möglichkeit, bei einigen Komponenten „Als CDN hinzufügen“. Wenn Sie dies tun, wird Ihre Note noch weiter gesteigert.
Wenn Sie eine dedizierte CDN richtig hinzufügen möchten, schlage ich vor, dass Sie diesem TUTORIAL folgen.
Wenn Sie jetzt die Daumen drücken, sollten Sie sich die Bewertung der Bewertung A ansehen. Wenn Sie dies mit dem von Google erstellten Test für den Seitengeschwindigkeitsbericht vergleichen, werden Sie eine sehr gesunde Bewertung erhalten.
Ein Abschnitt von ySlow, den ich nicht behandelt habe, ist die "Cookie-freie Domäne". Wenn der Browser ein statisches Bild anfordert und Cookies zusammen mit der Anfrage sendet, hat der Server keine Verwendung für diese Cookies. Sie erzeugen also nur Netzwerkverkehr ohne triftigen Grund. Sie sollten sicherstellen, dass statische Komponenten bei Anforderungen ohne Cookie angefordert werden. Erstellen Sie eine Unterdomäne und hosten Sie dort alle Ihre statischen Komponenten.
Wenn Ihre Domäne www.example.org ist, können Sie Ihre statischen Komponenten auf onstatic.example.org hosten. Wenn Sie jedoch auf der Top-Level-Domain example.org im Gegensatz zu www.example.org bereits Cookies gesetzt haben, werden alle diese Anfragen an static.example.org gestellt. In diesem Fall können Sie eine völlig neue Domäne kaufen, Ihre statischen Komponenten dort hosten und diese Domäne cookiefrei halten. Yahoo! verwendet yimg.com, YouTube verwendet ytimg.com, Amazon verwendet images-amazon.com und so weiter.
Ein weiterer Vorteil des Hostens statischer Komponenten in einer cookiefreien Domäne besteht darin, dass einige Proxys möglicherweise den Cache-Speicher der Komponenten ablehnen, die mit Cookies angefordert werden. Wenn Sie sich fragen, ob Sie example.org oder www.example.org für Ihre Homepage verwenden sollten, sollten Sie die Auswirkungen des Cookies berücksichtigen. Wenn Sie www auslassen, bleibt Ihnen keine andere Wahl, als Cookies an * .example.org zu schreiben. Aus Gründen der Performance empfiehlt es sich, die www-Unterdomäne zu verwenden und die Cookies in diese Unterdomäne zu schreiben.
Ich werde nicht darauf eingehen, aber das oben genannte sollte Ihnen eine gute Idee geben. In einem späteren Tutorial werde ich ausführlich darauf eingehen. Dies verbessert die Punktzahl, ist aber nicht unbedingt erforderlich.
Dies sind die Schritte, die ich beim Erstellen von Websites unternehme, und sie machen einen großen Unterschied, wenn es darum geht, die Geschwindigkeit zu verbessern und schnelle Reaktionszeiten zu ermöglichen. Wenn Sie weitere Informationen benötigen oder Hilfe bei der Durchführung der Prozeduren benötigen, kommentieren Sie bitte unten oder senden Sie mir eine Nachricht über mein Autorenprofil.
Accentsconagua