サイトのパフォーマンスを向上させるベストプラクティス | Optimizely 正規代理店イー・エージェンシー

Optimizely X ヘルプ

  • 最終更新日:2018年09月19日

サイトのパフォーマンスを向上させるベストプラクティス

▼こんな方に役立ちます。
・ページの読み込み速度やページのちらつきなど、パフォーマンスの問題に対処したい
・訪問者のエクスペリエンスを改善したい

Optimizely のスニペットコードは、サイト訪問者に優れたエクスペリエンスを提供するために最適化されています。本記事では、Optimizely の実験を行うサイトの最適なパフォーマンスを確保するために役立つベストプラクティスをご紹介します。

スニペットコードの読み込みを最適化

スニペットコードの jQuery を削除して、ファイルサイズを軽量化する

Optimizely 内蔵の jquery について

Optimizely のスニペットコードには jquery が内蔵されており、実験バリエーションを実装する際に jquery を用いたコードを記述することができます。ただ、Optimizely 自体が動作するために、jQuery は必要はありませんので、jquery を使用しない場合は、Project > Settings > Snippet Settings からスニペットコードに jquery を含めないよう設定し、ファイルサイズを軽量化できます。

サイト側の jQuery を活用する

また、実験を行うサイト側で jQuery が読み込まれる場合は、実験バリエーションを実装する際にサイト側の jQuery を活用することもできますので、Optimizely のスニペットコードから jQuery を削除し、ファイルサイズを軽量化することができます。

この場合は、Optimizely の変更が読み込まれる前に jQuery が読み込まれるよう、Head タグ内で、文字セット宣言、メタタグ、および CSS ファイル読み込みの後に、jQuery ライブラリの読み込み行を配置し、その後に Optimizely のスニペットコードを配置しましょう。

スニペットコードを同期で読み込み、フラッシングを抑制する

Optimizely のスニペットコードを非同期に読み込むと、Optimizely の変更が読み込まれる前に元のページが短時間表示されるフラッシング(ちらつき)が発生しやすくなります。

スニペットコードを読み込む際、JavaScript のスクリプト内で読み込む、または、タグマネージャ経由で読み込むなどの方法は、非同期読み込みとなりますので避けたほうがよいでしょう。

フラッシングを抑制する方法について

リソースを事前に先読みするタグ prefetch と preconnect を活用する

HEADタグの上部で、ページ内で読み込まれるリソースを事前に先読みするタグを活用することで、後から読み込まれるリソースの接続時間を削減します。具体的には、prefetch タグでスニペットコードを先読みし、preconnect タグで、イベントエンドポイント「 logx.optimizely.com 」へ事前に接続しておきます。

サンプルコード

prefetch タグでスニペットコードを先読みし、preconnect タグで、イベントエンドポイント「 logx.optimizely.com 」へ事前に接続。


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="prefetch" href="//cdn.optimizely.com/js/12345678.js">
        <link rel="preconnect" href="//logx.optimizely.com">
        <!-- Add other meta information here -->
        <!-- Add stylesheets here -->
        <script src="//cdn.optimizely.com/js/12345678.js"></script>
        <!-- Add scripts and other content here -->
    </head>
    <body>

prefetch と preconnect のブラウザ対応について

prefetch と preconnect タグは比較的新しいブラウザの機能ですので、ブラウザの種類や旧バージョンでは対応していない可能性があります。利用する場合は、事前に対応ブラウザ範囲をご確認ください。

対応ブラウザ
https://caniuse.com/#search=Resource%20Hints

holdEvents と sendEvents API の使用

ページの読み込み完了まで Optimizely のイベント送信を待つように制御し、負荷の集中する読み込み時のリクエスト数を抑制することができます。

具体的には、イベント送信 API 「holdEvents」により、「sendEvents」 が呼び出されるまで、イベントを localStorage に一時保存し、ページロード完了後、「sendEvents」により、一時保存したイベントの送信を開始します。

サンプルコード

イベント送信 API 「holdEvents」により、「sendEvents」 が呼び出されるまで、イベントを localStorage に一時保存し、ページロード完了後、「sendEvents」により、一時保存したイベントの送信を開始。


