通过打开开发人员工具，背景图片的优先级较低，并且产品图片的优先级很高，因此，首先加载了产品图片，然后是背景图片。
在检查原因之后，发现由于背景图是通过CSS中的背景图像实现的，因此大多数主流浏览器都会降低标签图片以加载优先级，并且在所有首页都将在所有主页上加载加载。
通过上述演示，我尝试了两种方法，证明它们都可以：
最后，这两张图片是我们的背景图片。可以看出，它是在开始时加载的。与以前不同，产品图片像以前一样加载。
最后，从效果开始，我选择了第二种方式。
由于上述对背景图片优先加载方法的理解，让我们看一下图片资源的优先加载方法。
下载必要的资源，尤其是对于在浏览器初期不容易找到的资源。
您可以使用属性来控制加载资源加载更详细的优先级，包括和这些标签。可以优先增强LCP图像。
该属性可以指定三个值：
除了上述图片外，它还可以做其他事情：
为了防止预加载资源和其他关键资源的竞争，它可以减少其优先级：
如果页面上有一些必要的交互脚本，但是您不需要阻止其他资源，则可以将它们标记为高优先级，同时将它们加载为异步：
如果脚本取决于特定节点，则不能将它们标记为异步。但是，如果它们不需要第一个屏幕渲染，则可以减少其优先级：