普段、ホームページの表示速度はチェックしていますか?表示速度が遅いと、ユーザー離脱率が上がり、最終的にはコンバージョン率の低下を招きます。

ユーザビリティ向上のためにも、今回紹介する「PageSpeed Insights」を活用して表示速度を上げ、より良いホームページを作成しましょう。

PageSpeed Insightsとは

01_top.png
https://developers.google.com/speed/pagespeed/insights/

PageSpeed Insightsとは、ホームページの表示速度を評価してくれるツールです。表示速度を調べたいホームページURLを入力するだけで、表示速度の評価だけでなく、より速度が上がる修正箇所の指摘をしてくれるので、それに従って修正することで表示速度を上げることができます。

PageSpeed Insightsの主な機能は以下の通りです

・ホームページの表示速度を調査できる
・スマホ版/パソコン版でそれぞれ調査可能
・速度向上のための修正点を提案してくれる
・最適化された素材が一括でダウンロードできる
・Chrome拡張機能がある

PageSpeed Insightsの使い方

分析方法

02_use.png
PageSpeed Insightsにアクセスし、表示速度を調べたいホームページURLを入力し、「分析」をクリックすると分析が開始されます。

参考:
PageSpeed Insights

提案の概要の見方

PageSpeed_Insights01.jpg
モバイル版とパソコン版の分析結果が表示されます。

PageSpeed_Insights02.jpg
それぞれ、FCPとDCLという項目で数値化されます。FCPとDCLは以下のような違いがあります。

First Contentful Paint(FCP)は、ユーザーページの視覚的レスポンスが表示されるまでの時間を測定したものです。この時間が短くなると、ユーザーエンゲージメントが維持される傾向が強くなります。DOM Content Loaded(DCL)は、HTML ドキュメントが読み込まれて解析されるまでの時間を測定したものです。この時間が短くなることと直帰率の低下との間には相関関係があります。
引用元:よくある質問 | PageSpeed Insights

PageSpeed_Insights03.jpg
クロールしていくと、何を直すことで表示速度の改善が可能なのかを教えてくれます。

修正方法

PageSpeed_Insights04.png
「画像を最適化する」という修正提案の詳細を知りたい場合、「修正方法を表示」という部分をクリックします。

PageSpeed_Insights05.png
修正方法の説明ページが表示されますので、こちらに沿って修正をします。

最適化された素材のダウンロード

PageSpeed_Insights06.png
また「このページ向けに最適化された画像、JavaScriptCSS リソースをダウンロードできます。」をクリックすると、最適化された素材を一括でダウンロードでき、効率的にホームページの表示速度を改善できます。

拡張機能(アドオン)について

09_addon.png
PageSpeed Insightsには拡張機能(アドオン)があります。ダウンロードページへアクセスし、「CHROMEに追加」をクリックします。

参考:
PageSpeed Insights Extension

normal_2.png
「拡張機能を追加」をクリックします。

11_addon.jpg
表示速度を調べたいホームページを開き、拡張機能のアイコンから「See more」をクリックすると表示速度の分析が開始されます。

まとめ:表示速度の分析と修正を効率化しよう!

ホームページの表示速度は、ユーザビリティを上げるために重要な指標の一つです。また、2018年7月にはスマホページの表示速度を検索順位のランキングに用いるアルゴリズムが実装されます。

PageSpeed Insightsを使えば、即時に表示速度の分析、修正が必要な箇所の発見ができ、最適化された素材も一括でダウンロードできます。細かい修正作業はできるだけ効率化することが重要です。