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

Load

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

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

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

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

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

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

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

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

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

JSやPHP無しでWordPressのループ内にAdsenseを割り込ませる方法

CSSだけでやります。display:flex を使えば簡単にできてしまいます。 PHP 至って普通のループのコードです。 <main> <?php while (have_post…

記事Bはこれです。

1日遅れて空港に着いたけど偶然にもANAのはからいで国際線に乗れた話でもする

1年前の話だが、結婚前の両家顔合わせのために高知へ行き、東京に戻って来たその日に成田→自宅→羽田からサンフランシスコ出張に行く、という鬼のようなスケジュールを組んでいた事があった。 顔合わせが問題無く…

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

結論

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

次回、PageSpeed Insights編に続く。