お題「#おうち時間」
家の中で、できるだけお金をかけずできること……いやむしろ微々たる収入でも稼げる手段は僕の場合、ブログです。九割趣味なので、採算は全然あってませんけど、モチベーションが上がるので、やっぱりPVは増やしたい。
今年１０周年目を迎える当ブログなんですけど（一応今年９月から１０年目ってことで計算合ってますよね？）、徐々に伸ばしてきた日々のPVも頭打ち状態にあります。サブブログの更新をやめて、メイン一本にしぼり、できる限り毎日更新してきましたが、なかなか増えない。
ネタがニッチすぎるのかもしれないし、文章力が低いのかもしれないが、後者はともかく、自分が好きでもないことをブログに書くのは、趣味として本末転倒です。
文章に関しては、DeeｐL翻訳による日本語→英語→日本語といる再翻訳により、文章構造が変なところ、誤字や脱字をチェックできます。時間があるときしかやってないけど……。自覚しているんですけど、結構僕のブログって誤字脱字多いですよねぇ。あと、文章が長くなると、文の塊の順序が変になりがちです。読み直して、できる限り文を短くして、順番入れ替えて読みやすくしているつもりなんですけど……。
自分の問題以外だと、ブログの表示スピードを早くしたい。僕のブログは写真が多くなりがちなので、回線スピードによって表示される速度にもたつきがあるし、携帯電話の回線ではギガの消費が激しいと思うので、気軽に閲覧して頂き難いと思ってました。グーグルの研究によりますと、ページの反応が0.5秒遅くなるとアクセス数が20％低下するとか。
自分のブログやサイトの表示速度を確認するのに一番手軽なのはグーグルのページスピードインサイトでしょうか。
自分のブログのトップページのURLを入力してみました。
モバイル、PCそれぞれの結果です。
色分けは、パフォーマンススコアの範囲に対応しています。
- 0 から 49 (遅い)。赤
- 50～89（平均値）。オレンジ色
- 90から100（高速）。グリーン
が、がびーん！！！
私のブログの表示速度遅すぎぃ！
スコアの下に、どこがボトルネックなのか、改善案などが提示されています。
いくつかある項目のなかで、一番大きな遅延の項目はやはり画像でした。
- 次世代フォーマットでの画像の配信
- 適切なサイズの画像
この２つで３０秒近く早くなるらしい……ほんとかよ。
次世代フォーマットでの画像の配信は、とりあえず無視します。
適切なサイズの画像……これは思い当たりあります。PCに表示される画像って、実際表示されるサイズより大きいんですよね。クリックして大きく表示するってやつ。実際表示される多きさよりも、でかい容量の画像を毎度読み込みしているということです。
はてなブログがサムネ画像とか毎度リサイズしてくれば楽なんですけどね。
とりあえず、サイドバーの小さなサムネイルが怪しいので、最新記事とグループを消してみました。
おお！ PCはこれだけで一気に平均値近くまで改善しましたよ。
人気記事については、閲覧者を別記事に誘導する意図もあるので、残すことにしました。一応試しで、サムネ非表示にしてみたんですけど、逆にスコアが少し下がりました。たぶん、検査のゆらぎだとおもうんですけど、効果なさそうだったので、利便性と天秤にかけて残すことに。
問題はモバイル表示です。
ほとんどスコアが伸びませんでした。
もしやと思い、レスポンシブデザインから、モバイル用表示に変更してみました。
が……。
変化なし。
人を疑うのも問題あるかもしれませんけど、これははてなブログのモバイル表示に技術的な欠陥があるのかもしれません。モバイルサイト表示のデザインが古臭くてかっこ悪いので、変えても別に早くならないなら、レスポンシブデザインのまま運用します。
次に本文の画像を軽くします。
３月からはてなブログでは、グーグルフォト貼り付け機能が使えません。もう２ヶ月にもなるんですけど、いい加減なおらないのでしょうか……。
まあ、それは置いておいて、画像を軽くする方法は、オンラインサービスで色々あります。外部にアップロードする手間とセキュリティの問題で、今まで敬遠していたんですけど、今回試してみます。
自分が試したのはこちらのサイトです。
無料、複数アップロード、調整可能、日本語化などが良い点です。
実験には前回記事を使いました。
一緒にブログタイトルロゴも変更。
ステイホームのタグを入れましたよ。前回ブログデザインを変更したとき、マイクラのタイトル画面のように、時々メッセージを入れるつもりだったんですけど、すっかり忘れていました。
こういうフラットなデザインのロゴでも、使用する色数を減らすことで容量を削減しています。元画像では100色以上使用されていたのを12色まで減らし、容量の８０%をカットすることに成功しました。
※色が変わって微妙に背景色と合ってない……。
最大２色まで色数を減らせます。この記事のトップ画像はそれ。
このようなフラットデザイン的な単純な画像よりも複雑な画像のほうが容量は減らせます。
トップ画像の場合、そもそも１.４メガも有りました。
色数をへらすことで、７０%の容量を削減。しかも、ぱっと見では画質劣化したようにはみえません。若干赤の彩度がおちたかな？
こちらがこのページのもともとのスコア。
改善後はこちらのスコア。
ほんの微々たる伸びですが、積み重ねることでスコアは上がるはず。
今回はトップ画像一枚ですが、普段の玩具レビューの場合、数十枚になるので、効果はデカイはずです。
画質以外の修繕も、ブログ１０周年に向けてやっていこうと思います。
時間はあるので、アッハッハ！！
