KARTE Blocksを導入するWebサイトへの影響に関して、よくあるご質問をまとめました。

KARTE Blocksを利用する際には、事前にこちらの内容を確認し、ご理解いただいた上で利用してください。

導入サイト自体のコンテンツ表示に影響はありますか？

KARTE Blocksでは、同期タグの仕組みを採用することで表示遅延（フラッシュ）なくサイトコンテンツの更新が可能ですが、同期タグの仕組み上影響が出る可能性があります。
下記で詳細を説明します。

発生する事象

タグが同期的に処理される（※）ため、以下のような問題が発生する可能性があります。

  • 対象ページ自体の表示処理が止まる（画面が真っ白になる）
  • 対象ページ自体の表示スタイルが崩れる
  • Blocksによるコンテンツの更新が正しく行われない（更新前のオリジナルコンテンツが表示される）
  • 更新対象の要素が表示されない

※ 同期処理、非同期処理の違いは ブロックがサイト上で更新されるタイミング > ページ読み込み時の同期的なコンテンツ更新 をご確認ください。

発生する可能性

サイトの構造に依存します。
まずはテスト環境でタグ設置を行い、挙動に問題ないかご確認の上で本番サイトへの設置をお願いいたします。

また、本番サイトでは後述するプレビュー確認やテスト配信を行うことで、自サイトで問題なく動作するかを事前に検証いただくことを強く推奨します。

発生するタイミング

Blocksタグ（builder.js）を設置した後で、管理画面上で以下の操作を行った際に、上記の事象が発生する可能性があります。
これは以下の操作を行ったタイミングで管理画面で設定した内容が builder.js に書き込まれ、サイトに配信されるという仕様のためです。

  • ページ作成、編集、削除
  • オリジナルブロック登録、編集、削除
  • ブロック編集、削除
  • 配信条件、編集、削除
  • Blocksのセグメント作成、編集、削除
  • その他ブロックス設定画面での設定変更時

上記のリスクを極小化するための対応策を下記で説明します。

対応策

段階的な配信による検証

KARTE Blocksで本番サイトに配信を行う際は、事前に次の流れで十分に検証をしてください。

  1. 配信前にプレビューを確認
    • ブロック編集時にプレビュー機能を利用して、以下の点を本番配信前に確認してください
      • 編集したブロックが意図した挙動になっているか
      • 表示の崩れがないか
  2. テスト配信を行い、本番環境で確認

問題発生時の緊急停止

もし万が一、Blocksタグ設置後に上記にあるようなページ表示処理の停止やページ崩れ等の問題が発生した場合には、すみやかに以下どちらかの対応を行うことで影響を最小限に留めることができます。

  • 緊急停止機能 を利用して全てのBlocksタグの動作を無効化する
    管理画面上からワンクリックで無効化できます。方法は上記サポートサイトをご確認ください。
  • Blocksタグをサイトから外す

※ Google Tag Manager(GTM)経由でのタグ設置について

GTM経由でBlocksタグを設置することも可能ですが、以下の点を予めご確認いただき、本番配信前には必ず事前検証を行った上でご利用ください。

  • タグの実行が非同期になるため、ブロック配信時に画面のチラつき（フラッシュ）が発生する可能性がある
  • 以下の理由などにより、正常に動作しない可能性がある

GTM経由で設置してうまく動作しない場合は、サイトの<head>内に直接タグを埋めてください。

※ ブロックの編集・更新は行わずに計測のみを行うページであれば、タグマネージャー経由で設置しても問題ありません（計測は非同期処理のため）。

サイトの表示速度への影響はありますか？

KARTE Blocksの書き換えの仕組みについて

KARTE Blocksは、同期タグの仕組みを採択しています。
サイトの<head>タグに直接設置した場合、書き換え箇所の表示遅延やカクツキを極小化することができ、ページ表示におけるユーザー体験を損ねないよう設計しています。

タグ読み込み後の書き換えまでの流れについて

  • KARTE Blocksは、ウェブサイトのHTMLツリーが読み込まれる（DOMContentLoadedイベントの発生）のを待ちます。その後、Blocksで書き換える対象要素を透明化の上、管理画面で設定した編集内容（HTML）に書き換え、CSSファイルや各画像を読み込みます。
    • KARTE Blocksによるページの読み込み速度に与える影響を最小限にしつつ、書き換え箇所の表示遅延やガタ付きなどが極小化するための仕組みです。
    • HTMLツリーが読み込まれる前にBlocksの書き換えを実行すると、HTMLの構造やSPAサイトなどにおけるJavaScriptの影響によっては、書き換えが正しく実行できないリスクを考慮した設計になっています。

表示速度への影響について

