検証、SNSボタンとAdSenseがページ表示スピード(DOMContentLoadedとLoad)に与える影響

半年以内

SNSボタンとAdSenseが表示スピードにだいぶ悪い影響を与えている事は知っているのですが、急にそれがどれ程なのかが気になったので実験しました。
まぁ運営観点上、この2つを外すという選択はとれないのですが。純粋に知的好奇心によるものです。

今回は、DOMContentLoadedとLoad時間の影響を調べます。次回はGoogle PageSpeed Insightsのレポートを予定しています。

実験1. SNSボタンとAdSenseをひとつづつ外した影響

当サイトのとある記事を対象に、以下の4つの状態を作ります。

  1. Before: SNSボタン(2箇所)とAdSense(3箇所)の両方表示
  2. After1: SNSボタンだけ外す
  3. After2: AdSenseだけ外す
  4. After3: SNSボタンもAdSenseも両方外す

ChromeのDevToolsを開いて、それぞれ10回スーパーリロード。

ここを見ます。そして10回の数値の平均値を出しました。

DOMContentLoadedとLoadの時間

結果はこうなりました。

BeforeからAfterの値を引いたグラフはこうなります。それぞれの外部スクリプトがどれだけ表示を遅らせているかという意味になります。

分かる事として、

  • SNSボタンはDOMContentLoadedを重くする
  • AdSenseはLoadを重くする
  • SNSボタンとAdSenseそれぞれの影響は加算されるわけではない
  • Loadが最大2秒も縮まる!

という事のようです。

なお、各指標の発火定義は以下です。

DOMContentLoadedイベントはDOMツリーの構築が完了した時点で発火されます。一方、loadイベントはDOMツリーに加えて画像やすべてのスクリプトが読み込まれた時点で発火されます。DOMContentLoadedイベントとloadイベントの違い[タイミング]

一応、計測結果も認めておきます。

DOMContentLoaded

# Before After1 After2 After3
1回目 1.86s 1.15s 1.18s 1.12s
2回目 1.62s 1.21s 1.45s 1.12s
3回目 1.48s 1.26s 1.37s 1.46s
4回目 2.05s 1.36s 1.32s 1.42s
5回目 1.82s 1.17s 1.63s 1.17s
6回目 1.92s 1.26s 1.64s 1.10s
7回目 1.75s 1.63s 1.55s 0.92s
8回目 1.50s 1.16s 1.02s 1.61s
9回目 1.88s 1.18s 1.55s 1.27s
10回目 2.14s 1.14s 1.87s 1.04s

Load

# Before After1 After2 After3
1回目 3.26s 2.09s 1.65s 1.25s
2回目 2.92s 1.97s 1.87s 1.29s
3回目 2.67s 3.53s 1.86s 1.62s
4回目 4.22s 2.48s 1.70s 1.57s
5回目 3.35s 2.22s 2.16s 1.50s
6回目 3.08s 2.35s 2.02s 1.21s
7回目 2.88s 2.98s 2.25s 1.26s
8回目 2.84s 2.13s 1.57s 1.79s
9回目 5.09s 3.32s 2.13s 1.39s
10回目 3.47s 3.32s 2.33s 1.11s

実験2. 記事と記事の比較

同じような事を、記事のコンテンツ内容で比較します。

  • 記事A(重い方): Code Highlights(JSが動く)有り+画像有り
  • 記事B(軽い方): 文字しかない

同様に、DOMContentLoadedとLoadの10回の平均値で比較します。なお上の実験1は記事A(重い方)でやっていましたので、数値は同じものを使います。

記事ごとのDOMContentLoadedとLoad時間(Before/After)

実験1と同様、BeforeとAfterの差分をとりました。

こんな感想を持ちました。

  • そもそも記事のコンテンツで無視できない影響がある(特にDOMContentLoaded)
  • 外部スクリプトの影響度合いは、記事のコンテンツの影響を受ける(もともと重いページの方が変化が大きい)。原理は不明。
  • 文字だけの記事であれば、頑張ればDOMContentLoadedが1秒を切る。何か嬉しい。

ちなみに、記事Aは以下のものです。

記事Bはこれです。

記事Bの計測結果はこうでした。

# DOMContentLoaded Load
Before After3 Before After3
1回目 1.15s 1.19s 2.76s 1.47s
2回目 1.27s 0.846s 2.83s 1.19s
3回目 1.03s 0.795s 3.02s 1.23s
4回目 1.04s 1.01s 2.54s 1.56s
5回目 1.10s 0.764s 3.91s 1.05s
6回目 1.36s 0.743s 2.70s 1.08s
7回目 1.17s 0.744s 2.85s 1.13s
8回目 0.91s 0.889s 2.49s 1.22s
9回目 1.31s 0.805s 2.65s 1.15s
10回目 0.89s 0.743s 2.56s 1.05s

結論

  • SNSボタンとAdSenseはやっぱりまぁまぁ重い。
  • SNSボタンはDOMContentLoaded時間に0.5秒くらい影響。
  • AdSenseはLoad時間に1.5秒くらい影響。
  • SNSボタンとAdSenseの両方を外しても、影響はそれぞれの累積とはならない。
  • 影響は記事自体のコンテンツに依存する。

次回、PageSpeed Insights編に続く。