Un’elegante ed efficace alternativa alla direttiva CSS @import per i child theme WP

L’utilizzo dei Child Theme è, come abbiamo visto una delle più importanti feature di WordPress che ci consente di estendere a nostro piacimento le funzionalità del tema e il suo aspetto grafico.

A meno di non voler riscrivere daccapo uttte le regole CSS ( ipotesi quanto meno poco probabile) la direttiva da utilizzare è la

che carica le direttive CSS del tema padre mantenendone quindi layout, caratteristiche tipografiche etc; tuttavia questa direttiva è piuttosto lenta, vediamo perchè.

Occorrono circa 200 ms ~ per caricare il tema figlio e 250 ms ~ per il tema padre; un browser moderno tuttavia impiega 250 ms per entrambi visto che li carica in parallelo, ma con la direttiva @import questo non è vero. Citando google

Prima che un browser possa mostrare una pagina all’utente, deve analizzarla. Se durante l’analisi il browser rileva uno script esterno non asincrono o di blocco, deve interrompersi e scaricare la risorsa. Tale operazione comporta ogni volta un ulteriore roundtrip di rete, che genera un ritardo nella prima visualizzazione della pagina.

Quindi anzichè i 250 ms previsti occorreranno 450 ms ~ per caricarli entrambi.

Un tipico esempio di file style.css per il tema figlio è:

possiamo però migliorare le performance delle nostre pagine con l’uso del file functions.php e le action:

In questo modo quindi, con l’utilizzo della funzione wp_enqueue_style() possiamo eliminare la regola @import dal file style.css e non siamo obbligati a dichiarare dipendenze dal tema padre in quanto il file “functions.php” viene caricato prima del tema padre nel suo complesso.
Unica avvertenza:  eventuale uso nel tema padre di  action con priorità inferiore a 10 nel qual caso occorre aggiustare le priorità della add_action. Allora la soluzione ottimale:

In questo modo garantiamo che le direttive del tema figlio sovrascrivano quelle del tema padre, ma attenzione alle ridondanze eccessive.

Quasi garantito un +1  di PageSpeed

(992)

Articoli correlati:

Tagged under:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

× Supporto Live

Al momento siamo offline. Potete contattarci via email..