Per velocizzare il caricamento delle pagine di un sito WordPress un’ottima idea è quella di spostare il caricamento dei file Javascript per ultimo, nel footer quindi, purtroppo non esiste un metodo semplice per farlo in particolare per quei plugin che inseriscono nell’head il richiamo ai file .js .
In questa guida vediamo invece come fare per spostare il caricamento dei file .js nel footer, senza ovviamente toccare nessun plugin.
Per prima cosa apriamo il file function.php che si trova nella root del nostro tema utilizzato di default, alla fine del file incolliamo questa parte di codice :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
/** * Filter HTML code and leave allowed/disallowed tags only * * @param string $text Input HTML code. * @param string $tags Filtered tags. * @param bool $invert Define whether should leave or remove tags. * @return string Filtered tags */ function theme_strip_tags_content($text, $tags = '', $invert = false) { preg_match_all( '/<(.+?)[\s]*\/?[\s]*>/si', trim( $tags ), $tags ); $tags = array_unique( $tags[1] ); if ( is_array( $tags ) AND count( $tags ) > 0 ) { if ( false == $invert ) { return preg_replace( '@<(?!(?:'. implode( '|', $tags ) .')\b)(\w+)\b.*?>.*?</\1>@si', '', $text ); } else { return preg_replace( '@<('. implode( '|', $tags ) .')\b.*?>.*?</\1>@si', '', $text ); } } elseif ( false == $invert ) { return preg_replace( '@<(\w+)\b.*?>.*?</\1>@si', '', $text ); } return $text; } /** * Generate script tags from given source code * * @param string $source HTML code. * @return string Filtered HTML code with script tags only */ function theme_insert_js($source) { $out = ''; $fragment = new DOMDocument(); $fragment->loadHTML( $source ); $xp = new DOMXPath( $fragment ); $result = $xp->query( '//script' ); $scripts = array(); $scripts_src = array(); foreach ( $result as $key => $el ) { $src = $result->item( $key )->attributes->getNamedItem( 'src' )->value; if ( ! empty( $src ) ) { $scripts_src[] = $src; } else { $type = $result->item( $key )->attributes->getNamedItem( 'type' )->value; if ( empty( $type ) ) { $type = 'text/javascript'; } $scripts[$type][] = $el->nodeValue; } } //used by inline code and rich snippets type like application/ld+json foreach ( $scripts as $key => $value ) { $out .= '<script type="'.$key.'">'; foreach ( $value as $keyC => $valueC ) { $out .= "\n".$valueC; } $out .= '</script>'; } //external script foreach ( $scripts_src as $value ) { $out .= '<script src="'.$value.'"></script>'; } return $out; } |
Ora aprire il file header.php del tema ed al posto di wp_head() , inseriamo il codice qui sotto
|
1 2 3 4 5 6 7 8 9 10 |
<?php ob_start(); wp_head(); $themeHead = ob_get_contents(); ob_end_clean(); define( 'HEAD_CONTENT', $themeHead ); $allowedTags = '<style><link><meta><title>'; print theme_strip_tags_content( HEAD_CONTENT, $allowedTags ); ?> |
Ed infine aprima il file footer.php e prima della chiusura del tag </body> incolliamo questo codice :
|
1 |
<?php theme_insert_js( HEAD_CONTENT ); ?> |
Salviamo e sovrascriviamo tutti i files.
Articolo liberamente tradotto dall’inglese dal sito di Tomasz Dobrzynski
Programmatore WordPress Esperto WooCommerce
Sono l’autore di questo blog con tanti trucchi e guide su WordPress e WooCommerce.
Ciao, il codice ha funzionato perfettamente e ti ringrazio molto, ora su page speed non ho piu’ js in above the fold da correggere.
Volevo chiederti se e’ possibile fare la stessa cosa con i css e come, grazie e complimenti per il tuo sito.
Ciao Mario, lo puoi fare con una funzione però devi passargli a mano ogni file CSS, alternativamente puoi usare un plugin tipo WP Hummingbird di wpmudev
Ciao, articolo molto interessante, funziona solo su un tema o anche direttamente sul child?
Ciao Filippo si funziona anche in un tema child, è sufficiente che fai l’ovverinde dell’header e del footer.
un’ottima soluzione, senza dover impazzire con plugin vari e ottimizzazioni. Purtroppo però ho dovuto constatare che sui siti in cui lavoro con Elementor, probabilmente questo codice va in conflitto con il plugin e va in errore. Peccato.
Purtroppo non funziona per tutte le librerie JS, difatti se alcune vengono richiamate dopo altre può essere che qualcosa non funzioni perchè ogni libreria ha una priorità sul caricamento (1,2,3,4)