基于LiteSpeed缓存插件的WordPress图片条件预加载需求问询

问题场景 #

在WordPress中使用LiteSpeed缓存插件的「Image WebP Replacement」功能自动生成并提供WebP格式图片时，插件偶尔会出现判断错误（比如背景图应提供WebP却输出JPG）。若直接用HTML预加载WebP，部分访客会同时加载两种格式的图片；且不能仅通过浏览器是否支持WebP来判断预加载版本，必须匹配插件实际将输出的图片版本，否则会导致无用的重复加载。要求不使用JavaScript实现。

解决方案代码 #

<?php 
    // 定义JPG和WebP版本的图片URL
    $jpgImageUrl = 'https://example.com/wp-content/uploads/image.jpg';
    $webpImageUrl = 'https://example.com/wp-content/uploads/image.jpg.webp';
    
    // 解析WebP URL为服务器本地文件路径（用于文件存在性判断）
    $webpLocalPath = ABSPATH . ltrim(parse_url($webpImageUrl, PHP_URL_PATH), '/');
    
    // 优先通过LiteSpeed缓存的请求头判断实际输出的图片格式
    if (isset($_SERVER['HTTP_X_LSCACHE']) && strpos($_SERVER['HTTP_X_LSCACHE'], 'f=.webp') !== false) {
        $backgroundImageUrl = $webpImageUrl;
    } elseif (isset($_SERVER['HTTP_X_LSCACHE']) && strpos($_SERVER['HTTP_X_LSCACHE'], 'f=.jpg') !== false) {
        $backgroundImageUrl = $jpgImageUrl;
    } else {
        // 无明确标识时，降级到服务器支持+文件存在的判断逻辑
        if (imagetypes() & IMG_WEBP && file_exists($webpLocalPath)) {
            $backgroundImageUrl = $webpImageUrl;
        } else {
            $backgroundImageUrl = $jpgImageUrl;
        }
    }
    
    // 输出安全转义后的预加载标签
    echo '<link rel="preload" as="image" href="' . esc_url($backgroundImageUrl) . '">';
?>

代码逻辑说明 #

1. 核心匹配逻辑：通过LiteSpeed缓存插件设置的HTTP_X_LSCACHE请求头，直接匹配插件实际将输出的图片格式（f=.webp或f=.jpg），确保预加载版本和最终页面加载版本完全一致，从根源避免重复加载。
2. 降级判断逻辑：当请求头无明确标识时，通过服务器是否支持WebP（imagetypes() & IMG_WEBP）和WebP本地文件是否存在的双重判断，选择最优格式预加载。
3. 安全优化：添加esc_url()确保输出的URL符合安全规范，避免XSS风险；修正了原代码中直接用URL判断文件存在的错误，改为解析URL为服务器本地路径后验证。

内容的提问来源于stack exchange，提问作者cactusboat