こんにちは、あおです！
今回は、みなさんは「Google PageSpeed Insights」というツールをご存じでしょうか？
こちらは、作成した記事の表示速度を測定し、改善示唆をしてくれるツールです。
私も先日、このツールを知り活用してみたところ改善余地がまだまだたくさんあったため
実際に対応した内容について、説明していきたいと思います。
結論
結論から言いますと、私の場合「レンダリングを妨げるリソースの除外」という改善余地があったため、その対応をするためにプラグイン「Autoptimize」をインストールしました。
それにより速度が59→75と大幅に改善されました！
測定結果と改善内容
「google PageSpeed Insights」を活用して、自身で作成した記事の表示速度を図ってみました。
表示速度はSEO対策として重要な内容になりますので、皆さんもぜひ試してみてください！
私の測定結果は「59」でした。。。。
測定結果の目安としては、「60未満」の場合は今すぐ改善は必要と思って下さい！
私の場合は60未満だったので、すぐに原因と対策の調査に入りました。
原因
「google PageSpeed Insights」はありがたいことに、記事を表示するまでのプロセスでどこに時間がかかっているのかを教えてくれます。私の場合は「レンダリングを妨げるリソースの除外」が原因でした。
しかし、「レンダリングを妨げるリソースの除外」が原因と言われても、正直よくわからないですよね。。。
そこで、「レンダリングを妨げるリソースの除外」について解説していきたいと思います。
レンダリングを妨げるリソースの除外とは？
レンダリングを妨げるリソースの除外というのは、「Webサイトの描画を妨げるCSSファイルやJavaScriptファイルを除外して下さい」という意味です。
CSSファイルやJavaScriptファイルって何やねんって感じになるかもしれませんが、
もう少しかみ砕いて説明しますと、「Webサイトを表示する際に、一番最初に表示される画面に必要なものだけを先に読み込ませて、それ以外(Webサイトの下にスクロールしたら表示されてくる画像等）は、あとでデータの読み込みをするようにプログラムを修正してね」という意味合いと思っていただければと思います。
上記の内容から対策は、プログラムの修正になるというのをご理解いただいたと思います。
対策
プログラムの修正は、プラグインを活用して実施することを推奨します。
具体的な対策については、以下の通りです。
①プラグイン「Autopmisize」をインストール＆有効化
②プラグイン「Autopmisize」の設定変更
設定変更については、JavaScript/CSS/HTMLの各設定箇所に「コードの最適化」という項目が
ありますのでそちらに✓を入れていただき、保存をするだけです。
まとめ
今回の「レンダリングを妨げるリソースの除外」に関する原因と対策については以上です。
私はこの方法で表示速度が「59」→「75」に改善されましたので、やる価値ありだと思っています!
コメント