このページは移転しました。
はてなブログを使ってる人、ページの表示が遅いなーと思いません？
ブログを書きながら
書く→プレビューを確認→書く→プレビューを確認・・・
を繰り返すんですが、プレビューの表示がもっさりしてるんですよねー。
そして更新が完了したら、パソコンで表示を確認、スマホでも確認。
これもやっぱり表示が遅い。
こういうときはPageSpeed Insights。
ページの表示速度を計測できるGoogleの公式ツールです。
PageSpeed Insightsの使い方
PageSpeed Insightsの使い方は簡単。
ここにアクセスして
「ウェブページのURLを入力」というところにあなたのブログのURLを入力、
「分析」ボタンをクリックするだけ。
計測はページ単位
PageSpeed Insightsは「サイト」単位ではなく「ページ」単位での分析をしてくれます。
「ウェブページのURLを入力」にトップページのURLを入れればトップページの計測をしてくれます。
記事のページのURLを入力すれば、その記事ページの計測をしてくれます。
・ トップページ
・ 画像が多めのページ
・ 画像が少なめのページ
など何パターンかで計測してみるといいでしょう。
評価は100点満点
すると、モバイルとパソコンで表示した時のスコアを100点満点で評価してくれます。
・ 90～100点は「速い」
・ 50～89点は「普通」
・ 49点以下は「遅い」
わたしのサイトはモバイルで25点。
25点といえば、ページの読み込みが遅すぎて1行も読まずにユーザーが離脱するレベルです。
これはかなり深刻。
改善できる項目
さすがは天下のGoogleさん。
PageSpeed Insightsは、ページの表示速度を計測してくれるだけではありません。
どこを改善すれば表示速度が上がるのかアドバイスをしてくれます。
次世代フォーマットでの画像の配信
画像ファイルといえばjpg・png・gifなどのフォーマットが有名です。
JPG： 一番よく使われている
PNG： 背景を透明にできる
GIF： 動く画像
これらとは別に、最近はJPEG2000、JPEG XR、WebPというものが出てきました。
この新しい形式の画像ファイルたちは従来の物より容量が小さいです。
ファイルサイズが小さいということは転送時間がかからない、ページの表示が速くなるということです。
しかし、残念なことに
・ JPEG2000はSafari専用（iPhoneとMac）
・ JPEG XRはIEとEdge専用（Microsoft）
・ WebPはChromeとFirefox専用（Google）
本当は専用という訳ではないんですが、技術的もしくは商業的な理由により、SafariもChromeもFirefoxもライバル企業の開発したファイルフォーマットには対応していません。
おかげでJPEG2000もJPEG XRもWebPも実質的に各社のおかかえブラウザ専用になっています。
うっかりJPEG2000などで画像を作ってしまうと、世の中の半分の人には画像が表示されるけど、残りの半分にはブログの画像がまったく見えていない。
そんな状況があり得ます。
PageSpeed Insightsさんに「次世代フォーマット」の画像を使うようにおすすめされても無視しましょう。
従来のjpgやpngのままで画像ファイルのサイズを小さくするテクニックもあります。
Squooshを使うと従来のJPGやPNGのままファイル容量を劇的に削減できます。
ブロガー必須のツールです。
オフスクリーン画像の遅延読み込み
これはLazyloadといわれるテクニックです。
このブログでは最近導入しました。
このようなLoading画像を表示させておいて、後から本物の画像に置き換えます。
Lazyloadの効果
たとえば、1つの記事に1MBの画像を10枚使っているとします。
すると、10MB分のデータを受信完了するまでページが表示されません。
スマホで10MBを表示しようと思ったら10秒くらい待たされます。
しかし、10秒待ってブログの記事が表示されたとき、実際に最初の画面で必要なのは1つ目の画像だけだったりします。
残りの画像は画面の外、スクロールしてその画像の位置にくるまでは不要なわけです。
それならば、1つ目の画像だけ受信して、残りの9個は無視。
そうすることで最初の画面が表示されるまでの待ち時間を1秒に短縮する。
それがLazyloadの効果です。
無視した9個の画像は、画面をスクロールして画像の位置が近づいて来たタイミングで初めて読み込みます。
まとめ
ページの表示が遅いとユーザーが離脱する原因になります。
まずは、PageSpeed Insightsでスコアを計測。
スコアが90に届かない人は以下の対策をしてみましょう。
・ 画像を圧縮
・ Lazyloadの導入
この2つをやっておけば、ある程度はスコアが改善します。
画像の圧縮にはGoogleがリリースしたSquooshというサービスがおすすめです。
お知らせ
最後までお読みいただきありがとうございます。
この記事は参考になりましたか？
役に立ったという方はブックマークをお願いします。
読者登録は以下のボタンから
Twitterでこの記事を書いた人をフォローする場合はこちら
Follow @toeicmantenblog
この記事をツイートする場合はこちらからお願いします。
Tweet
ブログ村ランキングにも参加中。
おすすめのシリーズ記事
ブロガーさんには以下のシリーズ記事もおすすめです。
