テケオは眠くても頑張るぞ!

便利なサービスや製品紹介、スマホゲームや動画視聴のレビュー、ブログのカスタマイズ方法などを書く雑記ブログ

【はてなブログ】PNG画像の圧縮でページの読み込みが早くならない件

f:id:tektekeo:20170908004853j:plain

SEO対策の一つとして「ページの読み込みの早さ」は大事な項目です。

最近、はてなブログのエントリーで「GoogleのPageSpeed Insightsで早さが測れます!」という記事をたくさん見て、やっぱり気にするべきと思い直しました。

ブログ続けるかわからないし、とりあえず適当でw

と何も考えずに書いてきましたが、さすがに100記事を超えてきたという事で、一度「PageSpeed Insigths」で調べて見ると真っ赤でしたorz

 

現状把握

PageSpeed Insightsで当ブログを測定した結果がコチラ。

f:id:tektekeo:20170903175019p:plainf:id:tektekeo:20170903175023p:plain

真っ赤ですね。本当にw

せめて黄色の状態まで持っていきたいですね。

テキトーにやってきたツケを払う時が来たようです。

改善を試みる

改善すべき項目は「PageSpeed Insights」に表示されていますが、個人的には画像の圧縮処理をサボっていたからだろうとタカをくくっていました。

 

この記事ではとりあえず、画像の圧縮のみを行ってみました。

画像の圧縮

当初は圧縮をすれば黄色まで行って、「改善できた。終了!」という流れまで有り得ると思っていました。

 

まずは、今までどのような状態の画像を保存していたかを確認します。

はてなフォトライフのアップロード時の画像をチェックしてみました。

f:id:tektekeo:20170903182357p:plain

こんな感じ。

「フォトライフの設定」をいじれば、今後は圧縮を気にせずアップロードできると思っていました。

しかし、私自身で検証し直してみたのですが、ぶっちゃけ意味がわかりませんでした。

調べてみると他のブロガーの方も検証して良くわからない様子。

私はpng画像をはてなブログからアップロードするケースを試してみたのですが、画像サイズは元のサイズのままで、画質は80%とかでアップロードすると逆に容量が増えました。(3%とかでアップロードするとさらに増える)

なので、アップロードした時点でリサイズや画質を落とす事はできない。

と解釈して、アップロード時に注意するしか対策がなさそうです(ホンマか?)。

つまり、今後の画像のアップロードは圧縮してからアップロードという風に1工程増えることを意味しています。

 

また、アップロード済みのものは圧縮し直さなければならないので、

今までアップロードした画像を全て、圧縮して再アップロードしようと試みよう思いましたが、キツすぎるので「ホーム」の部分ある画像だけ圧縮して、本当に改善されるか検証してみることに...

 

「PageSpeed Insights」の画像を最適化するに出ていたサムネ画像7枚だけやってみました。 

PNGイメージをオンラインで圧縮する」を使ってサムネの画像を圧縮して再アップロード...

f:id:tektekeo:20170903194037p:plain

 75%ぐらい減った。これで少しは効果があるだろうと思っていたのですが...

f:id:tektekeo:20170903193447p:plainf:id:tektekeo:20170903193452p:plain

思ったより良くなるどころか、モバイルはむしろ悪くなってる(複数回すると48の時もあったので同じくらい?)... 

サムネのURLの変更もきっちり設定されていることも確認したのですが...

でもパソコンは+3ぐらいになったので、効果があるっぽい?

もしかして、画像の為に遅いわけじゃないの?

と思い、当サイトのプラバシーポリシーのページで検証してみました。

f:id:tektekeo:20170903203953p:plainf:id:tektekeo:20170903203956p:plain

モバイルで60だと...?

プライバシーポリシーのページは画像や記事量が圧倒的に少なく、当サイト内でもっとも早いページではないか?と思っていたのですが...

そもそもスマホでのはてなブログの表示が遅い?

www.ksmemo.com

この記事によるとやっぱり遅かったorz

 簡単なテストブログで「65」というスコアらしい。

これではどれだけ頑張っても、赤色から抜け出せません。

9月8日追記:

はてなのスマホ用ページがレスポンシブに比べて劣っているとは言えない結果になったので訂正。下記リンクを参照してください。

レスポンシブサイトにして測定してみた

テンプレのレスポンシブ設定に急に切り替えてしまうと、広告の配置やCSSの不備がたくさん出てきてしまうので、アクセスが少ない時間帯を狙ってレスポンシブのケースを測定してみました。

f:id:tektekeo:20170904174641p:plainf:id:tektekeo:20170904174650p:plain

モバイルが47→56に!

まずはレスポンシブにする!話はそれからでした。

その後、画像とかjavascriptとかcssを改良していくべきでしたね。

今ははてなのスマホページのままですが、最低限の不備を直したらスグにレスポンシブサイトに切り替える予定です。

9月8日追記:

画像をJPEGに変更して圧縮したものを使用すると、はてなのスマホページとレスポンシブサイトがほぼ変わらない数値になりました。

PageSpeed Insightsの計測上、PNG画像まみれにした場合は、はてなのスマホ用ページがレスポンシブに比べて不利に働いただけかもしれません。

まとめ

  • ページの読み込みを早くする為に画像を圧縮を試みようとした
  • はてなフォトライフでのpng画像の圧縮設定はできなかった
  • WEBサービスで圧縮して差し替えるも、モバイルに効果がなかった
  • そもそも、はてなのスマホページが遅い
  • レスポンシブサイトに変更!

注意:

さらに検証してみた結果、レスポンシブサイトに関しては間違っている可能性が高かったです。

お詫びして訂正させていただきます。

なぜ気づかなかったのか... 

画像の圧縮さえすれば早くなると思っていたけど、まずはレスポンシブサイトに切り替えるべきですね。

9月8日追記:

JPEG画像を圧縮したものを差し替えるだけで、はてなのスマホ用ページでかなり早くなりました。

詳細は下記の関連記事を見てください。

スマホからの流入が大きくなってきているので、死活問題になりかねません。

しかし、サイト自身が遅いのも事実です。

画像の圧縮でPC側が「+3」になったのは効果があったという事かな?レスポンシブサイトにすれば、多分その恩恵も受けれると期待してます。

圧縮したものに切り替えるのは時間がかかりそうなので、コツコツ更新しつつ、レスポンシブサイトに切り替えようと思います。