Need help with HTML coding (Priority Loading)

[twiggy0]

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.

[Ap0ks]

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?

[manueld]

Originally Posted by Ap0ks

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?

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?

[960design]

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!

[twiggy0]

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/01...ercard.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.

----------

Originally Posted by Ap0ks

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?

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

----------

Originally Posted by manueld

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?

Link in the new post!

----------

Originally Posted by 960design

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!

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]

Originally Posted by twiggy0

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/01...ercard.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. [COLOR="#808080"]

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.

[twiggy0]

Originally Posted by Ap0ks

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.

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]

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

[twiggy0]

Originally Posted by Ap0ks

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

Ahh awesome! Thanks for the help!

Cheers.

[markjeggar]

If you need nay clarification on html image refer this www.corelangs.com/html/images it will help you to fix it.

mark.