預取較大的圖像懸停div頁面速度問題

Question

我目前有一個約20頁的圖像或從數據庫中提取源數據的圖像。

我在100像素寬顯示它們和我有追加用具有250像素的寬度的全尺寸圖像的元素的懸停功能。

我決定使用全尺寸的版本爲原始圖像，只是比例縮小到100像素，而不是使用縮略圖版本。我的想法是，在這個頁面上，用戶很可能會將鼠標懸停在大部分圖像上，因此頁面最終不得不加載大部分圖像的全尺寸版本，爲什麼要讓它們下載縮略圖並與每個元素的全尺寸版本。如果在較小的元素中有任何失真，則從250px縮放到100px似乎也不會顯示太多。

現在我通過谷歌網頁速度儀運行我的網頁，它確實我使用比爲更小的元素必要的圖像大不一樣。當然，它忽略了這樣一個事實，那些更大的圖像被用於動態創建的彈出窗口。

爲了讓我的頁面在Google的頁面速度測試器中表現良好，我爲較小的元素提供了縮略圖並使用縮略圖，但我還希望預取較大的圖片以避免用戶在元素上懸停時出現惱人的延遲。這意味着我實際上加載了同一張圖片的兩個版本，只是爲了讓Google速度測試不會對我大吼。

這似乎是可笑的我，所以我想問問，如果這是真的做到這一點的最好辦法還是有另一種方式讓我玩網頁與谷歌速度測試好的。

感謝， 亞當

Answer 1

如果你知道你在做什麼，有沒有必要成爲一個奴隸的Page Speed得分。

加載圖像的兩個副本可能會使實際的頁面速度變慢。但是，這取決於您想要優化的內容。如果您希望完整渲染速度快（因此用戶可以看到該頁面），然後在後臺加載大圖像以稍後添加交互性，則首先加載縮略圖，然後再加大版本可能會更好。或者是否有更快的互動時間，並且完全呈現的時間並不重要。然後可能每個圖像的一個副本更好。