如何通过调整图像大小和应用属性来减少页面加载时间？

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和解压缩来处理静态文件，这将节省一些时间。 我最好的猜测