Come velocizzare WordPress caricando Javascript e CSS solo dove servono

0
395
parete con 4 porte grigie e una centrale rossa con logo wordpress

Quando si parla di ottimizzazione della velocità di un blog WordPress spesso ci si riferisce all’uso di sistemi di caching perché sono in grado di incidere anche del 50% sul tempo richiesto per servire ciascuna pagina all’utente.

Dopo aver posto in essere questo e altri interventi è sicuramente importante prendere in considerazione anche il numero e il tipo di richieste a elementi esterni come file js e css che sono chiamati da alcuni plugin o dal tema stesso.

Velocizziamo wordpress caricando i file js e css delle plugin solo dove necessari Condividi il Tweet

Perché è importante gestire le inclusioni di Javascript e fogli di stile?

In ogni pagina del blog, nella sezione head o prima della chiusura di body sono presenti inclusioni come la seguente:

<link rel=’stylesheet’ id=’woocommerce-general-css’  href=’//www.miosito.com/wp-content/plugins/woocommerce/assets/css/woocommerce.css?ver=2.6.14′ type=’text/css’ media=’all’ />

Per il caricamento di ciascuna di queste risorse esterne possono volerci dai 10ms in su in base alle dimensioni del file e la loro somma può provocare un grande rallentamento nel caricamento della pagina.

Spesso tutte queste richieste sono legittime e usate dai plugin per funzionare correttamente e mostrare la propria funzionalità nella pagina corrente, ma altre volte sono incluse in pagine che non ne fanno uso, provocando un rallentamento inutile.

Come sono inclusi i file .css e .js?

Gli script e i fogli di stile sono chiamati automaticamente nelle pagine attraverso una funzione inserita nel file functions.php come la seguente.

<?php
function funzione_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'funzione_scripts' );
?>

Se il programmatore non avesse seguito queste best practices nella realizzazione del plugin, dovrai analizzare il codice per capire dove e come vengono inclusi i files per rimuovere o adattare le chiamate nelle pagine che desideri.

Come rimuovere le chiamate dalle pagine?

La maggior parte degli sviluppatori segue queste regole e ciò consente di disabilitare l’inclusione dei file .css con un paio di righe di codice come le seguenti nel file function.php del tuo tema child (non toccare i file delle plugin o del tema padre altrimenti al primo aggiornamento perderai tutta la tua configurazione personalizzata):

function dequeue_mio_css() {
wp_dequeue_style('mio-css');
wp_deregister_style('mio-css'); }
add_action('wp_enqueue_scripts','dequeue_mio_css');
add_action('wp_enqueue_scripts','dequeue_mio_css',100);

Per i file js invece si può usare:

function includejs() {
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"), false, '1.6.1', true);
wp_enqueue_script('jquery');
wp_enqueue_script('modernizr', get_bloginfo('template_url').'/js/modernizr-2.0.6.js', false, '2.0.6', true);
}
add_action('init', 'includejs');

A questo punto le risorse esterne sono disabilitate in qualsiasi pagina del sito e dovremo includerle in quei post legittimi dove svolgono una funzionalità.

I fogli di stile vanno inclusi nel file header.php o nella posizione corrispondente in base al tema in uso.

Dovrai applicare un conditional tag iniziale per specificare in quale specifica pagina, post, categoria o tag desideri che la chiamata venga mostrata.

<?php if (is_page('about-me')):?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/powerSlide.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/powerSlide_theme.css" type="text/css" media="screen" />
<?php endif;?>

N.D.R.: ‘about-me’ è il permalink della pagina, in alternativa si può utilizzare is_page(42) dove 42 è l’id del contenuto.

Invece nel file footer.php si includeranno le chiamate javascript all’interno di un conditional tag come il seguente:

<?php if (is_page('about-me')):?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/powerSlide.js"></script>;
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/scripts.js"></script>;
<?php endif;?>

N.D.R.: attenzione che non sempre è così facile comprendere dove è posizionato un file js di una plugin di cui escludere il caricamento. In alcuni casi è necessario studiare il codice con cui viene incluso analizzando gli script php della plugin stessa.

Esempio pratico: rimuovere le chiamate css e js in Contact Form 7

Uno dei plugin più famosi è sicuramente Contact Form 7 e sarebbe bene disabilitare globalmente le chiamate esterne considerando che la maggior parte dei siti lo utilizza solo nella pagina contenente il modulo di contatto.

Per consentire a WordPress di caricare i file js e css di CF7 solo nelle pagine in cui è presente il form basta includere nel file contact.php il seguente codice PHP:

<?php
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
wpcf7_enqueue_scripts();
}
if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
wpcf7_enqueue_styles();
}
?>

In questo modo avrai velocizzato l’intero blog WordPress perché sarà evitato il caricamento di risorse esterne inutili dove non sono richieste.

Questa guida è a cura di Federico Magni di http://www.federicomagni.it che dall’affiliate marketing alla SEO ha sempre avuto interesse per il digital marketing sviluppando esperienze e risultati costanti con un network di oltre 150 siti per potere lavorare a tempo pieno in questo mondo come imprenditore digitale.

LASCIA UN COMMENTO