ブログが重いので軽量化しました
先日、「自分のスマホから自分のブログを見てみよう」と思ってアクセスしてみたら、サイトの立ち上がりがすごく重くて。
いつもパソコンで開けても重いなと感じていたのですが、スマホだと更に重いような気がしたので、
PageSpeed Insights でサイトのスピードを計ってみました。
モバイル19 パソコン41 でした。
これは重すぎる。
まさか自分のブログがこんなに重いとは…
私は、HTML/CSSの知識はほとんどないので、いま出来る範囲で軽量化することにしました。
対策その① デザインテーマを変える
今まで使っていたデザインテーマは元々のデザインをそのまま使うのではなく、自分好みにしたくてデザインCSSにコードを追加していました。
カスタマイズすると重くなるそうなので、Evergreenというシンプルなデザインに変更。
2022/12/03追記：現在は公式テーマのSmoothを使用しています。
これまでは右側にプロフィールやカテゴリーが表示される2カラム（パソコンから見た場合）だったのですが、文章や写真が見やすい1カラムにしました。
白を基調にしたシンプルなデザインが気に入ってます(^^)
以前の背景画像はブルーを基調にしていたので、その要素はちょっと残したくて、
代わりにキバナコスモスと青空のフリー画像をヘッダーにしました。
はてなブログ ヘッダー画像の配置の仕方⇩
https://blog-support.jp/hatenablog-header-picture/
その② ソーシャルボタンをカスタマイズ
はてなブログ標準装備のものを表示すると重くなると書かれていたので、下のサイトを参考にして変えてみました。
ただ、このカスタマイズしたシェアボタンはトップページには表示されないみたいです。（無料版のみ）
個別記事ページには表示されます。
その③ 画像サイズを変更＆圧縮
今までこのブログで載せてた画像は、スマホで撮ったものをそのまま使用していました。
ピクセルを見てみると横幅3000pxを超えているものが多く、ブログでは横幅1000pxで十分だと紹介している記事があったので、ちょっと面倒だけどサイズ変更やってみようと思います。
あと、圧縮して容量を小さくすると画素数が悪くなるんじゃないかと思いましたが、下のサイトの比較画像を見ると大きくは変わらなさそうでした。
今までの投稿画像も容量が大きいのは小さくしていきたいと思います。
その④ はてなスターを非表示にすることに決めました
これは本当に悩みました。
今までスターを付けてくださっている方に申し訳ないと思って…
でも、少しでも軽量化に繋がるんだったらと思い、外すことにしました。
Google Analiticsでチェックしてみたのですが、
いま私のブログを見てくれている方の多数がモバイルからでした。
やっぱりパソコンよりもモバイルの方が重くなりやすく、私がスマホで見た時も記事を読み終わっても中々はてなスターが表示されない時があったので、少しでも軽くなってくれればと思い非表示にしました。
ここ数か月は、記事を公開するごとに色んな方にスターを付けていただいてとても励みになりました。
これまで、はてなスターを付けてくださった皆様には感謝しています。
本当にありがとうございました。
改善後の数値
再度、PageSpeed Insights で計ってみました。
結果は．．．
モバイル35 パソコン69 でした。
モバイル：19→35
パソコン：41→69
ちょっとは軽くなったけど、早い部類には全然届いてないですね(^^;)
他に、使用していないJavascriptの削減とか、キャッシュとか… 細かい所までやろうと思えば、まだまだ改善の余地はあるみたいですが今回は取り掛かりやすいものだけしてみました。
少しですが以前より改善されて良かったです！
終わり。
