CDN、セキュリティー、パフォーマンス

HubSpotのCMSは、高機能で最適化されたコンテンツ マネジメント システムの1つです。HubSpotのCMSはSaaS(Software as a Service)ソリューションなので、セキュリティー信頼性の確保、メンテナンスなどは当社が行います。お客さまはコードの記述や優れたユーザーエクスペリエンスの実現に集中できます。 

さまざまなパフォーマンスの強化もHubSpotが行いますが、ご自分でできる領域もあります。HubSpotのCMSのパフォーマンスを最適化する方法はこちら。

コンテンツ配信ネットワーク(CDN)

HubSpotのCMSでは世界各地に分散されたコンテンツ配信ネットワークを採用しているため、閲覧者の場所にかかわらず、ページが高速に読み込まれます。CDNを利用したメディアやページのホスティングには、追加の設定やアカウント取得は必要ありません。分散処理とキャッシュ無効化はシステムによって自動的に行われ、ウェブ アプリケーション ファイアウォールと組み込みのセキュリティーによってオンライン攻撃から安全に保護されるので、お客さまは優れたサイトの構築作業に集中できます。

Secure Socket Layer(SSL)

HubSpotのCMSまたはMarketing Hubのアカウントに接続された全てのドメインには、SSLが無料で組み込まれ、自動的にプロビジョニングされます。各ドメインには固有のSAN証明書がプロビジョニングされます。設定可能なオプションとして、特定のTLSバージョンの無効化、HTTP経由のリクエストのHTTPSへのリダイレクト、今後のリクエストをHTTPS経由にするためのHSTSヘッダーの提供などが用意されています。必要に応じて、追加の月額料金でカスタムSSL証明書をホスティングできます。

HTTP/2

HubSpotでホスティングされるウェブサイトでは、全てのSSLトラフィックがHTTP/2を使って配信されます。HTTP/2は、現在の通信方法に代わる新しいHTTPプロトコルです。これは、基礎からのプロトコル刷新ではありません。HTTPメソッド、ステータスコード、セマンティックスは共通で、HTTP/1.xと同じAPIを使ってプロトコルを(必要に応じた簡単な情報の付加程度で)表すことができます。

パフォーマンスの改善を重視したHTTP/2では、特に体感速度や、ネットワークとサーバーのリソース使用量が改善されます。その主な目的は、ブラウザーからウェブサイトまでの接続を1つにすることです。

IPv6

HubSpot上にホスティングされる全てのウェブサイトにはIPv6アドレスが含まれているので、IPv6経由のネイティブアクセスが可能です。IPv6はインターネットプロトコルの最新バージョンで、利用可能なアドレスの数が実質的に無制限(340兆の1兆倍の1兆倍)に拡張されます。インターネットではIPv4アドレスが枯渇しています。IPv6への移行によって、さらに多くのデバイスがインターネットに接続可能になるため、インターネットの持続的な拡大と、革新的なサービスの開発につながります。

JavaScriptの軽量化(ミニフィケーション)

HubSpotのデザインマネージャーでは、JavaScriptファイルから不要なスペース、改行、コメントを自動的に削除することで、構文解析および配信の高速化を支援しています。なお、ファイルマネージャーにアップロードされたJavaScriptファイルは自動的に軽量化されません。したがって、ウェブサイトに掲載するファイルについては軽量化してからアップロードする必要があります。

注:JavaScriptファイルは更新のたびに、バックグラウンドで自動的に軽量化されます。このため、JavaScriptファイルの.min.jsバージョンが公開ページに配信されるまでには少し時間がかかります。この間は非軽量化バージョンが配信されるので、サイトの訪問者は最新バージョンのファイルを閲覧できます。構文エラーがある場合は、JavaScriptファイルを軽量化できないことがあります。

CSSの軽量化と結合

HubSpotでは自動的に軽量化が行われます(不要なスペースと改行が削除されます)。複数のCSSファイルを1つのファイルに結合するには、HubL includesを使用します。これにより、HTTPリクエスト数が最小限に抑えられ、ウェブサイトでのCSSの配信と解析のスピードが最大限に高まります。なお、ファイルマネージャーにアップロードされたJavaScriptファイルは自動的に軽量化されません。したがって、ウェブサイトに掲載するファイルについては軽量化してからアップロードする必要があります。 

注:CSSファイルの更新のたびに、ページ上のCSSファイルを再軽量化する必要があります。このため、更新後のCSSファイルが公開ページに配信されるまでには少し時間がかかります。構文エラーがある場合は、CSSファイルを軽量化できないことがあります。外部のCSSファイルを更新しても、結合されたCSSファイルは更新されません。

ブラウザーとサーバーのキャッシュ

