サイト表示を少しでも早く!WordPressでJavascriptファイルを非同期にする方法

デザイン

特にサイトを作ったことのある人であれば、Googleの「PageSpeed Insights」で 、サイトの表示スピードを点検することも多いと思います。

その「PageSpeed Insights」では、改善案を提案してくれるんですが、その改善提案の中に「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」というのがあります。

もしサイトをWordPressで構築している場合は、functions.php の中に、以下のコードをコピペして入れれば完了です。
そのやり方は以下のとおりです。

if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.min.js' ) ) return $url;
	if ( strpos( $url, '非同期で読み込むと動作しなくなるファイルをここに入れる' ) ) return $url;
    return "$url' async charset='UTF-8";
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}

上記のコードを入れると、読み込んでいるJavascriptファイルに、async が下記のように入ります。

<script type='text/javascript' src='https://●●●●.com/wp/wp-content/themes/●●●/js/●●●●●.js' async charset='UTF-8'></script>

4、5行目は、非同期にすると作動しない場合もあるので、非同期にしたくないファイル名を、書き込んでおきます。

もし、「PageSpeed Insights」で、「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」の提案があった際には、導入してみてもいいんじゃないでしょうか。

sanpo-zukan

sanpo-zukan

ストアカで『【オンライン★初心者向け】気軽で楽しくワードプレスのお悩み相談教室( https://www.street-academy.com/myclass/78668 )』運営中!

関連記事

特集記事

コメント

この記事へのコメントはありません。

CAPTCHA


sanpo-zukan

sanpo-zukan

当サイト(さんぽずかん)を運営しています「しゃむ」です。 役立つ情報からしょうもないネタまで、少しでも読んだ人の役に立てばいいなと思って、いろいろな記事を掲載していきます!

最近の記事

  1. カスタム投稿タイプのアーカイブ一覧ページを作成する

  2. select要素でプルダウンメニュー選択時にページ遷移を行う方法(サンプルコードあり)

  3. VScodeのマウスホバー時に表示される邪魔なポップアップみたいなのを非表示にする方法

  4. PR

    つい旅に出たくなる。そんな雰囲気を醸し出すテーマ「meets」

    TCD

新着 オススメ 特集記事
  1. カスタム投稿タイプのアーカイブ一覧ページを作成する

  2. select要素でプルダウンメニュー選択時にページ遷移を行う方法(サンプルコードあり)

  3. VScodeのマウスホバー時に表示される邪魔なポップアップみたいなのを非表示にする方法

  1. Flexboxでjustify-content: space-betweenの最後の要素を左寄せにする方法

  2. しまった!アップグレードしたらサイトの表示が崩れた!!WordPressをダウングレードするカンタンな方法とは?

  3. サイト表示を少しでも早く!WordPressでJavascriptファイルを非同期にする方法

  1. GoogleAdsenseで口座確認のデポジットがなかなか入金されなかったとき確認すべき点

  2. サイト表示を少しでも早く!WordPressでJavascriptファイルを非同期にする方法

  3. ネコ好きLINEユーザー必見!懲りずに第二弾はスタンプ8個でお手軽LINEスタンプ!「ゆるかわミケにゃん」販売開始!

TOP