实操指南：提升WooCommerce产品页加载速度的3个关键技术

引言：为什么WooCommerce产品页速度至关重要

在当今电子商务竞争激烈的环境中，网站加载速度直接影响着用户体验、转化率和搜索引擎排名。根据Google的研究，页面加载时间每增加1秒，移动端转化率就会下降20%。对于基于WordPress和WooCommerce搭建的在线商店而言，产品页通常是用户做出购买决策的关键页面，其性能优化尤为重要。

WooCommerce作为WordPress最流行的电子商务插件，虽然功能强大，但如果不进行适当优化，产品页很容易变得臃肿缓慢。本文将从代码开发角度，为行业新人和程序员提供三个关键技术，帮助您显著提升WooCommerce产品页的加载速度。

技术一：优化数据库查询与对象缓存

1.1 WooCommerce数据库查询分析

WooCommerce产品页通常涉及多个数据库查询，包括产品信息、变体数据、库存状态、评论、相关产品等。默认情况下，这些查询可能不是最优的。

常见性能瓶颈：

• 重复查询相同数据
• 未充分利用索引
• N+1查询问题（获取产品列表后再逐个查询每个产品的详细信息）

1.2 实施数据库查询优化

示例代码：优化产品数据获取

/**
 * 优化获取产品数据的方法
 * 避免在循环中执行额外查询
 */
