読み込み順序を変える：猫でもできるWordPressサイトの高速化08
Googleの提供するWebサイトの速度計測のサービスについて、以前紹介しました。
PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja
PageSpeed Insightsのスコアアップを目指して取り組みはじめると、多くの方が「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」の評価項目でつまづくようです。WordPressに関する技術ブログをみていても、ここは見て見ぬふりをしている方も多いようですね。
2010年前後くらいから、Webサイトは「レスポンシブウェブデザイン（RWD）」という手法で作られる事が増えています。レスポンシブウェブデザインとは、一言でいうと「PCサイトをユーザーの画面サイズに応じて同じてきちんと表示できるように調整する手法」です。話をシンプルにするために、多少大胆な説明となりましたがご容赦ください。ここでお伝えしたいのは、昨今のWebサイトはそれなりに画面サイズや表示範囲を意識して制作されている、ということです。このベースがあるのとないのとでは以降のアプローチに大きな違いがありますので、運営するサイトがレスポンシブウェブデザインで制作されているかどうかをご確認ください。
さて、一旦レスポンシブウェブデザインについては置いておいて、「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」の攻略方法について考えていきましょう。なぜこの評価項目の対処が放置されがちかというと、単純に「面倒だから」だと推量します。
「スクロールせずに見えるコンテンツ」のことを「ファーストビュー」といいますが、要するにこの「ファーストビュー」用にCSSを切り分けたり、JavaScriptの読み込みを遅延させたり、というのが対処方法です。一度出来上がったWebサイトから、CSSやJavaScriptを切り分けたりするのはかなり手間であり、規模が大きなサイトであれば制作や運用の仕組みから見直す必要もあるでしょう。また、読み込み順序の変更は思わぬところで意図せぬ表示の崩れや動作の不具合を引き起こし、そのデバッグに更に時間がかかる……といった予想が簡単にできます。
これを踏まえて、出来る限りもとのソースには手を加えず、読み込み順だけを変更してくれるプラグインがあります。プラグインの紹介や使い方については他のブログに譲りますが、相性がよければそれだけで解決することもありますので、探してみてください。
筆者の場合、ファーストビューにはそのWebサイトが何についてのWebサイトなのかを知らせる役割や、Webサイト内のナビゲーションを想像させるといった大切な役割があると考えており、それなりに作り込むことも多く、結果として「見て見ぬふり」をすることも多いです。次にコーディングする機会があれば、ファーストビューを切り分けることを意識しながら作ってみようと思います。