// イベント送信を待機
window.optimizely = window.optimizely || [];
window.optimizely.push({type: "holdEvents"});

// ページロード完了後にイベント送信を開始
window.addEventListener("load", function() {
    window.optimizely.push({type: "sendEvents"});
};

# イベント送信タイミングを意図的に遅らせることで実験結果で計測される訪問者やイベント CV の数が減少する可能性があります。これは、最初にイベントが送信されるまでにサイトに訪問し、離脱したユーザーの訪問や CV が計測されないためです。

キャッシュ有効期限(TTL)を長くする

スニペットコードのキャッシュ有効期限(TTL)を、実験のペースに合った時間(10分や20分など)に増やします。キャッシュ有効期限が長くなると、サイトのパフォーマンスが向上します。デフォルト設定は2分です。

キャッシュ有効期限は、Settings > Implementation から設定できます。

# キャッシュ有効期限が長くなるほどパフォーマンスは向上しますが、訪問者はキャッシュの有効期限が切れるまでスニペットに加えた更新を見ることができません。

プロジェクト内のページとイベントの数を最小限に抑える

デフォルト設定では、プロジェクト内で設定したすべての Page と Event が配信されるスニペットコードに含まれます。アクティブな実験を実行するのに必要な最小限の Page と Event 以外をアーカイブ化することで、プロジェクト内のページとイベントの数を抑えることができます。また、プロジェクト内の 不要な Pages と Events のデータのアーカイブは、スニペットコードのサイズ軽量化に有効です。

実験毎のパフォーマンスを最適化

ページの再設計など、大幅な変更を含むバリエーションを実装する

ファイル圧縮(Minify)により、カスタムコードを圧縮する

ページの再設計など、大幅な変更を含むバリエーションを実装するために、実験のデータが肥大化し、サイトのパフォーマンスが低下する原因のひとつとなる可能性があります。スニペットコードのサイズを最小限に抑えるという観点では、ファイル圧縮(Minify)により、カスタムコード(Shared Code または、Variation Code)を圧縮するオプションを検討します。

# 現在のところ、Optimizely 自体にファイル圧縮( Minify )機能は内蔵されていません。お手持ちのエディタや圧縮ツールなどで圧縮したコードを Optimizely に貼り付ける方法をご検討ください。

カスタムコードと Extension 機能を組み合わせ、非同期/同期を使い分ける

また、大幅な変更を含む実験では、カスタムコードと Extension 機能を組み合わせ、非同期処理、同期処理を使い分ける方法も検討します。

例えば、ファーストビューのエリアに必要な変更は、同期で読み込む Extension に記述し、残りの変更は非同期で読み込む Extension に記述するといった活用が考えられます。

Optimizely 以外で大幅な変更を行う

バリエーションに必要なすべての画像とHTMLブロックをネイティブ HTML ページに埋め込み、バリエーションにより、表示/非表示を制御する方法が検討できます。

また、リダイレクト機能を活用し、大幅な変更を含むページにリダイレクトすることもできます。

実験対象となる主要なターゲットデバイスと通信環境を分析する

アナリティクスツールを使用してトラフィックを分析することで、主要なユーザーのデバイスや通信環境にターゲットを絞ってテストを実装できます。

まとめ

Optimizely のスニペットコードは、サイト訪問者に優れたエクスペリエンスを提供するために最適化されています。

ページの読み込み速度やページのちらつきなど、パフォーマンスの問題に対処する際は、本記事で紹介したベストプラクティスに沿って、実験を行うサイトの最適なパフォーマンスの維持、向上につながる施策がないか、一度確認してみてください。

Optimizelyのサポートに関するお問い合わせはこちらまで

コメントは受け付けていません。

ヘルプの関連記事

カスタムセグメント:Optimizely X の API を使用した訪問者データの活用
投稿日: 2018年10月19日
どこまでスクロール(閲覧)されているか計測する方法
投稿日: 2017年09月21日
「何を実験するべきか?」を解決する7つのTips
投稿日: 2017年09月04日
Exclusion Groups(排他的グループ機能)の設定方法
投稿日: 2017年08月24日

ヘルプのよく読まれている記事