ブログをスマホで読みやすくしよう〜モバイルフレンドリー・速度測定・行間〜
【ブログをスマホで読みやすくしよう〜モバイルフレンドリー・速度測定・行間〜】
ブログやサイトをスマホで見る人はどんどん増えてきています。
この傾向はさらに広がると予想されます。
ちなみに僕のブログは、
現在 Desktop→55.46% Mobile→40.30% Tablet→4.24% という比率です。
そしてMobileの方が、ページビューや滞在時間が長いです。
そのためサイト作りには、
モバイルフレンドリー（モバイル端末に最適化）は必須です。
なお自分のサイトがモバイルフレンドリーかどうかは
のGoogleのサイトで確認できます。
モバイルフレンドリーになってると↓の表示になります。
でもモバイルフレンドリーというだけでは足りず
訪問者側の視点に立ったサイト作りが必要です。
まずは表示速度です。
SEO対策では表示速度を早くするのは有名ですが、
SEOに必要だからやるということではなく
あくまでも訪問者の方のことを考えて必要だということですね。
速度を計測できるサイトのおすすめを２つ紹介します。
どちらも登録不要で、計測したいURLを入れて測定ボタンを押すだけです。
まずはGoogleのPageSpeed Insights。
・PageSpeed Insights – Google Developers
どこを修正すればいいかを的確に教えてくれます。
↓は当ブログトップページの現時点の計測結果です。
点数低いですが（汗）、これでもテコ入れして
モバイルは若干上がりました（笑）
あとは削除するパーツを増やすしかないかもしれません。
パソコンは点数よりも速度重視のキャッシュ系を重視したあと
少し点数が下がってました。
もうひとつおすすめの速度計測サイトは、「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% へ
↓
今後ページビューや滞在時間を見ながら
またいろいろ手を加えていきたいと思います。
参考になればうれしいです。
コメント