function optimized_get_product_data($product_id) {
    // 使用transient缓存产品数据
    $cache_key = 'product_data_' . $product_id;
    $product_data = get_transient($cache_key);
    
    if (false === $product_data) {
        global $wpdb;
        
        // 单次查询获取所有必要产品数据
        $product_data = $wpdb->get_row($wpdb->prepare("
            SELECT p.*, 
                   pm1.meta_value as _price,
                   pm2.meta_value as _regular_price,
                   pm3.meta_value as _sale_price,
                   pm4.meta_value as _stock_status
            FROM {$wpdb->posts} p
            LEFT JOIN {$wpdb->postmeta} pm1 ON (p.ID = pm1.post_id AND pm1.meta_key = '_price')
            LEFT JOIN {$wpdb->postmeta} pm2 ON (p.ID = pm2.post_id AND pm2.meta_key = '_regular_price')
            LEFT JOIN {$wpdb->postmeta} pm3 ON (p.ID = pm3.post_id AND pm3.meta_key = '_sale_price')
            LEFT JOIN {$wpdb->postmeta} pm4 ON (p.ID = pm4.post_id AND pm4.meta_key = '_stock_status')
            WHERE p.ID = %d
            AND p.post_type = 'product'
            AND p.post_status = 'publish'
            LIMIT 1
        ", $product_id));
        
        // 缓存12小时
        set_transient($cache_key, $product_data, 12 * HOUR_IN_SECONDS);
    }
    
    return $product_data;
}

// 清除产品数据缓存的钩子
add_action('save_post_product', 'clear_product_data_cache');
function clear_product_data_cache($post_id) {
    delete_transient('product_data_' . $post_id);
}

1.3 实现对象缓存策略

WordPress对象缓存（Object Caching）可以显著减少数据库查询次数。对于WooCommerce，我们可以缓存频繁访问的产品对象。

示例代码：增强WooCommerce对象缓存

/**
 * 扩展WooCommerce产品缓存
 */
class WooCommerce_Product_Cache_Enhancer {
    
    private static $instance = null;
    private $cache_group = 'woocommerce_products';
    
    public static function get_instance() {
        if (null === self::$instance) {
            self::$instance = new self();
        }
        return self::$instance;
    }
    
    /**
     * 获取带缓存的产品对象
     */
    public function get_product($product_id) {
        $cache_key = 'product_object_' . $product_id;
        $product = wp_cache_get($cache_key, $this->cache_group);
        
        if (false === $product) {
            $product = wc_get_product($product_id);
            
            if ($product) {
                // 缓存产品对象，设置1小时过期
                wp_cache_set($cache_key, $product, $this->cache_group, 3600);
                
                // 同时缓存价格信息等常用数据
                $this->cache_product_meta($product_id, $product);
            }
        }
        
        return $product;
    }
    
    /**
     * 缓存产品元数据
     */
    private function cache_product_meta($product_id, $product) {
        $meta_cache_key = 'product_meta_' . $product_id;
        $meta_data = array(
            'price' => $product->get_price(),
            'regular_price' => $product->get_regular_price(),
            'sale_price' => $product->get_sale_price(),
            'stock_status' => $product->get_stock_status(),
            'average_rating' => $product->get_average_rating(),
        );
        
        wp_cache_set($meta_cache_key, $meta_data, $this->cache_group, 1800);
    }
    
    /**
     * 清除产品缓存
     */
    public function clear_product_cache($product_id) {
        wp_cache_delete('product_object_' . $product_id, $this->cache_group);
        wp_cache_delete('product_meta_' . $product_id, $this->cache_group);
    }
}

// 初始化缓存增强器
add_action('init', function() {
    WooCommerce_Product_Cache_Enhancer::get_instance();
});

// 产品更新时清除缓存
add_action('woocommerce_update_product', function($product_id) {
    $cache_enhancer = WooCommerce_Product_Cache_Enhancer::get_instance();
    $cache_enhancer->clear_product_cache($product_id);
});

1.4 数据库索引优化建议

为WooCommerce相关表添加适当索引可以大幅提升查询性能：

-- 为常用查询字段添加索引
CREATE INDEX idx_product_meta_post_id ON wp_postmeta(post_id);
CREATE INDEX idx_product_meta_key ON wp_postmeta(meta_key(50));
CREATE INDEX idx_product_price ON wp_postmeta(meta_key(50), meta_value) WHERE meta_key = '_price';

-- 优化订单查询（如果产品页显示购买记录）
CREATE INDEX idx_order_items_product_id ON wp_woocommerce_order_items(order_item_type, order_id);

技术二：前端资源优化与延迟加载

2.1 分析WooCommerce产品页资源加载

典型WooCommerce产品页可能加载的资源包括：

• WooCommerce主CSS和JS文件
• 主题样式和脚本
• 产品图库脚本（FlexSlider、Zoom等）
• 评论和评分相关资源
• 社交媒体分享脚本
• 第三方分析跟踪代码

2.2 实施CSS和JavaScript优化

示例代码：优化资源加载策略

/**
 * 优化WooCommerce前端资源加载
 */
function optimize_woocommerce_assets() {
    // 如果不是产品页，移除不必要的WooCommerce资源
    if (!is_product()) {
        wp_dequeue_style('woocommerce-general');
        wp_dequeue_style('woocommerce-layout');
        wp_dequeue_style('woocommerce-smallscreen');
        wp_dequeue_script('wc-add-to-cart');
        wp_dequeue_script('wc-cart-fragments');
    }
    
    // 在产品页优化资源加载
    if (is_product()) {
        // 延迟加载非关键CSS
        add_filter('style_loader_tag', 'defer_non_critical_css', 10, 2);
        
        // 异步加载非关键JS
        add_filter('script_loader_tag', 'async_defer_scripts', 10, 2);
        
        // 移除不必要的脚本
        wp_deregister_script('jquery-blockui');
        wp_deregister_script('jquery-placeholder');
    }
}

add_action('wp_enqueue_scripts', 'optimize_woocommerce_assets', 99);

/**
 * 延迟加载非关键CSS
 */
function defer_non_critical_css($html, $handle) {
    // 定义关键CSS（立即加载）
    $critical_styles = array(
        'woocommerce-general',
        'theme-main-style',
        'product-page-critical'
    );
    
    // 定义可以延迟加载的CSS
    $deferrable_styles = array(
        'woocommerce-smallscreen',
        'font-awesome',
        'magnific-popup'
    );
    
    if (in_array($handle, $deferrable_styles)) {
        return str_replace("rel='stylesheet'", "rel='preload' as='style' onload="this.onload=null;this.rel='stylesheet'"", $html);
    }
    
    return $html;
}

/**
 * 异步或延迟加载JavaScript
 */
function async_defer_scripts($tag, $handle) {
    // 异步加载的脚本（不影响页面渲染）
    $async_scripts = array(
        'woocommerce',
        'wc-add-to-cart-variation',
        'zoom'
    );
    
    // 延迟加载的脚本（在页面加载完成后执行）
    $defer_scripts = array(
        'jquery',
        'wc-single-product',
        'social-share-buttons'
    );
    
    if (in_array($handle, $async_scripts)) {
        return str_replace(' src', ' async src', $tag);
    }
    
    if (in_array($handle, $defer_scripts)) {
        return str_replace(' src', ' defer src', $tag);
    }
    
    return $tag;
}

2.3 实现图片优化与延迟加载

示例代码：优化产品图片加载

/**
 * 优化WooCommerce产品图片
 */
class WooCommerce_Image_Optimizer {
    
    /**
     * 生成响应式图片标记
     */
    public static function get_responsive_product_image($product_id, $size = 'woocommerce_single', $attr = array()) {
        $product = wc_get_product($product_id);
        
        if (!$product) {
            return '';
        }
        
        $image_id = $product->get_image_id();
        $full_src = wp_get_attachment_image_src($image_id, 'full');
        $main_src = wp_get_attachment_image_src($image_id, $size);
        
        if (!$main_src) {
            return wc_placeholder_img($size);
        }
        
        // 生成srcset和sizes属性
        $srcset = wp_get_attachment_image_srcset($image_id, $size);
        $sizes = wp_get_attachment_image_sizes($image_id, $size);
        
        $default_attr = array(
            'src' => $main_src[0],
            'alt' => get_post_meta($image_id, '_wp_attachment_image_alt', true) ?: $product->get_name(),
            'class' => 'woocommerce-product-image lazy-load',
            'data-src' => $main_src[0],
            'data-srcset' => $srcset,
            'data-sizes' => $sizes,
            'loading' => 'lazy', // 原生懒加载
        );
        
        $attr = wp_parse_args($attr, $default_attr);
        
        // 使用低质量占位图（LQIP）技术
        $placeholder = self::generate_placeholder($main_src[0]);
        $attr['src'] = $placeholder;
        
        $html = '<img';
        
        foreach ($attr as $name => $value) {
            $html .= ' ' . $name . '="' . esc_attr($value) . '"';
        }
        
        $html .= '>';
        
        // 添加加载后替换真实图片的JavaScript
        $html .= self::get_lazy_load_script();
        
        return $html;
    }
    
    /**
     * 生成低质量占位图
     */
    private static function generate_placeholder($image_url) {
        // 简单实现：使用极低质量版本或纯色占位
        // 实际项目中可以使用第三方服务或GD库生成
        
        // 这里返回一个1x1的透明GIF作为占位符
        return 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
    }
    
    /**
     * 懒加载脚本
     */
    private static function get_lazy_load_script() {
        ob_start();
        ?>
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 使用Intersection Observer API实现懒加载
            if ('IntersectionObserver' in window) {
                const lazyImages = document.querySelectorAll('img.lazy-load');
                
                const imageObserver = new IntersectionObserver(function(entries, observer) {
                    entries.forEach(function(entry) {
                        if (entry.isIntersecting) {
                            const img = entry.target;
                            
                            // 加载真实图片
                            if (img.dataset.src) {
                                img.src = img.dataset.src;
                            }
                            
                            if (img.dataset.srcset) {
                                img.srcset = img.dataset.srcset;
                            }
                            
                            img.classList.remove('lazy-load');
                            imageObserver.unobserve(img);
                        }
                    });
                });
                
                lazyImages.forEach(function(img) {
                    imageObserver.observe(img);
                });
            } else {
                // 回退方案：加载所有图片
                document.querySelectorAll('img.lazy-load').forEach(function(img) {
                    if (img.dataset.src) {
                        img.src = img.dataset.src;
                    }
                    if (img.dataset.srcset) {
                        img.srcset = img.dataset.srcset;
                    }
                });
            }
        });
        </script>
        <?php
        return ob_get_clean();
    }
}

