CDNを有効にすると、コード圧縮機能が利用できるようになります。コード圧縮は、コメントや空白のような不要な要素をコードから削除する機能です。

上記の要素は、人間がコードを編集するときには便利ですが、ブラウザには一切必要ありません。これを削除することで、コードを最適化、ページサイズを小さくし、ページの読み込み時間を短縮することができます。

コード圧縮の有効化

「設定」ボタンをクリックして、お好みの設定を選択します。

MyKinstaのCDNのコード圧縮の設定
MyKinstaのCDNのコード圧縮の設定

表示されたコード圧縮のポップアップで、「CSS」、「JS」、またはその両方を選択し、「設定を変更」ボタンをクリックします。

CDNのコード圧縮設定を保存
CDNのコード圧縮設定を保存

重要なお知らせ

  • コード圧縮を有効にした後は、必ずサイトを確認してください。一部のブラウザでは、圧縮に問題がある場合があります。問題が発生した場合は、コード圧縮を無効にしてください。
  • コード圧縮には、数分かかる場合があります。
  • Cloudflareアカウントをお持ちの場合、圧縮を行うには、Cloudflareでキャッシュをクリアする必要があります(CloudflareダッシュボードまたはCloudflareプラグインを使用)。
  • Kinstaがホストするドメイン上で提供される.cssまたは.js拡張子のすべてのファイルは、圧縮を有効にするファイルタイプに応じて圧縮されます。例えば、example.comをKinstaでホストし、CSSファイルの圧縮を選択すると、example.com/wp-content/themes/yourtheme/style.cssexample.com/wp-content/plugins/woocommerce/some-file.cssは圧縮されますが、 twitter.com/styles/example-shared.css など外部サイトにリンクしたアセットはこの機能では圧縮されません。

コード圧縮のチェック

  1. サイトにアクセスし、ブラウザでデベロッパーツールを開いてください。
  2. 「Network」 タブで、JS または CSS ファイルをダブルクリックして、新しいタブで開きます。必ず、テーマやプラグインにより事前に圧縮されていないものを選んでください。
  3. ファイルに空白やコメントがないか確認します。圧縮されていないJSやCSSファイルがある場合は、CDNのキャッシュをクリアしてページを数回読み込み直した上で、JSやCSSファイルを再度確認してください。
  4. CDNのキャッシュをクリアしてもファイルが圧縮されない場合、サポートへのお問い合わせから、圧縮されていないファイルのURLをお知らせください。

CDNコード圧縮の利点

コードの圧縮はCloudflareのエッジで実行され、そこでキャッシュされるので、プラグインを使用したコードの圧縮よりも高い効果が得られます。

  • サーバー(つまり、Kinstaサーバー)で、ファイル圧縮のためにリソース(CPU/メモリ/ストレージ)を使用する必要はありません。Cloudflareがその役割を担います。
  • その後、圧縮したファイルをサーバーから配信する必要はありません。Cloudflareにより、リクエストを行ったサイト訪問者に最も近いエッジサーバーから直接ファイルが提供されます。
  • Cloudflareはバックグラウンドでファイルを圧縮するので、圧縮されていないアセットへの最初のリクエストが、圧縮のためのCloudflareの処理によって遅れることはありません。そして、そのアセットへの次のリクエストが出されると、キャッシュされた圧縮済みのファイルが利用されます。