スマホ表示が横揺れ！ 原因はGoogle Pagespeed Insightsで見つけよう
(録画しておいたリーガルハイを見返しながら書いているため、古御門先生の口調でお送りしております。新垣結衣さん可愛すぎます)
スマホ表示横揺れ問題。
スマートフォンでサイトにアクセスしたとき、縦にスクロールしようと思ったら横にスクロールされた。
こんな経験は誰しもあるものです。
スイスイと読み進めたいときにひょこひょこ横スクロールされるとひっじょーーーにストレスがたまりますね。
これの改善方法について
書かなきゃなーと思っていたところ、あめたまさんのブログに言及が為されていました。
大抵の場合、後から施したカスタマイズが原因です。
ですが。
原因を見極めるのはなかなか難しい。
横幅が320pxを超えていると横揺れが発生することはわかりますが、いかんせんどこが悪いのかは分かりづらい。
じゃあ、どうすればいいんでしょう？
その答えは思わぬところに落ちていたのです！
答えはGoogleにあり。
Google PageSpeed Insightsというページをご存じでしょうか。
ブログを高速化しようと試みたことのあるブロガーさんなら何度もお世話になっていることでしょう。
使ったことがないブロガーさんはぜひ一度使ってみるのがよろしい。
そうですね。
お前のブログのここがあかんのや！ ここを直せや！ 表示遅いんじゃ！ もっとはよせえや！
そんな厳しくも優しいダメ出しをしてくれるサイトですね。
アクセスして自分のサイトのURLをぽんと入力すれば、はい。
ずらずらずらっと問題点が列挙されます。レンダリングブロックがなんちゃらとか、CSSの最適化がどうとか、画像が重いんじゃコラとか。
もちろんそれに逐一対応するのもブロガーとして生まれた者に課せられた使命ですが、今回の本題はそこではありません。
実はこのページ、下の方にスクロールしていくと、ユーザー エクスペリエンスという項目があるんです。
なんと！
全部書いてあるじゃないですか！
どの要素がはみ出しているか一目瞭然です。そこをはみ出さないように修正すればよろしい。
これで横揺れとも無縁です。さらば横揺れ。君のことは忘れない。
まとめ
Google PageSpeed Insightsは便利。Google様々です。
ところで、僕のサイト、is_mobile関数の振り分けがうまくいってないみたいで、ときどきiPhoneで見てるのにPC用サイトが表示されちゃうんです。どなたか優しい方、原因を教えてください。
Google先生でもいいから！ だれかああああ！
ちゃっちゃらっちゃっちゃっちゃらっ！ ﾘｰｺﾞｫﾊｧｲ！