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

seo

こんにちはおとちゃんです!SEO対策のサイトのスピードチェック!

PageSpeed Insights

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

サイトスピード1

 

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

 

サイトスピード2 サイトスピード3

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

  • レンダリングを妨げるリソースの除外の意味
  • Autoptimizeを使用した改善方法

 

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

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

 

 

 

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

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

  • レンダリング

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

  • リソース

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

 

ポイント

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

 

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

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

 

という意味です。

 

原因

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

今回の原因一覧

  • CSS
  • JavaScript
  • Googleフォント

 

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

 

改善手順

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

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

Autoptimize3

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

Autoptimize4

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

Autoptimize5

step
4
設定画面へ

Autoptimize6

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

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

Autoptimize7

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

Autoptimize8

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

Autoptimize9

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

Autoptimize10

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

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

Autoptimize11

step
7
【変更を保存】

Autoptimize12

 

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

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

 

 

レンダリングを妨げるリソースの除外の改善方法まとめ

  • Css・JavaScript・Googleフォントの改善する
  • Autoptimizeで簡単解決

 

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

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

 

© 2021 おとちゃんぶろぐ Powered by AFFINGER5