10

I have a couple of SVG backgrounds on a site. Their size are less than 50kb, however, they load slow, or also, they seem to load as last element on the website. Since they are on the header of the page, I don't want a blank space while the image loads. I have been trying to find an answer or a reason to why this happens and optimize the svgs but can't seem to find a solution. My backgrounds are for about 2-3 secs white and then the SVGs appears.

I'm loading the SVG inline in CSS

This is what I have on my html

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

and the CSS loading the SVG is:

.header-main {
  background: url('{{ asset "/img/background-main.svg"}}');
}
John R
  • 247
  • 1
  • 4
  • 15
  • 1
    what is {{ asset }} syntax? What converts that to actual CSS and when does it run? – Robert Longson Sep 02 '17 at 05:29
  • Using inline SVG may help in your case. The loading timings would reduce as there would be less http requests; however, [you must take into account that those SVG won't cache](https://stackoverflow.com/questions/23210126/inline-svg-vs-svg-file-performance). – Tedds Sep 02 '17 at 07:37
  • I'm also getting this issue, even with inline SVGs. They always load last on the page. – dessalines Jul 16 '21 at 15:36

1 Answers1

2

You could write the svg directly into the html. That would force it to be loaded along with the rest of the page.

EKW
  • 2,059
  • 14
  • 24
  • This works but I do not want to directly insert in html as I'm sharing it with other components and do not want to paste everywhere because then the update would mean updating all the file instead of single file. – Waleed Ahmad Jan 24 '23 at 10:00