优先考虑pagespeed中的可见内容

时间:2017-04-03 05:26:26

标签: javascript php html css wordpress

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

enter image description here

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

<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中,浏览器在下载主样式文件之前显示该站点。你可以看到最后发生了什么:

enter image description here

浏览器显示图像,Google服务不显示图像。 我陷入了停顿状态。我还能做什么?

1 个答案:

答案 0 :(得分:0)

图像加载导致文本在图像加载后重新定位。这意味着在加载该图像之前,用户无法有效阅读屏幕上显示的所有内容。

enter image description here

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

图像的效果确实很明显,但其他内容也会在加载,下推或拉下内容后发生。

要解决此问题,必须处理跳到内容链接,字体图标加载和图像。

对于图片

您有三个选择:

1将图像移动到下面,因此它不会显示在“折叠上方”(最初可见)的内容中。加载图像后,图像后的文本仍将重新定位,但这对于读者来说将不是问题,就像他在“折叠上方”阅读内容时所做的那样。

2创建一个包含图像并具有相同大小的div。因此,文本应从头开始定位。无需等待加载图像。如果您希望自己的网站具有响应性,则必须仔细实施

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

在解决方案2和3中,您还可以为DIV设置背景色,以便随后将图像加载到该颜色中。像这样:

enter image description here

用于字体图标

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

用于跳至内容链接

您可以将该链接放在屏幕上方。只是不要稍后再通过JS隐藏它。从一开始就将其隐藏,或保留在那里。