Ottimizzazione del carico frontend, come posso combinare e comprimere correttamente il mio JS?


8

Il mio sito Web per un cliente aziendale ha circa 90 risorse che vengono scaricate al caricamento, circa 35 sono file JS. Anche le estensioni "ottimizzate" create per Joomla sembrano portarmi solo a 31 file JS e comprimere solo i css / j combinati e non quelli che sembrano funzionare in modo non corretto.

Ho provato alcuni dei plug-in gratuiti di ottimizzazione e sono riluttante a spendere soldi per quelli a pagamento se faranno molto poco per i miei tempi di caricamento.

Il mio modello è una base Rockettheme con molta personalizzazione, quindi ha Gantry js, bootstrap js, un paio di estensioni come il mio lettore video usano un file js, ecc. E sembrano essere distribuite in una coppia per estensione invece che semplicemente uno.

Cosa funziona e cosa no per migliorare questa parte del carico frontale?

Risposte:


9

Non sarà facile gestire tutti questi file. Combinare, minimizzare e comprimere tutti insieme porterà molto probabilmente problemi. Ci vorrà molto sforzo e una combinazione di tecniche per raggiungere un livello di ottimizzazione soddisfacente.

Il mio approccio generale per realizzare un sito di caricamento rapido.

Un sito Web veloce è essenziale. L'ottimizzazione della velocità di un sito Web, sebbene di solito avvenga alla fine dello sviluppo, è qualcosa che dovrebbe essere considerato dall'inizio. Si inizia con il modello corretto.

Anche l'installazione di ogni estensione e l'utilizzo di qualsiasi tipo di moduli di fantasia, probabilmente si traduce in un sito Web pesante, che sarà molto difficile renderlo più leggero in seguito.

Sii eclettico - resta minimo

Personalmente, quando si tratta di ottimizzare la velocità, cerco di essere molto eclettico su quali estensioni utilizzo. Io ricerco e sperimentazione per la maggior parte quelli efficienti e di qualità per ogni attività, e cerco sempre di evitare di utilizzare qualsiasi estensione, se ci sono cose che possono essere realizzati manualmente all'interno del nucleo.

Inoltre, se devo decidere di utilizzare una funzionalità di front-end di fantasia non molto importante, che mi crea problemi nella velocità di ottimizzazione del sito Web, di solito lo butto via o trovo un altro modo per implementare la funzionalità di fantasia.

Cerco anche di evitare di utilizzare modelli commerciali, poiché di solito sono dotati di molte funzionalità extra per soddisfare molti gusti diversi. Preferisco creare il modello e includere solo ciò di cui ho bisogno.

Il tuo lavoro manuale

Suggerirei di rivedere tutte le estensioni che hai per vedere come caricano i loro file di risorse e se è possibile evitare di caricarle in pagine dove non ti servono, ad esempio potresti creare sostituzioni di modelli dove possibile controllare da solo il caricamento dei file delle risorse.

Potresti scoprire che ci sono estensioni che non ti servono , ma che sono ancora caricate o che non hai le impostazioni ottimali su come dovrebbero funzionare.
Ad esempio JCE Mediabox fornisce l'opzione per essere caricata solo in voci di menu specifiche.

Vedi anche se è possibile unire i file in uno. Ad esempio, non lasciare che nessun modulo carichi il suo CSS, prova a unirlo con il file CSS del modello.

Strumenti di ottimizzazione

COMPRESSIONE E CONTROLLO CSS / JAVASCRIPT
Per quanto riguarda gli strumenti / plug-in di ottimizzazione, sono abbastanza contento del plug-in JCH Optimize . È gratuito, ma ha anche una versione commerciale con supporto per pochi dollari. Con la corretta messa a punto, può produrre grandi risultati e lo sviluppatore è molto utile se hai bisogno di supporto.

Un altro strumento che potrebbe rivelarsi utile è il plug-in JQuery Easy . Può aiutare a organizzare e controllare meglio il caricamento di vari file javascript, nel caso in cui siano in conflitto tra loro e rendano più semplice l'ottimizzazione con JCH_Optimize Plugin.

CACHE
Uso anche Jot Cache , per avere un migliore controllo sulla cache, poiché molte estensioni hanno problemi con la cache principale.

CDN L'
utilizzo del CDN per fornire contenuto statico è lo strumento successivo: utilizzo NoNumber CDN per Joomla

HTACCESS
Infine, otterrai grandi vantaggi utilizzando un htaccess per comprimere e aggiungere le intestazioni Expire ai file.


5

Non esiste una soluzione semplice per oltre 30 file JS.


Ho fatto clic sul suggerimento completo sopra come "risposta", ma devo anche notare che RokBooster ha funzionato molto meglio di JCH Optimize perché sto utilizzando un modello basato su Gantry ed estensioni. Grazie! Vorrei poter fare clic su entrambi.
Toni Marie,

Bello, felice di essere stato utile
Anibal

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.