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

ユーザビリティ向上のためにも、今回紹介する「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 リソースをダウンロードできます。」をクリックすると、最適化された素材を一括でダウンロードでき、効率的にホームページの表示速度を改善できます。