> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.jp/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# CMS Hubで構築したウェブサイトの速度の最適化
> ウェブサイトの読み込み速度とレンダリング速度を向上させるためのヒントと戦略を紹介します。CMS Hubのテーマまたはサイトを高速化します。また、HubSpotによってどのような処理が行われるかを把握しておきます。
'ウェブサイトの読み込み速度とレンダリング速度を向上させるためのヒントと戦略を紹介します。CMS Hubのテーマまたはサイトを高速化します。また、HubSpotによってどのような処理が行われるかを把握しておきます。';
ユーザーエクスペリエンスは、コンテンツの品質、表示速度、セキュリティー、[アクセシビリティー](/cms/best-practices/improve-existing-sites/accessibility)を支える要素の1つです。これらを最適化することは、通常、検索エンジン最適化（SEO）対策としても効果的です。
優れたパフォーマンスとは、エンドユーザーの利便性を高めることに他なりません。パフォーマンスを向上するには、ウェブサイト上のさまざまな課題を解消する必要があります。
## 優れた基盤を出発点にする
後からパフォーマンス上の問題を修正するよりも、パフォーマンスを念頭に置いた優れた基盤を出発点としてサイトを構築するほうが簡単です。例えば、速度の遅い自動車を買ってスピードを速めるよりも、速い自動車をゼロから組み立てるほうが簡単です。
[HubSpot CMSボイラープレート](/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate)は、ベストプラクティスを採り入れてサイトを迅速に構築できるようにするために作成されています。ウェブサイトの評価での現在のスコアについて、[GitHub README](https://github.com/HubSpot/cms-theme-boilerplate)をご覧ください。
コードを一切追加していない状態のボイラープレートから作成したウェブサイトでも、これだけのスコアを達成できます。つまり、ボイラープレートをベースに追加するコードだけに専念できるということです。
## ウェブサイトのパフォーマンスにおける一般的なボトルネック
ほとんどのウェブパフォーマンスの最適化手法とベストプラクティスは、HubSpotに固有のものではありません。ほとんどのウェブサイトのパフォーマンスのボトルネックはHubSpotに固有のものではないためです。
パフォーマンスの問題の大半は、レンダリングと読み込みの2つに分類されます。
* **読み込みのパフォーマンス**は、ウェブページに必要な全てのファイルをユーザーのブラウザーに転送する際の効率性を意味します。
* **レンダリングのパフォーマンス**は、ブラウザーがダウンロードした全てのものを最終結果としてユーザーに表示する際の効率性を意味します。
読み込みのパフォーマンスを理解することはそれほど難しくありません。読み込みのパフォーマンスはファイルの数、ファイルのサイズ、ファイルの配信速度によって決まります。レンダリングのパフォーマンスは複雑です。カスケーディング スタイル シート（CSS）、JavaScript（JS）、画像、動画、訪問者が使用しているデバイス、使用されているウェブブラウザーのそれぞれが、重要な要素です。CSSはレンダリングの妨げとなります。CSSの不適切な記述が原因で、ページのレンダリング中に累積レイアウト変更（CLS）が発生することがあります。画像が原因でCLSが発生し、RAMを消費する可能性があります。動画プレイヤーが原因でCLSが発生し、一部のファイル形式は多くの処理を必要とすることがあります。JSではページの[Document Object Model（DOM）](https://developer.mozilla.org/ja/docs/Glossary/DOM)と[CSSオブジェクトモデル（CSSOM）](https://developer.mozilla.org/ja/docs/Glossary/CSSOM)を操作できますが、これによって前述の問題が発生します。また、JSによってリソースが大量に消費される可能性もあります。全ての訪問者に対して高速な操作性を提供するには、全ての要素のバランスを取り、ベストプラクティスに従う必要があります。
### 画像
ウェブ上のほぼ全てのページでは、画像が至るところで使われています。通常、画像はページ上で最もサイズが大きいファイルです。画像の数が多かったり、画像のサイズが大きかったりすると、それだけページの読み込み時間が長くなります。GIFやwebpのアニメーションも、同じサイズのアニメーション化されていない画像と比べると、読み込み時間が長くなります。一部の画像形式は他の形式よりもパフォーマンスに優れています。また、状況によっても最適な画像形式は異なります。
#### 可能な対策
1. パフォーマンス向上のためにできることのうち、最も重要なのは、ウェブ用として[画像を最適化](https://blog.hubspot.com/marketing)することです。画像の最適化は、制作担当者と開発者の双方が共同で取り組むことが求められます。
2. ページあたりの画像数を減らします。
3. [それぞれの用途に応じた適切な画像形式を使用](https://blog.hubspot.com/insiders/different-types-of-image-files)します。
4. 可能な場合は常にSVG（Scalable Vector Graphics）を使用します。SVGは品質を落とすことなく無制限に拡大できます。アニメーションを作成するときは、SVGをインライン化するのが有効です。静止画では、SVMスプライトシートを作成するか、SVGをそのまま通常のimg要素または背景画像として扱うほうが、通常は良好なパフォーマンスが得られます。
5. [画像の遅延読み込み](https://developers.hubspot.com/docs)を適切に制御します。
6. `img`要素に高さと幅のHTML属性を含めるようにします。こうすると、ブラウザーでレンダリングしやすくなり、HubSpotが自動的に`srcset`を追加することもできます。幅と高さを指定すると、HubSpotで最適化をサポートできるだけでなく、ブラウザーも[累積レイアウトシフト（CLS）](https://web.dev/articles/cls)に応じて自動的に最適化できます。
7. [CSS aspect-ratio](https://developer.mozilla.org/ja/docs/Web/CSS/aspect-ratio)プロパティーを使用して、imgのサイズが変更される際のスペースを確保します。
8. [`resize_image_url`](/cms/reference/hubl/functions#resize-image-url)を使用して、画像が特定の解像度になるようにサイズ変更します。
9. 背景画像の場合は、[メディアクエリー](https://web.dev/articles/optimize-css-background-images-with-media-queries)と`resize_image_url`を組み合わせて、デバイスに最適なサイズで画像を配信します。
10. 大きなヒーローイメージを使用する場合は、[`require_head`タグ](/cms/reference/hubl/tags/standard-tags#require-head)の中で``を使用して、ヒーローイメージを事前に読み込むことができます。この方法は最小限に控えてください。多用すると、パフォーマンスが低下するためです。
### 動画の自動再生
動画の背景と動画の自動再生を使用すると、ウェブサイトを際立たせることができます。ただし、それには犠牲も伴います。動画の背景はウェブサイトのヘッダーに使用されることがよくあります。動画を自動再生することは、ブラウザーが直ちに動画の読み込みを開始しなければならないことを意味します。これは接続が遅いか、携帯回線でデータを受信しているユーザーにとっては特に問題になることがあります。
#### 可能な対策
1. 動画の自動再生は回避してください。背景にアニメーションを表示する場合は、CSSアニメーションまたはJavaScriptアニメーションの使用を検討してください。自動再生動画を表示する場合：
2. ニーズに応じて動画の解像度を許容できる程度まで抑え、動画に効果を適用して低解像度であることが目立たないようにします。
3. デバイスと接続に基づいて動画品質を調整します。YouTube、Vidyard、Vimeoなどの動画共有／ホスティングサービスを使用する方法が最適です。
4. モバイル上での自動再生を無効にして、代わりの静止画を表示します。
### JavaScript
操作可能な要素をウェブサイトに追加するには、JavaScript（JS）が役立ちます。ただし通常は、大量のJSコードを読み込むとJSファイルのサイズが大きくなり、操作可能な要素をブラウザーが読み込むまでの時間が長くなります。``にJSを読み込むことも問題になる可能性があります。既定では、JavaScriptは[レンダリング ブロック リソース](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources)として設定されているためです。また、JSは訪問者のデバイス上で実行されます。つまり、デバイスのリソースの制約を受けます。
#### 可能な対策
1. HubSpotのCMSが初めてリリースされた当時、既定で``にjQueryが読み込まれていました。［設定］＞［ウェブサイト］＞［ページ］の順に進んで完全に削除するか、[最新バージョンのjQueryにアップグレード](https://developers.hubspot.com/docs)することができます。このような設定を、構築に自身が関わっていなかった古いウェブサイト上で変更する際には、jQueryに依存して構築されていたり、ヘッダーでのjQueryの読み込みに基づいて構築されていたりすることがあるので注意が必要です。
2. レンダリングの妨げにならないように、JavaScriptが``の直前に読み込まれるようにします。`require_js`は、モジュールまたはテンプレート上で必要な場合に限ってJavaScriptを読み込むために、また、モジュールの複数のインスタンスによって誤ってJavaScriptが複数回読み込まれることをなくすために使用できます。
3. JSをリファクタリングして効率化することを検討します。JSプラグインの数を減らして、セマンティックHTMLが役立つ場合はこれを使用します。例えばドロップダウンには、``および``を使用します。モーダルには`