Question

如何使用AMP并使用英雄图片和文字摆脱Page Speed Insights 优先显示可见内容警告？

我从空白的AMP锅炉板页面开始。 99分，没有优先级警告。好的，到目前为止很棒。

但是，我刚刚添加了一段文字： https://run.plnkr.co/preview/cj80bdid90002235spi9tf57y/

获得了94分，但它有优先级警告。

最终，我希望在顶部有一个带有一些文字的英雄形象，但这似乎更成问题： https://run.plnkr.co/preview/cj80c7n680002235srggnlk6o/

91得分，但优先警告。

 <!doctype html><html ⚡><head> <meta charset="utf-8"> <link rel="canonical" href="self.html"/> <meta name="viewport" content="width=device-width,minimum-scale=1"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script></head><body>

 <amp-img src="https://placehold.it/100x50" width="100" height="50" alt="Hero Image"></amp-img>

 <p>Lorem ipsum dolor sit amet</p>

 </body></html>

根据我的理解，当必须对上述内容进行多次往返时，会出现优先级警告。 https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent

好吧，如果我有一个导航条，标题和一堆没有显示的东西，那就没有意义。在这里，我只有一个段落。我已经尝试用段落填充页面，但我似乎没有做任何事情摆脱那个警告。

单个段落标记如何触发此警告？

更重要的是，是什么导致了这个错误，因为它是一个简单的例子？

Answer 1

我了解到：

PSI是一种较旧的工具，无法为AMP提供100％准确的结果
PSI对什么是最好的＆＃34;有自己的看法。对于没有的移动设备与AMP技术/哲学完全匹配
AMP的运行时引擎（Javascript）正好在PSI所需的极限之上折叠内容。所以只需加载AMP并在上面添加一些东西页面，你正处于其初始负载的边缘＃34;要求。
延迟内容，例如使用AMP-IMG会导致PSI判断页面糟糕。例如，PSI期望在页面顶部显示英雄图像不要延迟加载，但AMP-IMG只能延迟加载。

要解决此问题，我找到的唯一解决方案是使用AMP-List组件或任何支持Json的放大器组件来显示初始的首屏内容。然后，您仍然可以获得良好的评级。

AMP页面速度优先考虑可见内容警告

1 个答案: