noteもやってます。

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

ページ速度を計測。PageSpeed Insightsの使い方SEO
ページ速度を計測。PageSpeed Insightsの使い方
この記事は約6分で読めます。

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

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

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

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

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行も読まずにユーザーが離脱するレベルです。
これはかなり深刻。
(※サイト移転前のはてなブログ時代の話です。現在はWordpressに移転して速度問題は改善しました)

改善できる項目

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

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

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

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

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

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

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

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

しかし、残念なことに次世代フォーマットの画像ファイルには互換性の問題があります。

  • JPEG2000はSafari専用(iPhoneMac
  • JPEG XRはIEとEdge専用(Microsoft
  • WebPはChromeとFirefox専用(Google

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

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

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

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

ブログ高速化に必須。Squooshで画像を圧縮する方法
Webサイトが遅いのはだいたいが画像のせい。 ブロガーなら画像の圧縮は必須のスキルと言っても過言ではありません。 画像のサイズを小さくするツールは数多くありますが、 Googleが運営しているSquooshというサイトが超絶優秀な...

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

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

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

これはLazyloadといわれるテクニックです。

読み込み中のLoading画像

読み込み中のLoading画像

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

Lazyloadの効果

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

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

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

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

まとめ

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

  • 画像を圧縮
  • Lazyloadの導入

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

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

ブログ高速化に必須。Squooshで画像を圧縮する方法
Webサイトが遅いのはだいたいが画像のせい。 ブロガーなら画像の圧縮は必須のスキルと言っても過言ではありません。 画像のサイズを小さくするツールは数多くありますが、 Googleが運営しているSquooshというサイトが超絶優秀な...

コメント

タイトルとURLをコピーしました