Javascript 在pagespeed中对可见内容进行优先级排序

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

在我编写了一个简化的测试代码以了解发生了什么之后

<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>

.test1{
宽度：60px；
高度：60px；
保证金：5px；
边框：1px实心#123；
颜色：红色；
背景：url(http://upmovie.biz/wp-content/themes/movie2/img/movie.png);
}
.test2{
宽度：60px；
高度：60px；
保证金：5px；
边框：1px实心#123；
颜色：红色；
}
.test3{
宽度：60px；
高度：60px；
保证金：5px；
边框：1px实心#123；
颜色：红色；
}
.test4{
宽度：60px；
高度：60px；
保证金：5px；
边框：1px实心#123；
颜色：红色；
}   
测试1
测试2
测试3
测试4

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

浏览器显示图像，而谷歌服务不显示图像。

---

我陷入了停顿。我还能做什么？

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

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

图像的效果确实很明显，但在加载、向下推或拉内容后，其他内容也会出现这种情况

要解决这个问题，必须处理“跳到内容”链接、字体图标加载和图像

用于图像

您有三种选择：

1将图像移到下方，使其不会显示在“折叠上方”（最初可见）内容中。加载图像时，图像后的文本仍将重新定位，但这对读者来说不是问题，当读者阅读“折叠上方”的内容时，也不会出现问题

2创建一个包含图像且大小相同的div。因此，文本必须从头开始定位。无需等待加载图像。如果您希望您的站点能够响应，则必须仔细执行此操作

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

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

用于字体图标

不要让图标字体将所有内容向下推。预先设置按钮和盒子的高度

用于跳转到内容链接

您可以将上面的链接从屏幕上删除。只是以后不要通过JS隐藏它。从一开始就把它藏起来，或者放在那里