Wie kann ich meine JS richtig kombinieren und komprimieren, um das Laden des Frontends zu optimieren?

8

Meine Website für einen Unternehmensclient enthält ungefähr 90 Assets, die beim Laden heruntergeladen werden. Etwa 35 sind JS-Dateien. Selbst "Optimierungs" -Erweiterungen, die für Joomla gemacht wurden, scheinen mich nur auf ungefähr 31 JS-Dateien zu bringen und nur die kombinierten CSS / JS zu komprimieren und nicht diejenigen, die Schurken auszuführen scheinen.

Ich habe einige der optimierenden kostenlosen Plugins ausprobiert und zögere es, Geld für die bezahlten auszugeben, wenn sie nur sehr wenig für meine Ladezeiten tun.

Meine Vorlage ist eine Rockettheme-Basis mit vielen Anpassungsmöglichkeiten, daher enthält sie Gantry js, Bootstrap js, einige Erweiterungen wie mein Videoplayer, die eine js-Datei verwenden usw. und sie scheinen auf ein paar pro Erweiterung anstatt nur auf diese verteilt zu sein einer.

Was funktioniert und was nicht, um diesen Teil der Front-End-Last zu verbessern?

javascript performance front-end gantry Toni Marie
quelle

Antworten:

9

Es wird nicht einfach sein, mit all diesen Dateien umzugehen. Das Kombinieren, Minimieren und Komprimieren all dieser Elemente wird höchstwahrscheinlich Probleme mit sich bringen. Es wird viel Aufwand und eine Kombination von Techniken erfordern, um ein zufriedenstellendes Optimierungsniveau zu erreichen.

Mein allgemeiner Ansatz, um eine schnelle Ladestelle zu erreichen.

Eine schnelle Website ist unerlässlich. Die Geschwindigkeitsoptimierung einer Website findet zwar normalerweise am Ende der Entwicklung statt, sollte jedoch von Anfang an berücksichtigt werden. Es beginnt mit der richtigen Vorlage.

Die Installation jeder einzelnen Erweiterung und die Verwendung von ausgefallenen Modulen führt wahrscheinlich zu einer umfangreichen Website, die später nur schwer leichter zu machen sein wird.

Seien Sie vielseitig - bleiben Sie minimal

Persönlich versuche ich bei der Geschwindigkeitsoptimierung sehr vielseitig zu sein, welche Erweiterungen ich verwende. Ich recherchiere und experimentiere für jede Aufgabe nach den effizientesten und qualitativ hochwertigsten und versuche immer, Erweiterungen zu vermeiden, wenn es Dinge gibt, die manuell im Kern erreicht werden können.

Wenn ich mich für die Verwendung einer ausgefallenen Front-End-Funktion entscheiden muss, die nicht wirklich wichtig ist, was zu Problemen bei der Geschwindigkeitsoptimierung der Website führt, werde ich sie normalerweise wegwerfen oder einen anderen Weg finden, um die ausgefallene Funktion zu implementieren.

Ich versuche auch, die Verwendung kommerzieller Vorlagen zu vermeiden, da diese normalerweise viele zusätzliche Funktionen enthalten, um viele verschiedene Geschmäcker zu befriedigen. Ich ziehe es vor, die Vorlage zu erstellen und nur das einzuschließen, was ich brauche.

Ihre manuelle Arbeit

Ich würde vorschlagen, alle Erweiterungen zu überprüfen , um festzustellen, wie sie ihre Assets-Dateien laden. Wenn es möglich ist, das Laden auf Seiten zu vermeiden, auf denen Sie sie nicht benötigen, können Sie beispielsweise Vorlagenüberschreibungen erstellen, die Sie nach Möglichkeit selbst steuern können das Laden der Assets-Dateien.

Möglicherweise stellen Sie fest, dass es Erweiterungen gibt, die Sie nicht benötigen , die aber noch geladen sind, oder Sie haben nicht die optimalen Einstellungen, wie sie funktionieren sollen.
Beispielsweise bietet JCE Mediabox die Option, nur in bestimmten Menüelementen geladen zu werden.

Überprüfen Sie auch, ob es möglich ist, Dateien in einer zusammenzuführen. Lassen Sie beispielsweise kein Modul das CSS laden, sondern versuchen Sie, es mit der CSS-Datei der Vorlage zusammenzuführen.

Optimierungswerkzeuge

CSS / JAVASCRIPT-KOMPRESSION UND -KONTROLLE
Was die Optimierungstools / Plugins betrifft , bin ich mit dem JCH Optimize- Plugin ziemlich zufrieden . Es ist kostenlos, hat aber auch eine kommerzielle Version mit Unterstützung für ein paar Dollar. Mit der richtigen Optimierung können großartige Ergebnisse erzielt werden, und der Entwickler ist sehr hilfreich, wenn Sie Unterstützung benötigen.

Ein weiteres Tool, das sich als nützlich erweisen könnte, ist das JQuery Easy-Plugin . Es kann helfen, das Laden verschiedener Javascript-Dateien besser zu organisieren und zu steuern, falls sie miteinander in Konflikt stehen, und die Optimierung mit dem JCH_Optimize Plugin zu vereinfachen.

CACHE
Ich verwende auch Jot Cache , um eine bessere Kontrolle über den Cache zu haben, da viele Erweiterungen Probleme mit dem Kerncache haben.

CDN Die
Verwendung von CDN zur Bereitstellung statischer Inhalte ist das nächste Tool - ich verwende NoNumber CDN für Joomla

HTACCESS
Schließlich profitieren Sie von großen Vorteilen, wenn Sie einen htaccess zum Komprimieren und Hinzufügen von Expire-Headern zu den Dateien verwenden.

FFrewin
quelle
5

Es gibt keine einfache Lösung für mehr als 30 JS-Dateien.

Anibal
quelle
Ich habe auf den vollständigen Vorschlag oben als "Antwort" geklickt, aber ich muss auch beachten, dass RokBooster für mich viel besser funktioniert als JCH Optimize, da ich eine Gantry-basierte Vorlage und Erweiterungen verwende. Vielen Dank! Ich wünschte, ich könnte auf beide klicken.
Toni Marie
Cool, froh, hilfreich zu sein
Anibal