CMS Connect を最適に使用するための推奨事項

CSS の範囲を指定する

エクスペリエンスビルダーサイトページでは CSS を使用する場合があります。CMS 接続でも CSS を使用する場合があります。サイトのページでルールの衝突を回避するため、CSS の範囲を指定することをお勧めします。

範囲を指定するには、コードに DIV クラスを追加して「タグにタグを付ける」ことにより、CMS の CSS をプレフィックスでマークして高い優先度を与えます。

たとえば、サイトページで 10 ポイントのフォントが指定されていて、CSS では 14 ポイントのフォントが指定されているとします。CSS で範囲プレフィックスを使用することで、優先されるルールを指定できます。

CSS を縮小して展開する

CSS を範囲指定することのデメリットとして、コードのファイルサイズが 10 ～ 20% 程度大きくなってしまう点があり、結果として閲覧者のダウン時間が長くなってしまいます。そこで、コードを縮小して展開することで、このパフォーマンス低下を補うことができます。CMS Web サイトを構築するときは、この処理を含めることを計画してください。これにより、パフォーマンスを損なうことなく範囲指定のメリットを享受できます。

CSS では REM を 100% で使用する

ページのコンテンツが大きすぎる場合、CSS で REM を従来のテクニックである 62.5% で使用している可能性があります。Salesforce ルートページでは REM を 100% で使用しています。CSS を 100% でコーディングし直してください。

関連する CSS および JavaScript のみを含める

CSS ファイルと JavaScript ファイルの解析には時間が掛かります。サイトページで最適なパフォーマンスを保証するため、表示する予定のあるページに合わせて設定されている CSS ファイルとスクリプトファイルにのみリンクしてください。これにより、コンテンツを閲覧する利用者が体感する読み込み時間が短縮されます。

JavaScript ライブラリで初期化を行う

サイトページでは、カルーセルやメニューシステムなどのコンテンツで JavaScript を使用できます。ただし、この JavaScript は、ページで HTML を読み込む前ではなく、読み込んだ後に実行するようにしてください。

通常、ライブラリ (jQuery やカルーセルの jQuery プラグインなど) は、早期に読み込まれて常にページ上に存在し、複数のフラグメントで使用できるようにするため、CMS Connect 設定の一環として定義します。各 HTML フラグメント (たとえば、カルーセルのインスタンスを作成した JavaScript ) に特有の初期化コードを、そのフラグメントの一番下のスクリプトタグに含めてください。

フラグメント特有の初期化コードを CMS Connect 設定の JavaScript ファイルには含めないでください。これらのファイルは、可能な限り早期に実行されてヘッドスクリプトをエミュレートしますが、その時点ではページボディの準備ができていないためです。代わりに、ローカル JavaScript を Lightning コンポーネントの一部とするように、初期化コードは HTML の一部としてください。ページ上のすべてのウィジェットの初期化コードは、グループ化されてページ上の他の場所に配置されることがあるため、既存のコードの調整が必要な場合もあります。