网站上的第一个背景图片加载缓慢

Question

有点笼统的问题 - 但我认为仍然适合SO 我在网站上的第一张背景图片 - 加载缓慢。 现在，它是一个背景图像，但它应该适合大屏幕，所以它是一个900K png。

为了让它加载更快，我可以制作哪些技巧？ （这是你看到的第一件事，所以即使是3-4秒也感觉到......

Answer 1

有很多技巧。他们评论中的上述人员是正确的，你可以采取一些措施来压缩它，并分析花费时间的事情。

加载时间和改进它们大约有3个组成部分： - 网络延迟（将数据从浏览器传递到主机所需的时间） - 图像尺寸（沿管道下降的图像的物理尺寸） - 连接成本（与主机建立连接所花费的时间）

现在，如果我们采用您的方案，您的图像很大，但不是很大。那么我们怎样才能让它更快，我们可以通过以下方式消除下载所需的时间：

a）压缩它 - 这里有很多选项，以及上面的谷歌选项，这里有一个简单的选项：https://tinypng.com/

b）通过确保主机发送带有max-age的缓存控制来消除网络延迟。这意味着当您刷新它时，主机返回304并且该浏览器显示来自缓存的图像

c）使用像Cloudflare这样的CDN来为你做一些艰难的事情。 CDN将处理压缩，设置缓存标志，减少网络延迟并确保快速建立连接。有些人喜欢cloudflare有免费的起始关税，所以值得一看。

d）在页面渲染后使用javascript延迟加载图像。上述所有内容仍然很好，但是如果您创建一些javascript来触发document.ready并使用css / img标签，背景或您当前使用的任何机制设置背景，那么它将开始下载此时的图像，使您的用户能够在完成背景之前查看页面并与其进行交互。

Answer 2

除了提高网站性能外，我认为网站访问者提出压缩所有 图片的重要礼貌。

^{（这里并不是要侮辱任何人的智慧，只是为了澄清，压缩图像与“缩小”宽度/高度不同相同，尽管两者都会减少文件大小。）}

如果您有1000位访问者，并且您的站点有100张图像，并且每张图像节省了一半的加载时间，那么您只为人类节省了14个小时的页面加载时间！ （压缩图像只需要几秒钟。）

我偶尔用以下方式压缩“一次性” 手动：

• TinyPNG.com用于.png和.jpg（一次最多20张图像）
• ezGIF.com用于动画.GIF。

可以使用以下库以编程方式压缩图像批处理：

• pngquant或
• PHP的内置ImageMagick。

据我所知，它们全部使用相同的压缩算法，称为"Lossy Compression"，可以显着减少文件大小，而不会显着降低图像质量。