ブログが重いのを見直してみた

【スポンサードリンク】

f:id:chagamasun:20180201193942j:plain

ツイッターで色々教えてくれたはてなブログの先輩である味醂さん

基本PCから描いて投稿しているのでスマホからの動作に気づきにくかったりするのでとっても有難いです。

www.tiemirin.com

 

まず自分のブログがどれだけ重いのか調べてみた

自分のブログ(またはサイト)がどれだけ重いのか測定できるチェックツールが出回っているのでそちらを利用させてもらいました。

A~Fランクで評価してくれるGTmerix

GTmetrix | Website Speed and Performance Optimization

色々なツールでやってみましたが、日本語対応ではないものの、操作はとってもわかりやすく、結果もわかりやすいです。基本は自分のブログやサイトのURLを入力するだけです。

そして結果

f:id:chagamasun:20180201185046p:plain

おん…?全然ダメでは…?
因みに

左の「Page Speed Score」はPage Speed(Google社提供)のスコア
右の「YSlowScore」はYSlow(Yahoo!者提供)のスコアです。

とりあえず改善が必要なことがわかったので、色々と調べてみました。

 

 

とにかく画像の容量が重い

WEBページのサイズ(容量)ってどの位が目安!何か問題でも
によると、WEBサイトの1ページあたりの容量は1.0~3.0MBが目安のよう

それでは私の今までのブログ漫画のサイズを見てみましょう

f:id:chagamasun:20180201190312p:plain

はい。

今までアップしてきた4コマの漫画1枚全部、1300~1500KB前後でした。
1MB=1024KBですから、大体1ページあたりの目安の半分は1枚の4コマ漫画で使ってることになります。

 

はてなフォトライフで圧縮ができるらしい

はてなブログで記事に画像を挿入する際は、画像を「はてなフォトライフ」にアップすることで挿入ができるようになっているのですが、どうもそのはてなフォトライフの設定をちょっと変えるだけで、圧縮ができるそうです。

 

やり方

1、まず「はてなフォトライフ」を開く

2、右上にあるメニューから設定を押す

f:id:chagamasun:20180201191936p:plain

3、設定にて“画質”の欄を100%→70~80%に変更する

f:id:chagamasun:20180201192020p:plain

 

 以上です。終わり。

 

はてなユーザーでなくても

オンラインで画像を圧縮。最高の画質および圧縮方式
上記のようなサイトをはじめ、オンラインで圧縮してくれるサービスが多々あります

 

 

どのぐらいサイズが変わったか

この作業を行ってから同じサイズ、同じ形式(png)、同じ4コマ(1枚絵)をアップしてみました。

 

f:id:chagamasun:20180201192514p:plain

 

 

半分。半分以下になった。どういうことだ。

 

ちなみにいつも横幅が1060pxの大きめで描いているので横幅を500pxにしてみたところ

f:id:chagamasun:20180201192804p:plain

 

さらに減りました。
でも載せるとなると

 

f:id:chagamasun:20180130192813p:plain

こんな感じになり、ちょっと細かい文字になるとPCから読みにくいかも…
と思ったので横幅サイズは今までどおり行こうと思います。

 

 

画像を圧縮した画像に入れ替えた結果

2月1日現在、80記事ちょっとあるブログの記事の画像を圧縮した画像にすべて入れ替えてみました。

 

f:id:chagamasun:20180201193711j:plain

PageSpeed:60%→62%  YSlow:55%→59%

 

スコアはかわりませんが、ほんのり改善。

 

 

はてなブログはpng形式と相性が悪い

ちなみに、この記事を書いている途中で判明したのですが、はてなフォトライフにpng形式のものをアップすると本来のものよりも容量が多くなってしまう現象が起きるそう。

 

情報元はこちらのブログ

gamestart.hateblo.jp

 

png形式はjpg形式に比べて容量は多いものの、圧縮しても画像の質を落としにくい形式なので基本私が投稿するのはイラストなこともありpng形式での書き出しを行っていました。

が、試しに同じサイズ、同じ漫画を形式をpng→jpgにしてアップしてみたところ

f:id:chagamasun:20180201193243p:plain

超減った。

なに、最初の10分の1以下じゃん。どういうことだ…
容量を考えるならjpgでのアップが良いみたいです。

 

 

また画像を全部差し替える?

jpgの圧倒的容量の少なさに驚いているのですが

個人的にjpgにした途端、特にセリフの文字の後ろにモヤみたいなのが結構強めに出るのでどうしようか迷ってます。

 

本日の味醂さん登場の漫画はテストとしてjpgでアップしているのですが、皆さんから見て今までの漫画とそんなに変わりなく、文字もわかりやすく読めているのでしょうか…?

もしそんなに今までの漫画と変わりなく読めているのなら、私のブログはスマホからきてくださってる方が多いので軽さ優先でjpgに差し替えようかな、と思っています。

Twitterからでも良いので、是非色々ブログの見え方とか教えて下さると嬉しいです\( 'ω')/

 

あと、はてなブログの代名詞であるはてなスターは結構重い原因になってるようですね。でも、スターつけてもらえるとすごく嬉しくて励みになるので、個人的にはしばらくは外したくないです…