HubSpotではページやファイルのキャッシュをサーバーとブラウザーの両方で自動的に保持することで、ページ内の全てのデータを配信する速度を最大限に引き上げることができます。ページが修正されたりページの依存関係(テンプレートやモジュールなど)が変更されたりした場合は、該当するページのサーバーキャッシュが自動的に期限切れになります。

ドメインの書き換え

ウェブサイトにドメインを使用するたびに、追加のDNSルックアップと接続が発生します。ウェブサイトの読み込みは、使用するドメインの数が少ないほど速くなります。HTTP/2では1つの接続を通じて複数のファイルを同時に読み込めるので、複数ドメインにわたるアセット(コンテンツ)の分散に関する古いガイドラインは当てはまらなくなりました。

可能な場合は、デベロッパー ファイル システムのファイル、CSS、JS、画像など、CMSのページによって参照されるアセットのURLが、現在のページのドメインに合わせて自動的に書き換えられます。例えばwww.hubspot.jp上に配信されるページからhttp://cdn2.hubspot.net/hubfs/53/HubSpot_Logos/HSLogo_gray.svgという画像を参照している場合、URLが自動的にhttps://www.hubspot.com/hubfs/HubSpot_Logos/HSLogo_gray.svgに更新されます。

テキスト圧縮

HTML、CSS、JSなどの全てのテキストベースのファイルは、ブラウザーに配信される前にbrotliを使って圧縮されます。brotliによる圧縮はGZIPよりも効果があります。Brotli圧縮への対応がクライアントから示されない場合は、gzip圧縮が適用されます。

軽量化によりブラウザー側のCSSファイルとJSファイルの構文解析がスピードアップし、圧縮によりファイルのブラウザーへの配信が高速になります。

画像の圧縮/最適化と自動サイズ変更

画像をファイルマネージャーにアップロードすると、画像は自動的に最適化されます。具体的には、JPEGとPNGのメタデータ(画像サイズを大きくするEXIFなどのデータ)が除去されます。また(GIFファイルを除く)全ての画像は、視覚的な劣化を伴わない方法で再圧縮されます。さらに、JPEGよりも小さいPNGを利用できる場合は、エンコードを変えて画像が配信されることもあります。

画像は、元の解像度に関係なく72 dpiで再保存されます。当初印刷用に作成された300 dpiのファイルをアップロードした場合は、ウェブ標準の72 dpiに変換されます。

WebP形式をサポートするブラウザー向けとして、WebP形式に画像を拡張しています。WebPバージョンの方が画像のファイルサイズが小さくなる場合は、この形式で画像が配信されます。この変換はサーバー側で行われ、URL内のファイル拡張子は変更されません。.jpgとしてアップロードされた画像は、URLでは引き続き.jpgと表示されますが、WebPとして配信されます。この画像のリンクは、WebPへの対応状況にかかわらず、全てのユーザーの環境で機能します。

HubSpot上にホスティングされた画像をCMSコンテンツに配置すると、自動的にサイズが変更されるので、ブラウザー側での処理に必要とされるリソースの消費が回避されます。これを実現するために、高さと幅の属性を持つ画像のsrc URLに高さと幅のクエリーパラメーターが付加されます。注:画像のサイズ変更は1分以内で完了します。画像のサイズが変更される前にページがリクエストされた場合はサイズ変更前の画像が配信されます。ブラウザーには、読み込む画像の解像度について複数のオプションが提示されるので、ディスプレイが標準解像度でも高解像度でも画像が鮮明に表示されます。

画像の最適化/圧縮、および画像の自動サイズ変更共に、HubSpot上にホスティングされる全てのページとファイルについて既定で有効になっています。

img要素のスクリーンショット。さまざまなサイズ変更URLを含むsrcsetが自動的に追加されています。

画像urlにquality=highクエリーパラメーターが含まれるjpgファイルは、圧縮されません。

HubSpotのCMS上で構築を行う開発者が、画像にHubSpotコンテキストを追加して、画像のサイズ変更をさらに制御することもできます。この場合は、resize_image_url()関数を使用します。これにより開発者はモジュール内に制限を設けて、制作担当者が過度に大きな画像をページやEメールに表示しないように制御できます。この関数は、背景画像など、HTML内の高さ/幅属性によって画像サイズが決まらない状況にも適しています。

AMP(Accelerated Mobile Page)

AMP(Accelerated Mobile Page)は、ほぼ瞬時にコンテンツが読み込まれるモバイル特化型のページ形式です。HubSpot上にホスティングされるブログ記事では、スイッチを切り替えることでAMPを有効にできます。詳細については、HubSpot上でAMPを使用する方法を参照してください。


参考になりましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。