先日、ブログデザインを大幅に変更したのですが、そのせいなのか読み込み速度が遅くなった気がしたので改善を試みました。
読み込みが遅い原因を調べるのも、原因を改善するのも思いの外簡単だったので、
少しでも表示速度に不満を持っているのなら挑戦してほしいなぁと思います。
『PageSpeed Insights』で原因を探ろう
読み込み速度が遅い原因を探るために『PageSpeed Insights』を利用します。
ソフトをインストールしたりする必要はなく、登録とかもなくフリーで使えるサイトです。
まずは分析してみましょう
「ウェブページのURLを入力」にURLを打って分析ボタンを押します。
すると下の画像のような画面が出てきます。
『24』と書かれた部分がパフォーマンススコアで、分析したURLの速度を表していて…
0 - 49 : 遅い
50 - 89 : 普通
90 - 100 : 速い
数字が大きくなるほど速いということですね。
※これはあくまで改善できる余地に合わせて数値が表示されるため、実際の速度を表している訳ではないようです。なので100のブログが最速かというと、そういう訳ではないらしい…
詳しくはスキルシェアさんのブログをご確認ください↓↓
ウェブサイト高速化、9割が間違っている？PageSpeedスコアは「速度」じゃないよ - みんなの話題
何度か分析ボタンを押すと『24から29』の間を行き来したので、
若干の誤差があるようです。
『24』という結果から、この記事を書いてる時点でこのブログは改善の余地だらけということが分かりました。
※URLを入力したボックスの左下のボタンで「モバイル」と「パソコン」を切り替えることができます。この記事に貼ってある画像は全てモバイルの状態で分析したものです。
【改善できる項目】では遅い原因が確認できる
先ほど分析をしましたが、そのままページをスクロールすると様々なデータを見ることができます。
そして【改善できる項目】では遅い原因を突き止めることが可能なんです。
赤文字で表示されている項目が特に遅いとされる部分。
「パフォーマンススコアには直接影響しません」と書いてありますが、これらの項目を改善していけば読み込み速度自体は速くなります。
「短縮できる時間（推定）」の部分に下向きの矢印のようなボタンがありますが、これをクリックする事で詳細を開くことができます。
私のブログが遅い一番の原因はサイドバーのプロフィール画像でした。びっくりして大笑いです。自己顕示欲強すぎます。
ダントツで表示速度を遅くしているっぽいので、とりあえず画像を差し替える事にしました。
画像の圧縮に便利な『TinyJPG』
ブラウザ上だけで完結する画像圧縮サイト『TinyJPG』を使うと、簡単に画像の容量を減らすことができます。
どんな画像も安定して圧縮できると定評のあるサイトです。
TinyJPGは以前はJPGEにしか対応していなかったようですが、今ではPNGにも対応しています。
圧縮画像をドラッグ&ドロップするだけでOK
パンダの右隣「Drop your .PNG or .JPG files here!」に圧縮したい画像をドロップするか、クリックで画像を選択するとすぐさま圧縮が始まります。
パンダが両手を上げて喜んだら（と思ったけどよく見ると表情ほぼ一緒だった）圧縮完了。
もともと2.2MBだった画像が186.6KBに……なんと92%も圧縮できました！
「download」ボタンをクリックする事で圧縮後の画像がダウンロードできます。
あとはダウンロードした圧縮後の画像をはてなブログにアップして画像を入れ替えれば完了です。
こんなに変化がありました
プロフィール画像を一枚作り直しただけなのに、パフォーマンススコアが『31』まで増えました。
何度か分析してみましたが最高値は『37』でした。
続いて『改善できる項目』ページを確認してみました。
画像差し替え前に比べて大幅に改善できていますね。
特に「オフスクリーン画像の遅延読み込み」は先ほどまで赤だったのが、オレンジ色に変わりました！
私のブログをモバイルでアクセスすると、記事やトップページの下にプロフィール画像が配置されているので画面を下にスライドしない限りプロフィール画像は見えないのですが、その見えない画像の読み込みに時間がかかっていたようです。
なので圧縮画像に差し替えたことで、一気に改善できたようですね。
実際ブログにアクセスしてみると、表示されるまでの時間が早くなったことを実感できました。
終わりに
もともと無駄にデカイ画像を使ってしまっていたとからこそ、たったこれだけの作業で速度アップができたのでしょう。
なので、人によっては画像圧縮だけだと効果が薄いかもしれません。
ともあれ表示速度はSEOにも影響を与えることがあるようなので、無理のない範囲で改善しておきたいですね。