Es ist kein Geheimnis: Die heutigen Webbenutzer brauchen Geschwindigkeit. Da Internet- und Mobilfunkverbindungen immer schneller werden, erwarten Benutzer, dass Websites schnell geladen werden, und es ist die Aufgabe eines Entwicklers, alles zu tun, um diese Seiten schnell bereitzustellen. Wie machen Sie Ihre Website also blitzschnell? Folgendes sollten Sie speziell beim Erstellen mit WordPress tun.

Das Wichtigste zuerst: Testen Sie die Geschwindigkeit Ihrer Website

Die Leistung kann in zwei Hauptkategorien unterteilt werden: Front-End und Back-End. Ich betrachte Back-End als alles, was mit dem Server zu tun hat und wie Daten auf einer Seite ausgefüllt werden (Ihr PHP-Code in Ihrem Design ist das „Back-End“). Das Frontend besteht aus all Ihren Assets (CSS, JavaScript, Bilder usw.) und Markup. Alles, was ein Webbrowser liest und interpretiert, ist das „Frontend“. Der Grund, warum ich diese Unterscheidung in Bezug auf die Leistung mache, ist, dass es gut ist zu wissen, was Sie optimieren und, was noch wichtiger ist, wo Sie am meisten optimieren müssen.

Um die Geschwindigkeit Ihrer Website zu testen, empfehle ich die Verwendung einer Kombination aus WebPagetest und Google PageSpeed ​​Insights. WebPagetest gibt uns eine gute Vorstellung von der tatsächlichen Zeit (in Sekunden), die eine Website zum Laden benötigt, und gibt Ihnen einige gute Metriken, um festzustellen, ob das Back-End oder das Front-End das langsame Laden einer Website verursacht. PageSpeed ​​Insights eignet sich am besten, um zu sehen, wie Ihre Website vom Browser gerendert wird und was Sie am Frontend verbessern können.

Denken Sie daran, dass sich dieser Artikel auf vollständig angepasste WordPress-Sites konzentriert. Wenn Sie Geschwindigkeitstests auf einer Website mit einem sperrigen Design und 19 Plugins von Drittanbietern durchführen (Plugins können sowohl das Front- als auch das Backend verlangsamen), beginnen Sie damit, zu einer leeren Tafel zu gelangen und die Plugins langsam nacheinander zu aktivieren, um diese zu finden das verlangsamt die Dinge.

Front-End-Leistung

So verbessern Sie die Zugänglichkeit Ihres WordPress-Themes sofort

Es vergeht kein Tag, an dem ich nicht im Internet surfe, auch nicht im Urlaub. Ich werde eine wilde Vermutung annehmen, die Sie nachvollziehen können. Das Internet spielt immer mehr eine ...

Laut Steve Souders, Chief Performance Officer von Fastly, lautet die goldene Leistungsregel, dass 80–90 % der gesamten Ladezeit einer Seite auf das Frontend entfallen (die 80/20-Regel). Die 10-20 % des Back-Ends sind von entscheidender Bedeutung, aber selbst wenn Sie den schnellsten Host verwenden, den Sie für Geld kaufen können, wird Ihre Website ihr volles Potenzial nicht ausschöpfen, ohne das Front-End zu optimieren, um sicherzustellen, dass die Benutzer dies wahrnehmen es lädt schnell. Die Wahrnehmung ist wichtig, wenn es um die Frontend-Optimierung geht. Einem Benutzer ist es egal, wie lange (in Sekunden ausgedrückt) eine Website zum Laden braucht. Alles, was sie wirklich interessiert, ist, wie schnell sie damit interagieren und Inhalte sehen oder Aktionen ohne Verzögerung ausführen können. Das soll nicht heißen, dass Sie sich keine Sorgen über die tatsächliche Ladezeit machen sollten (das sollten Sie), aber indem Sie die folgenden Techniken befolgen, können Sie sicherstellen, dass Ihre Website so schnell wie möglich in einem nutzbaren Zustand ist, gefolgt von einem schnellen vollständigen Laden der Seite alle Vermögenswerte.

CSS

Das Wichtigste, was Sie mit Ihrem CSS tun müssen, bevor es an den Browser geliefert wird, ist, es einfach zu komprimieren und nicht verwendete Selektoren zu entfernen. Wenn Sie beim Entwickeln von Themen einen guten Entwicklungsworkflow hinbekommen, ist dieser Prozess trivial, insbesondere wenn Sie einen Präprozessor wie Sass verwenden. Ich verwende Grunt, einen JavaScript-Task-Runner, der während der Entwicklung Befehle für Sie ausführt. Es gibt ein Plugin für Grunt namens grunt-contrib-sass, das einfach alle Ihre Sass-Dateien zu einer zusammenfasst (wenn Sie also Sass-Partials verwenden), sie minimiert und komprimiert. Fügen Sie noch das Plugin grunt-contrib-watch hinzu und es wird die Sass-Task ausführen, wenn Sie eine Datei speichern. Leicht! Verlieren Sie nicht den Schlaf, wenn Sie nicht die neueste und beste CSS-Methodik verwenden, aber versuchen Sie, beim Erstellen von CSS eine Art Standard zu befolgen, um Duplikate und riesige Dateigrößen zu vermeiden.