// 替换默认的WooCommerce产品图片输出
add_filter('woocommerce_product_get_image', 'custom_woocommerce_product_image', 10, 2);
function custom_woocommerce_product_image($image, $product) {
    if (is_product()) {
        return WooCommerce_Image_Optimizer::get_responsive_product_image($product->get_id());
    }
    return $image;
}

2.4 实施关键CSS内联和WebP支持

示例代码：内联关键CSS并支持现代图片格式

/**
 * 提取并内联关键CSS
 */
function inline_critical_css() {
    if (!is_product()) {
        return;
    }
    
    // 关键CSS文件路径
    $critical_css_path = get_stylesheet_directory() . '/css/critical-product.css';
    
    if (file_exists($critical_css_path)) {
        $critical_css = file_get_contents($critical_css_path);
        echo '<style>' . $critical_css . '</style>';
    } else {
        // 动态生成关键CSS
        $dynamic_critical_css = generate_dynamic_critical_css();
        echo '<style>' . $dynamic_critical_css . '</style>';
    }
}
add_action('wp_head', 'inline_critical_css', 1);

/**
 * 添加WebP图片支持
 */
function add_webp_support($html, $attachment_id) {
    if (is_product()) {
        $webp_url = wp_get_attachment_image_url($attachment_id, 'full', false);
        $webp_url = preg_replace('/.(jpg|jpeg|png)$/i', '.webp', $webp_url);
        
        // 检查WebP版本是否存在
        if (file_exists(str_replace(WP_CONTENT_URL, WP_CONTENT_DIR, $webp_url))) {
            $html = preg_replace('/<img/', '<picture><source srcset="' . esc_url($webp_url) . '" type="image/webp">' . $html . '</picture>', $html);
        }
    }
    
    return $html;
}
add_filter('wp_get_attachment_image', 'add_webp_support', 10, 2);

