スロット攻略 プロジェクトドキュメント

Appearance

CSS読み込み最適化ガイド ​

概要 ​

CSSファイルの読み込みが遅い、または読み込まれない問題を解決するための最適化実装ガイドです。

実装した改善策 ​

1. AssetUtilクラスの導入 ​

ファイル: core_src/Util/asset_util/AssetUtil.php

主な機能 ​

  • ファイル更新時刻ベースのキャッシュバスティング: filemtime()を使用してファイルの実際の更新時刻をバージョンとして使用
  • 重複読み込み防止: WordPressのwp_style_is()とwp_script_is()を活用
  • ファイル存在チェック: 存在しないファイルの読み込みを防止
  • 一括読み込み機能: 複数のCSS/JSファイルを効率的に読み込み

使用例 ​

php
use App\Constants\PathConstants;
use App\Util\asset_util\AssetUtil;

// 単一CSSファイルの読み込み
AssetUtil::enqueue_style(
    'my-component-css',
    PathConstants::get_mvc_uri_path() . '/View/templates/my_component/style.css'
);

// 複数CSSファイルの一括読み込み
$styles = [
    'component-css' => '/path/to/component.css',
    'shared-css' => '/path/to/shared.css',
];
AssetUtil::enqueue_styles($styles);

2. 環境別最適化 ​

開発環境 ​

  • 個別のCSSファイルを読み込み
  • デバッグしやすい構造を維持

本番環境 ​

3. 既存コンポーネントの最適化 ​

以下のコンポーネントを最適化しました：

  • daily_article_result/index.php
  • create_ranking_kishu_data/index.php
  • kishudata/index.php
  • heat_map_simple/index.php
  • heat_map_detail/index.php
  • relational_day_result/index.php
  • monthly_link/index.php
  • birth_day_index/index.php
  • birth_day_machine_result/index.php
  • daily_result_calendar/index.php
  • move_day_hall/index.php

パフォーマンス改善効果 ​

1. キャッシュバスティングの改善 ​

  • 従来: 固定バージョン（'1.0'）またはtime()
  • 改善後: ファイルの実際の更新時刻を使用
  • 効果: ブラウザキャッシュの効果的な活用

2. 重複読み込みの防止 ​

  • 従来: 静的フラグによる不完全な重複防止
  • 改善後: WordPressの標準機能を活用した確実な重複防止
  • 効果: 不要なHTTPリクエストの削減

3. エラーハンドリングの強化 ​

  • 従来: 存在しないファイルでもエンキューを試行
  • 改善後: ファイル存在チェックとエラーログ出力
  • 効果: デバッグの容易さとパフォーマンス向上

使用方法 ​

新しいコンポーネントでの使用 ​

php
<?php
/**
 * 新しいコンポーネントのアセット読み込み管理
 */

use App\Constants\PathConstants;
use App\Util\asset_util\AssetUtil;

// 重複読み込みを防ぐためのフラグ
static $component_loaded = false;

if ( ! $component_loaded ) {
    // CSSの読み込み
    AssetUtil::enqueue_style(
        'component-css',
        PathConstants::get_mvc_uri_path() . '/View/templates/component/component.css'
    );

    // JavaScriptの読み込み
    AssetUtil::enqueue_script(
        'component-js',
        PathConstants::get_mvc_uri_path() . '/View/templates/component/component.js'
    );

    $component_loaded = true;
}

複数ファイルの一括読み込み ​

php
// CSSファイルの一括読み込み
$styles = [
    'main-css' => '/path/to/main.css',
    'component-css' => '/path/to/component.css',
    'shared-css' => '/path/to/shared.css',
];
AssetUtil::enqueue_styles($styles);

// JavaScriptファイルの一括読み込み
$scripts = [
    'main-js' => '/path/to/main.js',
    'component-js' => '/path/to/component.js',
];
AssetUtil::enqueue_scripts($scripts);

トラブルシューティング ​

CSSファイルが読み込まれない場合 ​

  1. ファイルパスの確認

    php
    use App\Constants\PathConstants;

// 正しいパス形式（テンプレート読み込み管理ファイルと同様）
PathConstants::get_mvc_uri_path() . '/View/templates/component/style.css';

  2. ファイル存在の確認

    • AssetUtilは自動的にファイル存在チェックを行います
    • エラーログで詳細を確認できます

  3. キャッシュのクリア

    • ブラウザキャッシュをクリア
    • WordPressキャッシュプラグインがあればクリア

パフォーマンスの確認 ​

  1. ブラウザの開発者ツール

    • NetworkタブでHTTPリクエスト数を確認
    • 重複読み込みがないかチェック

  2. WordPressのデバッグ

    php
    // wp-config.php
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);

今後の改善予定 ​

  1. CSS/JSファイルの自動結合

    • ビルドプロセスでの自動最適化

  2. Critical CSSの実装

    • 重要なCSSのインライン化

  3. HTTP/2 Pushの活用

    • 重要なリソースの事前プッシュ

  4. Service Workerの導入

    • オフライン対応とキャッシュ戦略の強化

注意事項 ​

  • 既存のコンポーネントを更新する際は、必ずテストを行ってください
  • 本番環境への反映前に、開発環境で十分にテストしてください
  • キャッシュプラグインを使用している場合は、設定の見直しが必要な場合があります