レンダリングを妨げるリソースの除外を行ってサイトスピード改善!!

サイト高速化

「レンダリングを妨げるJavaScriptの除外」を改善しよう!!

「レンダリングを妨げるJavaScriptの除外」を改善してサイト高速化をイメージした画像

SEO対策を行う上でユーザビリティをUpさせる為にサイトスピードの改善は避けて通れません。

そもそも「レンダリングを妨げるリソースの除外」って一体何なのか?って事ですが、Googleが提供するサイト表示スピードを計測するサイトがあります。

ここでは、サイトURLを入力すると自動的に表示スピードが計測でき、改善点があれば教えてくれる便利なサイトになります。

まずは改善前の結果から見ていきます。

改善前の結果

改善前の結果画像

改善できる項目の画像

上図は改善前の結果ですが、42点(MAX100点)、改善できる項目として、「レンダリングを妨げるリソースの除外」が表示されています。

今回は、この「レンダリングを妨げるリソースの除外」という項目に注目して改善を行っていきます。

結論から書いておきますが、今回、改善を行うことによって以下のような結果となりました。

改善後の結果

改善後の結果画像

改善後の項目の画像

総合点が42から46へ上昇し、「レンダリングを妨げるリソースの除外」が改善されたことが分かります。

今回のサイト表示スピードUpの方法は、少しファイル等の書き換えもあるので、面倒くさいかもしれませんが、なるべくシンプルに解説していきますので、どうぞ最後まで読んでいただけたらと思います。

そもそもレンダリングって何?

まずタイトルにある「レンダリングを妨げるリソース」を説明する前に、そもそも「レンダリング」って何ですか???という疑問について解説していきます。

まず、レンダリングとは一体何なのか??ですが、次のように定義されています。

レンダリング(rendering)とは、データ記述言語やデータ構造で記述された抽象的で高次の情報から、コンピュータのプログラムを用いて画像・映像・音声などを生成することをいう。

出典:レンダリング (コンピュータ)『ウィキペディア(Wikipedia)』

ちょっと何を書いているか分かりませんね。。。

すこし文章を分解してみます。

データ記述言語〜HTML

データ構造〜様々なデータを効果的に扱うため、一定の形式に系統立てたもの

ここでは、サイトを構成しているHTMLの事と思って下さい。

データ記述言語やデータ構造で記述された抽象的で高次の情報とは、「HTMLで書かれたサイトのデータ」と読み替えることができます。

※HTMLで書かれたサイトの情報は、サイト上の適当な場所で右クリックしたら出てくる「ページのソースを表示」をクリックすると表示されます。例えば以下のようなものがHTMLと呼ばれます。

HTMLの画像

これは全てのサイトにあります。こんなの作った事ないわ〜〜〜って思われるかもしれませんが、例えば、記事を作成するとき、何かカスタムをした時、プラグインを入れた時など、自動的につくられています。

つづいて、

「コンピュータのプログラムを用いて画像・映像・音声などを生成」ですが、

パソコンは様々なプログラムの集合体です。画像を表示させるためには専用のプログラムがあるし、エクセルは表計算を行うためのプログラム、ワードは文書作成のプログラムです。スマートフォンのアプリなんかもプログラムの1つになります。

つまり、

色々なプログラムのおかげで画像や映像、音声等をパソコン上で表示できます!って事です。

これらをまとめると、

レンダリングとは、

HTMLで書かれたサイトの様々なデータをプログラムを通してブラウザ上に表示させること

となります。

レンダリングを妨げるリソースって何???

レンダリングが、「HTMLで書かれたサイトの様々なデータをプログラムを通してブラウザ上に表示させること」というのが分かりました。

それでは、「レンダリングを妨げるリソース」とは一体どういう事なのかといいますと、

HTMLで書かれたサイトの様々なデータをプログラムを通してブラウザ上に表示させることを妨げる(ブロックする)リソース」となり、

言い換えると、「ブロックするリソースがあるからブラウザ上の表示が遅くなる」読み替えることができます。

そして、ここでいうリソースとは、

外部 JavaScript ファイル

になります。

外部 JavaScript ファイルを説明すると長くなるので、ここでは、サイトを表示させるためのプログラムの一種と思って下さい。

つまり、すごく大ざっぱに言うと

「外部 JavaScript ファイルが、サイト表示スピードを遅くしている」

となるのです。

レンダリングを妨げるリソースの除外方法

それでは具体的な改善方法について解説していきます。

まず、マニュアルを見てみると次の3点が推奨されています。

  • JavaScript をインライン化する
  • JavaScript を非同期にする
  • JavaScript の読み込みを遅らせる

引用:PageSpeed Tools Insights

