私もなんだかんだでブログを始めてから1年半が経ちました。
この1年半を振り返ってみると色々なことがあり、あの時はこんなことで悩んでいたな～とか、自分の理想通りに物事が運べてうれしかったことなど様々なことが脳裏に浮かびます。
そんな中でふと思いました。
「ブログを始めたばかりはデザインなどを弄り倒していたけど、最近は全く弄ってないな～」と。
そこで数ヶ月ぶりにはてなブログの「デザインCSS」を見直してみると、無駄なところをたくさん発見！！
これは盲点でした。
デザインCSSを整理するだけでページの読み込みスピードが上がったりするのではないか？？という期待の元、現状と私が考える対策を述べてみたいと思います。
当記事はデザインCSSを整理しよう！！というような内容となっておりますが、CSSは変更をして一度保存してしまうと、サイトのレイアウトが崩れた際などに復元できません。必ずCSSを弄る前に保存(バックアップ)しておきましょう！！
まずはデザインCSSの現状を再確認
数ヶ月ぶりに見直したデザインCSSは悲惨なものでした。。
まずはおさらいも兼ねて、デザインCSS画面の確認の仕方から紹介します。
デザインCSS確認方法
①はてなブログの「ダッシュボード」を開く
②「ダッシュボード」の「デザイン」を開く
③「デザイン」を開いたら「スパナマーク」をクリックし、「｛｝デザインCSS」を開く
④上の画像の赤矢印のところをクリックすると、過去自分がカスタマイズしたCSSが羅列されている
⑤記入されている内容を再確認
自分のデザインCSSを見直してみて
ま～ひどい。
正直、何行分書いてあったら多いとか少ないとかは分かりませんが、これは少ないに越したことはないでしょう。ですが、感覚的に500行オーバーは決して少なくはないと自己判断！！
現在記録されているCSSに無駄がないかをひとつひとつ見直す作業を行ってみました。
しかし、ここで思わぬ壁が出現！！
それは、、
「メモを設けていないCSSの読解が出来ない！！」
どういうことかと言いますと、下の画面をまずは見てみて下さい。
CSSの本文の前に/※〇〇※/で囲ったメモが残っています。
このメモが残っているものに関しては、そのメモの直下にはその項目のCSSが記載されているんだなと分かりますが、中にはメモ無しでダイレクトにCSSを記載していたものも多々あり、CSSをコピペで対応してきた私にとっては大変なことです。
CSSの本文だけをコピーして終わりではなく、自分が後で振り返った時に分かりやすいように何かメモを残しておくことをおススメします。これは本当に数か月前の自分に声を大にして言ってやりたいです。。今となっては手遅れですが(笑)
デザインCSSで不要箇所を抽出する
この作業が果てしないですね。
しっかりメモを残しておけば問題なかったのですが、、「後悔先に立たず」ですので、ここで何を言っても始まりません。
私のやり方ですが、抽出方法を紹介します。
CSSの内容が分からないバージョン
分からないものに関しては、いったん不明のCSSを削除し、実際のページで変更箇所を探して、なんのCSSであったかを特定する作業に没頭しました。
そうすると意外と分かるもんですね！
レスポンシブルに対応しているのであれば、元々のCSSで設定されている状態で自分が書いた記事(文字数やデコレーションが多い記事が良い)をスマホで開いておき、その後PCで該当のCSSを削除して保存してから先ほどスマホで開いておいた記事と同じ記事をPCで開いてみる。
そうすることでスマホの画面には元々のCSSでデザインされた記事が開いており、PCには該当のCSSが削除された状態の記事が開いているかと思います。
そこで、両画面をにらめっこをすることで該当部分が分かりやすいかと思います。
もし分からなければ別のページで試してみるのもアリですよ！
メモが残っており、なんのCSSか予想出来るバージョン
これは簡単ですね。
単純に「普段使用しているCSS」なのか、「削除しても現在のブログ運営に支障がないもの」なのかを振り分けるのみです。
「削除しても現在のブログ運営に支障がないもの」に関してはただただ消すだけではなく、本当に削除しても問題ないのかを先ほど紹介したスマホとPCで同記事を開いて見比べる手法を使えば安全です。
デザインCSSを見直したことでの変化
先ほど、デザインCSSが500行以上記載されているとお知らせしましたが、いざ整理をしてみるとだいぶスッキリしました！！
何行になったかって？？
それは、、
約250行！！
1/2の削減成功！！
そして、肝心のサイトの読み込みスピードの変化ですが、こちらのサイトでの測定結果をお示しします。
結果は、、
モバイル部門
19→30
パソコン部門
53→56
…元々遅くないかって？？
分かってます、、それは恐らくGoogle AdSenseが大きく影響してます。
広告を外せば早くなることが予想されますが、、そこは良きバランスを取ろうとは思っております。
執筆時点現在、AdSenseにて手動広告と自動広告のハイブリッドについて実験中で、表示されている広告数は正直多いと思います。
その多さがスピードテストの結果にモロに数字となって出てきています。
ですが、無駄なCSSを削除するだけで多少ですが読み込みスピードにも影響することが分かったので良しとします！！
「デザインCSSを今一度見直してみよう」まとめ
私のブログではデザインCSSの無駄を省くことで大きく読み込みスピードが上がることはありませんでしたが、点数だけ見れば少し改善することが出来ました。
無駄な点を削除するだけで改善しそうなので、しばらくデザインCSSを見てないな～という方は一度確認してみて下さい！！
思わぬブログ改善につながるかもしれませんよ！！
…それにしても読み込みスピードが致命的だ…ここをどうにかしないと。。
その他こんな記事もありますので、よろしければどうぞ↓↓
www.yakuzari.work
www.yakuzari.work
www.yakuzari.work
www.yakuzari.work
