1/08/2017 Wordpress 2 27186
Come velocizzare WordPress caricando Javascript e CSS solo dove servono

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.

Condividi:
pino

Nato con la passione per l'informatica da mamma Access e papà ASP nel 2002 rinnego repentinamente la mia paternità facendomi adottare da papà PHP e mamma SQL.
Allevo HTML e correlati fiori in CSS mentre vedo i frutti del mio orticello SEO crescere grazie alla passione e alla dedizione della coltura biodinamica; perchè il biologico è fin troppo artificiale.
Realizzo siti internet a tempo pieno, nei restanti momenti mi occupo di redigere articoli per questo sito e saltuariamente far esperimento nel mare che è internet.

Lascia un commento

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


Commenti
Giuseppe
Rispondi 23-10-2017 07:09
Giuseppe
Ciao, puoi spiegarmi dove si trova il file contact.php ? Grazie
Pino
Rispondi 24-10-2017 10:33
Pino
Ciao Giuseppe, non necessariamente il file si chiamerà contact.php, ma devi andare ad inserire le funzioni condizionali nel template php del tuo tema che genera la pagina contatti. Il file varia caso per caso in funzione del tema che usi.
Approfondimenti correlati
Scopri di piùLeggi di piùScopri di più

Audit SEO: automatizzare il controllo del tag title

In occasione del compleanno di posizionamento-seo.com (5 anni di presenza in rete dominio acquistato 14 ottore 2013 ma sito salito…

Scopri di piùLeggi di piùScopri di più

Guida all’ottimizzazione dei link interni

I link interni, ovvero quei link che collegano tra loro le pagine dello stesso sito, costituiscono un elemento molto importante…

Scopri di piùLeggi di piùScopri di più

Yoast, 5 trucchi per migliorare l’ottimizzazione SEO

Da pochissimo è stata rilasciata la nuova versione di Yoast SEO, la 6.2 per l’esattezza, che promette un’analisi della leggibilità…

Scopri di piùLeggi di piùScopri di più

Google Search Console e le schede informative: analisi del markup strutturato

All'interno di Google Search Console mi sembra che recentemente sia stata aggiunta una nuova scheda per l'analisi delle schede informative,…