优先考虑pagespeed中的可见内容

Question

我正在处理项目优先级可见内容。我已经移动了与头顶窗口相关的样式。您可以在以下屏幕截图中看到发生了什么：

在我写了一个简化的测试代码以弄清楚发生了什么。

<style type="text/css">
    .test1 {
        width: 60px;
        height: 60px;
        margin: 5px;
        border: 1px solid #123;
        color: red;
        background:url(http://upmovie.biz/wp-content/themes/movie2/img/movie.png);
    }
    .test2 {
        width: 60px;
        height: 60px;
        margin: 5px;
        border: 1px solid #123;
        color: red;
    }
    .test3 {
        width: 60px;
        height: 60px;
        margin: 5px;
        border: 1px solid #123;
        color: red;
    }

    .test4 {
        width: 60px;
        height: 60px;
        margin: 5px;
        border: 1px solid #123;
        color: red;
    }   
</style>


<div class="test1">
    test 1
</div>
<div class="test2" style="background:url(img/movie.png);">
    test 2
</div>
<div class="test3" style="background:url(http://upmovie.biz/wp-content/themes/movie2/img/movie.png);">
    test 3
</div>
<div class="test4">test 4
    <img src="http://upmovie.biz/wp-content/themes/movie2/img/movie.png">
</div>

在屏幕截图5中，浏览器在下载主样式文件之前显示该站点。你可以看到最后发生了什么：

浏览器显示图像，Google服务不显示图像。我陷入了停顿。我还可以做些什么？

Answer 1

图像加载导致文本在图像加载后重新定位。这意味着用户无法有效地读取屏幕中显示的所有内容，直到图像加载为止。

谷歌PSI希望在任何图像必须加载之前文本处于最终位置。

图像的效果非常明显，但是在加载，推送或拉出内容之后的其他内容也会发生这种情况。

要解决此问题，您必须处理“跳至内容”链接，字体图标加载和图像。

对于图像

你有三个选择：

1移动下面的图像，使其不显示在“折叠上方”（最初可见的）内容中。当图像加载时，图像之后的文本仍然会重新定位，但这对读者来说不是问题，就像他在阅读“首屏”内容时所做的那样。

2创建包含图像且大小相同的div。所以文本从一开始就定位。无需等待加载图像。如果您希望您的网站具有响应能力，则必须谨慎实施

3创建一个定义大小的div，显示图像具有背景。

在解决方案2和3中，您还可以为DIV添加背景颜色，以便之后将图像加载到顶部。像这样的东西：

对于字体图标

不要让图标字体压低一切。事先设置按钮和框的高度。

对于跳至内容链接

您可以将该链接放在屏幕上方。只是不要在以后通过JS隐藏它。从头开始隐藏它，或者保留它。