Spostare tutti i file JS nel footer nel modo corretto
Per velocizzare il caricamento del sito e impedire agli script di bloccare il rendering della pagina, sto cercando di spostare tutti gli script possibili (ovvero i file JS) dall'head
al footer
. Dopo alcune ricerche ho scritto questo codice:
function footer_enqueue_scripts() {
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action('after_setup_theme', 'footer_enqueue_scripts');
Ma non funziona poiché alcuni script vengono ancora caricati nell'head
, come si vede nell'output qui sotto:
<head>
<link rel="stylesheet" type="text/css" href="http://elclarin.dev/wp-content/cache/minify/000000/d4587/default.include.993ea9.css" media="all" />
<script type="text/javascript" src="http://elclarin.dev/wp-content/cache/minify/000000/d4587/default.include.0fe0ac.js"></script>
....
<!-- Metas -->
<meta charset="utf-8">
<!-- File JS -->
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/jquery.tools-1.2.7.min.js"></script>
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/prefixfree-1.0.6.min.js"></script>
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/modernizr.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/html5shiv.js"></script>
<![endif]-->
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/selectivizr-1.0.2.min.js"></script>
<![endif]-->
<script type="text/javascript">
var TEMPLATEURL = 'http://elclarin.dev/wp-content/themes/elclarin_v2';
</script>
<!-- Generato da OpenX 2.8.9 -->
<script type='text/javascript' src='http://openx.elclarinweb.com/www/delivery/spcjs.php?id=2&target=_blank'></script>
<!-- File Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-29394358-3']);
_gaq.push(['_trackPageview']);
_gaq.push(['elclarin._setAccount', 'UA-36592785-1']);
_gaq.push(['elclarin._trackPageview']);
_gaq.push(['elclarin._setAccount', 'UA-49334701-1']);
_gaq.push(['elclarin._trackPageview']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
...
</footer>
<script type='text/javascript' src='http://elclarin.dev/wp-includes/js/admin-bar.min.js?ver=4.1'></script>
<script type='text/javascript' src='http://elclarin.dev/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://elclarin.dev/wp-includes/js/hoverIntent.min.js?ver=r7'></script>
...
C'è qualche soluzione alternativa per questo problema? Il sito live per i test è qui
Aggiornamento
Dopo il suggerimento di @Milo ho scoperto che gli script, come ha detto lui, non sono caricati correttamente nel tema nel file header.php
poiché posso vedere questo:
<!-- File JS -->
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/jquery.tools-1.2.7.min.js"></script>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/prefixfree-1.0.6.min.js"></script>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/modernizr.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/html5shiv.js"></script>
<![endif]-->
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/selectivizr-1.0.2.min.js"></script>
<![endif]-->
<script type="text/javascript">
var TEMPLATEURL = '<?php echo TEMPLATEURL; ?>';
</script>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/acciones.js"></script>
<!-- Generato da OpenX 2.8.9 -->
<script type='text/javascript' src='http://openx.elclarinweb.com/www/delivery/spcjs.php?id=2&target=_blank'></script>
<!-- File Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-29394358-3']);
_gaq.push(['_trackPageview']);
_gaq.push(['elclarin._setAccount', 'UA-36592785-1']);
_gaq.push(['elclarin._trackPageview']);
_gaq.push(['elclarin._setAccount', 'UA-49334701-1']);
_gaq.push(['elclarin._trackPageview']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- File WP -->
<?php wp_head(); ?>
La mia domanda riguardo questi include (non sono lo sviluppatore del tema ma sono sicuro che si possa sistemare): qual è il modo corretto per caricarli senza rompere il tema e mantenendo le prestazioni e la velocità della pagina?

IMHO, penso ancora che caricare script e stili direttamente nell'header sia una cattiva pratica, poiché risulta sempre problematico rimuoverli o caricarli condizionalmente.
Il modo migliore per aggirare questo problema è creare un [child theme] e poi copiare header.php
nel tuo child theme. WordPress caricherà l'header del child theme invece di quello del tema genitore.
Ora puoi eliminare tutti gli script dal tuo header e registrarli e caricarli correttamente tramite l'hook wp_enqueue_scripts
nel file functions.php
del tuo child theme. Ricorda solo di impostare il parametro $in_footer
nelle funzioni wp_enqueue_script()
e wp_register_script()
su `true
MODIFICA
Dal tuo header.php
collegato, i tuoi script sono aggiunti tra le righe 56 - 95. Queste dovrai eliminarle. Se visiti il sito, non vedrai alcun caricamento di jquery.
La libreria jquery integrata è già caricata, non c'è bisogno di preoccuparsene. Gli altri dovrai caricarli tu stesso. Ecco un esempio (Ricorda, ogni script dovrebbe avere un handle univoco, quindi dagli un nome che sia unico e non crei conflitti)
add_action('wp_enqueue_scripts', 'enqueue_my_scripts');
function enqueue_my_scripts()
{
wp_enqueue_script('jquery-tools', get_template_directory_uri() . '/js/jquery.tools.js-1.2.7.min.js', array('jquery'), false, true);
//Fai lo stesso per gli altri script
}
Nota che ho usato get_template_directory_uri()
qui perché lascerai la tua cartella js nel tema genitore. Puoi però spostare la cartella js nel tuo child theme, ma allora dovrai usare get_stylesheet_directory_uri()
NOTE SUGLI SCRIPT CONDIZIONALI
Dopo quattro anni dalla segnalazione, non esiste ancora un modo integrato per caricare script condizionalmente in base al browser IE, come invece c'è per gli stili. Puoi consultare il ticket trac e un'altra domanda che solleva lo stesso problema qui
Non ho mai provato a caricare script condizionalmente in base al browser, quindi non posso commentare questa sezione o affermare se funzioni qualche soluzione menzionata nella risposta collegata o nel ticket trac. Quello che posso dirti è che, se le soluzioni non funzionano, dovrai copiare footer.php
nel tuo child theme e poi spostare le righe 61 -66 dal tuo header al footer
NOTE SULLE RIGHE 67 -69 DEGLI SCRIPT
Questa sezione passa una variabile php a jquery. Il modo corretto per farlo è usare wp_localize_script()
. Dovrai contattare lo sviluppatore qui per assistenza, poiché questo è chiaramente legato al tema e non so davvero dove questo venga effettivamente utilizzato nei tuoi script. Controlla anche il link per uso e informazioni
NOTE SULLO SCRIPT ANALYTICS RIGHE 75 - 94
Dovrai creare un file js per questa sezione. Se non hai copiato la cartella js dal genitore al child theme, crea una nuova cartella js per il tuo child theme. Apri e crea un nuovo file js e chiamalo come preferisci, ad esempio analytics.script.js
.
Poi sposta tutto ciò che è dentro i tag script in questa cartella, cioè le righe 77 - 92. Assicurati di usare il wrapper no conflict per racchiudere questo script come descritto qui
Puoi semplicemente caricare questo script normalmente come descritto prima, ricordati solo di usare get_stylesheet_directory_uri()
e non get_template_directory_uri()
MODIFICA 2
La patch dalla risposta collegata sotto NOTE SUGLI SCRIPT CONDIZIONALI non funziona, non è ancora implementata e come ho detto nei commenti, probabilmente non sarà inclusa nella versione 10 neanche tra 100 anni :-). Purtroppo dovrai conviverci, al momento non c'è modo di ottenere questo risultato. Questo è davvero lo svantaggio di supportare IE6 - 8. Beh, a dire il vero, se supporti ancora IE6 e 7, stai combattendo una battaglia persa da tempo. Tutti i principali sviluppatori di software hanno abbandonato IE6 (incluso Wordpress), IE7 è stato abbandonato da Microsoft stessa, quindi gli sviluppatori di software seguiranno presto, e IE 8 non arriverà alla fine del 2016 IMHO
Per superare questo problema di compatibilità con jquery, potrebbe essere meglio attenersi a ciò che offre il tema stesso
Puoi provare qualcosa del genere
add_action('wp_enqueue_scripts', 'enqueue_my_scripts', PHP_INT_MAX);
function enqueue_my_scripts()
{
/**
* Assicurati, get_template_directory_uri() se lo script rimane nel tema genitore
* Usa get_stylesheet_directory_uri() se lo script è nel child theme
*/
wp_enqueue_script('jquery-min', get_template_directory_uri() . '/js/jquery-1.7.2.min.js', array(), false, true);
wp_enqueue_script('jquery-tools', get_template_directory_uri() . '/js/jquery.tools.js-1.2.7.min.js', array('jquery-min'), false, true);
wp_enqueue_script('prefixfree', get_template_directory_uri() . '/js/prefixfree-1.0.6.min.js', array(), false, true);
wp_enqueue_script('modernizr', get_template_directory_uri() . '/js/modernizr.js', array(), false, true);
/**
* I due script condizionali per cui non c'è soluzione, caricali o abbandona il supporto
*/
wp_enqueue_script('html5shiv', get_template_directory_uri() . '/js/html5shiv.js', array(), false, true);
wp_enqueue_script('selectivizr', get_template_directory_uri() . '/js/selectivizr-1.0.2.min.js', array(), false, true);
wp_enqueue_script('acciones', get_template_directory_uri() . '/js/acciones.js', array(), false, true);
wp_enqueue_script('openx', 'http://openx.elclarinweb.com/www/delivery/spcjs.php?id=2&target=_blank', array(), false, true);
wp_enqueue_script('analytics', get_stylesheet_directory_uri() . '/js/analytics.script.js', array(), false, true);
}
Come ho detto prima, c'è una variabile php passata a uno script di cui dovresti parlare con l'autore del tema. Inoltre, eventuali problemi di compatibilità dovrebbero essere discussi ulteriormente con gli autori del tema. Questo è il layout corretto e in teoria dovrebbe funzionare. Per qualsiasi altro problema legato al tema e di compatibilità, sentiti libero di contattare l'autore del tema per supporto
MODIFICA 3
Ecco come dovrebbe apparire il tuo header.php del child theme
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Blog">
<head>
<!-- Metas -->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="google-site-verification" content="V022hygXU9AHEdTBX2BFnTBYeo4SsaTjC7aGdoIMPL4"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<meta name="description" content="<?php bloginfo( 'description' ); ?>">
<?php if (is_single()) { ?>
<meta property="og:title" content="<?php the_title(); ?>"/>
<meta itemprop="name" content="<?php the_title(); ?>">
<meta property="og:type" content="article"/>
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<?php
if (has_post_thumbnail()) {
$src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( 490, 290 ), false );
?>
<meta property="og:image" content="<?php echo $src[0]; ?>"/>
<meta itemprop="image" content="<?php echo $src[0]; ?>">
<?php } else { ?>
<meta property="og:image" content="<?php echo TEMPLATEURL; ?>/images/logo.png"/>
<meta itemprop="image" content="<?php echo TEMPLATEURL; ?>/images/logo.png">
<?php } ?>
<meta property="og:site_name" content="<?php bloginfo( 'name' ); ?>"/>
<meta itemprop="description" content="<?php the_excerpt(); ?>">
<?php } ?>
<!-- Title -->
<title>
<?php
if (isset($wp_query->query_vars['b'])) {
echo str_replace( "+", " ", $wp_query->query_vars['b'] )." | ";
}
wp_title( '|', true, 'right' );
bloginfo( 'name' );
if (isset($paged) && $paged >= 2 || isset($page) && $page >= 2 || isset($page_alt) && $page_alt >= 2) {
echo ' | '.sprintf( 'Pagina %s', max( $paged, $page, $page_alt ) );
}
?>
</title>
<!-- Stylesheets & others -->
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>?version=4"/>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"/>
<link rel="alternate" type="application/rss+xml" title="RSS" href="<?php echo SITEURL; ?>/feed/"/>
<link rel="alternate" type="application/atom+xml" title="Atom" href="<?php echo SITEURL; ?>/feed/atom/"/>
<link rel="shortcut icon" href="<?php echo TEMPLATEURL ?>/images/favicon.ico"/>
<link rel="shortcut icon" href="<?php echo TEMPLATEURL ?>/images/favicon.png"/>
<link rel="apple-shortcut icon" href="<?php echo TEMPLATEURL ?>/images/favicon_iphone.png"/>
<link rel="apple-touch-icon-precomposed" href="<?php echo TEMPLATEURL ?>/images/favicon_iphone.png">
<link rel="apple-touch-icon" href="<?php echo TEMPLATEURL ?>/images/favicon_iphone.png">
<!-- WP Files -->
<?php wp_head(); ?>
</head>
<body>
<div class="for_overlays">
<?php
if (is_front_page()) {
$prepost = $post;
$normal_args = Array(
'post_type' => 'portadadeldia',
'post_status' => 'publish',
'posts_per_page' => 1
);
$normal_query = new WP_Query( $normal_args );
if ($normal_query->have_posts()) {
while ($normal_query->have_posts()) {
$normal_query->the_post();
?>
<?php
if (has_post_thumbnail()) {
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
?>
<div id="portadadeldia" class="from_overlay">
<a href="<?php echo $large_image_url[0]; ?>" target="_blank">
<?php echo get_the_post_timthumbnail(
$post->ID,
'portadadeldia_frontpage_overlay',
array( 'alt' => trim( get_the_title() ), 'title' => trim( get_the_title() ) )
); ?>
</a>
</div>
<?php } ?>
<?php
}
}
$post = $prepost;
wp_reset_postdata();
}
?>
<svg>
<filter id="firefoxblur">
<feGaussianBlur stdDeviation="4"/>
</filter>
</svg>
</div>
<header>
<div class="center_content">
<div id="header_publicity" class="publicity">
<span>Pubblicità</span>
<div>
<script type='text/javascript'><!--// <![CDATA[
/* [id18] Header Top */
OA_show(18);
// ]]> --></script>
<noscript><a target='_blank' href='http://openx.elclarinweb.com/www/delivery/ck.php?n=1073df0'><img
border='0' alt=''
src='http://openx.elclarinweb.com/www/delivery/avw.php?zoneid=18&n=1073df0'/></a>
</noscript>
</div>
</div>
<h1 id="header_logo"><a href="<?php echo SITEURL; ?>">
<?php
$prepost = $post;
$normal_args = Array(
'post_status' => 'publish',
'posts_per_page' => 1,
'post_type' => 'logos',
);
$normal_query = new WP_Query( $normal_args );
if ($normal_query->have_posts()) {
$normal_query->the_post();
$thumbnail_id = get_post_thumbnail_id( $post->ID );
$thumbnail_object = get_post( $thumbnail_id );
$url = $thumbnail_object->guid;
?><img src="<?PHP echo $url; ?>" alt="<?php bloginfo( 'name' ); ?>"><?php
} else {
?><img src="<?PHP echo TEMPLATEURL; ?>/images/logo.png" alt="<?php bloginfo( 'name' ); ?>"><?php
}
$post = $prepost;
wp_reset_postdata();
?>
</a></h1>
<?php custom_secondary_nav( "executive_menu", 'header_lateral_superior', 'Menù aziendale' ); ?>
<div id="header_lateral_inferior">
<div id="header_buscador" role="search" title="Cerca">
<div id="header_buscador_inner">
<form method="get" action="<?php echo SITEURL; ?>">
Cerca
<input title="Cerca" type="text" name="s"
value="<?php echo str_replace( "+", " ", $wp_query->query_vars['s'] ); ?>">
</form>
</div>
</div>
<div id="header_redes">
<a href="http://twitter.com/elclarin_aragua" target="_blank"><img
src="<?php echo TEMPLATEURL ?>/images/icons/tw.png"></a>
<a href="<?php echo SITEURL; ?>/rss" target="_blank"><img
src="<?php echo TEMPLATEURL ?>/images/icons/rs.png"></a>
<a href="<?php echo SITEURL; ?>"><img src="<?php echo TEMPLATEURL ?>/images/icons/ho.png"></a>
</div>
</div>
<div id="header_menu">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 3 ) ); ?>
</div>
</div>
</header>
<div role="main" id="main" class="main">
<div class="center_content">

Questo è un po' avanzato per me @Pieter, puoi fornire insieme alla tua risposta un esempio semplice per uno o due script? Ho letto la tua risposta ma non so da dove partire

Bene, un'ultima cosa, riguardo al file header.php
nel child theme? Come dovrebbe essere il contenuto di questo file? Attualmente questo è esattamente ciò che ho e penso sia completamente sbagliato, quindi...

Penso che il tuo script sia corretto, ma forse devi sistemare questo elemento
add_action('after_setup_theme', 'footer_enqueue_scripts');
Cambialo con
add_action( 'wp_enqueue_scripts', 'oiw_remove_head_scripts' );
Puoi trovare riferimento qui e l'ho testato e funziona`
