スマホのスクロールがスムーズになるＣＳＳ

こんにちは。FC2ブロガーのＭです。

先週、友人から自分が運営してるブログのひとつ「ゆうらりHappySmile 」についてページの読み込みが遅いし重たくてスマホで非常に見づらいよ！というご指摘を受けました。

ボク自身が使ってるiPhoneでは特に不具合を感じたことがなかったので、スマホの機種によってブログの見え方は全然ちがうものなんだなぁって。

大変勉強になりました。と同時に、ページの読み込み速度を改善させるべく、ずっとPC画面とにらめっこ。HTMLやCSS、JavaScriptなど、あらゆる構文のミスチェックを気がおかしくなるまで延々と取り組んできました。

ブログのページ読み込み速度が改善しました

これまで、ふと思いついてはその度にブログのカスタマイズを積み重ねてきたのだけれど、今回あらためて見直してみると見つかるもんですねぇ。ありとあらゆる見落としが…（汗）

無駄を省いたり、つけ忘れたタグを追加したり。いろいろ試みた結果、ページの読み込み速度に関してはGoogleさんから高得点を頂けるほどにまで改善できましたよ(o^^o)

しかーし！実際にスマホで使い勝手をチェックする必要性があることは上に書いた通りです。

で、むかし機種変する前の古いiPhoneを引っ張り出してきて充電。これで不具合がないか試してみることにしました。機種変更してもネットは見れますからね。

充電が終わり、いざ自分のブログを見てみる。すると、ブログの読み込みは前よりも明らかに改善されたようでした。まあ、機種変前のiPhoneはアップデートしてないのである程度の重さは仕方ないのかなぁって。

それに、FC2ブログはAMPにも対応してないし、キャッシュの有効期限など細かく設定するような小技を実装するのも難しい。自分としては、使いづらいFC2ブログを可能な限り高速化させるための施策を施したつもりです。

スマホでブログを見た時にスクロールがスムーズでない時ありませんか？

ところが、気になることがもう一つだけありました。

それは、自分のブログをスマートフォン(古いiPhone)で開いたときに、下へのスクロールがやけに遅いというか突っかかるような感じがするんです。

これはどう見ても、読み込み速度だけの問題じゃないような気がしました。

そこで改善を図るべく、雲をつかむような苦労を重ねながらやっと調べ上げ、とっておきの方策を発見したのです。

スマホのスクロールがスムーズになる設定

とっておきの方策とは一体どんなものだと思いますか？

それは、たった１行のCSSを記述するだけだったのです。

これだけの設定でスマホのスクロールが劇的にスムーズになったのを確認できたのです！！

とくに、カスタマイズ性の乏しさに限界を感じているFC2ブロガーにはぜひとも記述しておいてもらいたいCSSはこちら。

html {-webkit-overflow-scrolling: touch;}

これを書き加えてみて下さい。まだ、ページの読み込みが終わってなくてもスマホのスクロールはすいすい下まで動きやすくなりますよ！！