今回は「非同期」と「読み込みを遅らせる」方法について解説していきます。

「JavaScript をインライン化する」とは、 最初に読み込むHTML ドキュメント内にJavaScriptを直接書き込んで、データの遅延をなくす方法です。

JavaScriptデータ量が小さいうちは効果もあるのですが、データ量が大きくなると、HTML ドキュメントのサイズ量も大きくなることから、サイトの規模が大きくなってくると効果が小さくなります。

レンダリング=「HTMLで書かれたサイトの様々なデータをプログラムを通してブラウザ上に表示させること」の一連の流れを「初期設定」、「非同期」、「読み込みを遅らせる(遅延)」の3パータンで見た場合は下図のようになります。

 

 

 

 

 

 

 

 

 

引用:WHATWG

上図の意味ですが、Webサイトにアクセスがあってサイトの表示がされ始めるのが、「HTML読み込み開始」の場所です。

まず基本的な初期設定の場合、「HTML読み込み開始」⇒「JavaScriptダウンロード」⇒「JavaScript実行」という流れになります。

HTML読み込み中にJavaScriptのプログラムが動いていて、その間、HTMLの読み込みが止まってしまっています。

これがいわゆる

「レンダリングを妨げるリソース(JavaScript)」とよばれるものです。

そして、タイトルにもある「レンダリングを妨げるリソースの除外」とは、この「JavaScriptプログラム」をどうにかするということになります。

「非同期」とはJavaScriptダウンロードとHTMLの読み込みを同時に行わない設定となって、

「遅延」はJavaScriptの実行を最後に行うことで、HTMLの読み込みを先に終わらせる設定になります。

 

非同期と遅延は、若干遅延のほうがスピードUp

レンダリングを妨げるJavaScriptの除外する場合、「非同期」と「遅延」の2通りあるのが分かりました。

この2つを比べた場合、自分の場合は若干「遅延」の方がスピードが早いという結果になりました。それぞれ5回ずつ計測しています。

検証結果の画像

パターン1が「遅延」、パターン2が「非同期」となります。

サイトの表示スピードが上がったことで、サーバーの応答時間の短縮につながったと考えられます。

それではそれぞれの具体的な設定方法について見ていきます。

非同期でリソースを除外する

まずは、非同期での設定になります。

ここでは「functions.php」というファイルに非同期を命令する関数を書き込む設定になります。

書き込み方には2通りの方法がありますので、やりやすい方法を選択して下さい。

この設定は1回のコピーと貼り付けで終了しますのでとても簡単です。

ただ、万が一があるので、この設定を行う前には必ずバックアップ(ファイルのコピー含む)をとっておきましょう。

2018.12.4追記:管理画面が真っ白になってWordPressにアクセスできなくなるケースが発生しております。「functions.php」ファイルはWordPressの設定に直接関わるものなので、以下の手順通りに作業して下さい。もしトラブル等が発生した場合はお問い合わせからご連絡お願いします。これまでに「テーマ:Huemanバージョン: 3.4.12」で不具合が発生したケースが報告されています。
2019.3.11追記:ここで紹介している方法は子テーマでの作業を推奨します。直接functions.phpにコードを追記することも可能ですが、慣れていない場合、不具合が発生した時に復旧させるのに手間取る可能性があります。

テーマの編集から変更

今回、例として使用するテーマは「Simplisty Child」ですが、他のテーマでもやりかたはほとんど同じになると思います。

管理画面左の外観からテーマの編集をクリックします。

テーマの編集ボタンの画像

右側にある「テーマのための関数」(functions.php)をクリックします。

functions.phpボタンの画像

「テーマのための関数」(functions.php)をクリックすると左側に関数の文字列が表示されます。ここに書かれている内容は人それぞれで違います。(下図は初期設定状態)

functions.php入力画面の画像

この一番下に

//非同期設定
if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url; //.js以外は対象外
if ( strpos( $url, 'jquery.min.js' ) ) return $url; //'jquery.min.js'は、asyc対象外
return "$url' async charset='UTF-8"; // async属性を付与
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}

を貼り付けます。

※1行目の「//非同期設定」は何の設定を行うかの説明になります。「//」の後ろは、設定に反映されませんので、自分で分かりやすいコメントを書くと良いと思います。

最後の「}」も忘れないで貼り付けて下さい。

貼り付けたら、下図のようになります

functions.php入力後の画像

ファイルを更新ボタンの画像

最後に「ファイルを更新」をクリックして終了になります。

サーバー内の「functions.php」ファイルを直接変更

こちらは、サーバー内にある「functions.php」ファイルを直接変更する方法になります。

