Per page JavaScriptと非同期読み込みについて

2025-08-01

WebflowによるJavaScript最適化の仕組みについてご紹介します。

はじめに

Per page JavaScriptおよびJavaScriptの非同期読み込み機能は、順次すべてのユーザーへ提供が拡大されています。

‍

WebflowのJavaScript最適化

Webflowでは、公開サイトのJavaScriptを最適化するために、ページごとに特化したJavaScriptファイルや、ブラウザでキャッシュできる再利用可能なコードチャンクを自動生成しています。
さらに「Advanced publishing options」でJavaScriptファイルを非同期で読み込む設定も可能です。

これにより、ページのコンテンツと同時にJavaScriptを読み込めるため、サイトのパフォーマンスや体感的な読み込み速度が向上します。

‍

Per page JavaScriptについて

ポイント
以前は、Webflowで生成されるJavaScriptはサイト全体で共通の1ファイルで、全ページに同じJSが読み込まれていました。

すべてのページで必要ないJavaScriptも含まれていたため、無駄が発生していました。

‍

Per page JavaScript導入後は、各ページごとに個別の、より小さいJavaScriptバンドルが生成され、特定ページに必要なJavaScriptだけが読み込まれる仕組みになります。

また、複数ページで使われるJavaScriptは「再利用可能なチャンク」に分割され、ブラウザにキャッシュされます。

これにより、ユーザーが別のページへ移動しても、すでにキャッシュされたコードは再度読み込む必要がなくなります。

こうした仕組みにより、各ページで読み込むJavaScript量が減り、ページの表示速度やサイト全体のパフォーマンスが向上します。

‍

JavaScriptの非同期読み込み（オプション）

注記
JavaScriptの非同期読み込みは、有料のSiteプランまたはWorkspaceプランで利用可能です。

「Advanced publishing options」から「Asynchronously load JavaScript」トグルをON/OFFで切り替え、JavaScriptの読み込み方法を選べます。

OFF（デフォルト）
JavaScriptファイルは順番に、ページコンテンツ（HTML・CSS）が表示される前に読み込まれます。スクリプトが大きい場合、表示や操作性が遅くなりますが、カスタムJavaScriptとの互換性が高いです。
ON
JavaScriptファイルがページコンテンツと同時に並行して読み込まれるため、コンテンツの表示がより早くなりやすいですが、一部のカスタムコードが正しく動かなくなる場合があります。

‍

重要な注意点

カスタムJavaScriptコードや共有Libraryを使っている場合、「Asynchronously load JavaScript」をONにするとスクリプトやLibrary要素が正常に動作しなくなる可能性があります。
これは、カスタムコードやLibrary要素が依存するJavaScriptが、ブラウザでまだ完全に読み込まれていない場合に発生します。

‍