ウェブページの読み込み時間を早くする６つのTips

Outbrainは、我々のレコメンデーションプラットフォームに触れるユーザ一全員が高品質な体験を楽しめるよう積極的な取り組みを行っています。本ブログではパブリッシャー様のページ読み込みスピードへの影響を最小限に抑えるための積極的な対策（詳細はこちら）に加え、パートナーパブリッシャーの皆様がページ読み込み速度を改善し、高品質なユーザー体験を実現するための６つのTipsをご紹介します。

#1 コード内の「async」維持

ウィジェットの読み込みを非同期で行い、他のページ要素の読み込みを中断させないよう、コード内で「async（非同期）」を維持することを強くおすすめします。
もし何らかの理由で “async “がコードから削除されている場合は追加してください。

#2 Outbrain CSSではなく、お使いのCSSコードを最適化

CSSコードを最適化すること自体は優れた取り組みではありますが、Outbrain CSSへの干渉や上書きをしないことが重要な点です。Outbrainではコードを最適化するために積極的な対策を講じているため、それらを変更しようとするとページの読み込み時間に悪影響を及ぼす可能性があります。ご不明な点がありましたら、Outbrain担当までお問い合わせください。

#3 Outbrainウィジェットのキャッシュやプリレンダリングは決して実行しない

Outbrainウィジェットのキャッシュやプリレンダリングは、ページの読み込みを遅くするため、避けていただく必要があります。

?以下3つのTipsは、任意の実装改善Tipsとして、ITの知識やテクニック、そしてリソースに自信と余裕のあるパートナーパブリッシャー様にのみおすすめします。なぜなら、これらが正しく実装されていないと、改善ではなく逆に問題を引き起こす可能性があるためです。

#4 OB JSを実装ページのheadセクションに追加する（任意）

OutbrainのJavaScript部分をウィジェット統合コードから実装ページのheadセクションに移動することで、ページ全体で統合が一貫し（ページ上の複数のウィジェットの統合はOB JSを繰り返す必要がなく）、読み込みが最速になります。これは、技術的観点もしくはページの読み込み、どちらの点から考えても最適な設定であり、よりスムーズなユーザー体験を実現します。

#5 ウィジェットのレイジーロードを有効化する（任意）

個々のウィジェットのレイジーロードを有効にすると、必要になる時点まで読み込みを遅らせることができます。ただし、Outbrainコードのリソースもしくは画像のレイジーロードを有効化しないよう注意してください。これは私たちが導入しているレイジーロードと重複してしまい、パフォーマンスに悪影響を及ぼす恐れがあるためです。

#6 プリロードおよびプリコネクトを使用する（任意）

ページ読み込みへの影響を軽減する他の手段としては、事前にコンテンツをプリロードおよびプリコネクトする方法があります。Outbrain.jsには「プリロード」を使用することをおすすめします。これによってOutbrain.jsが最速でダウンロード及びキャッシュされるので、すぐにご覧いただけるようになります。「プリコネクト」は、プリロードの一部で、ドメインへの接続を事前に実行するようブラウザに要求するものです。（使用例としては、ドメインからすぐに何かをダウンロードすることは分かっているが、具体的に何をダウンロードするかが分からない場合などが挙げられます。）これによって、初期接続を高速化することができます。「https://odb.outbrain.com」「https://mv.outbrain.com」及び「https://images.outbrainimg.com」には「プリコネクト」を使用することをおすすめします。

ページ読み込みへの影響を最小限に抑えるための詳細情報をご希望の場合は、Outbrainの担当者へお問い合わせください。また、弊社で積極的に実施している対策についてのブログ記事も是非ご覧ください。