はじめに
今回の記事はブログの表示スピードに関する考察です。ご存知の内容でしたらスルーして頂き、他の面白いブログに遠慮なく飛んで行って下さいね。
はてなブログは移転前のF2Cブログに比べ表示が遅いと感じてましたが、割とサクサク表示されるはてなユーザさんのサイトが多数あります。
きっとSEOを重視しブログの表示スピードをアップする為、いろいろ工夫しているのではと思いました。
はてなブログに限った話ではありませんが、どんなブログデザインが表示スピードに対して有利なのかを少し探ってみました。
なぜ表示スピードが求められるのか
SEOに強いサイトは、内容の充実が第一条件ですが、訪問者が「面白かった≒美味しかった」と思い、また覗きに来ようと思うかどうかだと思います。
内容の面白さを支えるものが「読みやすさ」「見やすさ」「使いやすさ」の3つです。そして、これを効果的に増幅させる為には「速さ」が必要です。
「読みやすさ」「見やすさ」「使いやすさ」「速さ」を具現化するのが
「Webデザイン」で、「テキスト」「フォント」「画像」等の材料を「HTML」「CSS」「jQuery」等で上手く料理できているかがポイントです。
しかし、何の対策もやってないサイトは情報がすぐ現れない為、せっかくの訪問者は別の場所に離れて行ってしまいます。
どれくらいで離れるかについて、Googleは
「完全表示に3秒以上かかると53％のユーザが離れる」
「表示速度が7秒になると直帰率が113％上昇する」
というデータを公開してます。
時間をかけ思いを込めて作ったブログも、表示が遅いと、訪問者は見るのをあきらめ、別のページに去って行きます。これは非常に残念ですね。
"あトん"もこのブログをもう少しマシにしたいと思ってますが、これ以上カスタマイズしてもやぶ蛇になると思い、先人達のブログを参考にしたく、表示スピードを測定してみることにしました。
表示スピードの測定・評価方法
サイトの計測ツールはいろいろとありますが、Googleが提供している3つのツールを少し紹介します。ご存知の方はここは読み飛ばして下さい。
1つ目「Lighthouse」
「Lighthouse」は①～④の項目を評価するアプリです。
①Progressive Web App：プログレッシブ ウェブ アプリ
②Performance：パフォーマンス
③Accessibility：アクセシビリティ
④Best Practices：ベスト プラクティス
使用方法
Chromeに「Lighthouse」の拡張機能を入れ、ツールバーの Lighthouse アイコンをクリックします。
設定を確認したら「Generete report」を実行し、評価スタートです。
１分若で測定が終り評価結果が表示されます。
下記はGoogleを測定した結果ですが、パフォーマンスは92ポイントと好成績です。
使用上の注意
「Lighthouse」は良くコケます。特に最初の実行でパフォーマンス0表示が多く、測定値のばらつきも大きいです。ひどいとエラーで止まる場合があります。
「Lighthouse」はプログレッシブ ウェブ アプリの評価に重点を置いている、とGoolgeは言ってますので、アプリ開発者向けのツールと考えた方がよいですね。
よって、一応一通り測定はしましたが、結果の公開は差し控えます。
2つ目「Test My Site」
このアプリは割と有名ですね。皆さんも使ったことがあると思います。
使用方法
ブログカードをクリックすると「Test My Site」が開きます。
テストするサイトのアドレスを入力して実行します。
試しに「はてなブログ」トップページのスピードをチェックしてみましょう。
約1分で測定結果が表示されます。
「はてなブログ」のトップページは要改善で良い結果ではありませんでした。
同じ業界内での比較でも、10秒は遅い方のようです。
少し修正すれば、何と5秒短縮できる見込みとのことです。
1.適切な形式と圧縮処理を採用すれば、データ量を大幅に削減し、サイトのパフォーマンスを向上させることができます。
2.JavaScript は、非同期化するか、最初のレンダリングが終わるまで保留しましょう。
3.キャッシュが有効になっていれば、2 回目以降はページを効率的に読み込むことができます。
使用上の注意
「Test My Site」のテスト結果もある程度ばらつくので注意が必要です。
同時間帯での実行では数秒の変化はありますが、日をまたいでテストした時は2倍くらい悪化した時があります。
ばらつく原因はいろいろ考えられますが、読み込む画像に大きく影響されるようです。
例えば、強制的に入る広告で、データ量が多いものがたまたま入ってしまうとスピードが悪化します。
下に表示しているのは、はてなブログの人気テーマをテストする為、テーマを呼び込んで実施した時の結果です。
特大の広告データが呼び込まれた為、読み込みに12秒もかかってます。（笑）
なお、「Test My Site」は連続テストの回数に制限があり、所定回数を超えると「自動車」「バス」「道路標識」「橋」「アパート」「お店の外観」をクリックし、ロボットでないことを証明しなければなりません。
100サイト以上を数回テストしたので、タイルパターンを覚えてしまいました。（笑）
3つ目「PageSpeed Insights」
「PageSpeed Insights」はお手軽なので一番使われているようです。
使用方法
ブログカードをクリックしPageSpeed Toolsを開きます。テストするサイトのアドレスを入力し実行してください。
試しに「はてブニュース」のスピードをテストしてみます。
テスト結果
「はてブニュース」はザーバ側が最適化されているのか、画像が無い為か、めちゃくちゃ良い結果が出てます。
モバイル：89ポイント パソコン：96ポイント
次に本家の「はてなブックマーク」のスピードを測定してみました。
「あれっ？」と思うくらい悪いですね。
モバイル：36ポイント パソコン：6ポイント
テスト結果は３種類のアイコンで悪さ加減を教えてくれます。
「はてなブックマーク」は最近リニューアルされたようですが、ユーザからは「改悪だ！」との声が多数上がっているようですね。スピードにも何か影響があるのでしょうか。
ブログの表示スピード比較
ではブログの表示スピードを「PageSpeed Insights」と「Test My Site」で測定した結果を順番に説明します。
「PageSpeed Insights」の総合判定は、モバイルとパソコンの数値の加重平均を取りました。加重平均で計算した理由は、GoogleがRWD（レスポンシブ ウェブ デザイン）を強く推奨しているからです。
加重平均の計算方法は、モバイル：70%、PC：30%としました。
また、表示スピードの差を考察する為、失礼ながらHTMLとテーマ独自のCSSのデータ量も参考に調べました。（システムが読み込む共通のCSSは除いてます）
調査対象にしたブログテーマやブログサイトは、参考になるなー！と”あトん”が個人的に思ったものです。探し回るとキリがないので、はてなブログは90サイト程度に絞りました。
一見ブログの表示スピードランキングのように見えますが、表示画像（広告）、コンテンツ量がそれぞれ違うので、素の状態の比較ではないことをご了承下さい。
測定は複数回行い、良い方の結果を残しました。
まず大手サイトはどれくらいのスピードか遊んでみました。
大手サイトの表示スピード
予想はしてましたが、Googleはほぼ満点ですね。マイクロソフトが頑張っているのが少し意外でした。
次に、はてなブログのテーマを測定してみました。
はてなブログ デザインテーマの表示スピード
第1位は9月1日に「たにやん」さんがアップされた「SIMPLE CARD YAN」でした。
初心者で1ケ月で作ったとのことですが、凄いですね。
モバイル：70ポイント パソコン：85ポイント
但し「SIMPLE CARD YAN」がカスタマイズに強いかは未知数です。
次に、はてなブログ50サイトを比較した結果を表示しますが、表示スピードが速いブログのテーマは「こどみす」さんの「Minimalism」や「Codomisu Flat」をカスタマイズしたものが多いようです。
続いて、はてなユーザさんのブログを測定してみました。
はてなブログ表示スピード比較
それでは前半/後半に分けて結果を表示します。
前半25サイトの結果
測定前は「つばさ」さんの「つばさのーと」が最速だと予測してたのですが「カツヲ」さんの「晴れ時々晴天なり」が一歩抜きんでてました。
「カツヲ」さんのブログは、CSSが圧縮されHTMLに埋め込まれており、かなり作り込まれてました。「シロマ 」さんのブログ「NO TITLE」も同じ手法ですが「Test My Site 」では唯一3秒をたたき出しており最速でした。
後半25サイトの結果
"あトん"のブログ「Bumble-Bee」は50番目です。最下位ではありません。50サイト以上テストしたのですが、たまたまキリ良く50番目だっただけです。（笑）
正直に言うと、最初http://atn.hateblo.jpでのテストはモバイル/パソコン共に0ポイントでした。次にURLをhttp://atn.hateblo.jp/archiveに修正したら、45.7ポイントでした。
無料ユーザが何も考えずにカスタマイズした結果ですね。
表示スピードの改善方法
表示が遅いブログはどこを直せば早くなるのでしょうか。改善方法は検索すると山のように出て来ますが、参考になる先人のサイトを紹介させて頂きます。
（解説もせず手抜きですみません）
まとめ
はてなブログの表示スピードを速くする為に先人がやった改善方法のポイントを、
難易度別に松竹梅にまとめてみました。
＜梅＞ 難易度低
・画像圧縮、表示記事数削減
・はてなスター削除、読者ボタン削除、シェアボタン削除
・シェア数非表示、フォロアー数非表示
・Proのみ（広告削除、ヘッダー/フッタ非表示）
＜竹＞ 難易度中
・未使用のCSS・JSの整理・削除
・圧縮したCSSとJSをHTML内に組込む
＜松＞ 難易度高
・無駄な記述がないオリジナルテーマを書く
究極はデザインテーマをカスタマイズせず、自分でオリジナルテーマを作ることだと思います。
「たにやん」さんは１カ月で作ったとのことですが、Webの知識に乏しい”あトん”は半年頑張っても出来るかどうか自信がありません。
でもちょっと興味が湧いて来たので、勉強してみようかなと思います。
年内にこれに関する進捗ブログが出てこなかったら、挫折したと思って笑って下さい。
なお、このブログの表示スピードはブログを書くのに疲れてしまったので、ちっとも改善しておりません。（笑）
2017/9/3追記：モヒートが飲みたくなったので、ヘッダー画像を軽いものに変更しました。モヒート効果で、モバイルが43→46、パソコンが52→53にほんの少し良くなりました。（嘘です。単にモヒートが飲みたかっただけです。）
2017/9/4追記：サイドバーのAuthorの画像を圧縮し軽くしました。
変更後、モバイルが66、パソコンが76まで改善されました。
サイトのスピードアップは使用画像容量縮小が手っ取り早い対策だと分かりました。
2019/8/10追記 『晴れ時々晴天なり』を運営されているカツヲさんは2019/7/25にWordPressに移転されました。スピード1位の方は、かなり危機感を持たれていたようですね。
補足
はてなブログのデザインテーマについて表示スピードを測定した結果を示しましたが、申し送りがあります。
本当は同じ内容（コンテンツ）で測定したかったのですが、"あトん"は無料ユーザなので、広告が強制的に入ってしまいます。
この広告がくせもので、測定を大きくばらつかせてしまいます。
Proの方は広告を非表示に出来るので、もしProの方で表示スピードに興味がありお時間がある方は、測定結果を公開してもらえると嬉しいです。
おまけ
その他適当に測定したサイトを載せておきます。
はてな系のサイトは遅いですが、Webのデザインや製作を丁寧に解説している「サルワカ」さんは表示スピードもとっても速く、プロの方は凄いと思いました。