Sobald Ihr Stylesheet einsatzbereit ist, ist es am einfachsten (und bei weitem der Standard), es zu laden, indem Sie es einfach im <head> ; referenzieren. Auf diese Weise lädt und analysiert der Browser es, bevor der Rest des DOM geladen wird. Es gibt jedoch eine neue Technik, bei der „kritische“ Stile in <head> eingebettet werden und dann das vollständige Stylesheet asynchron mit JavaScript geladen wird. Ich verwende diese Technik nur wirklich, wenn ich unbedingt versuche, eine Website in weniger als einer Sekunde zu laden (oder zu laden), aber es ist eine großartige Sache, sie sich anzusehen und zu sehen, ob sie in Ihren Workflow passt. Die Filament Group hat einen großartigen ausführlichen Artikel über die Verwendung dieser Technik.

JavaScript

Verstehen, wie WordPress MySQL verwendet

Im Großen und Ganzen kann WordPress in zwei Segmente unterteilt werden: Die Logik und die Vorlagen, die das Erscheinungsbild einer WordPress-Site erzeugen Die MySQL-Datenbank, die alle Inhalte und Kräfte speichert, die i ...

Die goldene(n) Regel(n) zur Optimierung von JavaScript ist einfach: Liefern Sie so wenige JavaScript-Dateien wie möglich und verkleinern und verketten Sie sie. WordPress-Plugins von Drittanbietern können schädlich sein, indem sie Ihr Dokument mit nicht minimierten, blockierenden JavaScript-Dateien aufblähen, daher ist es wichtig, bei der Auswahl von Plugins vorsichtig zu sein. Im Idealfall würden Sie ALLE JavaScript-Dateien zu einer verketten und sie dann zum Teufel verkleinern. Für Zeiten, in denen es nicht möglich ist, alle Ihre Dateien zu einer zu verketten, gibt es HTML-Attribute namens „async“ und „defer“, die verwendet werden können, um JavaScript-Dateien asynchron oder nach dem Laden des Rests der Seite zu laden.

Der häufigste Ort, an dem heutzutage auf JavaScript verwiesen wird, befindet sich am Ende Ihres Dokuments, direkt vor dem schließenden Tag. Es gibt jedoch fortgeschrittenere Techniken zum Laden von JavaScript. Auch hier hat die Filament Group tonnenweise Nachforschungen angestellt und verfügt über mehrere Open-Source-Projekte, die Sie verwenden können, wenn Sie eine superschnelle Seitenladezeit anstreben (ich bin übrigens in keiner Weise mit der Filament Group verbunden; Ich finde ihre Sachen einfach genial). Der beste Ansatz scheint darin zu bestehen, Skripte dynamisch zu laden, indem eine kleine Funktion in <head> wird; das dann Skript-Tags anhängt, ohne den Rest der Seite zu blockieren. Weitere Informationen finden Sie im loadJS-Skript.

Bilder

Bilder sind oft die größten Dateien auf einer Seite und für die größte Verzögerung beim Laden der Seite verantwortlich. Das Gute an Bildern ist jedoch, dass sie im Gegensatz zu CSS und JavaScript von den meisten Browsern asynchron geladen werden. Das hilft zumindest bei der wahrgenommenen Leistung einer Seite, aber Sie möchten trotzdem sicherstellen, dass A) Sie so wenig Bilder wie möglich bereitstellen und B) diese Bilder so stark wie möglich komprimiert werden.

Komprimierungswerkzeuge sind notwendig, um so viel Überschuss wie möglich aus Bildern herauszudrücken. ImageOptim ist eine großartige Mac-App, die dies gut macht, zusammen mit OptiPNG und jpegtran zur Verwendung mit Task-Runnern wie Grunt.

Schriftarten

Webfonts sind heutzutage sehr verbreitet. Ich verwende Google Web Fonts bei fast jedem Projekt, aber bis vor kurzem war mir nicht bewusst, welche Leistungseinbußen ich hinnehmen musste, indem ich einfach im <head> auf sie verwies. Der Leistungseinbruch ist gering, aber in diesem Artikel geht es darum, Websites blitzschnell zu machen, also zählt alles! Für die beste Leistung bei der Verwendung von Webfonts empfehle ich die Verwendung des von Google und Typekit gemeinsam entwickelten Web Font Loader. Es ist ein Open-Source-Skript, das sowohl das Laden Ihrer Schriftarten von Drittanbietern wie Google Web Fonts verwaltet als auch das asynchrone Laden ermöglicht (Sie haben dieses Wort schon satt?).

Wie erwartet ist eine gewisse Konfiguration erforderlich, um den Web Font Loader in Ihr Projekt zu integrieren, also schauen Sie sich das Projekt auf GitHub an, um zu erfahren, wie Sie es einrichten können.