0

I have a big SVG file about 50kb, that I can't add as an external image or from the CSS (where the SVG will be cached as an ordinary image), so the SVG is inside the HTML document.

This SVG exists on a lot of pages and loaded a lot of times.

But I am not sure it will make any impact on the performance, as the SVG still will be sent to the user view every time, so there are no traffic savings, and the SVG does not perform any model, database requests or partial rendering.

The question: Is it make any sense to cache such fragment? and if yes why?

Example:

  <html>
    <head>
      ...
    </head>

    <body>
      <div class="container">
        <svg ...>
          ... # => a lot of SVG code that can be cached
        </svg>
      </div>
    </body>

    <footer>
      ...
    </footer>
  </html>
GEkk
  • 1,336
  • 11
  • 20
  • The effects may be different on different operating systems, different browsers, different versions of browsers. There really is no substitute for doing your own testing on all the combinations that you feel are important. – Robert Longson Jan 13 '20 at 11:30
  • Why does this svg need to be embedded in the html instead of as an external asset? You'll get much greater performance bumps if you don't have to host it through Rails. Fragment caching won't give you any performance enhancements because you're simply rendering a static string which ruby ends up needing to do regardless of whether the string comes from cache or from hardcode in a view template. – Sean Huber Jan 13 '20 at 17:31
  • @SeanHuber the site's JAVASCRIPT and CSS are interacting with the SVG properties through the DOM. So I don't see other options. "Fragment caching won't give you any performance enhancements " Maybe it's the right answer if you are correct. – GEkk Jan 14 '20 at 06:59
  • 1
    Ah. My understanding is that you can still embed external SVG assets and manipulate them with javascripts/css by using the `` tag. Here are a couple blog articles for reference: https://vecta.io/blog/best-way-to-embed-svg and http://www.petercollingridge.co.uk/tutorials/svg/interactive/javascript/. If you can get this to work, then you can host your SVG with a CDN or your webserver (NGINX or apache); both of which will be much faster than Rails. – Sean Huber Jan 14 '20 at 16:06

0 Answers0