Code Snippet

Memindahkan Semua file JavaScript WordPress Dari Header Ke Footer

Kecepatan loading suatu web menjadi poin penting dalam optimasi website. Semakin cepat loading sebuah website, semakin baik untuk mesin pencari dan juga untuk pengunjung. Salah satu upaya untuk mempercepat loading sebuah webiste yaitu dengan memindahkan kode JavaScript ke bagian bawah dokumen website kita, dalam hal ini untuk website berbasis wordpress dengan memindahkannnya ke dalam footer.

Sayangnya untuk memindahkan kode – kode tersebut tidaklah mudah, terutama jika kita menggunakan plugin yang menyuntikkan kode kedalam header. Nah berikut ini adalah solusi simple untuk memindahkan semua file Javascript wordpress kita dari header ke footer.

Pertama buka file functions.php dan pastekan kode dibawah ini kedalam file. Fuction pertama bekerja untuk menghapus tag yang tidak diinginkan (dengan konten mereka). Yang kedua bertugas untuk menggenerate tag <script>.

/**
 * 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 .= '';
    }

    //external script
    foreach ( $scripts_src as $value ) {
        $out .= '';
    }

    return $out;
}

setelah selesai, edit file header.php Anda. Ganti tag wp_head () dengan ini:

<?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 );
?>

Dan terakhir, letakkan kode di bawah ini ke dalam file footer.php Anda, tepat sebelum tag penutup

<?php theme_insert_js( HEAD_CONTENT ); ?>

Nah semoga code diatas dapat membantu anda untuk mempercepat loading website wordpress anda dengan memindahkan file JavaScript ke dalam footer.

Tags
Show More

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Close