レンダリングを妨げるリソースの除外解決法 1【初心者の速度対策】

レンダリングを除外するリソースの除外アイキャッチ SEO検索対策

レンダリングがどうこうしろってあるけど、どうしたら良い?

レンダリングを妨げるとか言われたけど、一体どうしたら良い?

PageSpeed Insights でレンダリングに関する警告が出た時の解決法は次の2点。

  1. Javascript の読み込みを遅くする
  2. Javascript と CSS ファイルを縮小する

今回は最初の対策を紹介します。

後編では2つ目を説明しているので、両方併せて対策してみてくださいね。

私は色々対策を行った結果、速度が34点→93点に大幅改善しました。

レンダリングを妨げるリソースの除外の意味

Web上の地図イメージ

まずはこの警告の意味をちょこっと理解しておきましょう。

ウェブページはJavascriptやCSSというプログラムを読み込んで、色々な処理をしています。

Javascriptはページに動きを加えてくれます。

たとえばポップアップウィンドウとか、地図とか。

ああいったものがJavascriptを使った処理。

非常に便利ですが、こういったプログラムを読み込むと負荷がかかります。

結果、ページが表示されるスピードが遅くなるのです。

じゅんこ
じゅんこ

あんまり遅くなると読者が離脱する危険性も大!

ワードプレスでは勝手に Javascript が増える

とはいえワードプレスユーザーの中には「Javascript なんて使っていない」と思う人も多いはず。

ですが実は、知らない内に使われているのです。

WordPress は最初から Javascript ファイルが設定されています

さらにプラグインでもJavascriptを使います。

たとえば有名な問い合わせフォーム【Contact Form7 】のプラグインなども結構重い。

こういったプラグインを増やすと、Javascriptの読み込み量がいつのまにやら増えてしまうのです。

知らなかったー

じゅんこ
じゅんこ

プラグインは便利だけど、必要最小限が一番だね。

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

動作を重くしているJavascriptファイルの読み込みを遅くするようサイトに命令しましょう。

どうするか手順を解説していきますね。

1. PageSpeed Insights を実行する

まずは PageSpeed Insights を実行しましょう。

「レンダリングを妨げるリソースの除外」が表示されたら、左側の▲ボタンをクリック。

具体的にどのリソースが読み込みを遅くしているのかが出てきます。

レンダリングを妨げるリソースの除外警告画面

2. Async JavaScript で読込を遅らせる

プラグインを使って読込を遅らせましょう。

おすすめは  “Async JavaScript” 

async javascript plugin

開発元は “Autoptimize” というJavascriptを縮小化するプラグインも作っています。

Javascript問題で頼りになるところですね。

Autoptimizeについてはこちら

3. Async JavaScript の設定

プラグインを有効化したら、次のように設定をしていきましょう。

“Enable Async JavaScript?” にチェック

二つ目のタブ「Settings」の “Enable Async Javascript?”「Async Javascriptを有効にしますか?」にチェック。

Async javascript enable setting

Quick Setting から選択

真ん中の「Quick Setting」で4つの選択肢の中から選びます。

Async と Defer は共に読み込みを遅らせる命令ながら、”aync” はランダムな順序で実行されます。

それぞれの選択肢の意味は次のとおり。

async javascript quick setting

Apply Async Async を適用する
Apply Defer Defer を適用する
Apply Aync jQuery excluded Async を適用する/iQueryは除外する
Apply Defer jQuery excluded Defer を適用する/iQueryは除外する

一番スピードが速くなって、ページが正常に読み込まれるものを選びましょう。

おすすめは左から2番目「Apply Defer」

jQueryファイルの読込を遅らせたい場合に効果アリ。

jQueryに関する注意点

jQueryの読込を遅らせると、サイトの動作に不具合が出る可能性も

jQueryはWordpressにデフォルトで組み込まれているファイルです。

もしおかしくなったら、「Apply Defer jQuery excluded」などの選択肢に変えてください。

なお、jQueryファイルの読込が問題かどうかは、PageSpeed Insights の警告を見れば分かります。

「レンダリングを妨げるリソースの除外」をクリックし、URLをチェックしてください。

レンダリング警告jquery有無チェック

URL に “jquery” と入っていれば、jQueryファイルです。

データ量がそれほどでなければ、ムリに対応しなくても大丈夫でしょう。

Async Javascript Method と jQuery を設定

その下の「Async JavaScript Method」と「jQuery」を設定します。

Quick Setting を設定すればここは自動で設定されるハズ。

ですが、どうもうまくいかないことがありました。

念のため確認しておきましょう。

2.で「Apply Defer」を選んでいたら、次のようにチェックが入っていればOKです。

Async javascript method

4. サイトのチェック

編集が終わったらサイトをチェック。

動作に以上がないか確認します。

その後、いよいよ  PageSpeed Insights でテストしてみてください。

結果が改善していない、あるいはもっと改善したい時は、後半で紹介している対策も行ってみてくださいね。

まとめ

  • Javascriptの読み込みで動作が遅くなっている可能性がある
  • Javascriptファイルの読み込みを遅らせる命令を加えると改善する
  • ヘッダー部分に命令をいれてテストしてみる
  • 命令は3種類あるので、一番効果があるものを選ぶ

イマイチなら、レンダリング対策後編の方法も試してみてください。

じゅんこ
じゅんこ

サイトによってどれが一番効くかはかなり違います。

ひとつの方法がダメでも諦めないでくださいね。

速度アップ対策をまとめた記事に他の対策を紹介しているので、お役立てください。

SEO検索対策
【LaravelでWebアプリ開発します】

「会員制サイトを作ってほしい」「開発の時間がないから頼みたい!」

こんなご要望承り中。オンラインミーティングでも、ご相談承ります。

サンプルやお見積もり目安を見てみる

スポンサーリンク
サイトのスピードが改善しない場合、サーバーが原因の可能性もあります。 わたしは、旧版のさくらからエックスサーバーに切り替えて改善しました。
詳細は、こちらの記事にまとめています。
Twitter始めました。
40代からプログラミング!

コメント

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