この方法は、サーバー内のファイルを扱える方のみ行って下さい。

参考までに、変更方法を載せときます。

ワードプレスフォルダの画像

wp-contentフォルダの画像

themesフォルダの画像

simplicity2-childフォルダの画像

functions.phpファイルの画像

データベース入力画面の画像

サーバー内の「functions.php」の変更も中身はテーマの関数の変更と同じです。

管理画面から設定してあげるほうが簡単ですね。

遅延でリソースを除外する

次は「遅延」による設定になりますが、貼り付ける関数以外は全て同じになります。

それでは具体例を見ていきます。

管理画面左の外観からテーマの編集をクリックします。

テーマの編集ボタンの画像

右側にある「テーマのための関数」(functions.php)をクリックします。

テーマのための関数ボタンの画像

「テーマのための関数」(functions.php)をクリックすると左側に関数の文字列が表示されます。ここに書かれている内容は人それぞれで違います。(下図は初期設定状態)

functions.php入力前の画像

この一番下に

//遅延設定
if ( !(is_admin() ) ) {
function replace_scripttag ( $tag ) {
if ( !preg_match( '/defer/', $tag ) ) {
return str_replace( "type='text/javascript'", 'async', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'replace_scripttag' );
}

を貼り付けます。

※1行目の「//遅延設定」は何の設定を行うかの説明になります。

こちらについても最後の「}」は忘れないで貼り付けて下さい。

貼り付けたら、下図のようになります。

functions.php入力後の画像

ファイルを更新ボタンの画像

最後に「ファイルを更新」をクリックして終了になります。

最後に

今回の設定は、テーマ内の「functions.php」ファイルの変更について説明してきました。この方法は、もし今後使用するテーマが変わるたびに、同様の設定を行う必要があります。

サーバーの「functions.php」ファイルを直接編集できる方はWordPress内の「functions.php」ファイルを変更すると後々テーマが変わっても設定しなおす必要がなくなるので、そちらをオススメします。

サイトスピードの改善は、Googleの検索順位を上げるためにも必要な対策の1つになります。

今回の設定の他にも色々な改善方法があるので、1つでも多く取り入れて、ユーザビリティをUpさせていきましょう。

下にサイトスピードをUpさせる方法について書いた記事がありますので、よかったら見てみて下さい。

[徹底解説!]プラグインAutoptimizeで簡単サイト高速化
WordPressプラグイン「Autoptimize」でサイト表示スピードをUpさせよう!! サイト表示の高速化は、サイトを運営している方たちにとって、重要なテーマです。 どんなに良い記事を書いて、役に立つ情報を発信したとし...
[2019]徹底解説!!ワードプレス リビジョン削除で高速化
そもそもリビジョンって何なの??? 皆さんはワードプレスに搭載されているリビジョンという機能はご存知でしょうか??? 記事を作成していく過程において、要所要所で下書き保存をしたり、プレビューをチェックしながら進めていくと思います...
WordPressプラグインで高速化の効果を検証してみた!その1
WordPressプラグインで高速化の効果を検証してみた 今回は、多くの種類があるWordPressプラグインの中でも「高速化」を狙えるプラグインを使用してみたら、実際どのくらい高速化できるのかということを検証しました。 そもそも高速化...
画像圧縮プラグインEWWW Image Optimizerの使い方
ワードプレスを高速化!プラグインEWWW Image Optimizerで画像を圧縮しよう ここでは、ワードプレスプラグイン「EWWW Image Optimizer」を使用して画像の圧縮方法について解説していきます。 何のため...
わずか3分!SNSアイコン表示Offでワードプレスを簡単高速化!
SNSアイコンを表示オフにしてワードプレスを簡単高速化! ここでは、使用しないSNSアイコンの表示設定をオフにして簡単にWordPressを高速化する方法について解説していきます。 このページを見ているということは、Word...
ワードプレス高速化!プラグインa3 lazy loadで簡単設定
a3 Lazy LoadをインストールしてWordPressを高速化しよう サイト表示の高速化は、サイトを運営している方たちにとって、重要なテーマです。 どんなに良い記事を書いて、有益な情報を発信したとしても、サイトの読み込...

コメント

  1. きゃま より:

    wordpressで上記の方法を試してみたら管理画面エラーが発生しました。管理画面にすら入れないのでFTPを使い復旧しました。
    原因はわかりませんが一応報告としてコメントしておきますね。

    管理画面エラーになった人もいると注意喚起をしたほうがよろしいかと思います。

    • snow より:

      情報ありがとうございます。
      よろしければ、きゃま様がお使いのテーマと、コードを記入したファイル名、記入した場所を教えていただけませんか。

      注意喚起の文章を記載いたします。

  2. オレンジ より:

    wordpressで上記の方法を試してみたら画面が真っ白になりました。

    現在、復旧を試みてますが、上手くいくかわかりません。
    困ってますし、かなり焦ってます。

    どうすれば復旧できるか教えてください。

    • snow より:

      返信遅くなり申し訳ありませんでした。

      何点かご質問させていただきます。
      ・レンタルサーバーはどこの会社をお使いですか?
      ・テーマは何をお使いになってますか?
      ・function.phpファイルはどこに保管されているものを使用しましたか?
      (レンタルサーバ内のファイル。親テーマ。子テーマ)

      お答えできる範囲でよろしいのでお願いします。

  3. TK より:

    こんにちは、snowさん

    有益な情報ありがとうございます。
    自分のサイトでも試してみたのですが、イマイチ上手くいきません。
    非同期および遅延の片方どちらを入れてみても、管理画面どころかトップページでも表示できなくなってしまいました。

    なんとなくテーマもしくはプラグインが悪さしてるような気もするのですが、なんだか上手くいかなkt多ので、ご報告まで。

    テーマ:Huemanバージョン: 3.4.12
    レンタルサーバ:カラフルボックス
    記入個所:子テーマのfunction.phpの末尾

    因みにFTPでfunction.phpを直接編集して復旧済みです。

    • snow より:

      TK様、情報ありがとうございます。
      トップページが表示できないとの事なので、コードのどこかの部分がテーマもしくは
      プラグインに干渉していると思いますが、今回の場合はレンダリング関係のプラグインに
      干渉している可能性が高いと考えます。
      テーマの可能性もありますので、記事内に注意喚起の文面を追記いたしました。

  4. hiromi より:

    wordpressで上記の方法を試してみたら画面が真っ白になりました。
    困っていますので、どうすれば復旧できるか教えてください。

    ・エックスサーバー
    ・テーマはDiver
    ・function.phpファイルは子テーマに保管されているものを使用

    function.phpのページの下部に、「何かうまくいかなかったようです。変更が保存されていないかもしれません。手動で修正し、FTP 経由でファイルをアップロードすることもできます。」と表示されています。

    • snow より:

      hiromi様こんばんは。
      返信が遅くなり申し訳ありません。
      メッセージを見るとサーバー内のfunction.phpファイルを編集できると思われます。
      今回追記したコードを一旦削除して、ファイルを再アップロードしてみて下さい。
      テーマにデフォルトで備わっている機能か既存のプラグインに干渉している可能性があります。

  5. るる より:

    データベースのfunction.phpじゃなくてサーバーの中のですよね?
    データベースにはphpやhtmlのファイルは置けませんよ

    • snow より:

      るるさま、ご指摘ありがとうございます。
      サーバー内のファイルになります。
      記事の訂正をいたしました。

  6. クロ より:

    おそらく画面が表示されなくなる原因の多くは、「‘」などの記号が全角になっているのだと思います。
    上記に書かれたコードをそのままコピペすると全角になります。

    ファイルジラなどのFTPソフトを使用していればペーストした段階で異変に気が付けますが、管理画面上でペーストした場合はおそらく気づけません。
    また、貼り付け場所も子テーマオンリーとし、?>より後ろに書かないようにとまで注意書きを入れた方が優しくなれます。

    見た目では違いがわかりませんが念のため半角にした遅延コードを貼り付けておきます。

    //遅延設定
    if ( !(is_admin() ) ) {
    function replace_scripttag ( $tag ) {
    if ( !preg_match( ‘/defer/’, $tag ) ) {
    return str_replace( “type=’text/javascript'”, ‘async’, $tag );
    }
    return $tag;
    }
    add_filter( ‘script_loader_tag’, ‘replace_scripttag’ );
    }

    • snow より:

      クロ様、コメントありがとうございます。
      全角⇒半角、子テーマでの編集の推奨を追記しました。
      ご助言感謝いたします。

      • s より:

        こんにちは、横から失礼します。

        私もエラーが発生しましたが、
        原因は「’」が半角どうこうではなく、snowさんが公開している方コードの「’」と「”」が全て日本語入力になっているからです。
        「’」ではなく「’」、「”」ではなく「”」を使えば改善できますよ。

        ↓正しいコード

        //遅延設定
        if ( !(is_admin() ) ) {
        function replace_scripttag ( $tag ) {
        if ( !preg_match( ‘/defer/’, $tag ) ) {
        return str_replace( “type=’text/javascript'”, ‘async’, $tag );
        }
        return $tag;
        }
        add_filter( ‘script_loader_tag’, ‘replace_scripttag’ );
        }

タイトルとURLをコピーしました