Webフォントの有無によるパフォーマンスの違いをABテストしてみた

先日、日本語Webフォントを導入してみた結果、個人的にはこの見映えに満足しているのですが、Webフォント導入に対してこんな反対意見を聞きます。

1. Webフォントはパフォーマンスがよくない
2. 読み込むときにチラつきがあるのがむかつく
3. 見られない端末がある

「見られない端末がある」は自明のことなので、グレイスフルデグラデーションの考え方に則って対応すればよいでしょう。このサイトでは特に意識していませんが……

今回はパフォーマンスとその影響について簡単なABテストを実施してみました。条件は次の通りです。

• このサイトにおいて検索流入が割と多いページ3つにおいて、Webフォントの適用有無を1:1で試してみる

さて、一週間ぐらい寝かせておいたのですが、なんと1,000PV行きませんでしたので、レポートとしてはあまり価値がないかもしれませんが、結果としてはこんな感じになりました。

• WebフォントなしのページはWebフォントありのページより早く表示される
• Webフォントありの方がWebフォントなしより直帰率が若干高くなる
• 個別のページではWebフォントありの方が直帰率が高くなった

中にはWebフォントありの方が直帰率が低くなったページもあるのですが、理由はよくわかりません。あとはこれらの差が統計的に有意なのかを求めればレポートとしてもうちょっと価値が出るとは思うのですが、件数が少な過ぎることもあって、そこまでやっていません。

個人的に抱いた感想としては事前に予想していた通り、Webフォントを導入することによってパフォーマンスは悪くなるですね。

あとはこのパフォーマンスの劣化と見映えの向上をトレードオフして導入する／しないを決定する感じでしょうか。サイト全体の見映えがシャレオツであることによってどれぐらいユーザーが増えるのかについては、ターゲットやサイトコンテンツによるので、なんとも言えません。

PVベースのビジネスをやっているのであれば、導入しない方がいいかもしれませんね。元々は破滅派の小説ビューアに導入しようと思ってはじめたので、そういうWebアプリ的なものでは別の結果になるのかもしれません。

ちなみに、このサイトでは読了イベントというのを仕込んでいて、ユーザーが本文の最後までスクロールするとreadというイベントが発生するようにしているのですが、スクロールイベントが上手く取れていないのか、ユーザーはそもそも全部読んでいないのか、とにかくPV比で異常に少ないんですね。

このreadイベントだけ見ると、Webフォントありの方がread発生率は高いのですが、いかんせんイベント数が少なすぎるのでなんとも……。

おまけ ABテストのやりかた

一応、どうやってやったか書いておきます。

今回のテストでは、特定のページにおいてだけWebフォントの読み込みをやったりやらなかったりするようなスクリプトを書きます。このサイトはWordPressなので、そうしたロジックが動くべきページを判定する必要があります。

// ヘッダーの一番最初で実行
add_action(‘wp_head’, function(){
        $hit = false;
        // Webフォントの読み込みを次のページだけランダムにする
        foreach( ( false === strpos(home_url('/', 'http'), '.com') ? array(2173, 2864, 2876) : array(1266, 1403, 2173)) as $post_id){
            if( is_single($post_id) ){
                $hit = true;
            }
        }
          ?>
          <script type="text/javascript">
               GAM = window.GAM || {};
            <?php if($hit): ?>
            GAM.webFont =  (Math.random() <= 0.5);
            <?php else: ?>
            GAM.webFont = true;
            <?php endif; ?>
        </script>
          <?php
}, 1);

GAMというグローバルオブジェクトを登録していますが、これはサイトの色んな部分で使っています。たとえば、タイマーを登録しておいて、ページ出力時点からの経過秒数を算出したりとか。Google Analytics関係の値を入れておく器みたいなものですね。

この場合は該当するページだった場合のみwebFontの有無をランダムに出しています。つまり、同じユーザーが同じページを何度も見た場合、WebフォントだったりWebフォントじゃなかったりします。クッキーにWebフォントの有無を登録しておいて、同じユーザーに対してはずっとWebフォントなしにするなどの手法も考えられます。

では、続いてGoogle Analyticsのコード読み込み時にカスタムディメンジョンを登録します。

<script>
    GAM = window.GAM || {};
    GAM.pageAction = '<?= esc_js($this->page_action) ?>';
    GAM.pageLabel = '<?= esc_js($this->page_label) ?>';
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    window.google_analytics_uacct = "<?= esc_js($this->profile_id) ?>";
    ga('create', '<?= esc_js($this->profile_id) ?>', '<?= esc_js($this->domain) ?>'
        <? if(is_user_logged_in()): ?>
        ,{
            clientId: <?= get_current_user_id() ?>
        }
        <? endif; ?>
    );
    ga('set', 'dimension2', (GAM.webFont ? 'With Web Font' : 'No Web Font'));
    ga('set', 'dimension1', '<?= esc_js($this->user_role()) ?>');
    ga('require', 'linkid', 'linkid.js');
    ga('send', 'pageview');
</script>

他にも色々やっているため長いですが、要するに、Google Analyticがページビューを登録する直前にカスタムディメンジョンを設定しているというわけですね。この値は上で登録したGAM.webFontに依存します。カスタムディメンジョンはGoogle Analyticsで事前に登録しておく必要があります。

あとはフッターでWebフォントの読み込みを行った後、GAM.webFontを参照します。

// Webfontの読み込み
add_action('wp_footer', function(){
?>
<script type="text/javascript">
if( !window.GAM.webFont && FONTPLUS){
        FONTPLUS.async();
}
</script>
<?php
}, 1000);

このサイトではFontPlusというサービスを利用してるので、フッター部分でGAM.webFontを判定し、falseなら読み込みをやめます。この部分は利用しているサ—ビスによって変わってくるでしょう。

なんかおまけの方が長くなりましたが、終わり。