ブログの表示速度って気になる。
※はてなブロガー向け記事です。
はじめに
ブログの表示（読み込み速度）が遅いというのはユーザー満足や広告の表示含め気になる部分だと思います。もちろん、インターネットの速度やブラウザの問題、スマホやパソコンなどのハード面の問題もあるかもしれませんが、デザインなどブログ自体の構成の問題ももちろん関係があるとおもいます。
コンテンツの最適化、などといって画像を小さくしたり複雑なコードを使っていたりやり方はいろいろあると思うんですが、そのへんは詳しい人にお任せして・・・僕になにかできることないのかな、と考えました。
「ブログのデザインテーマっていっぱいあるけど、どれを選ぶかによって表示速度って変わってくるのかな」
と考えたのがこの記事のきっかけです。ウェブサイトの速度を評価するページにデザインを変えながらアクセスしてみて、それぞれの点数を出してみたらどうだろうと。
方法として、Googleの評価サイト「PageSpeed Insights」を使います。
自分のブログのＵＲＬを入れるだけでモバイル、パソコンのサイト評価をしてくれます。特にGoogleではモバイルサイトについて速度を重視しているのもわかります。
PageSpeed Insights は、ページを解析し、モバイル ネットワークで 1 秒未満でページがレンダリングされるようにする場合の推奨事項にそのページが準拠しているかどうかを確認します。調査によれば、1 秒を超える遅延があるとユーザーの思考の流れが中断し、ユーザー エクスペリエンスが低下します。Google では、デバイスやネットワークの種類に関わらず、ユーザーのページへの関心を持続させ、最適なエクスペリエンスを提供することを目標としています。
PageSpeed Insights でのモバイル解析 | PageSpeed Insights | Google Developers
評価後に修正を勧められる、修正していくことで評価が上がる＝表示速度が改善されることを目的としたものです。点数低いぜ君のサイトは、では終わらせないのがさすがGoogleさん。一生ついていきます！！
実験方法
方法としてはこんな感じ
- テーマストアからテーマを選び自ブログにインストール。
このブログで実験するのは大変なので、こっそり運営しているブログ（はてな）をつかいました。※全然更新してなかったので実験後削除しましたごめん。 - 「PageSpeed Insights」で計測
ブログのＵＲＬを貼り付けて【分析】ボタンを押すだけで結果が表示されます。
- 結果をスクショで保存します。
- この記事で結果を並べます。
こんな感じ。他にもサイトを評価するものはいろいろあったので、こんなのでも実験したんですけど・・・
ここの「Load time」で評価しようとしたら、誤差がすごいんですよ。同じテーマでも早い時は4秒台前半、遅い時は6秒台と結果にばらつきがすごかったので。これはやめておきます。秒数で評価するのをやめたのはここが理由です。
※以下出てくるデザインテーマをすべてこのサイトでチェックしてみましたが、すべて4秒台後半から６秒代後半で収まりました。点数による違いは大きくても２秒、ということで問題ないと思います。
実験開始
Innocent 56点
テーマ人気順第１位。
Blank をベースに更なる改良を加えたシンプルでカスタマイズ性の高いレスポンシブデザイン対応のテーマです。
DUDE 56点
テーマ人気順第２位
DUDEは”気取ったオシャレ”がコンセプトの、シンプルな2カラムテーマです。カスタマイズ方法についてはLITERALLYのページをご覧ください。
Blank 58点
テーマ人気順第３位
カスタマイズ性を重視したシンプルな2カラムテーマです。レスポンシブデザインに対応しています。
デザインテーマの１位から３位まではこんな感じでした。このあたりのデザインは確かによく見かけますよね。もう少し見ていくことにします。
Brooklyn 63点
ブラックとホワイトを基調としたシンプルなデザインのテーマです。
レスポンシブデザインでスマートフォンにも対応しています。
あっ、タックミーのだ（笑）６３点・・・高い。
Material 58点
さまざまなデバイスで最適に表示される『レスポンシブ対応』
記事が読みやすい『ワンカラム』レイアウト
Spirea 55点
カスタマイズ性の高い便利なデザインデーマです。
「いつ俺」のshunくんのですね。手が込んでいる分速度評価が下がるのかな
レスポンシブルー 62点
レスポンシブで青色のテーマです。
おっ、意外と好評価。マテリアルと似てるのにこんなに点数違うんだ。
Written 57点
シンプルな2カラムテーマです。文章や写真をすっきり見せたい方に。
レスポンシブデザインに対応しています。
デザインはシンプルなんだけど点数とはあんまり関係がないということかな。
Rouge 58点
シンプル、そしてレスポンシブデザイン対応のテーマです。
印象的なヘッダーと、サイドバー領域を多く表示することの両立を目指しました。
アクセントカラーの変更のしやすさも特徴です。
人気順で９個まで見てきました。似ているのに点数が低いとかシンプルに見えるけど点数は低いとか、ややこしそうなのに点数が良いとかいろいろですね。今までのははてな作者さんがそれぞれ作られた分です。（勝手に紹介しちゃってすみません）
次からははてなブログの公式テーマを３つほど見てみます。
Epic 62点
おおっ！おおっ！６０点超えてる！さすが公式！！
Evergreen 56点
公式でもいろいろ・・・最後の一つはコッテコテのを見てみたい。
Donuts 63点
ね、派手でしょ？画像データいっぱいっぽいでしょ？
関係なかった・・・
最後に
この実験をするまでは「色が多い、見た目が複雑＝速度が遅い」と思ってたんですが、実際実験をしてみたらあまり関係がないことがわかりました。
また、この実験はあくまでも「数記事しか書いていないブログ、デザインをインストール後は一切手を加えていない」状態で計測しています。これをさらにカスタマイズすることで実際の速度などについては当然変わってくると思います。
PageSpeed Insightsも同じテーマで数回計測した場合数点の誤差は発生しましたので、あくまでも個人の実験によるデータであり、デザインテーマの優劣について主張したいのではなく、Googleの評価がテーマによって変わるんだということを結論としてこの実験をご理解いただきたいです。
結局は「自分の好きなデザインで自分の書きたいものを書く」のがブログですから。これを見たから「このデザインにしろ」とか言うつもりはありませんので。
さて、「PageSpeed Insights」で自分のブログをチェックした時、結果の下には「こうしたほうがいいよ」というアドバイスが載ります。これはこのブログの評価。
これを見ながら修正していくのがいいんでしょうね（できないんですけどｗ）
で、君のブログはどうだい？
ああっ！ひーたむさんの本、Amazonに載ったので期待age