Passa al contenuto principale

CSS o JS Presente su Tutte le Pagine

A volte i moduli, per garantire il corretto funzionamento, caricano file CSS o JS su tutte le pagine del sito. Questo può essere un problema se il file è pesante o se non è necessario su tutte le pagine.

Ad esempio, se il nostro modulo lavora sul checkout nella parte del frontoffice, è inutile far caricare gli assets su tutte le pagine. Le risorse statiche devono essere presenti solo nelle pagine in cui sono utilizzate.

Analisi delle Risorse del Modulo​

Partendo dalla funzionalità del modulo, vediamo quali risorse aggiunge e dove. Se il nostro modulo lavora sulla scheda prodotto, possiamo aggiungere una condizione durante l'aggiunta dell'asset per garantire che venga aggiunto solo in quel Controller.

Esempio di Ottimizzazione​

Supponiamo che il modulo carichi un file product.js e product.css. Per ottimizzare, possiamo modificare il codice del modulo per caricare questi file solo nelle pagine del prodotto.

public function hookDisplayHeader($params)
{
    // Controlla se il controller corrente è il ProductController
    if ($this->context->controller instanceof ProductController) {
        // Aggiungi i file JS e CSS specifici per il prodotto
        $this->context->controller->addJS($this->_path . 'views/js/product.js');
        $this->context->controller->addCSS($this->_path . 'views/css/product.css');
    }
}

Strategia di Ottimizzazione​

  1. Identificare le Risorse:

    • Analizza quali risorse CSS e JS vengono caricate dal modulo e in quali pagine sono effettivamente necessarie.

  2. Condizionare il Caricamento:

    • Utilizza condizioni per caricare le risorse solo nelle pagine pertinenti, riducendo così il carico inutile sulle altre pagine.

  3. Verifica delle Modifiche:

    • Dopo aver implementato le modifiche, verifica che le risorse vengano caricate correttamente solo nelle pagine previste e che il modulo funzioni come desiderato.

Conclusione​

Ottimizzare il caricamento delle risorse statiche come CSS e JS è essenziale per migliorare le performance del sito. Assicurati che le risorse siano caricate solo quando necessario, evitando di appesantire inutilmente le pagine non correlate. Questa pratica non solo migliorerà i tempi di caricamento, ma anche l'esperienza utente complessiva.