谷歌网页洞察:移动分数100 ..桌面80相同的图像

时间:2016-12-20 20:49:36

标签: image-compression google-pagespeed

现在一整天都试图解决这个问题,但我似乎不再进步了。我已经缩小了所有资源,将它们移到了底层,异步加载的javascript,压缩图像......但桌面得分仍然只有83/100而且这都是因为图像。

使用相同图片时,移动网页得分为100/100。我的网站上的图像使用ImageOptim(适用于Mac)进行优化,我已连接Kraken.io以使用其工具优化所有图像。 Kraken.io提供了最好的结果(保存了大部分kb),但桌面不会从83/100上升。

获得分数的唯一方法是选择10%的质量(93/100)或在主页上使用较少的图像(85/100)。

我的选项已用完了......如果有人想查看结果,我正在谈论的页面是https://pendo.nl

提前致谢。

1 个答案:

答案 0 :(得分:0)

你在标题中回答了你的问题 - 关键部分是“相同的图像”。以this图片为例。您在桌面版本中使用320x270px,而原始图像为800x600px(通过CSS调整大小)。

Google Page Insights认为无需加载额外的字节,并且建议改进报告(除了物理优化图像)。基本上你应该做的是使用~320x270原始图像用于桌面版。

有一个CSS调整大小余量,GPI允许,我认为保证金约为20%(我从未测试过它,但它通常适用于我,如果你有100px宽度的原始图像,你可以用CSS上/下调整大小宽度为120 / 80px)。这就是为什么当你做报告时警告是“压缩和调整大小”而不仅仅是“压缩”。

有几种方法可以解决这个问题。

  1. 媒体查询(请注意,在这种情况下您必须使用背景图片)
  2. Srssets
  3. JS