it-swarm.com.de

Wie kombiniere und komprimiere ich meinen JS richtig, indem ich die Frontend-Belastung optimiere?

Meine Website für einen Unternehmenskunden enthält ungefähr 90 Assets, die beim Laden heruntergeladen werden, 35 oder so sind JS-Dateien. Sogar "optimierende" Erweiterungen, die für Joomla erstellt wurden, scheinen mich auf ungefähr 31 JS-Dateien zu beschränken und nur die kombinierten CSS/JS zu komprimieren und nicht die, die Rogue laufen zu lassen scheinen.

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

Meine Vorlage ist eine Rockettheme-Basis mit vielen Anpassungen, daher hat sie Gantry-js, bootstrap js, einige Erweiterungen wie mein Videoplayer verwenden eine js-Datei usw., und sie scheinen verbreitet zu sein auf ein Paar pro Nebenstelle anstatt nur eines.

Was funktioniert und was nicht, um diesen Teil des Frontend-Ladens zu verbessern?

8
Toni Marie

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

Mein Gesamtansatz, um eine schnelle Verladestelle zu erreichen.

Eine schnelle Website ist unerlässlich. Die Geschwindigkeitsoptimierung einer Website, die in der Regel am Ende der Entwicklung stattfindet, sollte von Anfang an berücksichtigt werden. Es beginnt mit der richtigen Vorlage.

Durch die Installation jeder einzelnen Erweiterung und die Verwendung beliebiger ausgefallener Module entsteht wahrscheinlich eine umfangreiche Website, die später nur sehr schwer leichter zu gestalten sein wird.

Seien Sie vielseitig - bleiben Sie minimal

Wenn es um Geschwindigkeitsoptimierung geht, versuche ich sehr vielseitig zu sein, welche Erweiterungen ich verwende. Ich forsche und experimentiere nach den effizientesten und qualitativ hochwertigsten für jede Aufgabe , und versuchen Sie immer, keine Erweiterungen zu verwenden, wenn es Dinge gibt, die manuell innerhalb des Kerns erreicht werden können.

Auch wenn ich mich für die Verwendung eines ausgefallenen Front-End-Features entscheiden muss, das nicht wirklich wichtig ist, werde ich es normalerweise wegwerfen oder einen anderen Weg finden, das ausgefallene Feature zu implementieren.

Ich versuche auch zu vermeiden, kommerzielle Vorlagen zu verwenden, da diese in der Regel viele zusätzliche Funktionen enthalten, um den unterschiedlichsten Vorlieben gerecht zu werden. Ich bevorzuge es, die Vorlage zu erstellen und nur das einzubeziehen, was ich brauche.

Ihre manuelle Arbeit

Ich würde vorschlagen, alle Erweiterungen zu überprüfen , um zu sehen, wie sie ihre Assets-Dateien laden, und ob es möglich ist, ) Laden Sie sie nicht auf Seiten , auf denen Sie sie nicht benötigen, z Sie können Vorlagenüberschreibungen erstellen, um das Laden der Assets-Dateien selbst zu steuern.

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

Sehen Sie auch nach, ob es möglich ist, Dateien in einer zusammenzuführen. Z.B. Lass kein Modul das CSS laden, versuche es mit der CSS-Datei der Vorlage zusammenzuführen.

Optimierungs-Tools

CSS/JAVASCRIPT-KOMPRESSION & -STEUERUNG
Was die Optimierungstools/Plugins betrifft, bin ich ziemlich zufrieden mit dem JCH Optimize Plugin. 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 nützliches Tool ist das JQuery Easy-Plugin . Es kann helfen, das Laden verschiedener Javascript-Dateien besser zu organisieren und zu kontrollieren, falls sie miteinander in Konflikt stehen, und die Optimierung mit dem JCH_Optimize-Plugin zu vereinfachen.

[~ # ~] Cache [~ # ~]
Ich verwende auch Jot Cache , um den Cache besser kontrollieren zu können, da viele Erweiterungen Probleme mit haben der Kerncache.

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

[~ # ~] htaccess [~ # ~]
Schließlich erhalten Sie große Vorteile, wenn Sie einen htaccess verwenden, um zu komprimieren und füge Expire-Header zu den Dateien hinzu.

9
FFrewin

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

5
Anibal

vielleicht können Sie diesen kostenlosen Onlinedienst ausprobieren, um Javascript zu komprimieren http://www.online-code.net/minify-js.html und CSS zu minimieren http: //www.online- code.net/minify-css.html , wodurch die Größe der Webseite verringert wird. und dieses tool ist kostenlos zu benutzen, nur müssen sie ihre js und css datei hochladen, sie können die mini datei später herunterladen.

0
tonytong