名前が決められない!!

Pocket of time

スキマ時間を埋めたいブログ

はてなフォトライフを使って画像を最適化する方法が超簡単だった

f:id:height175:20180419195550p:plain

はてなブログを使っている皆さん!

画像の最適化はやっていますか?


僕は今までそんなに画像サイズについて気にしていなかったのですが、最近このブログで一番アクセス数のある記事の表示速度が遅くなってしまったので、画像の最適化を行うことにしました。


ページの表示速度は、検索順位にも関わって来るので結構重要な問題です。


ページの表示速度を調べる

ページの表示速度は、PageSpeedスコアというもので測る事が出来ます。

PageSpeedスコアはGoogleアナリティクスの「行動」→「サイトの速度」→「速度についての提案」で確認する事が出来ます。

f:id:height175:20180419201831p:plain

一番右のPageSpeedスコアという数値がそれです。

この数値が高ければページの表示速度が速く、低ければ遅いということになります。(満点は100です)


最初に言った僕の記事はこのPageSpeedスコアが35という低い数値になっていました。


ページの表示速度を改善する方法

f:id:height175:20180419205029p:plain
PageSpeedの提案という所をクリックすると、そのページに有効な改善方法を分析してくれます。


f:id:height175:20180419205232p:plain
この中で一番簡単そうな画像の最適化をやろうと思って調べたんですが、画像を圧縮するのも地味に難しそうでした。笑


ですが、はてなフォトライフに画像をあげるときに圧縮しておくという方法がすごく簡単だったので、紹介します。


はてなフォトライフで画像を最適化する

www.mochi-mochi-kun.com

この記事を参考にして、はてなフォトライフの設定で画質を80%にしてから画像をアップロードすることでかなりPageSpeedスコアが改善されました。


f:id:height175:20180419213827p:plain

上記で紹介した記事でも言われていますが、画質を80%にしてもウェブからの見た目はほとんど変わりませんでした


この方法を使えば、難しい画像編集ソフトなどを使わずに簡単に画像を最適化することが出来ます。


PageSpeedスコアは上がったのか

はてなフォトライフで画像最適化する前はPageSpeedスコアは35でしたが、最適化した後は71まであげる事が出来ました。

モバイルとパソコン別で見ると、

  • モバイルは90
  • パソコンは70

まで上げることが出来ました。


パソコンのスコアはまだ上がる余地がありそうですが、アクセスの半分以上はモバイルからのアクセスなので、とりあえずはこのまま行きたいと思います。


注意点

はてなフォトライフを使って最適化する時は、今までのページの画像は全てアップロードし直しさなければいけません。


そこで注意して欲しいのが、記事の編集画面から画像をアップロードするのではなく、はてなフォトライフからアップロードしなければならないということです。


なぜかというと、はてなフォトライフの方からアップロードしなければさっきの画質80%という設定が反映されないからです。


f:id:height175:20180419212145p:plain
赤枠のところにドラッグしてアップロードするのではなくて、


f:id:height175:20180419212149p:plain
はてなフォトライフのこの画面からアップロードしてください。


これさえ注意すれば簡単に画像を最適化することが出来るので是非参考にして下さい。



他のオススメ記事はこちら!
height175.hatenablog.com
height175.hatenablog.com