优先显示内容 | Google 页面速度洞察

Question

我已经在 google 页面速度洞察中测试了我的网站，并且有几个错误和警告。其中之一是 优先显示可见内容。 我认为此警告背后的原因是 javascript 代码适合 header 图像。以下片段我正在使用：

<script type="text/javascript">
    function resize () {
        var heights = window.innerHeight;
        document.getElementById("fill-screen1").style.height = heights + "px";
        document.getElementById("fill-screen2").style.height = heights + "px";
    }
    resize();
    window.onresize = function() {
        resize();
    };
</script>

这是一个bootstrap轮播。

有什么方法可以消除这个警告吗？？

Answer 1

此文档页面应该可以回答您的问题。 https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent

This rule triggers when PageSpeed Insights detects that additional network round trips are required to render the above the fold content of the page.

"Above the Fold" 是一个网页设计术语，意思是用户首先看到的内容，如果您不知道的话。您的目标应该是最小化从请求到满载的时间。如果在文档中说你可以做几件事。您可以缩小 CSS。如果您从外部来源加载图像，请考虑改用 CSS/SVG。您也可以尝试将 third-party 小部件之类的东西放在页面下方一点点。它还说如果您有这样的网站布局，您可以在边栏之前加载文章。

我认为您的问题可能出在旋转木马上。如果它包含图像，请尝试只使用文本，或将轮播放在用户首先看到的内容下方。此外，您可能希望在加载 HTML 之后加载外部 CSS 和 JS。也总是在 JS 之前加载 CSS。

优先显示内容 | Google 页面速度洞察

Prioritize visible content | Google page speed insight

html

javascript

google-pagespeed

twitter-bootstrap