はるの趣味日記

野鳥撮影系大学生の雑記ブログ

画像の圧縮してますか?頭を使わずに単純作業でブログの表示スピードを改善しよう!

f:id:haru_hobby:20170701174242j:plain

 どうも。はてなブログ歴がそろそろ半年を超えそうなはる(@haru_hobbyhobby)です。最近までブログに載せる画像を圧縮とかせずにそのままコピーアンドペーストで乗っけてたんですけど、皆さんは圧縮作業ちゃんとやってますか?

 

前々からブログのコツとか見ると画像が重いと表示速度が下がるからやった方がいいよって意見はたくさん見てきたんですけどいざやってみるとめんどくさいんですよね。

 

でもめんどくさくてもやった方が良いですよ。ブログの記事数が増えてからやり直すと僕みたいに1日パソコンに向かってひたすらカチカチやる作業をする羽目になるので。

画像圧縮しなおそうと思った理由

ブログやるなら絶対に入れた方が良いと言われているgoogle analyticsってツールがあるんですけど、このツールってアクセスの解析だけでなくブログの表示スピードも見ることができるんですよね。

 

で、ブログの表示スピードが遅いと途中で離脱するユーザーが増えたり、そもそもgoogleが検索エンジンでの表示の優先基準にも使うって言ってるので気にしないといけないポイントなんです。

 

実は僕最近まで表示スピードを見れることを知らなくてその時に調べてみたんですけど驚きでした。ページの表示スピードが100点満点中平均で8点。大学のテストでこんな点数取ろうものなら落単どころか留年が見えてくるレベルのダメっぷりです。

 

これはマズいと思ったので今までぶち込んできた画像を圧縮しなおそうと思ったわけです。ちなみにきっかけはパパむすさんのこの記事

www.kailua020.com

圧縮に使ったツール

圧縮専用というフリーのツールがお勧めです。この圧縮専用は画像をまとめて選択してドラッグすればresizedというフォルダを作って全てそこにぶち込んでくれます。

 

素晴らしい。1枚1枚圧縮していたんじゃ1日では作業が終わりませんからね。これのおかげで一気に作業が簡単になりました。

 

ちなみに画像の圧縮後のサイズの指定もちゃんとできるので安心してください。

画像圧縮の結果

今まで8点とか表示されていた速度がなんと平均40点くらいまで改善しました。まあ、画像の圧縮による効果だけでなくてmillardも追加で消してあるので圧縮の効果だけとは言い切れませんけどね。でもこれだけで5倍ですよ5倍!millardを消すのなんて簡単ですし実質作業は画像の圧縮だけです。

 

これ以上の速度改善も望みたいところですがjavascriptやcssの速度改善やらいろいろプログラミングの知識が必要になりそうでやめました。ここでcssやらjavascriptができるようになっても旨みは少ないですからね。

 

将来使う予定も無いですし、そうなると趣味使うぐらいしか無い。ならその勉強時間で記事書くか写真でも撮ってた方がよっぽどましです。

 

そういうわけで単純作業の結果だけで5倍の改善です。ちなみにこれモバイルとパソコン合わせたうえでの評価みたいで単独で見るとパソコン40点、モバイル60点でした。

 

なんでページ全体の評価がパソコン側に引っ張られているのかはわかりませんが、モバイルだけで見れば7倍以上の点数になっています。すごくないですか?

 

 パパむすさんの記事内でちょこっと書かれていますが、はてなブログの初期の表示スピードがだいたい60点くらいらしいです。はてなブログって結構表示スピード早い方らしいですし60点は及第点どころかかなり優秀な点だということがわかりますね。

 

というわけでデザインをかなりカスタマイズしている状態で40~60点出ていれば御の字なんじゃないですかね?少なくとも僕はこの点数に満足していますw

 

みなさんも無心になって画像圧縮をしましょう。きっとブログのアクセスに繋がると思いますよ。そしてブログ始めたばかりの人たちはめんどくさがらずにちゃんと圧縮しましょうね。後々苦労することになるので...。