Amp html AMP页面速度优先显示内容警告_Amp Html

Amp html AMP页面速度优先显示内容警告

amp-html

Amp html AMP页面速度优先显示内容警告,amp-html,Amp Html,我如何使用AMP和摆脱页面速度洞察，用英雄图像和文本优先显示内容警告我从空白的AMP锅炉板开始。99分，无优先级警告。好的，到目前为止很好然而，我只是添加了一段文字：得了94分，但有优先顺序警告 <!doctype html><html ⚡><head> <meta charset="utf-8"> <link rel="canonical" href="self.html"/> <meta name="viewport

我如何使用AMP和摆脱页面速度洞察，用英雄图像和文本优先显示内容警告

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

然而，我只是添加了一段文字：

得了94分，但有优先顺序警告

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

最终，我希望在顶部有一个英雄形象和一些文字，但这似乎更成问题：

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>

body{-webkit动画：-amp start 8s步骤（1，结束）0s1正常两者；-moz动画：-amp start 8s步骤（1，结束）0s1正常两者；-ms动画：-amp start 8s步骤（1，结束）0s1正常两者；动画：-amp start 8s步骤（1，结束）0s1正常两者}@-webkit关键帧-amp start{从{可见性：隐藏}到{可见性：可见}@-moz关键帧-amp start{从{可见性：隐藏}到{可见性：可见}}@-ms关键帧-amp start{从{可见性：隐藏}到{可见性：可见}@-o关键帧-amp start{从{可见性：隐藏}到{可见性：可见}@keyframes amp start{从{可见性：隐藏}到{可见性：可见}}}主体{-webkit动画：无；-moz动画：无；-ms动画：无；动画：无}

好的，如果我有一个导航栏，标题和折叠上方的一堆东西没有显示，这是有意义的。在这里，我只有一个段落。我试着用段落填充页面，但我似乎没有做什么可以摆脱这个警告
单个段落标记如何触发此警告
更重要的是，鉴于这是一个简单的例子，是什么导致了这个错误？
我了解到：

PSI是一种较旧的工具，不能提供100%准确的AMP结果
PSI对移动设备的“最佳”之处有自己的看法，而移动设备并非如此
与AMP技术/理念完全匹配
AMP的运行时引擎（Javascript）正处于PSI要求的上限
折叠内容。所以只需加载放大器并在屏幕上显示一些内容
页面，您正处于“初始加载”要求的边缘
延迟内容（如使用AMP-IMG）会导致PSI判断页面
糟糕。例如，PSI希望在页面顶部有一个英雄形象
不能延迟加载，但AMP-IMG只能延迟加载

要解决这个问题，我找到的唯一解决方案是使用AMP列表组件或任何嵌入Json的AMP组件来显示折叠内容上方的首字母。然后，您仍然可以获得良好的评级。
我学到了：

PSI是一种较旧的工具，不能提供100%准确的AMP结果
PSI对移动设备的“最佳”之处有自己的看法，而移动设备并非如此
与AMP技术/理念完全匹配
AMP的运行时引擎（Javascript）正处于PSI要求的上限
折叠内容。所以只需加载放大器并在屏幕上显示一些内容
页面，您正处于“初始加载”要求的边缘
延迟内容（如使用AMP-IMG）会导致PSI判断页面
糟糕。例如，PSI希望在页面顶部有一个英雄形象
不能延迟加载，但AMP-IMG只能延迟加载

要解决这个问题，我找到的唯一解决方案是使用AMP列表组件或任何输入Json的AMP组件来显示折叠内容上方的初始内容。然后，您仍然可以获得良好的评级。
2部分观察：我们使用（1）SVG作为英雄，它没有您描述的影响；（2）谷歌字体确实具有您描述的影响。因此，请尝试使用SVG，看看是否有变化。好的，查看您的源代码。问题出在谷歌字体上。SVG元素很有趣。我在上面的代码中没有使用谷歌字体——不确定您的意思。到目前为止，我收集的是PSI会查看前16KB的数据，但AMP要求立即恢复14KB。只要我添加一个段落标记，它就会查找页面加载，然后查找页面呈现，并发现AMP脚本“未使用”。2部分观察：我们使用（1）SVG作为英雄，它没有您描述的影响；（2）谷歌字体确实具有您描述的影响。因此，请尝试使用SVG，看看是否有变化。好的，查看您的源代码。问题出在谷歌字体上。SVG元素很有趣。我在上面的代码中没有使用谷歌字体——不确定您的意思。到目前为止，我收集的是PSI会查看前16KB的数据，但AMP要求res 14KB。只要我添加一个段落标记，它就会查找页面加载，然后查找页面呈现，并看到AMP脚本“未使用”