web-dev-qa-db-ja.com

これらのJSファイルをどのように延期できますか？

私のウェブサイトでは、私はGTmetrixを使いました、そして、私はJSが2つのファイルを追うことに関してエラーを遅らせるようにしました。

最初のページの読み込み中に92.5 KBのJavaScriptが解析されます。 JavaScriptの解析を延期して、ページレンダリングのブロックを減らします。

http：//mysite.url/wp-includes/js/jquery/jquery.js？ver = 1.12.4 （87.0KiB）

http：//mysite.url/ （5.5KiBのインラインJavaScript）

私のfunctions.phpファイルで私はjsを遅らせるために次のコードを持っています、しかしそれはテーマフォルダーの外のjsファイルのために影響されないようです。

これがfunctions.phpファイルの私のコードです。

if (!(is_admin() )) {
    function defer_parsing_of_js ( $url ) {
        if ( FALSE === strpos( $url, '.js' ) ) return $url;
        if ( strpos( $url, 'jquery.js' ) ) return $url;
        // return "$url' defer ";
        return "$url' defer onload='";
    }
    add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}

どうすればそのエラーを取り除き、上記の項目の解析を延期できますか？

customizationtheme-developmentjqueryinclude
1
Vishwa

非同期とは何ですか？

これが、async属性とdefer属性の機能です。

非同期属性：非同期属性はスクリプトを非同期にロードします。言い換えれば、スクリプトがページの他のコンテンツと並行して非同期にロードされ、その後スクリプトが実行されるようにします。

属性の延期：延期属性は、スクリプトのロードを延期します。ページのすべてのコンテンツのロードが完了した後にのみスクリプトが実行されるようにします。

これらの属性は両方とも、Firefox、Chrome、Internet Explorerなど、最近のすべてのブラウザで十分にサポートされています。 Internet Explorerは、IE 10以降、これらの属性のサポートを追加しました。

Async属性とdefer属性を持つscriptタグの例は次のとおりです。

<script src='http://sitename.com/js/scripts.js' async='async' type='text/javascript'> 
</script>
<script src='http://sitename.com/js/scripts.js' defer='defer' type='text/javascript'> 
</script>

あなたのレンダーブロッキングスクリプトに 'Async/Defer'属性を追加する関数 この記事では、レンダーブロッキングJavaScriptにこれらの属性を追加する3つの方法を見ていきます。これらの方法は次のとおりです。

方法1：例外なくすべてのスクリプトに遅延/非同期を追加します。方法2：少数を除くすべてのスクリプトに遅延/非同期を追加します。方法3：選択スクリプトにのみdefer/asyncを追加する。 （いくつかのスクリプトに非同期を追加し、他のスクリプトに遅らせることを可能にする最も柔軟な方法です。）必要に応じて任意の方法を使用できます。あなたはあなたの必要性に合ったどんな方法でも使うことができます。

方法1：非同期を追加する、またはすべてのスクリプトを遅延させる

例外なくすべてのスクリプトにasync属性またはdefer属性を追加したい場合は、次のコードを使用できます。

テーマのfunctions.phpページを開き、このコードをページの下部に追加します。

/*function to add async to all scripts*/
    function js_async_attr($tag){

# Add async to all remaining scripts
    return str_replace( ' src', ' async="async" src', $tag );
    }
    add_filter( 'script_loader_tag', 'js_async_attr', 10 );

追加情報についてはリンクをチェックしてください https://orbitingweb.com/blog/add-defer-async-attributes-to-scripts-in-wordpress/

1
vikrant zilpe