【実践技術書】Webサイトパフォーマンス 実践入門

高速なWebページをつくるための施策や、メンテナンス方法などを取りまとめた本です。 実践入門とあるように、すぐに実践できるテクニック的なことを中心に広く浅くカバーしている印象でした。 幅広い領域からのアプローチを行っているので、一度読んでおけば解決の引き出しが大きく増えて良いと思います。

Webサイトの応答速度はUXの面はもちろんSEOの面でも有利になりますので、細かく対応を行う必要があります。

Webサイトのパフォーマンス改修

パフォーマンス改修ではさまざまな改修案が出てきます。この本ではソフトレベルの対応がメインで、cssやJavaScript、画像とフォントファイルなどのメンテナンスを提案しています。 それ以外ではCDNやHTTP/2についての記載もあります。

• cssのセレクタの選び方やレスポンシブにする際のコツ、preloadを使った実装など
• レスポンシブな画像の設置方法、画像ファイルの軽量化
• JavaScriptの最適化、async
• サービスワーカーを使って処理を行う
• CDNを用いた配信、HTTP/2の利用

負荷分散や、スケールアップのようなサーバの対応はありません。小規模なWebサイトを対象としている印象です。

パフォーマンスについての基礎や、その改善によって見込める効果などのデータも載っています。 Chromeの開発ツールなど基礎的なパフォーマンス測定ツールの使い方、情報などの解説もあります。スマホ実機と接続してのパフォーマンスチェックのやり方なども載っており、ちょっと応用的な方法も掲載されています。

パフォーマンス改善の進め方の注意

闇雲にやると大変なことになります。とりあえず手を付けてみて「早くなりました！」と報告するのはまずいやり方です。「どれくらい早くなったのか」とか、「本当に早くなったのか」とか、いろいろとややこしいやり取りが発生することは間違いありません。 実際に早くなっていたとしても、十分なスピードに到達していなければ満足はしてもらえませんし、人によって感じ方も違います。担当者は良いと思っても、その上司にとってはまだまだ遅いといったことも十分ありえます。

まず、現在ページの応答にどれだけかかっているのか、どの要素・やファイルの読み込み、または表示にどれだけかかっているのかというデータを調査しましょう。ここは手を抜かずにしっかりと行います。一度だけでなく、何度か時間をおいて計測して、通常の値を定義しましょう。

その後、どんな対応ができるのか考えられる対策を検討します。 この対応でどれくらいの改善が見込めるかをしっかり考えて、説明する必要があります。しっかりと、改善の目標とする数値を事前にすり合わせることで、改善のゴールを定義します。これはスピード改善以外の対応でも、当たり前のことですがおろそかにしてしまいがちです。

そして、改善の取り組みを行い、サイトを改修します。思ったように早くならない場合もあると思います。その突起には新しい問題等が見つかっていると思いますので、しっかりそれを共有しましょう。もちろん定めたゴールを目指す必要があるのですが、発見した問題や共有すべき事項は隠さずに伝えておくべきです。

アクセスする時間帯やサーバの調子などによっても、応答速度は変わりますし、ユーザーのネットワーク環境やPCの性能なんかでも変わることがあります。観測するときのルールを定めておこうなど丁寧に進めていくことが大切です。

おわりに

パフォーマンス改善を行う際にはもちろんですが、普段のサイト開発にも役に立つ知識がたくさんありました。サイト立ち上げの際に、この本に書いてあることを意識しながら設計することができれば、大きい効果を得られると思います。 基本的にはフロントエンドの話が主になっていますので、フロントエンドに携わる人には一読の価値アリです。

HTTP/1と2の差によって、対応すべき施策が異なることにも触れられており、技術の進歩や仕様の変更によって、ベストな対策が異なることがわかります。世の中のさまざまな知見を集めて、より良くするために勉強を惜しまないことが大切だと感じました。