技术三：服务器端优化与缓存策略

3.1 实施页面级缓存

示例代码：实现WooCommerce产品页静态缓存

/**
 * WooCommerce产品页静态缓存
 */
class WooCommerce_Static_Cache {
    
    private $cache_dir;
    private $cache_time = 3600; // 1小时缓存
    
    public function __construct() {
        $this->cache_dir = WP_CONTENT_DIR . '/cache/woocommerce_pages/';
        
        if (!file_exists($this->cache_dir)) {
            wp_mkdir_p($this->cache_dir);
        }
        
        $this->init_hooks();
    }
    
    private function init_hooks() {
        // 在模板加载前检查缓存
        add_action('template_redirect', array($this, 'maybe_serve_cached_page'), 1);
        
        // 清除相关缓存
        add_action('save_post_product', array($this, 'clear_product_cache'));
        add_action('woocommerce_update_product', array($this, 'clear_product_cache'));
        add_action('woocommerce_update_product_variation', array($this, 'clear_product_cache'));
    }
    
    /**
     * 检查并返回缓存页面
     */
    public function maybe_serve_cached_page() {
        if (!is_product() || is_user_logged_in() || is_admin()) {
            return;
        }
        
        $product_id = get_queried_object_id();
        $cache_file = $this->cache_dir . 'product_' . $product_id . '.html';
        
        // 检查缓存是否存在且未过期
        if (file_exists($cache_file) && (time() - filemtime($cache_file)) < $this->cache_time) {
            // 读取并输出缓存
            readfile($cache_file);
            exit;
        }
        
        // 开始输出缓冲以捕获页面内容
        ob_start(array($this, 'cache_page_output'));
    }
    
    /**
     * 缓存页面输出
     */
    public function cache_page_output($buffer) {
        if (is_product() && !is_user_logged_in()) {
            $product_id = get_queried_object_id();
            $cache_file = $this->cache_dir . 'product_' . $product_id . '.html';
            
            // 保存到缓存文件

        // 添加缓存标记和过期时间
        $buffer .= "n<!-- Cached by WooCommerce_Static_Cache on " . date('Y-m-d H:i:s') . " -->";
        
        // 保存缓存文件
        file_put_contents($cache_file, $buffer);
    }
    
    return $buffer;
}

/**
 * 清除产品缓存
 */
public function clear_product_cache($product_id) {
    $cache_file = $this->cache_dir . 'product_' . $product_id . '.html';
    
    if (file_exists($cache_file)) {
        unlink($cache_file);
    }
    
    // 同时清除相关缓存（如分类页面）
    $this->clear_related_caches($product_id);
}

/**
 * 清除相关缓存
 */
private function clear_related_caches($product_id) {
    $product = wc_get_product($product_id);
    
    if (!$product) {
        return;
    }
    
    // 清除产品分类页面缓存
    $categories = $product->get_category_ids();
    foreach ($categories as $category_id) {
        $category_cache = $this->cache_dir . 'category_' . $category_id . '.html';
        if (file_exists($category_cache)) {
            unlink($category_cache);
        }
    }
}

}

// 初始化静态缓存
add_action('init', function() {

if (!is_admin() && !is_user_logged_in()) {
    new WooCommerce_Static_Cache();
}

});

### 3.2 实施OPCache和对象缓存优化

**示例代码：配置和监控OPCache**

/**

• OPCache优化和监控
  */

