I have a web app where I want to load several hundred SVGs onto one page.
As of right now I am uploading them all in Google Firestore after minifying the SVG. I then load them on the webpage and render the SVG as code on the page.
Would they load on the page faster if I upload all the SVGs to a headless CMS or some sort of CDN?
I just want to find the best way to do this so the user doesn't have to wait long for all of the SVGs to load.
Thanks so much for any advice!
Related
I have a lot of markdown files that I've imported into Contentful with images linked inside of them. The images link to external websites like Imgur for the source.
I'm trying to get the images to scale up and lazy load like you can do using the Gatsby Image API. The problem is that the images are all within the one html node due to how the markdown is processed.
The markdown is being set on the page using:
dangerouslySetInnerHTML={{ __html: body.childMarkdownRemark.html }}
Is what I'm trying to do possible? I feel like there is some way to chain Gatsby plugins to download the images locally from the html and then create nodes in GraphQL to handle this but I'm not sure. Ideally I don't want to have to change the markdown files to point to Contentful assets due to it not being easy to migrate to other solutions in the future.
Any help would be appreciated! Thanks
I have a simple page that utilizes angular, custom fonts/icons from google, and font-awesome.
I'm trying to understand why the long gap between loading icons and font-awesome. What is the browser doing in the background that is taking that long? It couldn't possibly be angular initializing since the script hasn't even been loaded yet by the browser.
Images on my home page overlap on load and also the it takes more time to load. Iam using magento 1.9.
I had used Litespeed_LiteMage magento extension to speed up my site load time but still there is no change.
I am still getting overlap images on page load.
How can I overcome this overlap issue
Mostpropably it is an error in your CSS. But there can be a lot of reasons why images overlap... maybe you can post a link here?
I'm in the process of building my website and have come across something I want your opinions on.
I've noticed that even though I've compressed my photos A LOT (18mb to 500kb or so) they take a while to load when I display them through my site. That being said, if I pull random photos from the web and use the link to display them, they load almost instantly.
With that being the case, would uploading all my photos to Flickr, then pulling the image URL and using that as my img src be better than using the actual file from my server as my img src?
Pros and Cons?
Obviously if Flickr ever went down I'd be hurting, but if it means that the other 99.99% of the time my photos load faster I'd be all for it.
Thoughts?
Usually those images are hosted on a CDN, which means they are on multiple servers throughout the world, while images on your site are only on one. That's why theirs load faster.
Let's say I have a web page with a 100 large flickr photos, all IMG tags are referencing the flickr urls. If I get a lot of traffic to this page, will this use my bandwidth consumption because the end user is still viewing these images on my domain or are they loaded from the end user's browser and it will not show up in my bandwidth stats?
They will not affect your bandwidth. This is called hotlinking. Images are stored on another server (owned by flickr) so they will be downloaded from it. When browses will spot your img tags, it will see the reference to the flickr images, so it will download it from there despite the fact the images are on your page.
Note that you do not have much control over hotlinked resources (if they are not yours). And when they are replaced by something else your page will immediately display changed images. You should also have permission to link to someone else's images.
No it will not contribute to your bandwidth. When your user loads your page their browser will hit flickr directly to load the images.