My Bootstrap website takes a lot of time to load. I used template Celia from Envato to build it

Question

I purchased the Celia template from Envato Element and edited most of the codes. I hosted my website on Github here: https://github.com/rosyhnguyen/rosyhnguyen.github.io . I used the domain from Namecheap: https://rosyhnguyen.me

My site doesn't contain any video or media files, but it takes a lot of time to load (almost 5-10 seconds to load case study page).

Can you please help me with what's wrong with my setting? All of my settings are in the GitHub link above. The site takes a lot of time to load

Answer 1

If you want to have a good overview of what is happening on your site you should inspect the Network tab waterfall on Chrome developer tools.

From what I can see there's a resource called: 'sketchslider-2.png' and another png too that is 16mb. Images are killing your performance.

Image sizes on websites should be reduced as much as possible as well as using minified versions of CSS and Javascript.

You're using super heavy png files all over the places.

Also try to look in your code for some missing resources cause I saw also some 404 around.

You can reduce the size of your images using an image reducer tool (like https://tinypng.com/ ) or Photoshop for example.

I've made a screenshot to make you see the problem on your case study page.

Hope it was helpful.

Network waterfall screenshot

Answer 2

Check your network tab in chrome.

sketchslider2.png is almost 15 mb and the image size is 7001 x 3842

fitcheck.png is 4.5 mb and size is 8168 x 4000

unless you are planning on projecting your website to a wide screen TV, there is no need for these sizes.

Large scale images need should be optimized in the 1920 x 1080 range.

If you resize your sketchslider to 1920 width and save as a jpg then you can reduce its footprint to around 175 kb

for fitcheck, under the same conversion you can get it to around 100kb

up-decor.jpg also can't be found either and it is burning some time trying to resolve it.