class WooCommerce_OPCache_Manager {

/**
 * 检查并优化OPCache配置
 */
public static function optimize_opcache() {
    if (!function_exists('opcache_get_status')) {
        return false;
    }
    
    $status = opcache_get_status();
    $config = opcache_get_configuration();
    
    // 检查OPCache状态
    if ($status['opcache_enabled']) {
        // 监控内存使用
        $memory_usage = $status['memory_usage'];
        $used_memory = $memory_usage['used_memory'];
        $free_memory = $memory_usage['free_memory'];
        $total_memory = $used_memory + $free_memory;
        
        $memory_percentage = ($used_memory / $total_memory) * 100;
        
        // 如果内存使用超过90%，尝试清理
        if ($memory_percentage > 90) {
            self::clear_stale_cache();
        }
        
        // 优化WooCommerce相关文件的缓存
        self::preload_woocommerce_files();
    }
    
    return true;
}

/**
 * 预加载WooCommerce核心文件
 */
private static function preload_woocommerce_files() {
    $woocommerce_path = WP_PLUGIN_DIR . '/woocommerce/';
    
    $core_files = array(
        $woocommerce_path . 'woocommerce.php',
        $woocommerce_path . 'includes/class-woocommerce.php',
        $woocommerce_path . 'includes/wc-core-functions.php',
        $woocommerce_path . 'includes/class-wc-product.php',
        $woocommerce_path . 'includes/class-wc-product-simple.php',
        $woocommerce_path . 'includes/class-wc-product-variable.php',
    );
    
    foreach ($core_files as $file) {
        if (file_exists($file)) {
            opcache_compile_file($file);
        }
    }
}

/**
 * 清理过期的缓存
 */
private static function clear_stale_cache() {
    // 获取所有缓存文件
    $status = opcache_get_status();
    
    if (isset($status['scripts'])) {
        $scripts = $status['scripts'];
        $now = time();
        
        foreach ($scripts as $script) {
            // 如果文件超过1天未被访问，考虑清理
            if (($now - $script['last_used_timestamp']) > 86400) {
                opcache_invalidate($script['full_path'], true);
            }
        }
    }
}

/**
 * 获取OPCache统计信息
 */
public static function get_stats() {
    if (!function_exists('opcache_get_status')) {
        return array('enabled' => false);
    }
    
    $status = opcache_get_status();
    $config = opcache_get_configuration();
    
    return array(
        'enabled' => $status['opcache_enabled'],
        'memory_usage' => $status['memory_usage'],
        'statistics' => $status['opcache_statistics'],
        'config' => $config['directives'],
    );
}

}

// 定期优化OPCache
add_action('wp_loaded', 'WooCommerce_OPCache_Manager::optimize_opcache');

// 在管理后台显示OPCache状态
add_action('admin_bar_menu', function($wp_admin_bar) {

if (current_user_can('manage_options')) {
    $stats = WooCommerce_OPCache_Manager::get_stats();
    
    if ($stats['enabled']) {
        $hit_rate = $stats['statistics']['opcache_hit_rate'];
        $memory_used = round($stats['memory_usage']['used_memory'] / 1024 / 1024, 2);
        $memory_total = round(($stats['memory_usage']['used_memory'] + $stats['memory_usage']['free_memory']) / 1024 / 1024, 2);
        
        $title = sprintf('OPCache: %.1f%% Hit | %sMB/%sMB', 
            $hit_rate, $memory_used, $memory_total);
        
        $wp_admin_bar->add_node(array(
            'id' => 'opcache_status',
            'title' => $title,
            'href' => admin_url('admin.php?page=wc-status&tab=opcache'),
            'meta' => array('class' => 'opcache-status')
        ));
    }
}

}, 100);

### 3.3 实施CDN集成和边缘缓存

**示例代码：集成CDN并优化资源分发**

/**

• CDN集成和优化
  */

