预取较大的图像悬停div页面速度问题

Question

我目前有一个约20页的图像或从数据库中提取源数据的图像。

我在100像素宽显示它们和我有追加用具有250像素的宽度的全尺寸图像的元素的悬停功能。

我决定使用全尺寸的版本为原始图像，只是比例缩小到100像素，而不是使用缩略图版本。我的想法是，在这个页面上，用户很可能会将鼠标悬停在大部分图像上，因此页面最终不得不加载大部分图像的全尺寸版本，为什么要让它们下载缩略图并与每个元素的全尺寸版本。如果在较小的元素中有任何失真，则从250px缩放到100px似乎也不会显示太多。

现在我通过谷歌网页速度仪运行我的网页，它确实我使用比为更小的元素必要的图像大不一样。当然，它忽略了这样一个事实，那些更大的图像被用于动态创建的弹出窗口。

为了让我的页面在Google的页面速度测试器中表现良好，我为较小的元素提供了缩略图并使用缩略图，但我还希望预取较大的图片以避免用户在元素上悬停时出现恼人的延迟。这意味着我实际上加载了同一张图片的两个版本，只是为了让Google速度测试不会对我大吼。

这似乎是可笑的我，所以我想问问，如果这是真的做到这一点的最好办法还是有另一种方式让我玩网页与谷歌速度测试好的。

感谢， 亚当

Answer 1

如果你知道你在做什么，有没有必要成为一个奴隶的Page Speed得分。

加载图像的两个副本可能会使实际的页面速度变慢。但是，这取决于您想要优化的内容。如果您希望完整渲染速度快（因此用户可以看到该页面），然后在后台加载大图像以稍后添加交互性，则首先加载缩略图，然后再加大版本可能会更好。或者是否有更快的互动时间，并且完全呈现的时间并不重要。然后可能每个图像的一个副本更好。