如何摆脱网站加载时的闪色现象？

Question

当加载我的网站在 https:/latestfooty.co.uk，在网站加载之前总是有一闪而过的灰色。该网站是一个相对轻量级的登陆页面，不应该花这么长的时间来加载，所以我怀疑这个问题是由于我使用的线性渐变和扫描线效果的组合作为背景图片。之前我使用的是一个 SVG解决方案 来生成扫描线，而不是图像，"闪光 "效果非常明显，我不得不切换回图像方法。

如何才能把我网站上的这种闪色消除掉，让用户更顺利地加载？

EDIT：该 网页速度分析 似乎并不表明有什么问题，尽管很明显有问题，这表明这可能不是一个性能问题，而是一个错误。

Answer 1

如果你指的是图片出现前白色文字后面的灰色，这几乎可以肯定是下载背景图的时间。

你当前（写这篇文章时）的背景是通过设置的。

html {
     background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), 
                 url('images/StockSnap_POIHJNTKDB_1920.jpg') right/cover;
}

这表明在加载背景图片之前，一个灰色（不透明度为50%的黑色）的线性渐变被应用。

你有几个选择来改善这个问题，可以做以下任何一个（组合或单独）。

• 这个... 禅宗引用的预加载器 是一个选项。这样看来，你需要整体安装这个产品才能使用它的这个单一功能，实际上可能会给你带来更多的开销。
• 你可以把灰色背景改成其他颜色，或者完全删除它。
• 你可以减少背景图片的文件大小（目前为686kb），使其加载速度更快。
• 您的 网页速度洞察力 表明您没有缓存这张图片（或任何图片），这可以提高加载性能。PageSpeed Insights可能没有设置为判断CSS资源，这就是为什么它给你一个高分的原因。.

• 你可以应用一些 CSS @media 查询 所以你只调用尺寸足够大的图像来填充视口屏幕。

  这本身并不能解决这个问题，但肯定会对文件大小有所帮助。你目前的图像是2,343px × 1,080px，这在任何桌面电视大小的屏幕上都是巨大的。

  你需要创建许多不同尺寸的图像来完成这个动作。

Answer 2

试试这个 body{ background:none important }