読者です 読者をやめる 読者になる 読者になる

あれこれやそれこれ

雑記系ブログのさらなる高みを目指すブログ

ブログのデザインテーマはモバイルサイトの速度評価にどれほど影響があるか

☆ブログ☆ ☆ブログ☆-初心者さん向け
このブログについて・管理人サキの自己紹介
・プライバシーポリシー、免責事項、著作権について
・問い合わせフォーム
・カテゴリ別の一覧はここから

ブログの表示速度って気になる。

f:id:masaki709:20160504135447j:plain

※はてなブロガー向け記事です。

はじめに

ブログの表示(読み込み速度)が遅いというのはユーザー満足や広告の表示含め気になる部分だと思います。もちろん、インターネットの速度やブラウザの問題、スマホやパソコンなどのハード面の問題もあるかもしれませんが、デザインなどブログ自体の構成の問題ももちろん関係があるとおもいます。

コンテンツの最適化、などといって画像を小さくしたり複雑なコードを使っていたりやり方はいろいろあると思うんですが、そのへんは詳しい人にお任せして・・・僕になにかできることないのかな、と考えました。

 「ブログのデザインテーマっていっぱいあるけど、どれを選ぶかによって表示速度って変わってくるのかな」

と考えたのがこの記事のきっかけです。ウェブサイトの速度を評価するページにデザインを変えながらアクセスしてみて、それぞれの点数を出してみたらどうだろうと。

 

方法として、Googleの評価サイト「PageSpeed Insights」を使います。

PageSpeed Insights

f:id:masaki709:20160504140757p:plain

自分のブログのURLを入れるだけでモバイル、パソコンのサイト評価をしてくれます。特にGoogleではモバイルサイトについて速度を重視しているのもわかります。

PageSpeed Insights は、ページを解析し、モバイル ネットワークで 1 秒未満でページがレンダリングされるようにする場合の推奨事項にそのページが準拠しているかどうかを確認します。調査によれば、1 秒を超える遅延があるとユーザーの思考の流れが中断し、ユーザー エクスペリエンスが低下します。Google では、デバイスやネットワークの種類に関わらず、ユーザーのページへの関心を持続させ、最適なエクスペリエンスを提供することを目標としています。

PageSpeed Insights でのモバイル解析  |  PageSpeed Insights  |  Google Developers

評価後に修正を勧められる、修正していくことで評価が上がる=表示速度が改善されることを目的としたものです。点数低いぜ君のサイトは、では終わらせないのがさすがGoogleさん。一生ついていきます!!

実験方法

方法としてはこんな感じ

  1. テーマストアからテーマを選び自ブログにインストール。

    テーマ ストア - はてなブログ

    このブログで実験するのは大変なので、こっそり運営しているブログ(はてな)をつかいました。※全然更新してなかったので実験後削除しましたごめん。
  2. 「PageSpeed Insights」で計測
    ブログのURLを貼り付けて【分析】ボタンを押すだけで結果が表示されます。

    PageSpeed Insights

  3. 結果をスクショで保存します。
  4. この記事で結果を並べます。

こんな感じ。他にもサイトを評価するものはいろいろあったので、こんなのでも実験したんですけど・・・

tools.pingdom.com

f:id:masaki709:20160504141838p:plain

ここの「Load time」で評価しようとしたら、誤差がすごいんですよ。同じテーマでも早い時は4秒台前半、遅い時は6秒台と結果にばらつきがすごかったので。これはやめておきます。秒数で評価するのをやめたのはここが理由です。

※以下出てくるデザインテーマをすべてこのサイトでチェックしてみましたが、すべて4秒台後半から6秒代後半で収まりました。点数による違いは大きくても2秒、ということで問題ないと思います。

実験開始

Innocent 56点

Innocent - テーマ ストア - はてなブログ

f:id:masaki709:20160504145844p:plain

テーマ人気順第1位。

Blank をベースに更なる改良を加えたシンプルでカスタマイズ性の高いレスポンシブデザイン対応のテーマです。

f:id:masaki709:20160504142743p:plain

 DUDE 56点

DUDE - テーマ ストア - はてなブログ

f:id:masaki709:20160504145928p:plain

テーマ人気順第2位

DUDEは”気取ったオシャレ”がコンセプトの、シンプルな2カラムテーマです。カスタマイズ方法についてはLITERALLYのページをご覧ください。

f:id:masaki709:20160504142936p:plain

Blank 58点

Blank - テーマ ストア - はてなブログ

f:id:masaki709:20160504150019p:plain

テーマ人気順第3位

カスタマイズ性を重視したシンプルな2カラムテーマです。レスポンシブデザインに対応しています。

