SVG图像加载缓慢或最后在站点中

Question

我在网站上有几个SVG背景。它们的大小不到50kb，然而，它们加载速度很慢，或者它们似乎也是网站上的最后一个元素。由于它们位于页面的标题上，因此在加载图像时我不需要空格。我一直试图找到答案或理由为什么会发生这种情况并优化svgs但似乎无法找到解决方案。我的背景是大约2-3秒白色，然后出现SVG。

我在CSS中内嵌SVG

这就是我在html上的内容

<div class='header-main'>
  <div class="header">
    <hr></hr>
    <h1 class="tagline">Some Text</h1>
  </div>
</div>

加载SVG的CSS是：

.header-main {
  background: url('{{ asset "/img/background-main.svg"}}');
}

Answer 1

您可以将svg直接写入html。这会强制它与页面的其余部分一起加载。