にゃん分間待ってやる

「文章の書き方」や「アクセスアップ」などブログ運営のテクニックを解説。

ページ速度を計測。PageSpeed Insightsの使い方

このページは移転しました。


はてなブログを使ってる人、ページの表示が遅いなーと思いません?

ブログを書きながら
書く→プレビューを確認→書く→プレビューを確認・・・
を繰り返すんですが、プレビューの表示がもっさりしてるんですよねー。

そして更新が完了したら、パソコンで表示を確認、スマホでも確認。
これもやっぱり表示が遅い。

こういうときはPageSpeed Insights。
ページの表示速度を計測できるGoogleの公式ツールです。

このエントリーをはてなブックマークに追加 ブログランキング・にほんブログ村へ

PageSpeed Insightsの使い方

PageSpeed Insightsの使い方は簡単。

PageSpeed Insights

ここにアクセスして
ウェブページのURLを入力」というところにあなたのブログのURLを入力、
「分析」ボタンをクリックするだけ。

PageSpeed Insights
PageSpeed Insights

計測はページ単位

PageSpeed Insightsは「サイト」単位ではなく「ページ」単位での分析をしてくれます。
ウェブページのURLを入力」にトップページのURLを入れればトップページの計測をしてくれます。
記事のページのURLを入力すれば、その記事ページの計測をしてくれます。

・ トップページ
・ 画像が多めのページ
・ 画像が少なめのページ
など何パターンかで計測してみるといいでしょう。

評価は100点満点

すると、モバイルとパソコンで表示した時のスコアを100点満点で評価してくれます。

PageSpeed Insights 計測結果 モバイル
PageSpeed Insights 計測結果 モバイル
PageSpeed Insights 計測結果 パソコン
PageSpeed Insights 計測結果 パソコン

・ 90~100点は「速い」
・ 50~89点は「普通」
・ 49点以下は「遅い」

わたしのサイトはモバイルで25点
25点といえば、ページの読み込みが遅すぎて1行も読まずにユーザーが離脱するレベルです。
これはかなり深刻。

改善できる項目

さすがは天下のGoogleさん。
PageSpeed Insightsは、ページの表示速度を計測してくれるだけではありません。

どこを改善すれば表示速度が上がるのかアドバイスをしてくれます。

次世代フォーマットでの画像の配信

PageSpeed Insights 改善できる項目 次世代フォーマットでの画像の配信
PageSpeed Insights 改善できる項目 次世代フォーマットでの画像の配信

画像ファイルといえばjpg・png・gifなどのフォーマットが有名です。

JPG: 一番よく使われている
PNG: 背景を透明にできる
GIF: 動く画像

これらとは別に、最近はJPEG2000JPEG XR、WebPというものが出てきました。
この新しい形式の画像ファイルたちは従来の物より容量が小さいです。
ファイルサイズが小さいということは転送時間がかからない、ページの表示が速くなるということです。

しかし、残念なことに
・ JPEG2000Safari専用(iPhoneMac
・ JPEG XRIEとEdge専用(Microsoft
・ WebPChromeFirefox専用(Google

本当は専用という訳ではないんですが、技術的もしくは商業的な理由により、SafariChromeFirefoxもライバル企業の開発したファイルフォーマットには対応していません。
おかげでJPEG2000JPEG XRもWebPも実質的に各社のおかかえブラウザ専用になっています。

うっかりJPEG2000などで画像を作ってしまうと、世の中の半分の人には画像が表示されるけど、残りの半分にはブログの画像がまったく見えていない。
そんな状況があり得ます。

PageSpeed Insightsさんに「次世代フォーマット」の画像を使うようにおすすめされても無視しましょう。

従来のjpgやpngのままで画像ファイルのサイズを小さくするテクニックもあります。
Squooshを使うと従来のJPGやPNGのままファイル容量を劇的に削減できます。
ブロガー必須のツールです。

u-ff.com

オフスクリーン画像の遅延読み込み

PageSpeed Insights 改善できる項目 オフスクリーン画像の遅延読み込み
PageSpeed Insights 改善できる項目 オフスクリーン画像の遅延読み込み

これはLazyloadといわれるテクニックです。
このブログでは最近導入しました。

このようなLoading画像を表示させておいて、後から本物の画像に置き換えます。

Lazyloadの効果

たとえば、1つの記事に1MBの画像を10枚使っているとします。
すると、10MB分のデータを受信完了するまでページが表示されません。

スマホで10MBを表示しようと思ったら10秒くらい待たされます。
しかし、10秒待ってブログの記事が表示されたとき、実際に最初の画面で必要なのは1つ目の画像だけだったりします。
残りの画像は画面の外、スクロールしてその画像の位置にくるまでは不要なわけです。

それならば、1つ目の画像だけ受信して、残りの9個は無視。
そうすることで最初の画面が表示されるまでの待ち時間を1秒に短縮する。
それがLazyloadの効果です。

無視した9個の画像は、画面をスクロールして画像の位置が近づいて来たタイミングで初めて読み込みます。

まとめ

ページの表示が遅いとユーザーが離脱する原因になります。
まずは、PageSpeed Insightsでスコアを計測。
スコアが90に届かない人は以下の対策をしてみましょう。

・ 画像を圧縮
・ Lazyloadの導入

この2つをやっておけば、ある程度はスコアが改善します。

画像の圧縮にはGoogleがリリースしたSquooshというサービスがおすすめです。

u-ff.com

お知らせ

最後までお読みいただきありがとうございます。

この記事は参考になりましたか?
役に立ったという方はブックマークをお願いします。
このエントリーをはてなブックマークに追加

読者登録は以下のボタンから

Twitterでこの記事を書いた人をフォローする場合はこちら

この記事をツイートする場合はこちらからお願いします。

ブログ村ランキングにも参加中。
にほんブログ村 にほんブログ村へ

おすすめのシリーズ記事

ブロガーさんには以下のシリーズ記事もおすすめです。

u-ff.com