如何通過調整圖像大小和應用屬性來減少頁面加載時間？

Question

朋友的網站加載時真的很慢。 我使用gtmetrix.com（即使該頁面不是wordpress）進行檢查，並且頁面加載時間為8.4s（2.09MB，得分為C）。

結果指出了一些機會，以便提供更好的加載時間

1. 以下圖像缺少寬度和/或高度屬性。
2. 以下圖像在HTML或CSS中已調整大小。 提供縮放后的圖像可節省1007.9KiB（減少70％）。
3. 使用CSS精靈，應將以下從站點提供的圖像合並為盡可能少的圖像。

該頁面未使用wordpress且具有響應能力，該頁面缺少表示寬度和高度的屬性，但是我無法設置靜態的高度和寬度，並且提到了調整已調整為最大尺寸的圖像的位置。 我的意思是圖像尺寸為424x424，但使用的最大尺寸為300x300，如果我將所有圖像均縮小為300x300，真的有那么重要嗎？ 作為第三點，這意味着我應該真正將所有圖像組合為一個圖像，並使用CSS獲得相同的圖像但位置不同嗎？ 因為這些圖像是箭頭，按鈕，x

預先感謝您的任何答復。

Answer 1

每一點都很重要。 嘗試將圖像保存為頁面上實際顯示的尺寸。

在加載圖像之前，請確保通過諸如imageoptim之類的工具運行每個圖像。

頁面如何沉重？ 只是圖像嗎？

Answer 2

圖片應保存為每英寸72像素，因為這是網絡將其渲染的方式。 如果您需要支持視網膜顯示（高分辨率）類型的設備，並且想要使圖片看起來不錯（您應該這樣做）。 使它們的大小是您在網絡上所需大小的2倍。 然后按寬度和高度縮小它們。

例如。

您在頁面上有一張圖片，該圖片將顯示為300px x 300px。

您保存的圖片應為600px x 600px（72ppi）。

然后在瀏覽器中定義圖像的寬度和高度。

 <img src="randomimage600x600x.jpg" width="300px" height="300px">

這樣可以使圖像在網絡上更好地顯示。

Answer 3

您可以在客戶端使用gzip和解壓縮來處理靜態文件，這將節省一些時間。 我最好的猜測