\ 夏のPayPay祭グランドフィナーレ攻略法! /

【サイトスピード改善】「レンダリングを妨げるリソースの除外」の簡単な対処方法

【サイトスピード改善】「レンダリングを妨げるリソースの除外」の簡単な対処方法
ぶち
ぶち

ご覧いただきありがとうございます。

ブログを運営していく上で欠かせない、サイトスピードの改善に悩んでいませんか?「読み込みスピードが遅い」という理由で記事を読んでもらえなくなるのは残念ですよね。

私自身も改善に四苦八苦しましたが、模索した結果、いくつかの方法を組み合わせてようやくPageSpeed Insightsの赤色を脱出することができました

本記事では、そんな私が実践したことの1つ、「レンダリングを妨げるリソースの除外」の対処法について解説していきます。

こんな人にオススメ

✔️サイトスピードが上がらなくて困っている人
✔️PageSpeed Insightsの「レンダリングを妨げるリソースの除外」という項目を改善したい人

ぶち
ぶち

プラグインを導入することで改善が期待できます♩初心者の方でも対処できるので、一緒に頑張りましょう!

スポンサーリンク

「レンダリングを妨げるリソースの除外」とは?

「PageSpeed Insights」というツールを用いることで、自分のサイトのサイトスピードと改善できる項目を知ることができます。

PageSpeed Insights 改善できる項目

まだ使ったことがない方は、こちらの記事で使い方を紹介しています。

この項目の中にある「レンダリングを妨げるリソースの除外」を解決していきます。

レンダリングを妨げるリソースの除外って何
サイトを開いたとき、真っ先に不要なコードの読み込みが始まると、スクロールせずに表示できる部分のダウンロードが遅くなってしまうから改善してね、という指摘です。要因としては、JavaScript や CSSが考えられます。

まずはスクロールせずに表示される場所の読み込みから始めて、見えない部分は後回しにしてもらうように設定できれば解決に繋がります。

なるほど。でも、その設定難しそう…。

ぶち
ぶち

プラグインを使えば、簡単に設定することができます!

【Autoptimize】の導入・使い方

【Autoptimize】というプラグインは、CSS、JS、画像、Google フォントなどを最適化することでサイトの応答を高速化してくれるプラグインです。私はこちらを導入することで、改善に繋がりました。

ぶち
ぶち

導入方法・使い方を解説します!まずは必ずバックアップをとってから導入しましょう!

  • 手順①
    ワードプレスでプラグインをインストール

    「プラグイン」→「新規追加」→検索窓にAutoptimizeと入力→「今すぐインストール」をクリック

    Autoptimize 導入方法
  • 手順②
    有効化

    「有効化」をクリック

    Autoptimize 導入方法
  • 手順③
    設定画面へ

    「設定」→「Autoptimize」をクリック

    Autoptimize 導入方法
  • 手順④
    「最適化」の項目にチェックを入れていく

    「JavaScriptコードの最適化」に✔️

    Autoptimize 導入方法

    「CSSコードを最適化」に✔️

    Autoptimize 導入方法

    「HTMLコードを最適化」に✔️

    Autoptimize 導入方法
    ぶち
    ぶち

    その他の項目は触っていません。

  • 手順⑤
    保存

    「変更の保存とキャッシュの削除」をクリック

    Autoptimize 導入方法
  • 手順⑥
    完了!

    自分のサイトのレイアウトなどが崩れていないかチェックしてください。もし崩れているようなら、最適化したチェックを外しながら様子をみてください。

ぶち
ぶち

お疲れさまでした!

まとめ

以上、「レンダリングを妨げるリソースの除外」の対処法をご紹介しました。

難しいコードをいじることなく、プラグインを使って簡単な設定をすることでサイトスピードの改善が見られました。

PageSpeed Insights 導入前の結果
導入前
PageSpeed Insights 導入後の結果
導入後
ぶち
ぶち

赤色を脱出!

このプラグインだけではなく、いくつかの方法を組み合わせてここまでサイトスピードを改善することに成功しました。もし「このプラグインだけではまだ足りない!」という方がいらっしゃいましたら、よろしければこちらの記事を参考にしてみてください。

このブログは、サーバーはConoHa WING、テーマはCocoonを使用しています。

ぶち
ぶち

最後までご覧いただき、ありがとうございました!

↓ブログ村に登録しています。ポチッと押して応援していただけると嬉しいです♪

にほんブログ村
スポンサーリンク
スポンサーリンク
副業
よければフォローお願いします
ゆる主婦のラクする暮らし

コメント

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