Need help with HTML coding (Priority Loading)

Hello Macrumors,

I started up a new company called clearcrate a month ago that focuses in apple accessories. I don't really have a team up to help me with everything, so I basically take care of everything myself. The point being that I was trying to edit coding in my front page.

I wanted to add the images of credit cards that I accepted at the footer of the page. I successfully did this by using the following code:

img src="http://www.picture.com/photo" (with "<" and ">" on each end)

The problem is that once i added that, the page loading was slowed down tremendously. (specifically the product pictures)

Is there a way in html to give those credit card images an order to be the last thing to load on the page? (or to not interfere with the rest of the page loading)

Any help would be really appreciated!

Cheers.

First and foremost, thanks for the wonderful help!

I'm storing the files on my site, they're extremely small (44 x 33 pixel or something)

https://cdn.shopify.com/s/files/1/0136/1212/t/1/assets/mastercard.png?693

And I feel like it's that because I did tests and when I removed them from my site, all the pictures on my page loaded in like 2 seconds, uncached, and 0.05 seconds cached. And then when I add the credit card icons, the pages took like 10-12 seconds uncached, and like 5-6 seconds cached. I had some friends test it out as well and the results were on par with my theory. I'm not sure what to think anymore.

----------

Ap0ks said:

A simple picture of the credit card types you accept shouldn't slow down the website at all.

Have you made sure the images are optimised for the web (i.e. small filesize)? or are they loaded from an external source?

Click to expand...

Yeah, they are really small file sizes, check the link I posted! I'm hosting them in my assets page of my hosting partner.

----------

manueld said:

This is probably the case (in regards to the file size). Make sure the images are resized for the web. Care to share a link so we can better assess the issue?

Click to expand...

Link in the new post!

----------

960design said:

Agree with the above, probably using 6MB per image.
Try using these:
http://www.iconshock.com/credit-card-icons/

just me

PS nice site design. Thank you for not distracting the customer, but focusing on the site's purpose, to make you money!

Click to expand...

Thank you with the link, though I've found a great source for sleek icons that are free already haha!

And thank you for the compliment!

Ap0ks said:

Have you tried using http:// URLs rather than https:// ones ? Opening an SSL connection to load a couple of images could add a small overhead to the load time, or a larger overhead if the server is busy.

Click to expand...

Oh I never thought of that, I feel like that might have done the trick, it's more responsive.

Could you switch back and forth between the macbook pro 13" and macbook pro 15" tabs, and see how fast all 10 product pictures load?

Ap0ks said:

I'm not seeing any slow loading images with caches disabled in Safari

Click to expand...

Ahh awesome! Thanks for the help!

Cheers.