SEO対策｜レンダリングを妨げるリソースの除外の簡単なプラグイン解決方法でサイトスピードアップ

こんにちはおとちゃんです！
今回の内容は「PageSpeed Insights」でサイトの表示速度を計測したときに表示される「レンダリングを妨げるリソースの除外」の解決策についてです。

下記のサイトからサイトの表示速度を計測します。使ったことがない人はまずは計測してみましょう。

計測したいURLを入れるだけで、サイトの表示速度が採点されます。スマホとパソコンで点数が表示され、改善した方が良い内容などをチェック・提案してくれます。

今回はその中の1つの改善項目「レンダリングを妨げるリソースの除外」について

この記事で紹介していること

私はプラグイン「Autoptimize」を使って解決しました。

設定方法だけ知りたい方は目次からジャンプしてください。

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

そもそもどういう意味？今後の為にも意味を知っておきましょう。すごく簡単に説明します。

描写するという意味。コードやプログラムなどの情報を人が見やすいように表現・表示させること。

資源という意味。ある操作の実行に必要なシステムや要素などのこと。

ポイント

サイトのページには様々なコードが記入されており、ブラウザはそれを上から順番に読み込んでページが開きます。

簡単にまとめて説明すると

「サイトで表示させたいもの（レンダリング）があるんだけど、開く際のコード（リソース）の読み込みの順番がうまく出来てなくてページ開くのが遅くなってるよ。」

という意味です。

サイトによって原因は違うと思いますが、可能性がある内容をまとめておきました。

今回の原因一覧

今回は全部一気に完全する方法をプラグイン「Autoptimize」を使って改善していきます。

事前にバックアップを取ってから自己責任でお願いします。

step.1 まずはプラグインの検索

step.2 「Autoptimize」で検索してインストール

step.3 インストール後に「有効化」します

step.4 設定画面へ

step.5 【JS、CSS＆HTML】から必要項目にチェック

まずは【JavaScriptコードの最適化】にチェックして下へ

【CSSコードを最適化】にチェックして下へ

ついでに【HTMLコードを最適化】にチェックして下へ（今回はやらなくてもOK）

【変更の保存とキャッシュの削除】

step.6 【追加】から【Googleフォント】の設定へ

【Googleフォントの削除】or【結合とヘッダーでのリンク～】にチェックして下へ

step.7 【変更を保存】

※一度サイトの表示を確認しておかしい場合は元に戻しましょう。

その後再度サイトスピードをチェックして改善しているかチェックしてみましょう！

SEO対策にもつながるサイトの表示させる速さチェック。

サイトの更新でまた変動することもあるので定期的にチェックしておきましょう！