こんばんわ。はたらきアリです。@hatarakiari0818
ブログをカスタマイズにはまり、
好きなものを好きなだけ取り込んだブログが今のサイトなのですが、
結果的にめちゃめちゃ重いサイトになってしまったことを記事に取り上げました。
サイトの高速化にはいろいろな方法があります。
- 画像を圧縮して張り付ける
- 「設定」➡「詳細設定」のheadに要素を追加で無駄な呼び出しをしていないか？
- 「設定」➡「詳細設定」のＡＭＰにチェックが入っているか？
- カスタマイズした結果、HTMLやCSSで不要なものはないか？
- コメント欄が必要か？
- サイドバーのメニューは適切か？
などが高速化の方法として有効なのですが、そのなかでもダントツで１の画像を圧縮して張り付けることがとても重要です。
むしろすべての画像を圧縮できた時点で高速化のために出来ることを８割は達成していることになります。
※私のサイトは画像をオリジナルで貼ってしまっているため、サイトスピードが最悪です。
９０記事あるサイトですが、これをすべて圧縮したらどのように改善できるのか検証していきます。
画像の圧縮方法はこちら
Ｉ ♡ ＩＭＧ
画像を圧縮して張り付ける方法はオンラインサイトを利用したり、オフラインでソフトをダウンロードしたりと方法はいくらでもあります。
私の場合はこちらのサイトを愛用しています⇓
このサイトはオンラインで画像を圧縮する機能があります。
動きは高速で、圧縮したい画像をドロップするだけで一瞬で画像が圧縮してくれるのです！
圧縮した画像をダウンロードすれば、すぐに画像を貼り付けることができます。
このサイトは圧縮以外にも多くの機能を備えています。
- 圧縮
- サイズ変更
- 切り抜き
- ＪＰＧに変換
- ＪＰＧから変換
- 写真エディター
- 透かし画像
- ミームジェネレーター
- 画像の回転
など無料サイトなのに、この充実した機能の数々は素晴らしすぎます。
ブログ作成のときは欠かすことが出来ないサイトとして毎日愛用しています。
はてなフォトライフ
さて、はてなブログユーザーは避けて通れないのが画像をアップロードするときは強制的にはてなフォトライフになるということです。
ブログを書くのにすべて用意してくれているのがはてなブログの良いところなのですが、少し問題ありです。
というのも、どういう訳かはてなフォトライフにアップロードすると画像が大きくなるのです。
それでは本末転倒なので、少しアップロードの時に工夫をしましょう。
①「はてなフォトライフ」➡「設定」で以下のページを確認します。
②画質を【７０】に変更
③この内容に変更する
と設定を変更してください。
こうすればアップロード時にサイズが大きくなるという意味不明な現象は少しマシになります。
ちなみに私は７０をお勧めします。
７０程度なら画像がオリジナルのまま見えるギリギリのラインと思っています。
はてなブログにおける画像圧縮に関しては、この手順で行うことで私のサイトを改善していきました。
画像をすべて圧縮した結果
私はこの記事で９１記事目でした。
それまでにアップロードした画像については以下の通りです。
- 枚数 ：１７７枚
- データ量：２７．９ＭＢ
それをすべて圧縮した結果、以下のようになりました。
- 枚数 ：１７７枚
- データ量：１０．２ＭＢ
全て入れ替えました。
とんでもなく気の長くなる作業でした。。。
そして気になる結果です。
（モバイル版）
（ＰＣ版）
えぇ～～～！モバイル版点数変わってないやん！！
PC版は画像残していなかったのですが、改善されています。
確か３０点台だったと記憶しています。
モバイル版が点数に変動がなかったのかは理由はよく分かりません。
他のサイトでも点数を調べてみます。
アップロードした容量は明らかに少なくなったので、軽くなっているはずなのですが。
継続調査ということで今日は一旦検証終了です！
※追記
その後、サイトのＨＴＭＬやＣＳＳの順番を並び替えをして、上から順になるようにしました。
余計な外部リンクを徹底的に取り除くなど対策を試みましたが、点数は変わらず。
変わったのは私の体感速度だけどいまいち、検証結果を数的に証明するに至りませんでした。
しかし、ながら物理的に時間がかかる作業を取り除いていったので、処理効率は上がっているはずなのですが。
今のモバイル２５点、パソコン５５点前後で推移しております。
⇩このサイトにおける【ZENO-TEAL】カスタマイズを総まとめした記事はこちら