class WooCommerce_CDN_Integration {

private $cdn_domain = 'cdn.yourdomain.com';
private $excluded_files = array('.php', '.xml', '.json');

public function __construct() {
    $this->init_hooks();
}

private function init_hooks() {
    // 重写静态资源URL
    add_filter('wp_get_attachment_url', array($this, 'rewrite_attachment_url'), 10, 2);
    add_filter('stylesheet_uri', array($this, 'rewrite_theme_assets'));
    add_filter('script_loader_src', array($this, 'rewrite_script_src'));
    add_filter('style_loader_src', array($this, 'rewrite_style_src'));
    
    // 添加资源提示
    add_action('wp_head', array($this, 'add_resource_hints'), 2);
    
    // 生成CDN友好的版本号
    add_filter('style_loader_src', array($this, 'add_version_query'));
    add_filter('script_loader_src', array($this, 'add_version_query'));
}

/**
 * 重写附件URL到CDN
 */
public function rewrite_attachment_url($url, $post_id) {
    if (wp_attachment_is_image($post_id)) {
        $parsed_url = parse_url($url);
        $cdn_url = 'https://' . $this->cdn_domain . $parsed_url['path'];
        
        // 添加WebP支持
        if (strpos($url, '.jpg') !== false || strpos($url, '.png') !== false) {
            $cdn_url = $this->maybe_add_webp($cdn_url);
        }
        
        return $cdn_url;
    }
    
    return $url;
}

/**
 * 重写主题资源URL
 */
public function rewrite_theme_assets($url) {
    $parsed_url = parse_url($url);
    
    // 只处理CSS和JS文件
    if (preg_match('/.(css|js)$/i', $parsed_url['path'])) {
        return 'https://' . $this->cdn_domain . $parsed_url['path'];
    }
    
    return $url;
}

/**
 * 重写脚本URL
 */
public function rewrite_script_src($src) {
    return $this->rewrite_to_cdn($src);
}

/**
 * 重写样式URL
 */
public function rewrite_style_src($src) {
    return $this->rewrite_to_cdn($src);
}

/**
 * 通用CDN重写逻辑
 */
private function rewrite_to_cdn($src) {
    if (empty($src)) {
        return $src;
    }
    
    $parsed_src = parse_url($src);
    
    // 排除特定文件
    foreach ($this->excluded_files as $excluded) {
        if (strpos($parsed_src['path'], $excluded) !== false) {
            return $src;
        }
    }
    
    // 检查是否是本地文件
    $site_url = parse_url(site_url());
    
    if (isset($parsed_src['host']) && $parsed_src['host'] === $site_url['host']) {
        return 'https://' . $this->cdn_domain . $parsed_src['path'];
    }
    
    return $src;
}

/**
 * 添加资源提示
 */
public function add_resource_hints() {
    if (!is_product()) {
        return;
    }
    
    echo '<link rel="dns-prefetch" href="//' . $this->cdn_domain . '">' . "n";
    echo '<link rel="preconnect" href="https://' . $this->cdn_domain . '" crossorigin>' . "n";
    
    // 预加载关键资源
    $product = wc_get_product(get_queried_object_id());
    if ($product) {
        $image_id = $product->get_image_id();
        $image_url = wp_get_attachment_image_url($image_id, 'woocommerce_single');
        
        if ($image_url) {
            $cdn_image_url = $this->rewrite_to_cdn($image_url);
            echo '<link rel="preload" as="image" href="' . esc_url($cdn_image_url) . '">' . "n";
        }
    }
}

/**
 * 添加版本查询参数
 */
public function add_version_query($src) {
    if (strpos($src, $this->cdn_domain) !== false) {
        $version = $this->get_file_version($src);
        return add_query_arg('ver', $version, $src);
    }
    
    return $src;
}

/**
 * 获取文件版本（基于修改时间）
 */
private function get_file_version($src) {
    $parsed_url = parse_url($src);
    $file_path = ABSPATH . str_replace(site_url('/'), '', $src);
    
    if (file_exists($file_path)) {
        return filemtime($file_path);
    }
    
    return get_bloginfo('version');
}

/**
 * 添加WebP支持
 */
private function maybe_add_webp($url) {
    // 检查浏览器是否支持WebP
    if (isset($_SERVER['HTTP_ACCEPT']) && strpos($_SERVER['HTTP_ACCEPT'], 'image/webp') !== false) {
        // 这里可以添加逻辑来检查WebP版本是否存在
        // 如果存在，返回WebP版本的URL
    }
    
    return $url;
}

}

// 初始化CDN集成
add_action('init', function() {

new WooCommerce_CDN_Integration();

});

### 3.4 实施HTTP/2服务器推送

**示例代码：配置HTTP/2服务器推送**

/**

• HTTP/2服务器推送优化
  */

