Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Aug 23, 2012, 04:52 AM   #1
twiggy0
macrumors 6502
 
Join Date: Oct 2009
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.
__________________
.
High Quality iPhone 5 UltraLight Cases
50% discount
http://amzn.to/RVHLu8
twiggy0 is offline   0 Reply With Quote
Old Aug 23, 2012, 08:08 AM   #2
Ap0ks
macrumors regular
 
Join Date: Aug 2008
Location: 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?
Ap0ks is offline   0 Reply With Quote
Old Aug 23, 2012, 11:45 AM   #3
manueld
macrumors 6502
 
Join Date: Jun 2009
Quote:
Originally Posted by Ap0ks View Post
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?
manueld is offline   0 Reply With Quote
Old Aug 23, 2012, 01:37 PM   #4
960design
macrumors 6502a
 
Join Date: Apr 2012
Location: Destin, FL
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!
__________________
TI-99/4A, tape cassette, 12" B&W Zenith
960design is offline   0 Reply With Quote
Old Aug 23, 2012, 02:18 PM   #5
twiggy0
Thread Starter
macrumors 6502
 
Join Date: Oct 2009
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.

----------

Quote:
Originally Posted by Ap0ks View Post
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.

----------

Quote:
Originally Posted by manueld View Post
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!

----------

Quote:
Originally Posted by 960design View 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!
__________________
.
High Quality iPhone 5 UltraLight Cases
50% discount
http://amzn.to/RVHLu8
twiggy0 is offline   0 Reply With Quote
Old Aug 23, 2012, 03:43 PM   #6
Ap0ks
macrumors regular
 
Join Date: Aug 2008
Location: Cambridge, UK
Quote:
Originally Posted by twiggy0 View Post
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.
Ap0ks is offline   0 Reply With Quote
Old Aug 23, 2012, 04:07 PM   #7
twiggy0
Thread Starter
macrumors 6502
 
Join Date: Oct 2009
Quote:
Originally Posted by Ap0ks View Post
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?
__________________
.
High Quality iPhone 5 UltraLight Cases
50% discount
http://amzn.to/RVHLu8
twiggy0 is offline   0 Reply With Quote
Old Aug 23, 2012, 04:45 PM   #8
Ap0ks
macrumors regular
 
Join Date: Aug 2008
Location: Cambridge, UK
I'm not seeing any slow loading images with caches disabled in Safari
Ap0ks is offline   0 Reply With Quote
Old Aug 23, 2012, 04:46 PM   #9
twiggy0
Thread Starter
macrumors 6502
 
Join Date: Oct 2009
Quote:
Originally Posted by Ap0ks View Post
I'm not seeing any slow loading images with caches disabled in Safari
Ahh awesome! Thanks for the help!

Cheers.
__________________
.
High Quality iPhone 5 UltraLight Cases
50% discount
http://amzn.to/RVHLu8
twiggy0 is offline   0 Reply With Quote
Old Jan 9, 2013, 01:12 PM   #10
markjeggar
macrumors newbie
 
Join Date: May 2012
If you need nay clarification on html image refer this www.corelangs.com/html/images it will help you to fix it.

mark.
markjeggar is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Tags
code, coding, html, html5

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
networking priority tildesley Mac Basics and Help 4 Oct 22, 2013 09:15 AM
App Store loading...loading...loading evilrt iPhone Tips, Help and Troubleshooting 0 Sep 22, 2013 09:05 AM
Websites not fully loading, taking 20-30 seconds to full load - not loading at all? johnnnw MacBook Pro 9 May 29, 2013 11:36 AM
How to request HTML page with "Loading..." mikezang iPhone/iPad Programming 8 Dec 14, 2012 12:08 AM
Priority one cnguyen0320 Apple, Industry and Internet Discussion 8 Nov 30, 2012 01:50 AM

Forum Jump

All times are GMT -5. The time now is 12:35 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC