Website Upload Slow

jttiglao · April 24, 2016

I know I have been creating a lot of threads in regards to my website, but that's because I'm really committed and determined to make this because it's for my uncle, and it's not like I'm going directly to here after I find an error. I spent hours trying to figure this problem out, but nothing has worked.

So basically, I have this website that consists of a lot of images. I have the website uploaded at ajtsolutions.com/jt/ultramedia/. In chrome and any other browser, the website is SLOW. Really, REALLY, slow.

BUT, when I use the Firefox browser, everything works perfectly. Flawlessly. (Besides some css and media queries that I'm still not done with.)

Here are somethings that I have tried to remove these slownesses:

Delete all photos and see if they are the problem: They aren't.

Compressed all of the JPEG photos, even though they never even caused a problem.

So obviously this has nothing to do with images. What is wrong? What am I doing wrong? Why does it only work the right way on firefox?

Here are some notes to maybe help you guys out:

I have a couple javascript files loaded.

My CSS file is 12 kb (If that matters)

I have a lot of scripts in my actual html (This is for smooth scrolling for anchor links, back to top button, popup slideshows, etc.)

Please read everything above before giving an answer, I don't want to get in a long conversation and then realize that I already tried that solution.

Thanks for helping!

Again, the website is http://ajtsolutions.com/jt/ultramedia Thanks.

maremp · April 24, 2016

First of all, you are creating tons of request for images and all the stuff. Look at the network tab, you are creating 122 requests and the total transfered size is 121MB. That's insane. Even with a decent host on fast internet, this is going to be slow. And users with limited data plans will crucify you.

The images you're using are way too large for what you need. You are using multiple images with ginormous resolution, which means the file size will be very large. They might look nice, but honestly, unless all the end users will be running 2x2 4K monitor setup, they won't see the difference. Reduce the image size and quality of jpeg encoding. By just opening it in photoshop and changing the size to 25% of the original and saving at quality 8 (high), I was able to change the previously 4.5MB (ERIN_MIKE_7-min.JPG) image to 488kB and this can still be reduced by around 10%-40% using minification tool like imagemin (Photoshop doesn't use this). For this specific image, I was able to get it down to 360kB and you could probably reduce the size even more, depending on what size of viewports are you planning to use. This reduced the file size to about 10% of original, but there are 70 images, which would still make it a very big site, so I suggest you to put even more effort into reducing the file sizes, from the content of the page it seems that your uncle is a photographer, so he should be familiar with how to do this.

Also, you should move the scripts to end of the body or add the async attribute so they won't block the initial DOM load.

Another thing I would suggest is that you don't hardcode all the images for the portfolio lightbox into the html. Define the urls in javascript array and create the img elements once the user clicks the button. This ensures that the images will only load when user wants to view them, which should greatly reduce the initial load size.

jttiglao · April 24, 2016

2 hours ago, maremp said:

First of all, you are creating tons of request for images and all the stuff. Look at the network tab, you are creating 122 requests and the total transfered size is 121MB. That's insane. Even with a decent host on fast internet, this is going to be slow. And users with limited data plans will crucify you.

The images you're using are way too large for what you need. You are using multiple images with ginormous resolution, which means the file size will be very large. They might look nice, but honestly, unless all the end users will be running 2x2 4K monitor setup, they won't see the difference. Reduce the image size and quality of jpeg encoding. By just opening it in photoshop and changing the size to 25% of the original and saving at quality 8 (high), I was able to change the previously 4.5MB (ERIN_MIKE_7-min.JPG) image to 488kB and this can still be reduced by around 10%-40% using minification tool like imagemin (Photoshop doesn't use this). For this specific image, I was able to get it down to 360kB and you could probably reduce the size even more, depending on what size of viewports are you planning to use. This reduced the file size to about 10% of original, but there are 70 images, which would still make it a very big site, so I suggest you to put even more effort into reducing the file sizes, from the content of the page it seems that your uncle is a photographer, so he should be familiar with how to do this.

Also, you should move the scripts to end of the body or add the async attribute so they won't block the initial DOM load.

Another thing I would suggest is that you don't hardcode all the images for the portfolio lightbox into the html. Define the urls in javascript array and create the img elements once the user clicks the button. This ensures that the images will only load when user wants to view them, which should greatly reduce the initial load size.

Yeah, I see what you are saying. I'm not a big cloud person so I thought that compressing it down to a couple megabytes would do.

I also see where you are coming from by changing the code not to make it initially download all together but when the user clicks it and wants it to load.. Buuuut... code is the bane of my existence... would you possibly know how to do this or some article that could explain what to do?

maremp · April 24, 2016

41 minutes ago, jttiglao said:

Yeah, I see what you are saying. I'm not a big cloud person so I thought that compressing it down to a couple megabytes would do.

I also see where you are coming from by changing the code not to make it initially download all together but when the user clicks it and wants it to load.. Buuuut... code is the bane of my existence... would you possibly know how to do this or some article that could explain what to do?

Not sure right now, try looking for image lazy loading or something. I bet there is already a library that does this for you. Not knowing how to code is a poor excuse both for not learning it and for creating bad UX.