ブログをスマホで読みやすくしよう〜モバイルフレンドリー・速度測定・行間〜

【ブログをスマホで読みやすくしよう〜モバイルフレンドリー・速度測定・行間〜】
　
ブログやサイトをスマホで見る人はどんどん増えてきています。
この傾向はさらに広がると予想されます。

ちなみに僕のブログは、
現在 Desktop→55.46% Mobile→40.30% Tablet→4.24% という比率です。

そしてMobileの方が、ページビューや滞在時間が長いです。

そのためサイト作りには、
モバイルフレンドリー（モバイル端末に最適化）は必須です。

なお自分のサイトがモバイルフレンドリーかどうかは
のGoogleのサイトで確認できます。

・モバイル フレンドリー テスト – Google

モバイルフレンドリーになってると↓の表示になります。

でもモバイルフレンドリーというだけでは足りず
訪問者側の視点に立ったサイト作りが必要です。

まずは表示速度です。

SEO対策では表示速度を早くするのは有名ですが、
SEOに必要だからやるということではなく
あくまでも訪問者の方のことを考えて必要だということですね。

速度を計測できるサイトのおすすめを２つ紹介します。
どちらも登録不要で、計測したいURLを入れて測定ボタンを押すだけです。

まずはGoogleのPageSpeed Insights。

・PageSpeed Insights – Google Developers

どこを修正すればいいかを的確に教えてくれます。

↓は当ブログトップページの現時点の計測結果です。

点数低いですが（汗）、これでもテコ入れして
モバイルは若干上がりました（笑）

あとは削除するパーツを増やすしかないかもしれません。

パソコンは点数よりも速度重視のキャッシュ系を重視したあと
少し点数が下がってました。

もうひとつおすすめの速度計測サイトは、「GTmetrix」です。

・GTmetrix

Page Speed GradeとYSlow Gradeの計測結果を同時見ることができます。

Page Speed Gradeは、Googleのサイト速度計測サービスの評価。
YSlow Gradeは、Yahoo社のサイト速度計測サービスの評価。

↓は当ブログトップページの現時点の計測結果です。

Page Speed Gradeは９２％のＡ判定が出てましたが、
キャッシュ系のプラグインを入れて速度アップを優先した結果
８７％のＢになりました。

逆にYSlow Gradeは６０％台のＤから７２％のＣにアップしました。

ちなみに速度は以前は１３秒以上などになってました。
（Page load timeのところを見ます）

トップページで７秒台、個別ページだと６秒台ぐらいです。
１秒台の表示はほど遠いかもですがこちらもまだ改善が課題です。

速度に関しては以上です。

あとは、読みやすさを考えて行間を調整しました。

line-height:240% から　line-height:170% へ

↓

今後ページビューや滞在時間を見ながら
またいろいろ手を加えていきたいと思います。

参考になればうれしいです。