編集長ブログ―安田英久
【実録】Web担のページ表示を快適にした広告表示の最適化2つのカラクリ

Web担では広告表示の仕組みを変えることで、ページ表示の時間を平均1秒ほど短縮しました

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

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

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

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

広告表示システム最適化前後のWeb担ページ表示速度分布(改修前と改修後):ページ読み込み時間のボリュームゾーンが左にシフトしている=全体としての読み込み時間が短縮されている

まだあと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担も、ちょっとずつ早くしていっていますよ。

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

この記事が役に立ったらシェア!
tweet16このエントリーをはてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

今日の用語

EMD
EMDは「Exact Match Domains」の略で、「完全一致ドメイン名」 ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore