PageSpeed Insights のスコアを高める基本的かつ高度なコーディングとは

“兎にも角にも、さっさとページを表示しなさい” と、Google は枕詞のように唱えているわけですが、単に我々のお尻を叩くだけではなく、結構具体的な示唆を与えてくれてもいます。
Google の様々なツールの公式ヘルプや公式ガイドは、実は結構改訂が入るので、定期的にチェックすることをお勧めします。

主にフロントエンド側、HTML、CSS、Javascript といったものを手がける、コーダーやフロントエンドエンジニアと呼ばれる人たちにも、技術レベルの差は大きくあります。単に、『HTML5 と CSS3 でページ書けます』と言っても、(Google が求めている事を鑑みた場合)何のスキルレベルも知ることができない情報です。
Google が言うまでも無く、HTML 等の書き方一つで、パフォーマンス(結果としてページ表示速度)に雲泥の差が出ます。例えば以下の様な要素があります。

  • 同じ見た目でも、ネスト(入れ子)にしたタグの階層が浅いか深いか。
  • Javascript が制御する DOM セレクタの書き方。また、Javascript が制御しやすい DOM 設計の有無。
  • 出力効率が高くなる処理順の設計。例えばアニメーションなど、複雑なレンダリングをメインフロー内に組み込んでいるなどは特に致命的。
  • CSS の効率的な書き方。
  • 使っていない CSS ルール、効率的でない HTML class 属性ルールなどの存在。

 

以上について、何を言っているのかが理解でき、かつ、実装できるコーダーやフロントエンドエンジニアに巡り会えることができれば、かなり頼もしい戦力かと思います。
PageSpeed Insights で通信を圧縮するとか、画像を軽量化するといった比較的簡単な改善をやりきったら、次はこのようなことに踏み込んでいくことになるでしょう。