2022/2/20
『遅い』と自分のブログを見て、常々思ってます。
これではせっかく見にきてくれた方が、ブログが開く前に帰ってしまうかもしれない！せっかくの見てもらうチャンスを無駄にしてしまうかもしれない！
そんなのは嫌なので自分のブログの重さを少しでも改善すべく、ど素人ながら頑張ってみました。
まずは己の実力を知るべし
測度を測定するのはPageSpeed Insights で、できるということなので早速やってみます。
こちらは測定したいブログのURLをコピペして【分析】をクリックするだけなので非常に簡単です。
結果
携帯電話：24
デスクトップ：33
【赤：0〜49・黄：50〜89・緑：90〜100】
１００点満点のはずなんですが、思っていた以上にひどい結果が出てしまいました。
こりゃ見ようと思ったらクルクル回るわけですね。
そして、ありがたいことに改善できる項目も教えてくれます。
が、アナログ人間の私には何を言ってるのかさっぱりわからん！
とりあえず出てきた単語はJavaScriptと画像。他にも色々あるけど遅延理由の多くはこれらがしめているご様子。
JavaScriptとかほんと意味わからんので、とりあえず今までUPした画像を軽くしていく作業から取り掛かりました。
写真を全て軽くする
やり方は色々あるかと思いますが、私はパソコンにダウンロードした写真をマークアップ(鉛筆マーク)で１枚ずつサイズ変更していきました。
写真の青線の部分の数字を変更
変更前141KB → 変更後32KBちなみに【変更前】のさらに前は9.5MB
一応最初から圧縮してはいたんですが、さらに圧縮し直します。この作業を今まで投稿した写真全て行い、再び投稿。
目標としては１枚あたり50KB以下にするようにしました。
しかし、上の写真のように画面半分くらいならいいのですが、画面いっぱいに写真を広げたい場合は画像がかなり荒くなります。画面を広げる時は450〜500ピクセルで100KB以下くらいにしたらギリギリ私にとっての許容範囲と思いました。
再び速度測定
結果
携帯電話：24 → 46
デスクトップ：33 → 53
【赤：０〜49・黄：50〜89・緑：90〜100】
携帯電話はいまだに赤点ですが、デスクトップはなんとか５０点を超えることができました。
改善できる項目数
携帯電話：赤４・黄４ → 赤３・黄５
デスクトップ：赤１・黄３ → 赤1・黄1
まで減らすことができました。携帯電話の方がやはり画像の負荷がかかるようで、改善後も３つの画像項目が含まれています。
他にもやってみた
- トップページの表示記事数を７→５に変更
表示記事数の変更は【設定】→【詳細設定】から簡単に変更できました。
- トップページのはてなスター・ブクマコメント・コメントの非表示
これらの項目はトップページと記事内とで重複しているのでトップページは非表示にしたかったんです。特にはてなスターはかなりの重さになっているので改善項目に含まれています。しかし、はてなスターとブクマコメントはうまいことできませんでした。
コメントだけは下のやり方でトップページから非表示にすることができました。
【デザイン】 → 【カスタマイズ】 →【デザインCSS】に下のコードを貼り付けます。
/*トップページコメント非表示*/
.page-index .comment-box {
display: none;
}
JavaScript
前述した通り、当サイトの重い主な原因は画像とJavaScriptが挙げられています。
画像に関する改善項目で短縮できるであろう時間の合計は4.2s
JavaScriptに関する改善項目で短縮できるであろう時間の合計は39.86s
と、JavaScriptの方が圧倒的にしめているんです。画像の圧縮で上記のように改善されましたが、やはりJavaScriptをどうにかしなくてはいけません。
その中でも/widgets/widget_(以下略) というURLが620.9KBと改善項目断トツトップの使用量をしめています。
使用量２位の/js/vendor,(以下略)というURLは331.1KBなので上記は倍ちかい量。また、こちらは(hatena.com)と書かれているので『はてなブログに必要なURLなのだろう』と予測がつけられます。
でもそんなふうに予測をつけるだけ。
はっきり言ってアナログ人間の私にはさっぱりわかりません。そもそもこんなにJavaScriptって言いながら、JavaScriptが何かすらわかってませんからね。
おわりに
画像を貼りかえただけで素人ながらも少しは改善することができました。
しかし、以前として遅いことに変わりはありません。なぜなら一番遅い要因となっているJaavScriptを改善していないから。
特に/widgets/widget_(以下略)がどう考えても戦犯です。こやつは果たしてどうにかできるものだろうか…
見てくれる人にとって少しでも快適になるように、何とか改善していきたいです。
おしまい。
