【実録】Web担のページ表示を快適にした広告表示の最適化2つのカラクリ

今日は、Webサイトの表示スピード高速化の話題を。Web担では広告表示の仕組みを変えることで、ページ表示の時間を平均1秒ほど短縮しました。その最適化で行った2つの仕組みを解説します。

最近、Web担のページを見ていて「あれ？ サクサク表示される」と思いませんか？

実はWeb担では5月17日の夕方に、サイトで広告を表示するために利用しているシステムの仕組みを変更したのです。

1週間ほど様子を見たのですが、当初の予想どおりの効果が出ていました。

まだあと2まわりほど高速化しなきゃいけないとは思っているのですが、それはさておき、今回の高速化のポイントを解説しましょう。

なぜ表示を高速化できたのでしょうか。そのポイントは次の2点です。

• 「まとめて処理」によるHTTPリクエスト数の削減
• iframe化による表示ブロッキングの排除

それぞれ説明してきます。

「まとめて処理」によるHTTPリクエスト数の削減

これまでは、ブラウザがページにアクセスすると、広告枠の1つずつについてブラウザが広告配信サーバーとやりとりをして広告データを取得していました。

それを今回、ページ内の広告枠のデータを1回の通信で取得して表示するようにしました（シングルリクエスト化）。

これにより、ページ表示に必要なHTTPリクエスト数が9本ほど減りました。

ページ表示の高速化では、とにかくブラウザがサーバーとやりとりする回数を減らすというのが基本です。これまでも、ページで使うアイコンなどの画像を1つのファイルにまとめるスプライト化などをしていましたが、今回の修正でさらに少ないやりとりでブラウザがページ表示を完了できるようになりました。

iframe化による表示ブロッキングの排除

少し技術的な話になりますが、これまでは、ページに表示される広告はJavaScriptでページに直接書き込まれていました。それを今回、ページにiframeで埋め込むスタイルに変更しました。

これにより、ブラウザがページ表示と広告表示を並行して進められるようになりました。これは、実際に表示が高速化されるだけでなく、体感される速度を向上させる効果もあります。

というのも、広告配信サーバーの反応が多少悪くても、ページのコンテンツはサクサクと表示されるからです。

Webブラウザというのは、ページの途中でJavaScriptが動作してページを書き換えようとしていると、そのスクリプトの処理が終わるまでページの表示をいったん止めます。そのため、広告配信サーバーの反応が悪いと、ページの表示が途中でひっかかる感じになってしまうのです。

以前のWeb担では、記事前の広告の部分で表示が止まってしまうことがありましたが、そういうのがなくなりました。今のJavaScriptはiframeを作るだけですから、処理はすぐ終わるのです。

読者の方が見たいコンテンツが広告の状況と関係なく表示されるというのは、正しい状態ですね。

ちなみに、このiframeはふつうのiframeとは少し違います。

iframeというとsrc属性にURLを指定して外部のページを読み込むものだと思っていませんか？ でもこのiframeにはURLは指定されていません。「そのページの中に“新しいページ”を作って埋め込んだiframe」なのです。

iframeを作ってその中に広告のバナーなどを埋め込む処理を、ページ内の広告配信JavaScriptが行っているのです。

これにより、実はWeb担のページを見る人のセキュリティも良くなるのですが、その件はページ表示速度とは関係ないので詳しい解説は省略しますね。

こういった変更はすべて、Web担で広告表示のために使っているグーグルのDFP（DoubleClick for Publishers）というサービスの機能を利用しています。

具体的には、これまでサイトで使っていたのはDFPの「GAM（Google Ad Manager）」というタグだったのですが、それを今回「GPT（Google Publisher Tag、Googleサイト運営者タグ）」というタイプのタグに切り替えたのです。

こちらのほうがページ表示に良いからと、うちのサイトを管理しているディレクタや広告を管理している営業に無理を言って切り替えてもらったものです（テストとか交渉とか調整で半年ぐらいかかったのは内緒です）。

単にタグの切り替えだけでなく、iframe化のためのスタイル指定の調整や、広告管理の流れの変更など、いろいろ手間をかけてもらいましたが、変更した甲斐があったと思います。

いかがですか？ Web担も、ちょっとずつ早くしていっていますよ。

ここで紹介した内容に、御社サイトの高速化にも役立つヒントがあれば幸いです。