PageSpeed Insights のスコアを上げる Tips

Webマスターであれば、誰しもが Google 検索結果の順位は気になりますよね。となれば、PageSpeed Insights のスコアを気にしないわけにはいきません。
PageSpeed Insights を使用してみると、多くの場合、画像が重い、ファイル転送時には圧縮、JS / CSS に無駄があるなどのフィードバックが得られるわけです。
しかし、当然ながら Google の検索結果順位を上げるための対策は、こうした PageSpeed Insights のフォームに URL を入力して得られるフィードバック以外にまだまだあるわけです。
今回はそのうちの一つ「表示する際にガタガタ動きながら完成するページは駄目」（意訳）という評価項目について紹介します。

これは、Google の公式ヘルプにも載っている評価項目なのですが、最近 Google は、ウェブサイトに関するドキュメントを公開する度に枕詞のように『スマホで快適な』と書いています。
で、この『スマホで快適な』ページは、ガタガタ動きながら表示なんかしない、『タップしたりスクロールしようとしたら、レイアウトが変わって操作ミスを起こしてしまうから、ページを読み始めてから読み込む終わるまで、レイアウトが動くようなページを作るな。』ということです。
通信の順序として、HTML ファイルが先に読み込まれ、その HTML に記載された付随する CSS、JS、画像なんかが続いて読み込まれてくるわけです。この、後から読み込まれるファイルに表示上の縦横サイズがある場合、HTML上で最初からその領域を確保していないと読み込む前は空間のサイズ 0 で、読み込まれてはじめてその画像などがはまる空間が作られ、他の部分がその分押しのけられるということになります。
Google は、これがスマホでの操作性を損ねるので駄目なんですといっています。

HTML に付帯して読み込まれる全ての表示部品については、HTML 上に必ずその領域を絶対値として確保（width、height を設定）しましょう。
レスポンシブウェブデザインでは、どうしても “width:100%” のように相対値を使う事が避けられない場合もありますが、この場合でも、max / min 値を設定し、外枠は絶対値にするなどして、レイアウトががたつかないようにする必要があるでしょう。

コーディングは、単に HTML のタグや構文を知ってる、書けるだけではなく、パフォーマンス、リスク対応などまでできないと駄目ですね。