Menu
The title may be quite vague cause I'm not too sure how to word it, but I'm wondering which would take longer to load like
this type of loader: https://codepen.io/aurer/pen/jEGbA
<html></html>
or a gif loader such as this:
I would almost always think its the picture, but I just want to make sure.
422
asked Dec 06 '25 13:12
You're right... and you're wrong... and you're right.. and it's a good question.
The gif takes longer to load because it is another file (except http/2 is fixing that) and it is 44 KB. The inline svg method looks like it is about 1 KB, it may be even faster gzipped, and it is inline so there's no extra file overhead. For a single page load without caching, the inline svg is faster.
Here's the rub.
Once it is cached, the .gif doesn't get loaded so it's faster than having SVG inline content... For repeated page loads, with cached data, the external gif results in a smaller html file and no need to download an image file, so it is faster.
But what if the html is cached? Then we're back to inline being faster...
52
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
