この記事を読むのに必要な時間:およそ 1 分
Webサイトを利用していてストレスを感じるのはどのようなときでしょうか。
デザインが見づらかったり,操作順序が複雑などユーザー体験(UX)がいまいちだったりというのも気になりますが,一番ストレスを感じるのは「遅い」Webサイトを見ているときではないでしょうか。
なかなか内容が表示されない,スクロールするたびにひっかかるような遅いWebサイトは見るのをやめたり,次からは使わなかったりというのは誰しも経験のあることでしょう。
この遅さに対するイラつきは,そのままWebサイト提供者の損失につながります。ECサイトでは表示が数秒遅れるだけで売り上げが数パーセント低下すると言われているように,いかに高速にページを表示して,快適に操作してもらうかはWebサイトの最も重要な課題の一つと言えるでしょう。
ノウハウの限界
このような課題に対し,Webサイト高速化のための多くのノウハウがWeb上で共有されています。
ベストプラクティスと呼ばれるtipsをいくつか紹介した記事や,高速化に効果があるライブラリを紹介したページを目にしたことのある方も多いのではないでしょうか。
これらのtipsやライブラリは多くの場合,導入が簡単で一定の効果を上げます。ただし,これだけで遅いWebサイトが早くなるとは限りません。こういった施策は問題になりそうな箇所を回避する方法を紹介しているだけで,実際のサイトを分析して改善を提案しているわけではないからです。
実際のWebサイト高速化では,どの部分が主要な速度低下の原因になっているか明らかにしないといけません。Webサイトの表示が遅い原因を調べずに,当て推量でサイトを改善しようとしても大した効果は得られません。Webサイトの速度を遅くするボトルネック(全体の処理時間に大きな影響を与えている一部)を的確に見つけてそこを解決する必要があります。
Webサイトを真に高速化するために
Webサイトが遅い原因であるボトルネックを突き止めるには,Webページで何が起こっているかを把握できるよう各種解析ツールの使い方を学ぶ必要があります。さらにツールの解析結果を読み解くために,ブラウザーの仕組みに関する基礎知識も必須です。
事前知識をしっかり身につけたうえで,計測してからチューニングするのは,tipsを適用したり,ライブラリを導入したりするよりは一見手間のかかる作業に思えてくるかもしれません。
しかし,実際にはきちんと計測して,ボトルネックに的確に対処すれば最小限の労力で確実な成果を生み出せます。
仕組みを学び,きちんと計測し,的確に対処する。そんな最も効率的なWebサイトの高速化を解説しているのが好評発売中の『Webフロントエンド ハイパフォーマンス チューニング』です。ブラウザーの一連の処理の流れ,多様な解析方法やサービス,そしてブラウザーの処理段階に応じた適切なテクニックを解説・紹介しています。
その場しのぎのテクニックではない,確かなWebフロントエンドの高速化を志すなら必読の一冊です。