Share
Im ersten Beitrag dieser Serie haben wir uns ein paar Dinge angesehen, die wir tun können, um unsere WordPress-Installation gesund zu halten. Aber das ist nicht alles, was wir tun können.
In diesem Beitrag behandeln wir, was Sie mit Ihren Assets wie Stylesheets, JavaScript-Dateien, Bildern und mehr tun sollen.
Weniger ist mehr. Das ist so ziemlich die Botschaft, die ich mit dieser ganzen Serie vorlegen möchte. Zu diesem Zweck habe ich darüber gesprochen, was mit übertriebenem HTML-Code in den verwandten Quellen geschehen soll, die Ihnen helfen, mit dem Erstellen von sauberem Theme-Code zu beginnen und die richtigen Plugins zu finden.
Nun ist es an der Zeit, sich auf unsere Assets zu konzentrieren: Stylesheets, JavaScripts und Bilder.
Wir sind alle daran gewöhnt, CSS zu schreiben, richtig? Sogar die Anfänger unter uns haben hier oder dort eine CSS-Linie berührt. Habe schon einmal ein Anzeige: keine irgendwo? Sie haben eine Stilregel angewendet.
Ich bin sicher, wir haben sie alle in ihrer grausamsten Form benutzt. Die erfahrenen Leute wissen, dass es eine gute Idee ist, Ihre Styles dort zu behalten, wo sie hingehören: In Ihren Stylesheets. Dies ist in erster Linie eine Frage der Wartbarkeit. Wenn Sie Inline-Stile überall in Ihren Vorlagen haben, verlieren Sie den Versuch, den richtigen Ort zu finden, um etwas anzupassen, und wenn Sie diese Einstellung anpassen, müssen Sie immer noch fünf andere Stellen finden, die denselben Inline-Stil haben.
Das Einfügen von Styles in Stylesheet-Dateien hat einen weiteren Vorteil: Sie können weniger schreiben, um das gleiche zu tun, indem Sie anstelle von fokussierten Regeln generische Style-Regeln verwenden. Sie können jedoch sogar einen Schritt weiter gehen und einen Vorprozessor verwenden.
Stylus, LESS und Sass sind alles CSS-Vorprozessoren. Sie können sie verwenden, um weniger Code zu schreiben und ein saubereres Endergebnis zu erhalten. Lesen Sie das als: Weniger Arbeit, weniger Code, einfacher zu warten!
Während Stylus hier die Ausnahme darstellt, verfügen sowohl LESS als auch Sass über WordPress-Plugins. Wenn Sie sie vermeiden können, tun Sie dies. Es gibt Möglichkeiten, ein Stylesheet aus einem zu erzeugen .Weniger und .sass Datei nur einmal, ohne diese Plugins zu verwenden.
Ohne zu konkret zu werden, können Sie mit diesen Vorprozessoren viel weniger Code schreiben, um das gleiche Endergebnis zu erhalten. In vielen Fällen kombinieren sie sogar Stile miteinander, wodurch Ihre Stylesheets sauberer und leichter zu pflegen sind. Ein kurzes Tutorial zu LESS und eines zu Sass haben bereits Tutorials hier auf Tuts+.
Was besser ist, hängt sehr stark von persönlichen Vorlieben ab. Alle drei Prozessoren wachsen und finden ihren Weg. Sie finden hier einen Vergleich der drei verfügbaren Prozessoren, in dem die jeweiligen Stärken näher erläutert werden.
JavaScript ist zu einem akzeptierten Bestandteil der Webentwicklung geworden. Vor einigen Jahren haben wir immer noch akzeptiert, dass es für unsere Besucher normal war, dass JavaScript deaktiviert ist, aber das ist jetzt die Ausnahme, nicht die Regel.
Ich persönlich bevorzuge es immer noch, meine Websites ohne zu erstellen und die Skripts dann als Erweiterung hinzuzufügen. Dies hat den Vorteil, dass ich die Skripte auf das Nötigste beschränken kann, da die Site bereits ohne sie funktioniert.
Die einzige Möglichkeit, weniger JavaScript zu schreiben, ist genau das zu tun. Weniger schreiben; Ein guter Tipp ist jedoch die Verwendung der jQuery-Bibliothek, die mit WordPress geliefert wird. Sie wurde speziell dafür entwickelt, dass Sie weniger schreiben, um das gleiche Ergebnis zu erzielen, aber dennoch schnell und einfach zu bedienen sind.
Erinnern Sie sich an den ersten Beitrag dieser Serie? Ich erwähnte, dass Websites in den letzten drei Jahren einen absurden Zuwachs von 235% hatten. Verrückt, nicht wahr? Hier ist eine weitere Tatsache: Ein großer Teil dieser Steigerung kommt in Form von Bildern. Ich bezweifle, dass irgendjemand überrascht ist, da die Verwendung von großen Bildern zu einem Designtrend geworden ist. Trotzdem sollten wir uns bemühen, es besser zu machen.
Aber wie?
Stellen Sie sicher, dass Sie die richtigen Bildgrößen für Ihre Bilder festlegen, wenn Sie WordPress verwenden. Es macht keinen Sinn, ein 500x500-Bild zu laden, wenn Sie in Ihrem Design nur eine 100x100-Version verwenden. Die nächste Option ist die Nutzung eines Dienstes wie smush.it oder kraken.io. Für beide gibt es WordPress-Plugins, und beide machen ungefähr das gleiche: Sie reißen das Material aus den Bildern heraus, das Sie nicht benötigen oder möchten, optimieren sie und geben die kleinste mögliche Datei zurück, die sie aus Ihrem Bild erstellen können, ohne dabei an Qualität zu verlieren. Smush.it ist ein kostenloser Service, bei dem Kraken eine kostenlose Lösung sowie eine kostenpflichtige Lösung zur Optimierung Ihrer Bilder im laufenden Betrieb bietet.
Inzwischen kann man sehen, dass ich für weniger bin. Weniger Code, weniger Bilder, weniger alles. Ende der Straße: So schnell mein minimalistisches System auch sein mag, ich möchte immer noch einen Hauch von Super. Ich werde sicherstellen, dass mein Code so wartungsfähig ist wie möglich, meine Stylesheets so klein wie möglich und meine Skripts kurz sind. Das alles ist jedoch in erster Linie Vorbereitung. Immerhin habe ich immer noch das Endergebnis minimiert. Mit dem Pre-Prozessor für meine Stylesheets kann ich bereits eine reduzierte Edition erstellen. Für Skripte gibt es ähnliche Lösungen.
Hier ist es wichtig sicherzustellen, dass Ihre Skripte und Stylesheets mithilfe von ausgegeben werden wp_enqueue_script und wp_enqueue_style Funktionen. Werfen Sie sie nicht einfach in die Kopf Ihrer Vorlage aber verwenden function.php um sie einzufangen und die wp_head Funktion machen die tatsächliche Ausgabe.
Warum ist das wichtig? Wenn Sie Ihre Skripts und Stylesheets ordnungsgemäß in die Warteschlange stellen, können die verschiedenen verfügbaren Cache- und Minimierungs-Plug-Ins sie in einem einzigen Stylesheet und Skript kombinieren.
Caching? Ja, zwischenspeichern Neben dem Zusammenführen von Stylesheets und Skripts bieten diese Plugins ein System zum Zwischenspeichern der Ausgabe aus der Datenbank oder sogar der gesamten Seite, die ausgegeben wird. Beides wird die Ladezeit einer Site erheblich verkürzen. Es liegt nicht im Rahmen dieser Serie, ausführlich auf die verfügbaren Caching-Plugins und ihre Funktionen einzugehen. Adam Burucs schrieb einen Artikel, in dem die beiden größten Caching-Plugins verglichen werden. Dies ist ein guter Ausgangspunkt, wenn Sie Informationen zu den beiden suchen.
Externe Ressourcen sind ein interessanter Teil davon. Durch die Verwendung eines externen Providers wird einerseits der Datenverkehr von Ihrem eigenen Server entladen. Normalerweise ist dies aufgrund von Browsereinschränkungen bei der Anzahl der Anforderungen, die an einen Server gesendet werden können, schneller. Aber es gibt einen Nachteil. Sie können nicht kontrollieren, was von Ihrem externen Host ausgeht, und Sie müssen darauf vertrauen können, dass die Daten gleich bleiben und der Host verfügbar bleibt. In einigen Fällen ist es möglicherweise eine bessere Idee, Ihre Ressourcen auf Ihrer eigenen Site zu belassen.
Zusammenfassend: Halten Sie es schlank, stellen Sie sicher, dass Ihre Stylesheets und Skripts so klein sind, wie Sie sie bekommen können, und minimieren Sie sie dann noch weiter. Laden Sie Bilder in der gewünschten Größe hoch und ziehen Sie sie durch ein Optimierungsprogramm wie smush.it oder kraken.io. Verwenden Sie ein Caching-Plugin als endgültigen Endpunkt für Ihre Ausgabe, nachdem Sie alle Elemente minimiert haben, bevor Sie ein Caching durchführen.
In dieser Serie gibt es noch eine weitere Folge, in der wir weitere Referenzen zu den besprochenen Themen behandeln und hoffentlich einige weitere nützliche Erkenntnisse liefern werden.
Accentsconagua