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
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, articolo molto interessante, funziona solo su un tema o anche direttamente sul child?
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.