昨日に引き続き、今日も"はてなブログの読み込み時間を早くする"ために他にできることをやってみた。
画像(写真)を圧縮すると読み込み速度が早くなることは理解したけど、はてなブログならではの方法で、「はてなフォトライフ」で写真の"画質"の設定をすることによって、次回からはそのままアップするだけでも画像のサイズを小さくすることができるそうだ。
実際に私の一つのブログ記事の全ての写真のサイズを変更したところ、大幅に読み込み速度が改善されたので、その方法と結果を紹介していこう。
重〜い・遅〜いはてなブログの読み込み速度を早く
前回のブログに書いたように、はてなブログの読み込み速度が遅いので、テーマを色々試してみたりしつつ、結局テーマは変更せずにヘッダー部分にあった画像を消したことにより、トップページは大幅に軽くなった。
画像・写真がブログを重くして、読み込みを遅くしている
しかし、このブログは(主に)旅行記だし、それぞれのページには多くの写真が貼ってある。それが表示を遅くしていることは理解していたけど、しかたないとなんとなく諦めていた。
そんな中、昨日 はてなブログのテーマによって読み込み時間が変わるのかどうか調べた際に、参考にさせてもらった"ふーログ"さんの記事を読んで、「画像の圧縮」による読み込み高速化が書かれていた。(大変参考になりました！ありがとうございます！)
なるほど。目から鱗だった。それぞれの写真を圧縮すると軽くなるという考えは正直なかった。
どうして今まで考えもしなかったのか、、。もっとブログを始めた時点で知っていれば良かったのだが、過ぎてしまったことは仕方がない。
はてなフォトライフの設定で画像を圧縮する
さらに色々な意見や情報を読みたかったので、「はてなブログ 画像 圧縮」でググってみたところ、これまた大変参考になる記事がでてきた。(ありがとうございます！)
彼らの素晴らしいブログを見ながら、早速”はてなフォトライフ”の設定を変更してみた。
ブログに使う写真の横幅はいつも595pxに変更してから掲載しているから、画像サイズはそのままでも良いかと思ったが、念のために600ピクセルに設定。
画質は低すぎると見た目がかなり悪くなるかな〜と心配だったが、軽くすることのほうが優先だと思い"70%"にしてみた。
実際に写真のサイズがどのくらい変わったのか
【例１】
１.これが、もともとアップしていた画像。サイズは78KB。
２.はてなフォトライフの画質を70%に設定してから、改めてアップした画像。サイズは半分の39KBに下がった。
３.試しに、事前に既に圧縮をした写真を、更にはてなフォトライフの画質を70%に設定してからアップ。サイズは32KBとあまり変わらなかった。画質はなぜか鮮やかになっている。
事前に圧縮する手間をかけても、そこまでサイズが変わらないならやる必要がないと思い、はてなフォトライフの設定(画質70%)だけをして作業を進めていたが、念のため他の写真でもう一度試してみることにした。
【例２】
１.これが、もともとアップしていた画像。115KBと重い。
２.はてなフォトライフの画質を70%に設定してから、改めてアップした画像。サイズは半分以下の46KBに下がった。
３.事前に既に圧縮をした写真を、更にはてなフォトライフの画質を70%に設定してからアップ。サイズはなんと19KB！！大幅に軽くなっている！！
まじか。こんなに違いがあるとは、、。
既に10枚くらい写真をアップしなおしたけど、やはり事前に圧縮してからアップした方がよさそうだ。。
事前に画像(写真)をオンラインで圧縮
画像を圧縮する方法は色々とありそうだが、検索してでてきたオンラインのサイトで圧縮してみた。JPEGとPNGと選んで圧縮可能。
アップロードすると何%圧縮できたか確認してから、ダウンロードすることができる。
写真によってパーセンテージに違いが出た。
こんな感じで圧縮した画像を、はてなフォトライフの画質を70%に設定してから、改めてアップした画像を使うことに決めた。
圧縮した画像を利用すると、どのくらい読み込みが早くなるのか
では今度は、圧縮(してフォトライフ画質70%に)した画像を、今までの重い画像と置き換えると、実際にどのくらいページの読み込み速度が変わるのか試してみよう。
このブログは旅行記ブログにも関わらず、一番読んでいただいている記事は「オーストラリアのティムタム(Tim Tam)を全種類制覇する」内容だ。大量のティムタムの写真が貼ってある。
今回はこのブログ記事の読み込みを改善してみようと思う。
圧縮していない画像掲載ページの読み込み速度
グーグル先生のPageSpeed Insightsを利用して評価してみると、、、
パソコンは12点！！これは壊滅的。。。こりゃ遅いわけだ。
スマホは、なななんと！！9点！！！一桁はヤバすぎでしょ(泣笑)
チーン、。思った以上に死活問題ですね。
改善する為にも、今までの画像を全て圧縮した写真に置き換えた。今まで使っていた画像ははてなフォトライフからも削除したので、なんだかんだかなり大変で時間がかかった。ふー。
ちなみに画像のアップロードは、はてなブログから直接するとピクセル数が大きくなるので、全て"はてなフォトライフ"から行った。
圧縮した画像に置き換えたページの読み込み速度はどのくらい早くなったのか
おおおおおおおーーーー！
パソコンからは60点！これは頑張った甲斐がある！もともと12点だったのが60点！(てか、もともとが低すぎだけどね、、、)
モバイルは47点！！一桁をガッツリ脱出できた。9点はヤバすぎたよね(笑)
サイドバーに使っている画像も圧縮
全てのページで表示されるサイドバーの画像も圧縮したところ、こちらも大きく改善された。
トップページは63点だったところが71点に！赤色だったロゴが黄色になったー！
モバイルは51点から55点に！
これは、全てのページの画像や写真を圧縮してアップしなおす価値がありそうだね〜。
しかし、、ブログ記事は全部で168個。これは全てを修正するのにかなり時間がかかりそうだ。うーん、、でもほとんどのページで読み込み時間に問題ありだから、頑張って改善してくこととしよう☆
いつも読み込み時間が遅いのに、ブログ読んでくれてありがとうございます(T_T)/
おやすみなさーい！！