GET_HEADER_IMAGE()在页面速度洞察中导致“区分可见内容的优先级”问题

时间:2017-05-04 作者:Jordan Carter

我正在尝试使用PageSpeed Insights优化我的网站速度。我使用grunt criticalcss内联了关键CSS。这很好,但在我的标题中,我使用get\\u header\\u image()来显示徽标。Page Speed Insights抱怨“只有大约34%的最终折叠内容可以用完整的HTML响应呈现”。只要我从代码中删除徽标,问题就会消失。除了把它放在某个文件夹中并从那里抓取之外,还有什么方法可以避免这种情况吗?我希望我的客户能够轻松上传新图像。

1 个回复
最合适的回答,由SO网友:Mojamba 整理而成

我遇到这个问题时,我的一些网站也遇到了类似的问题,并确认,正如你所做的那样,折叠上方的徽标是每种情况下的问题。我没有使用get_header_image() 而是引用静态图像位置,因此问题并非特定于此。事实上,我甚至有一个网站,上面有两张图片,其中只有一张真正触发了警告。

其他人有a related question, 我试图回答这个问题。我不确定回答两个类似问题的堆栈交换规则/礼仪是什么。你可以在另一个问题上看到我的完整答复。但是,也许我最好/建议我在这里重复这个答案?如果是这样,下面是:

我读过Google forum thread 如果你简单地指定图像的精确尺寸,你就会通过PVC测试,但我发现这是不真实的。对我来说,这是必要的,但实际尺寸也很重要。

不幸的是,在一些实验之后,我似乎找不到任何一致的模式或解决方案来阐明谷歌如何决定触发PVC警告的原因,但我注意到的最有趣的事情是,我实际上不必改变自己的形象。我只需通过宽度和高度声明将其缩小,这表明文件大小可能不是相关因素。

当然,样本量很小(我的3个站点),而且我的所有站点都使用相同的主题,这意味着我可能没有正确地概括。尽管如此,如果你遇到同样的问题,还是值得尝试一下。在我的测试中,我创建了一个函数来生成带有宽度和高度规格的徽标图像代码,这些规格可以轻松调整。也许有些过分,但我编写这个函数是为了考虑三个可能的全局缩放变量中的任何一个,这是我在主题中声明的functions.php 文件:

  1. $GLOBALS[\'image_ratio\']
  2. $GLOBALS[\'image_maxheight\']
  3. $GLOBALS[\'image_maxwidth\']
然后,我检查是否设置了其中任何一个,并根据原始图像尺寸重新计算适当的宽度和高度值。以下是最终代码:

if ( ! function_exists( \'se103976_scale_image\' ) ) {
    function se103976_scale_image() {
        $image_alt = get_bloginfo( \'name\' );
        $image_src = "image.png";   // --- whatever image you want to use (with relevant path)
        list( $image_width, $image_height ) = getimagesize( $image_src );

        // --- Sometimes need to reduce image to pass Google PageSpeed Prioritize Visible Content warning 
        // --- So, can do by a ratio, by a max width or a max height, depending on global variable set in functions.php file 
        if ( $GLOBALS[\'image_ratio\'] != false) { 
            $image_width = round($GLOBALS[\'image_ratio\'] * $image_width);
            $image_height = round($GLOBALS[\'image_ratio\'] * $image_height);
        }
        if ( $GLOBALS[\'image_maxheight\'] != false) {
            if ($image_height > $GLOBALS[\'image_maxheight\']) {
                $ratio = $GLOBALS[\'image_maxheight\'] / $image_height;
                $image_height = $GLOBALS[\'image_maxheight\'];
                $image_width = round($image_width * $ratio);
            }
        }
        if ( $GLOBALS[\'image_maxwidth\'] != false) {
            if ($image_width > $GLOBALS[\'image_maxwidth\']) {
                $ratio = $GLOBALS[\'image_maxwidth\'] / $image_width;
                $image_width = $GLOBALS[\'image_maxwidth\'];
                $image_height = round($image_height * $ratio);
            }
        }
?><img alt="<?php echo $image_alt; ?>" src="<?php echo $image_src; ?>" width="<?php echo $image_width; ?>" height="<?php echo $image_height; ?>" /><?php
    }
}
一旦我找到可以消除PVC警告的尺寸,我就使用了online image resizer 调整和替换原始图像的大小。

相关推荐

无法在模板函数.php中使用IS_HOME

我试图在标题中加载一个滑块,但只在主页上加载。如果有帮助的话,我正在使用Ultralight模板。我正在尝试(在template functions.php中)执行以下操作:<?php if ( is_page( \'home\' ) ) : ?> dynamic_sidebar( \'Homepage Widget\' ); <?php endif; ?> 但这行不通。现在,通过快速的google,我似乎需要将请