使用srcset的Pagespeed惩罚

问题描述

显示视网膜非视网膜到相应的设备，例如：

Displaying retina & non-retina to corresponding devices like this:

<picture>
   <source srcset="non-retina.jpg, retina.jpg 2x">
   <img src="non-retina.jpg">
</picture>

Works。但是Google Pagespeed Insight告诉我们，在加载CSS之前，它无法呈现此图像，因此我们会为此受到惩罚。但是，仅在移动视图中，这是Pagespeed Insights仍然渲染视网膜图像的唯一情况。

Works. But Google Pagespeed Insight is telling that it cannot render this until the CSS is loaded, and we get a penalty for it. Only in mobile-view, however - which is the only case where Pagespeed Insights is rendering Retina-images anyway.

我们完整的CSS文件位于页脚，因为我们

Our complete CSS-file is in the footer, as we have the above-the-fold, critical CSS inline in the head.

但是，此代码在工作时不会受到Pagespeed Insights的任何投诉

This code, however, works without any complaints from Pagespeed Insights

<picture>
  <img src="non-retina.jpg">
</picture>

我们缺少什么？

测试用例：

这是它的测试页：
...
，其结果如下：

推荐答案

在Header中添加CSS，并在链接标记中使用defer属性。这样一来，可以先在客户端下载css，然后在加载整个文档后读取。

Add Your css in Header and use defer attribute in link tag. This will allow css to be downloaded on client side first but read after the whole document is loaded.

这篇关于使用srcset的Pagespeed惩罚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！