在网站上的第一个背景图像加载速度很慢

Question

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

为了加载速度更快，我可以做些什么？ （这是你看到的第一件事情，所以即使是3-4秒也是如此......

Answer 1

有很多技巧，他们评论中的上面的小伙子是正确的，有些东西可以压缩它， 。分析什么是抽空

加载时间并提高他们都是围绕3个组成部分： - 网络延迟（它需要从浏览器将数据传递到您的主机的时间） - 影像尺寸（物理尺寸图像，下降管道） - 连接成本（建立与主机连接所需的时间）

现在，如果你我们采取你的方案，你h大的图像，但不是很大。那么，如何才能使其更快，以及我们可以删除它需要通过下载时间：

a）压缩了 - 这里的许多选项，与上面的谷歌一个沿，这里是一个简单的：https://tinypng.com/

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

c）使用CDN（如cloudflare）为你做很难的事情。 CDN将处理压缩，设置缓存标志，减少网络延迟并确保您的连接快速建立。有些像cloudflare有免费的启​​动资费，所以值得一看。

d）延迟页面渲染后使用JavaScript加载图像。上述做法仍然很好，但是如果你在document.ready上创建了一些JavaScript，并使用css/img标签，背景或者你正在使用的任何机制来设置背景，那么它将开始下载图片点，使您的用户能够在您的背景被定稿之前查看页面并与其进行交互。