画像の事前読み込み (WordPressプラグイン)

インテリジェントな画像のプリフェッチにより、ページ読み込み速度を最適化するモダンで高性能なプラグインです。

このプラグインは、モダンなJavaScriptのPromiseまたは標準的なHTMLリンクヘッダーを使用して、重要な画像を事前読み込みすることができます。軽量で開発者に優しく、WordPressエコシステムと完全に統合されるように設計されています。

Image Preloading (WordPress Plugin)

✨ 主な機能

デュアルプリロード方式: JavaScriptによるプリロード、HTMLの<link rel="preload">ヘッダー、あるいは両方を組み合わせて最大限の互換性を実現します。
パフォーマンス優先: requestIdleCallbackを活用し、ブラウザのリソースとメインスレッドの活動を尊重します。
スマートな条件付きロジック: スクリプトを読み込む場所（例：特定の投稿タイプ、アーカイブ）やIDに基づくページ除外など、細かな制御が可能です。
堅牢なアーキテクチャ: 並行性制御、エラー処理、入力値の検証を備えたPromiseベースの読み込みを実装しています。
シームレスな統合: ネイティブなWordPress管理画面インターフェース、翻訳対応、旧バージョンからの自動移行機能を備えています。

必要条件

コンポーネント	最低バージョン
WordPress	5.0以上
PHP	7.2以上
MySQL	5.6以上

クイックスタートガイド

インストール

プラグインパッケージをダウンロードします。
image-preloading フォルダーをサーバーの wp-content/plugins/ ディレクトリにアップロードします。
WordPressにログインし、プラグインに移動します。
Image Preloadingを見つけ、有効化をクリックします。

基本設定

設定 → 画像の事前読み込みに移動します。
メインのトグルスイッチを使用してプラグインを有効化します。
事前読み込みしたい画像の完全なURLを画像URLボックスに貼り付けます（1行につき1つ）。
事前読み込み方法を選択します（推奨: 両方）。
変更を保存をクリックします。

⚙️ 設定オプション

1. 事前読み込み方法

パフォーマンスのニーズに最適な戦略を選択してください：

JavaScript (JS): 最新のPromiseを使用して画像を読み込みます。エラー処理と同時実行数の制限機能を備えています。動的な読み込み制御に最適です。
Link Preload (ヘッダー): 標準的な<link rel="preload">タグをドキュメントの<head>に挿入します。これは、最新のブラウザが重要なアセットを早期に発見するための最速の方法です。
両方 (推奨): 両方のアプローチを組み合わせることで、最新のブラウザでの高性能を確保しつつ、JavaScriptによるフォールバックと検証システムを維持します。

2. URL管理

画像の絶対URLを入力してください。外部ドメイン（CDN）を使用することもできます。

フォーマット例:

https://example.com/images/logo.png
https://example.com/assets/hero-banner.jpg
https://cdn.external-site.com/campaign-graphic.webp

3. 条件付き読み込み

関連性のないページでの帯域幅の浪費を避けるため、プリローダーの実行場所を正確に制御します。

読み込み対象：

すべてのページ： (デフォルト) すべての場所で実行します。
フロントページ： ホームページのみ。
ブログ投稿ページ： 最新投稿のメインフィード。
個別投稿 / 固定ページ / アーカイブ： 特定のコンテンツタイプを対象とします。
ページを除外： プリロードを厳密に無効化する特定のURL（ページまたは投稿ID）をカンマ区切りで入力します。
例： 5, 12, 104

トラブルシューティング

画像がプリロードされない

URLを確認: すべてのリンクが直接の画像パスであり、公開アクセス可能であることを確認してください。
確認方法: 「リンクプリロード」を使用している場合、ページのソースを表示し（Ctrl+U）、<link rel="preload">を検索してください。
CORS: 外部CDNから読み込む場合、CDNが正しいCross-Origin Resource Sharing（CORS）ヘッダーを送信していることを確認してください。
キャッシュ: 設定を保存した後、すべてのWordPress、サーバー、およびブラウザのキャッシュをクリアしてください。

パフォーマンスとコンソールエラー

デバッグ: プラグインはアクティビティをブラウザコンソールに記録します。

開発者ツールを開きます（F12）。
[Image Preloading]でフィルタリングします。
成功/失敗メッセージを確認します。

同時実行: ブラウザーが停止した場合、プラグインは通常、同時実行制限を介してこれを処理します。問題が解決しない場合は、プリロードされる画像の数を減らしてください。

設定が保存されない

権限: ユーザーアカウントに管理者権限があることを確認してください。
移行: v1.x からアップグレードした場合は、管理画面の通知を確認してください。プラグインは古い設定形式の移行を自動的に試みます。

️ 開発者向け

アーキテクチャ

このプラグインは、シングルトンパターンを使用したクリーンなオブジェクト指向構造に従っています。

image-preloading/
├── image-preloading.php        # メインエントリーポイント、クラス定義、シングルトン
│   ├── Image_Preloading_Plugin # コアクラス
│   │   ├── load_options()      # 設定と移行ロジック
│   │   ├── register_settings() # WordPress設定API
│   │   └── should_load_scripts() # 条件付き表示ロジック
├── assets/
│   └── js/
│       └── image-preloading.js # PromiseベースのJSプリローダー
├── languages/                  # .pot および .po/.mo ファイル
└── README.md

国際化

テキストドメイン: image-preloading
場所: languages/
管理画面およびフロントエンドのすべての文字列は完全に翻訳可能です。

ライセンスと貢献

ライセンス: GNU General Public License v2.0 またはそれ以降。