许多站点请求大量资源（如图像）未针对某些屏幕进行优化，并发送包含某些设备永远不会使用的样式的大型 CSS 文件。使用媒体查询是向不同屏幕提供定制样式表和资产的一种流行技术，以减少传输给用户的数据量并提高页面加载性能。

建立在所有主要浏览器上都能正常运行的网站是开放式网络生态系统的核心宗旨。但是，这意味着要进行额外的工作，以确保计划要定位的每个浏览器都支持你编写的所有代码。如果要使用新的 JavaScript 语言功能，则需要为尚不支持这些功能的浏览器将这些功能转换为向后兼容格式。

网站中的图像和视频部分可能很重要。如果图像和视频资源过于臃肿时，会对访问者造成很大的困扰。幸运的是，延迟加载是一种可以减少初始页面有效负载和加载时间，而且不会损失访问者的时间。

与图像元素一样，你也可以延迟加载视频。视频通常会加载 video 元素（尽管出现了一种实现方式有限的替代方法 ）。但是，如何延迟加载 video 取决于用例。让我们讨论一些需要不同解决方案的场景。

由于 HTML 作为 img 标签或 CSS 背景图像内联在 HTML 中，因此图像可以出现在网页上。在本文中，你将发现如何延迟加载两种类型的图像。

图像通常在网页中占用很大的文件大小，并且经常占用大量的视觉空间。因此，优化图像通常可以为你的网站带来一些最大的字节节省和性能改进：浏览器下载的字节越少，客户端带宽的竞争越少，浏览器下载和在屏幕上呈现有用内容的速度越快。