class WooCommerce_HTTP2_Push {

private $resources_to_push = array();

public function __construct() {
    $this->init_hooks();
}

private function init_hooks() {
    // 收集需要推送的资源
    add_action('wp_enqueue_scripts', array($this, 'collect_push_resources'), 999);
    
    // 发送HTTP/2推送头
    add_action('send_headers', array($this, 'send_http2_push_headers'));
}

/**
 * 收集需要推送的资源
 */
public function collect_push_resources() {
    if (!is_product()) {
        return;
    }
    
    global $wp_styles, $wp_scripts;
    
    // 收集关键CSS
    $this->add_style_to_push('woocommerce-general');
    $this->add_style_to_push('theme-main-style');
    
    // 收集关键JS
    $this->add_script_to_push('jquery');
    $this->add_script_to_push('wc-single-product');
    
    // 收集关键图片
    $product_id = get_queried_object_id();
    $product = wc_get_product($product_id);
    
    if ($product) {
        $image_id = $product->get_image_id();
        $image_url = wp_get_attachment_image_url($image_id, 'woocommerce_single');
        
        if ($image_url) {
            $this->resources_to_push[] = array(
                'path' => $this->get_relative_path($image_url),
                'type' => 'image'
            );
        }
    }
}

/**
 * 添加样式到推送列表
 */
private function add_style_to_push($handle) {
    global $wp_styles;
    
    if (isset($wp_styles->registered[$handle])) {
        $style = $wp_styles->registered[$handle];
        $this->resources_to_push[] = array(
            'path' => $this->get_relative_path($style->src),
            'type' => 'style'
        );
    }
}

/**
 * 添加脚本到推送列表
 */
private function add_script_to_push($handle) {
    global $wp_scripts;
    
    if (isset($wp_scripts->registered[$handle])) {
        $script = $wp_scripts->registered[$handle];
        $this->resources_to_push[] = array(
            'path' => $this->get_relative_path($script->src),
            'type' => 'script'
        );
    }
}

/**
 * 获取相对路径
 */
private function get_relative_path($url) {
    $site_url = site_url();
    return str_replace($site_url, '', $url);
}

/**
 * 发送HTTP/2推送头
 */
public function send_http2_push_headers() {
    if (empty($this->resources_to_push) || !is_product()) {
        return;
    }
    
    $link_header_values = array();
    
    foreach ($this->resources_to_push as $resource) {
        $as_type = $resource['type'] === 'image' ? 'image' : $resource['type'];
        $link_header_values[] = sprintf(
            '<%s>; rel=preload; as=%s',
            $resource['path'],
            $as_type
        );
    }
    
    if (!empty($link_header_values)) {
        header('Link: ' . implode(', ', $link_header_values), false);
    }
}

}

// 初始化HTTP/2推送
add_action('init', function() {

if (!is_admin()) {
    new WooCommerce_HTTP2_Push();
}

});

## 性能监控与持续优化

### 4.1 实施性能监控系统

**示例代码：创建性能监控仪表板**

/**

• WooCommerce性能监控
  */

class WooCommerce_Performance_Monitor {

private $start_time;
private $queries_start;

public function __construct() {
    $this->init_hooks();
}

private function init_hooks() {
    // 开始计时
    add_action('wp', array($this, 'start_timing'));
    
    // 记录数据库查询
    add_filter('query', array($this, 'log_query'));
    
    // 在页脚显示性能数据
    add_action('wp_footer', array($this, 'display_performance_data'), 999);
    
    // 记录性能数据到日志
    add_action('shutdown', array($this, 'log_performance_data'));
}

/**
 * 开始计时
 */
public function start_timing() {
    $this->start_time = microtime(true);
    
    global $wpdb;
    $this->queries_start = $wpdb->num_queries;
}

/**
 * 记录查询
 */
public function log_query($query) {
    if (defined('SAVEQUERIES') && SAVEQUERIES) {
        // 查询已由WordPress记录
        return $query;
    }
    
    // 简单记录慢查询
    $start = microtime(true);
    
    // 执行查询后记录时间
    add_filter('query_result', function($result) use ($start, $query) {
        $time = microtime(true) - $start;
        
        if ($time > 0.1) { // 记录超过100ms的查询
            error_log(sprintf(
                'Slow Query (%.3fs): %s',
                $time,
                substr($query, 0, 200)
            ));
        }
        
        return $result;
    });
    
    return $query;
}

/**
 * 显示性能数据
 */
public function display_performance_data() {
    if (!current_user_can('manage_options')) {
        return;
    }
    
    $load_time = microtime(true) - $this->start_time;
    
    global $wpdb;
    $queries = $wpdb->num_queries - $this->queries_start;
    
    $memory = memory_get_peak_usage(true) / 1024 / 1024;
    
    echo '<div class="performance-monitor" style