Search code examples
javascripthtmlimagegithubgithub-pages

Image loading slow on github pages website

I have a simple website created with HTML, CSS and JavaScript and it's hosted on Github pages. But on my site I have like 20 images and when I open my site on the browser it takes a while for the images to load.

How can I make my images load immediately or just faster? Is it because of Github pages host or is it because there are a lot of images on one site?

I have seen websites with more images than that and they are like preloaded or something.

Here is an image

Solution

  • Ways to make images load faster on page

    0. Check what's slowing down your page

    You can try finding what's slowing it down here: https://web.dev/measure/

    1. Compress your image

    You might need to compress your image if you don't need it to have so much quality. If you need quality, go to option 2. One website that does this is Kraken. This should allow the page to load faster.

    2. Use a CDN

    If it still does not work, use a CDN, or content delivery network, to host your images. CDN's store data in many data centers, making it to load data quicker. Try hosting your images in Cloudflare.

    3. Make your images smaller

    Large images can make your site load slower. So, resize them so they are a bit smaller.

    I hope this helps you!