1. Ana Sayfa
  2. Wordpress Nasıl Yapılır ?
  3. WordPress Javascript Kodlarını Ekranın Üst Kısmından Kaldırma
Trendlerdeki Yazı

WordPress Javascript Kodlarını Ekranın Üst Kısmından Kaldırma

JavaScript dosyaları ekranın üst kısmından kaldırmak, site altına taşımak, site hızımızı artıracaktır. Bunu yapmak için bazı kodlar kullanıyoruz.

WordPress Javascript Kodlarını Ekranın Üst Kısmından Kaldırma

WordPress site hızını arttırmak için, bazı önemli adımlar atmak gerekir. Google Page Speed “Ekranın üst kısmındaki JavaScript dosyaları kaldırın ” şeklinde bir uyarıda bulunmaktadır çoğu kez. JavaScript dosyaları ekranın üst kısmından kaldırmak, onları tamamen silmek anlamına gelmez.

JavaScript dosyaları ekranın üst kısmından kaldırmak, sitede bazı işlevlerin durması anlamına gelir. Bunun yerine yapılması gereken, header a taşımaktır. Bu sayede sayfa yüklenirken, JavaScript dosyalarının yüklenmesi beklenmeyecektir. Bu sayede sayfamızın açılış hızı artacaktır.

Bu işlemi eklenti kullanarak yapmak mümkün olsa da, her eklenti tüm sitelerde işe yaramıyor maalesef. Beraberinde sitede bulunan diğer eklentiler, yada tema ile uyum sorunları olabiliyor. Bu nedenle bu işlemi bazı kodlar kullanarak yapmak daha akılcı olur.

Burada hemen şu hatırlatmayı yapalım. Kodları kullanmaya karar verirseniz, öncesinde mutlaka site yedeği almayı unutmayın. Kodları bizzat denedim ve işe yaradığını gördüm, ancak sizin sitenizde kodların çalışmasını engelleyecek, farklı bir kod yapısı olup olmadığını bilemem. Bu nedenle bu uyarıyı yapmak zorundayım.

JavaScript dosyaları ekranın üst kısmından kaldırmak

JavaScript dosyaları ekranın üst kısmından kaldırmak için, önce sitemizin fonctions.php dosyasını açıyoruz. Alttaki kodları dosyamıza ekliyoruz.

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

Kodlarımızı fonctions.php dosyasına ekledikten sonra,header.php dosyasını açıyoruz. Dosya içerisinde wp_head() bölümümü buluyoruz ve alttaki kodlarla değiştiriyoruz. Muhtemelen <?php wp_head(); ?> biçiminde görünecektir.

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

Kodlarımızı ekledikten sonra, geriye son bir adım kalıyor. footer.php dosyasını açıp, </body> etiketinden hemen önce, aşağıdaki kodu ekliyoruz.

<?php theme_insert_js( HEAD_CONTENT ); ?>

İşlemimiz artık tamam. Önbelleği temizleyip, Google Page Speed ile tekrar kontrol yapabiliriz.  Kodları kullanmadan önce site yedeği almanız gerektiğini tekrar hatırlatalım. Daha fazla özelleştirme için, diğer öğretici yazılarımıza bakabilirsiniz.

Yorum Yap

Yazar Hakkında

Samet KARACAN

Owner # wordpress, web güvenlik, sistem yönetimine dair ~

Yorum Yap