MENU

うわっ…私のブログ表示速度、遅すぎ…? 【画像を最適化してみた】

 

 

こんにちは、コトリス(@Kotori_fresh)です。

カスタマイズを試しながら、少しずつ理想のブログに仕上げていっています。

 

グローバルメニューを設置 

f:id:Kotori_fresh:20180427222015j:plain

 

グローバルメニューとは、タイトル下にある各コンテンツへの案内リンクのこと。

設置の仕方ははてなブログ Perfect GuideBookにも載っていたので、最初は本を参考に作っていたんですが、スマホで見たときにおかしな表示になっていました……。

私は検索するのもブログを読むのも、PC上がほとんど。

Googleアナリティクスでよく使われているデバイスを調べてみると、半分以上の方がスマホでアクセスしてくれています。

スマホユーザーにも使いやすいグローバルメニューを、と探していたところ「グローバルナビをレスポンシブ対応させ、ブラウザ幅が縮んだらトグルメニューになるようなカスタマイズ」をコピペのみで出来る記事を見つけました。

 

www.yukihy.com

時間はかかりましたが、私でも設置できましたよ。はてなブログProでない方でもカスタマイズできるので試してみてください。

 

 

ブログの問題点を発見

記事作成とともに、「できる逆引き Googleアナリティクス」という本でサイト分析や改善のヒントを勉強している最中です。

私のブログで致命的な問題点がありました。
それがページ読み込み時間の遅さ。

 

Googleアナリティクスでサイトの平均読み込み時間を確認してみたら、
「キングオブキングス」の記事が表示されるのに、およそ22秒もかかっていました!
ページスピードスコアは25……。(100が満点)

 

Googleアナリティクスに登録してない方は PageSpeed Insights で確認できますよ。

修正方法の提案をいくつもしてくれますが、現時点で私が理解できたのは画像を最適化することくらい。

 

画像を最適化して貼り直し

「画像を最適化する」というのは、ブログ内の画像を圧縮して表示速度を上げること。

私のブログは「喫茶店の喫茶展」でもあるので、良かれと思って解像度の高い画像をあえてupしていましたが、見る環境によっては読み込み時間が長くなってしまうんですね……。

写真はPhotoshopでサイズを小さくしていたんですが、一度に画像を適切なサイズに圧縮してくれるツールはないものかと探したらうってつけなのがありました!

optimizilla.com

ドラッグ&ドロップするだけで、画質を保ったままJPEGやPNGイメージを最小サイズに圧縮するありがたいツールです。

 

f:id:Kotori_fresh:20180427211808p:plain

早速キングオブキングスの画像で試してみると、なんと8割近い圧縮に成功しました!!
元はどれだけ重い画像を載せていたんだろうと反省。

1日かけて今までupした画像の全てを圧縮し、ブログに貼り直しました。

 

「画像の最適化」をしたあと、再びGoogleアナリティクスを確認したら、読み込み時間は変わってないもののページスピードスコアは64になっていました!!

数日前の読み込み時間なので、数日後に確認したら早くなっているはず。(多分)

ブログに写真を多く載せている方は、一度読み込み時間を確認してみてくださいませ。