Passa al contenuto principale

CSS Non Necessario al Primo Caricamento

Un altro problema che possiamo riscontrare è il caricamento di CSS non necessario al primo caricamento della pagina. Questo può essere causato da un cattivo utilizzo delle media queries o da un uso inefficiente dei CSS.

Ector espone un hook chiamato asyncCss che permette di caricare i CSS in modo asincrono, evitando di bloccare il caricamento della pagina. Utilizza questo hook per registrare i CSS che il modulo richiede, caricandoli in modo asincrono e non bloccante.

Utilizzo dell'Hook asyncCss​

Per caricare i CSS in modo asincrono, devi registrare i tuoi file CSS utilizzando l'hook asyncCss nel modulo. Ecco come farlo:

Passaggi per Implementare il Caricamento Asincrono dei CSS​

  1. Definire l'Hook nel Modulo:

    • Apri il file del modulo e individua la funzione che registra i CSS.

  2. Registrare i CSS con l'Hook asyncCss:

    • Modifica la funzione per utilizzare l'hook asyncCss per registrare i file CSS da caricare in modo asincrono.
public function hookAsyncCss($params)
{
    // Aggiungi i file CSS da caricare in modo asincrono
    $this->context->controller->registerStylesheet(
        'module-modulename-style',
        'modules/modulename/views/css/style.css',
        [
            'media' => 'all',
            'priority' => 100,
            'inline' => false,
            'async' => true
        ]
    );
}
  1. Verificare il Caricamento Asincrono:
    • Dopo aver implementato la registrazione asincrona dei CSS, verifica che i file CSS vengano caricati correttamente senza bloccare il caricamento della pagina.

Vantaggi del Caricamento Asincrono dei CSS​

  • Miglioramento della Velocità di Caricamento:
    • Caricando i CSS in modo asincrono, la pagina può essere visualizzata più rapidamente, migliorando l'esperienza utente.
  • Riduzione del Blocco del Rendering:
    • Il caricamento asincrono dei CSS riduce il tempo di blocco del rendering, permettendo al contenuto principale della pagina di essere visualizzato senza ritardi.

Conclusione​

L'uso dell'hook asyncCss di Ector per caricare i CSS in modo asincrono è un modo efficace per migliorare le performance del sito, riducendo il tempo di caricamento iniziale e migliorando l'esperienza utente. Assicurati di registrare i file CSS necessari per il modulo in modo asincrono per evitare blocchi durante il rendering della pagina.