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.
[bctt tweet="Velocizziamo wordpress caricando i file js e css delle plugin solo dove necessari" username="posizioneseo"]
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.
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.