f:id:masaki709:20160504143112p:plain

デザインテーマの1位から3位まではこんな感じでした。このあたりのデザインは確かによく見かけますよね。もう少し見ていくことにします。

Brooklyn 63点

Brooklyn - テーマ ストア - はてなブログ

f:id:masaki709:20160504150116p:plain

ブラックとホワイトを基調としたシンプルなデザインのテーマです。
レスポンシブデザインでスマートフォンにも対応しています。

f:id:masaki709:20160504143404p:plain

あっ、タックミーのだ(笑)63点・・・高い。

Material 58点

Material - テーマ ストア - はてなブログ

f:id:masaki709:20160504150211p:plain

さまざまなデバイスで最適に表示される『レスポンシブ対応』

記事が読みやすい『ワンカラム』レイアウト

f:id:masaki709:20160504143807p:plain

Spirea 55点

Spirea - テーマ ストア - はてなブログ

f:id:masaki709:20160504150328p:plain

カスタマイズ性の高い便利なデザインデーマです。

f:id:masaki709:20160504143944p:plain

「いつ俺」のshunくんのですね。手が込んでいる分速度評価が下がるのかな

レスポンシブルー 62点

レスポンシブルー - テーマ ストア - はてなブログ

f:id:masaki709:20160504150424p:plain

レスポンシブで青色のテーマです。

f:id:masaki709:20160504144400p:plain

おっ、意外と好評価。マテリアルと似てるのにこんなに点数違うんだ。

Written 57点

Written - テーマ ストア - はてなブログ

f:id:masaki709:20160504150515p:plain

シンプルな2カラムテーマです。文章や写真をすっきり見せたい方に。
レスポンシブデザインに対応しています。

f:id:masaki709:20160504144602p:plain

デザインはシンプルなんだけど点数とはあんまり関係がないということかな。

Rouge 58点

Rouge - テーマ ストア - はてなブログ

f:id:masaki709:20160504150604p:plain

シンプル、そしてレスポンシブデザイン対応のテーマです。

印象的なヘッダーと、サイドバー領域を多く表示することの両立を目指しました。

アクセントカラーの変更のしやすさも特徴です。

f:id:masaki709:20160504144747p:plain

人気順で9個まで見てきました。似ているのに点数が低いとかシンプルに見えるけど点数は低いとか、ややこしそうなのに点数が良いとかいろいろですね。今までのははてな作者さんがそれぞれ作られた分です。(勝手に紹介しちゃってすみません)

次からははてなブログの公式テーマを3つほど見てみます。

Epic 62点

Epic - テーマ ストア - はてなブログ

f:id:masaki709:20160504150658p:plain

f:id:masaki709:20160504145131p:plain

おおっ!おおっ!60点超えてる!さすが公式!!

Evergreen 56点

Evergreen - テーマ ストア - はてなブログ

f:id:masaki709:20160504150817p:plain

f:id:masaki709:20160504145234p:plain

 公式でもいろいろ・・・最後の一つはコッテコテのを見てみたい。

Donuts 63点

Donuts - テーマ ストア - はてなブログ

f:id:masaki709:20160504145504p:plain

ね、派手でしょ?画像データいっぱいっぽいでしょ?

f:id:masaki709:20160504145604p:plain

関係なかった・・・

最後に

この実験をするまでは「色が多い、見た目が複雑=速度が遅い」と思ってたんですが、実際実験をしてみたらあまり関係がないことがわかりました。

また、この実験はあくまでも「数記事しか書いていないブログ、デザインをインストール後は一切手を加えていない」状態で計測しています。これをさらにカスタマイズすることで実際の速度などについては当然変わってくると思います。

PageSpeed Insightsも同じテーマで数回計測した場合数点の誤差は発生しましたので、あくまでも個人の実験によるデータであり、デザインテーマの優劣について主張したいのではなく、Googleの評価がテーマによって変わるんだということを結論としてこの実験をご理解いただきたいです。

結局は「自分の好きなデザインで自分の書きたいものを書く」のがブログですから。これを見たから「このデザインにしろ」とか言うつもりはありませんので。

さて、「PageSpeed Insights」で自分のブログをチェックした時、結果の下には「こうしたほうがいいよ」というアドバイスが載ります。これはこのブログの評価。

f:id:masaki709:20160504152228p:plain

これを見ながら修正していくのがいいんでしょうね(できないんですけどw)

で、君のブログはどうだい?

 

Google AdSense 成功の法則 57

Google AdSense 成功の法則 57

 

 

 ああっ!ひーたむさんの本、Amazonに載ったので期待age

あのね、わたしがねちゃってても、あとででいいからだっこして

あのね、わたしがねちゃってても、あとででいいからだっこして