以下のようなケースでは、ページの読み込み完了（Loadイベントの発生）までの時間は長くなる傾向にあります。 後述する、表示速度への影響を最小化する仕組みの導入、および継続的な改善を行うことで対応しています。

  • KARTE Blocksで書き換えている要素が大きい
  • KARTE Blocksでページ内の多くの要素を書き換えている
  • KARTE Blocksで書き換えている要素で、読み込んでいる画像などのサイズが大きい / サーバーからのレスポンスが遅い

表示速度への影響を最小化するための仕組みについて

上記の通り、同期タグの仕組みを採択をしているため、全く影響が無いとは言えません。
ただし、下記のように KARTE Blocksではサイトの表示速度に極力影響が出ないような設計 を採用しています。

  1. 登録したブロックの書き換え等の処理を行うbuilder.jsファイルは、圧縮され軽量化された状態でCDNに送信しており、さらにCDNにて更なるファイル圧縮を行なった上でウェブサイトに配布しています。
  2. ユーザーが、Blocksタグが設置されているページ来訪した際に、CDNからbuilder.jsがダウンロードされます。その際、初回通信以降はキャッシュが効くため、高速にダウンロードがされます。
  3. 表示数やクリック数といったログの送信やブロックの書き換え処理などは、非同期処理を行っており、ページの表示をブロックしない仕様になっています。
  4. セグメントの解析処理はクライアント側（ブラウザ側）で行っているため、解析時にサーバーとの通信が発生しない仕組みになっています。

PageSpeed Insightsと数値と実測値について

なお、Blocksタグ（builder.js）は、Googleが提供している PageSpeed Insights のレポートで「レンダリングを妨げるリソースの除外（Eliminate render-blocking resources）」として警告が出ることがあります。
ここに表示されるのは、<head>に含まれるリソースの中で、ダウンロードに一定時間以上かかる同期処理をするjsファイルとcssファイルです。（参考：Eliminate render-blocking resources）

モバイルにおける「減らせるデータ量（Potential Savings）」に記載されている数値に関して、Googleのドキュメントにも「現在、Lighthouse は モバイル ネットワーク上のミッドレンジ端末（Moto G4）でページ読み込みをシミュレート します」と記載があります。
参考：PageSpeed Insights API について、PageSpeed Insights でのモバイル分析

日本国内のネットワーク環境とユーザーが利用するモバイル端末のスペックを踏まえると、実測値はPageSpeed Insights内の数値と比べて小さくなるケースがほとんどです。

ご自身の通信環境での対象リソースのダウンロード速度は、以下の方法でご確認いただけます。

  • サイトにアクセスして Chrome DevTools を開く
  • Networkタブをクリックし、検索窓でbuilder.jsと入力し、画面をリロードする
  • 「Time」を確認

null

SEOへの影響はありますか？

KARTE Blocksを利用して全ユーザーへ継続的なコンテンツ配信、もしくはA/Bテストやパーソナライズによるコンテンツの出しわけを行うこと自体が、Googleの検索ランキングに悪影響を及ぼすことは無い という見解です。

全ユーザーへの継続的なコンテンツ配信について

Googleが出している記事でも、JavaScriptが実行された内容をインデックスする、と説明されています。
実際、KARTE Blocksで恒常的に全ユーザーに対してブロックを配信した場合には、配信後の内容でインデックスされているのを確認済です。

ただし、クローラーによってはJavaScriptを実行できない可能性もあるため、Google　Search　ConsoleでURL検証をしてお確かめください。

A/Bテスト・パーソナライズについて

Googleは、自身が提供しているGoogleオプティマイズというA/Bテストソリューションのドキュメントにて、A/Bテストやパーソナライズといったウェブサイトの最適化を推奨していました。
その中にあるガイドラインに従いウェブテストなどの最適化の活動を行うことで、掲載順位には影響を与えることはないと説明しています。

ただし、使い方によってはGoogleからクローキングのような不正行為とみなされる可能性もあります。Google公式ドキュメントのガイドラインを参照の上、ご活用ください。

KARTE Blocksの管理画面で障害が発生している場合にサイト側に影響はありますか？

万が一KARTE Blocksのサービスが停止して管理画面にログインできない場合でも、Blocksタグが入っているサイトが表示されないといった致命的な問題が発生することは基本的にはありません。

KARTE Blocksの仕様として、更新後のブロックの素材取得はCDNを介して行っており、KARTE Blocksとは通信が発生しないためです。

Blocksタグが読み込めない場合にサイト側に影響はありますか？

CDN側の障害等が発生し、万が一Blocksタグ（builder.js）が読み込めない場合でも、導入サイトで読み込まれる他のJSファイルの読み込みをブロックしたり、サイトが全く表示されなくなることは基本的にはありません。

ただし、その場合ブロックの書き換えは行われずにオリジナルの要素が表示されます。
また、ログの送信も行われません（既に送信されたログの解析は行われます）。

（技術者向け） 安定的な配信を実現するための技術設計について

以下のブログ記事をご参照ください。

#karte_blocks