Need help with HTML coding (Priority Loading)

twiggy0

macrumors 6502
Original poster
Oct 8, 2009
352
0
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

macrumors 6502
Aug 12, 2008
307
58
Cambridge, UK
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

macrumors 6502
Jun 8, 2009
254
0
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?
 

twiggy0

macrumors 6502
Original poster
Oct 8, 2009
352
0
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. :eek:

----------

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.

----------

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! :)

----------

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

macrumors 6502
Aug 12, 2008
307
58
Cambridge, UK
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. :eek:
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

macrumors 6502
Original poster
Oct 8, 2009
352
0
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?