このブログ、実は最近デザインを一新させました。
それによって、ブログの表示速度がやっと人並みに向上したのでその方法をまとめておきます。
はてなブログって重い
よく語られることですが、はてなブログって表示されるまで結構時間がかかりますよね。僕のブログもなんか重いなーって思っていました。
このことについて調べていたらこういう記事を見つけました。
lifeiscolourful.hatenablog.com
この記事内で紹介されている表示速度チェック法を試してみました。
Googleが出しているツールです。
testmysite.thinkwithgoogle.com
2017年9月18日追記
現在は記事作成当時と仕様が変わっているらしく、この記事で紹介しているような速度評価画像は得られません。
よりモバイル端末に特化した速度評価に移行しているようです。Googleはモバイルファーストなのである意味当然の変化なのかも。
当サイトでも今やモバイル端末の方が訪問者がおおいですからね。
同じジャンルの他サイトと比べて表示速度がどれくらいなのかも教えてくれるようになりました。
過去にテストした方ももう一度やってみると良いかもしれません。
ちなみに当サイトの再テスト結果
なんと約20％もの訪問者を逃している。。マジか。。。。。
まだまだ頑張れることがあるようです。
追記終わり
すると当ブログは驚くべき結果に。。。
完全に赤点です。
有名はてなブログのスコアは？
ちなみに有名はてなブログのスコアを勝手に調べさせていただきました。
やっぱりはてなブログが全体的に重いというのはわかります。
ですが、有名ブログと比べてもやはり当ブログは表示が遅いようです。
さて、なにが問題なのでしょう。。。
問題点１：画像が重い
上記の記事には表示を速くするためには、画像を軽くする必要があると書いてありました。
特に気になるのが、ページ内（ヘッダーやサイドバーも含む）に配置されている画像。とくに写真は重くなりがちだ。たまに数MBの画像が並べられていることもあるのだが、写真家や高画質レンズの品質に関するブログでないなら、ちょっとこれはいただけない。
読み手はそれらの画像を全て問答無用で読みこまされていることを意識しよう。
最近ではInstagramやFlickr、無料画像提供サービスのおかげで高品質な写真に困らなくなっている。しかし、それをそのままブログに貼り付けるのは危険だ。
引用：表示の遅いブログは損している！ブログを軽量化して訪問者を逃さない誰でもできる対策法 - Life is colourful.
はい、ヘッダーが無駄に容量の大きな画像な上に無料画像提供サービスの写真をそのまま貼り付けていました。
ちなみにこの引用元サイトの表示速度のスコアは
調べた中で最速スコアでした。
記事中にはキレイな画像をたくさん使ってて、全体的にオシャレなブログなのにこのスコアはすごいですね。
やったこと
先程の記事で紹介されていた圧縮とリサイズを同時にしてくれるサイトを利用しました。
参考：JPEG Optimizer - Compress and Resize Your Digital Photos
これでヘッダー画像と、とりあえずアクセスの多い記事の画像を圧縮&リサイズしました。
圧縮とリサイズを同時行うとその効果は物凄くて、80％以上容量が減ることもざらでした。
ただ、いちいち数値指定がめんどくさいので、長期的に見たら下の記事で紹介されているCompressor.ioのほうがよいのかもしれません。
問題点２：デザインを自分でいじってた
ブログを始めるとあんなこともしたい、こんなこともしたいと色んな欲求が芽生えてきます。
ブログのデザインもその一つで、他のブログと違う見栄えにしてやろう！と色々頑張ってしまうものです。
その結果、CSSはぐちゃぐちゃだし、元はかっこよかったのに手を加えたせいでダサくなってしまったり。
そして結果めんどくさくなってそのまま放置してました。
ということでここで再びデザインを一新しました。
やったこと
- テーマ入れ直し
- トップページを記事一覧表示にする
- ソーシャルボタンを変える
PC表示、スマホ表示どちらにも上記の変更を加えました。（当ブログはレスポンシブではありません）
基本的に見出しやボタンのデザインは統一感を持たせるために、PCもスマホも共通です。
テーマ入れ直し
新たにテーマストアからテーマを入れ直しました。ただし、必要以上にテーマをいじらないことを肝にめいじて。
独自色をだしたいのなら、ヘッダー画像をオリジナルにすることと、見出しを変更するだけでブログの雰囲気は十分に変わります。
見出しはスマホから見てもうっとうしくないように、できるだけシンプルなものにしました。
適応したテーマは超有名テーマ
スマホ表示もCSSを極力減らしました。
ちなみに素人がブログ全体の色をむやみにいじってもダサくなってしまうので、このサイトを参考にして配色をきめました。
トップページを記事一覧に
トップページにアクセスすると記事一覧にリダイレクトする手法は、多くのはてなブログで採用されていますね。
これが表示速度向上に功を奏したかどうかはわかりませんが、トップページがスッキリした印象になったのは間違いありません。
これは速度向上目的というより、訪問者のユーザービリティ向上目的の方が大きいと思います。
やり方は下の記事参照です。
ソーシャルボタンを変える
デザインをいじらないと肝にめいじておいて、いきなりですが、記事下のソーシャル共有ボタンだけカスタマイズしました。
というのも、はてな標準のソーシャルボタンは重いと有名でして、確かに見てても表示に時間がかかってるんですよね。
これについて検証されてる記事がこちら
当ブログでも下の記事を参考にしてソーシャルボタンを設置しました。
フォローボタンも変える
同時にフォローボタンも変更しました。
PC表示とスマホ表示共に、ソーシャルボタンは記事の上下に、フォローボタンは記事下に設置しました。
改めてスコア測定です！
さぁ、ここまで色々とカスタマイズしてきましたが、その効果はでたのでしょうか？
改めてスコア測定してみました。
- PC表示 26→62 大幅に改善
- スマホ表示 43→51 改善
PC表示に関しては有名ブログと比較しても遜色ないくらいの表示速度に、スマホ表示に関しても少し低いかな？程度になりました。
各記事ページも大事
今までのスコアはあくまでもトップページの表示速度です。
記事ページはまた表示速度が違います。
画像が少なく読み込みが速いページはスコアが70を超えることも普通にあります。
そんな中、コツコツと記事ページの速度チェックをしていたら驚愕のページを発見しました。
PC・スマホ共にスコア0
なんとPC表示・スマホ表示共にスコアが0のページがありました。
問題のページはこちらです。
確かに画像を多用して説明していましたが、まさかそんなに表示速度が遅かったとは。
きっと自分のPCは一度表示した時にキャッシュがたまっていて、その後の表示速度をあげていたのか全然気が付きませんでした。
画像は多いですがひとつずつ全部画像の圧縮をしていきました。
その結果、スコアはここまで回復しました。
スマホで撮影した写真はもちろん、スマホのスクリーンショットの画像もかなりのサイズになることがわかりました。
スマホで撮って気軽にアップはできないですね。
遅いブログは読まれない
表示速度の遅いブログはそれだけで読まれません。
頑張って書いた渾身の力作だと思っていたあの記事も、実は人の目に触れる前に閉じられてしまっているかもしれません。。
表示速度の遅さは内容以前の問題なのです。
特に最近のカメラ技術が向上したスマホの写真やスクリーンショットを多用している記事では顕著に遅くなる傾向があります。
せっかく書いた記事を少しでも多くの読み手に届けるためにできる工夫を忘れないようにしていきたいものです。
以上、『遅いブログは読まれない｜ひどく遅かったブログの表示速度が向上して人並みになった方法まとめ』でした！
