wp_preload_resources()


WordPressのwp_preload_resources()関数は、リソースをプリロードするために使用されます。これにより、ページの読み込み速度が向上し、ユーザーエクスペリエンスが向上します。

構文

wp_preload_resources( array $resources );
  • $resources(array) — プリロードするリソースの配列。各リソースはURLで指定されます。

例1: 基本的なリソースのプリロード

この例では、CSSファイルとJavaScriptファイルをプリロードします。

wp_preload_resources( array( 'https://example.com/style.css', 'https://example.com/script.js' ) );

例2: 画像のプリロード

この例では、画像ファイルをプリロードします。

wp_preload_resources( array( 'https://example.com/image.jpg' ) );

例3: フォントのプリロード

この例では、Webフォントをプリロードします。

wp_preload_resources( array( 'https://example.com/font.woff2' ) );

例4: 動画のプリロード

この例では、動画ファイルをプリロードします。

wp_preload_resources( array( 'https://example.com/video.mp4' ) );

例5: 複数のリソースを一度にプリロード

この例では、複数のリソースを一度にプリロードします。

wp_preload_resources( array( 'https://example.com/style.css', 'https://example.com/script.js', 'https://example.com/image.jpg' ) );

例6: 条件付きプリロード

この例では、特定の条件でリソースをプリロードします。

if ( is_front_page() ) { wp_preload_resources( array( 'https://example.com/home.css' ) ); }

例7: フィルターフックを使用したプリロード

この例では、フィルターフックを使用してリソースをプリロードします。

add_filter( 'wp_preload_resources', function( $resources ) { $resources[] = 'https://example.com/custom.css'; return $resources; } );

注意点

  • プリロードするリソースが多いと、逆にページの読み込みが遅くなる可能性があります。
  • プリロードするリソースは、実際に必要なものに限定してください。

関連機能：