WebAB

この投稿は3年半前の記事です。 情報が古くなっている可能性があるので、その点ご了承ください。
2014 年 3 月 3 日 1,149日前)
4,283文字 (読了時間10分)

SPONSORED LINK

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

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

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

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

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

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

  • WebフォントなしのページはWebフォントありのページより早く表示される
  • Webフォントありの方がWebフォントなしより直帰率が若干高くなる
  • 個別のページではWebフォントありの方が直帰率が高くなった
Webフォントの読み込み有無による違い
Webフォントの読み込み有無による違いは2%

中には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なら読み込みをやめます。この部分は利用しているサ—ビスによって変わってくるでしょう。

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

Google アナリティクス 実践Webサイト分析入門 ユニバーサルアナリティクス対応 Web担当者が身につけておくべき新・100の法則。

Google アナリティクス 実践Webサイト分析入門 ユニバーサルアナリティクス対応 Web担当者が身につけておくべき新・100の法則。 [書籍]

著者いちしま泰樹

出版社インプレスジャパン

出版日2014 年 1 月 24 日

商品カテゴリー単行本(ソフトカバー)

ページ数240

ISBN4844335367

この本の旧版を読みましたが、なかなかわかりやすかったです

Supported by amazon Product Advertising API

 

フォローしてください

ここで会ったのもなにかの縁。
高橋文樹.comの最新情報を見逃さないためにもフォローをお願いします。
めったに送らないメルマガもあります。

SPONSORED LINK

この記事について

この記事はが2014 年 3 月 3 日にプログラミングの記事として公開しました。

高橋先生の電子書籍

高橋先生の電子書籍

Amazonで電子書籍も買えます。

好きな言葉

「川をのぼり下りするとしても、いったいいつまで続けられるとお思いですか?」
フロレンティーノ・アリーサは五十三年七ヶ月十一日前から、ちゃんと答えを用意していた。
「命の続く限りだ」と彼は言った。

— ガブリエル・ガルシア=マルケス

高橋先生の処女作

『途中下車』高橋文樹

2001年幻冬舎NET学生文学大賞受賞作です。

Web制作やります

Web制作やります

Web制作のご依頼は株式会社破滅派へ

不定期メルマガ

高橋文樹.comでは、不定期でニュースレターを配信しています。滅多に送らないので是非購読してください。

高橋文樹.comではプライバシーポリシーに準じて登録情報を取り扱います。