Corsi on-line

WordPress: ridurre i tempi di caricamento dei Child themes

Come è noto, in WordPress abbiamo due tipologie di temi, i Parent themes, cioè dei temi completamente originali, e i Child themes, cioè dei temi derivati da un Parent e basati sul suo codice sorgente; questi ultimi in pratica sono degli adattamenti, o se preferite dei fork, grazie ai quali sarà possibile non creare un tema da zero, senza per questo dover applicare delle modifiche al codice del progetto originale.

WordPress

Come fa notare Konstantin Kovshenin sulle pagine del suo blog, nell’uso dei Child themes l’adozione della direttiva @import di CSS rischia in molti casi di rappresentare un fattore di rallentamento a danno dei tempi di caricamento dei fogli di stile associati; nello specifico il suo impiego si tradurrebbe in un intervallo della durata di 200 millisecondi per il loading del foglio di stile CSS collegato al tema derivato a cui aggiungere altrettanti ms per il caricamento del tema padre.

Considerando che un browser Web abbastanza recente dovrebbe impiegare non più di 200 ms per compiere entrambe le operazioni in parallelo, @import causerebbe da solo un aggravio pari al doppio del tempo previsto; questo per via del fatto che, in presenza di tale direttiva, l’esigenza di caricare il secondo foglio di stile verrà comunicata all’engine del browser soltanto dopo aver completato il caricamento del primo. Come risolvere tale problema?

Per rispondere a questa domanda Kovshenin suggerisce di abbandonare definitivamente @import, generalmente utilizzato in questo modo nel CSS del Child theme:

@import url(../parent-theme/style.css);

Ciò in favore di una modifica che consisterà nell’aggiunta di una funzione al codice del file functions.php:

add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );
function my_child_theme_scripts() {
    wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/style.css' );
}

Tale procedura avrà inoltre il vantaggio di non richiedere una nuova dichiarazione delle dipendenze tra Child e Parent, questo perché il file functions.php del tema figlio verrà caricato prima di quello del tema padre.

Via Konstantin Kovshenin

Post correlati
I più letti del mese
Tematiche