Hi all,
I am currently part way through trying to speed up my website but seem to have hit a wall.
I have gzipped the javascript files so that they are now loading quite quickly. What I can’t seem to speed up are the page images - at the moment all the images other than the nav bar are just placeholders.
I would really appreciate any advice on how I could speed up the loading of my site?
Just for further information it is being built on the Magento platform 
Thanks in advance for any help.
Tom
Your images are just too big - and I mean physically, not in terms of KB. And they aren’t even pictures, they’re just rectangular blocks of colour!
Why are you setting images in the content like that? Content should be text, not images. If you have the entire page made up of images, then (i) yes, it will be slow, and there’s nothing you can do about that, and (b) your website will be inaccessible to most people not using the traditional desktop PC setup, and that includes Googlebot.
Even if you are going to use massive images, for computer-generated graphics, you’re better off saving them as PNG or GIF than as hi-res JPG - the filesize will be much smaller.
And lastly - if Magento is giving you code like that, get rid of it. Delete it. Burn it. Exorcise it. Scrub the portion of your hard drive where it was installed with wire wool. I hope you didn’t pay any money for it because if you did then you were ripped off. To be quite frank, if they paid you to take it, you were ripped off. (Mind you, I say that about most WYSINWYG editors, they’re all useless. But this one is quite spectacularly awful). I mean, ferchrissakes,
<tr>
<td><img src="http://www.slippcases.com/skin/frontend/default/blank/images/navbar/spacer.gif" width="6" height="1" border="0" alt="" /></td>
<td><img src="http://www.slippcases.com/skin/frontend/default/blank/images/navbar/spacer.gif" width="37" height="1" border="0" alt="" /></td>
<td><img src="http://www.slippcases.com/skin/frontend/default/blank/images/navbar/spacer.gif" width="12" height="1" border="0" alt="" /></td>
<td><img src="http://www.slippcases.com/skin/frontend/default/blank/images/navbar/spacer.gif" width="53" height="1" border="0" alt="" /></td>
<td><img src="http://www.slippcases.com/skin/frontend/default/blank/images/navbar/spacer.gif" width="13" height="1" border="0" alt="" /></td>
<td><img src="http://www.slippcases.com/skin/frontend/default/blank/images/navbar/spacer.gif" width="72" height="1" border="0" alt="" /></td>
<td><img src="http://www.slippcases.com/skin/frontend/default/blank/images/navbar/spacer.gif" width="20" height="1" border="0" alt="" /></td>
<td><img src="http://www.slippcases.com/skin/frontend/default/blank/images/navbar/spacer.gif" width="94" height="1" border="0" alt="" /></td>
<td><img src="http://www.slippcases.com/skin/frontend/default/blank/images/navbar/spacer.gif" width="9" height="1" border="0" alt="" /></td>
<td><img src="http://www.slippcases.com/skin/frontend/default/blank/images/navbar/spacer.gif" width="93" height="1" border="0" alt="" /></td>
<td><img src="http://www.slippcases.com/skin/frontend/default/blank/images/navbar/spacer.gif" width="17" height="1" border="0" alt="" /></td>
<td><img src="http://www.slippcases.com/skin/frontend/default/blank/images/navbar/spacer.gif" width="36" height="1" border="0" alt="" /></td>
<td><img src="http://www.slippcases.com/skin/frontend/default/blank/images/navbar/spacer.gif" width="38" height="1" border="0" alt="" /></td>
<td><img src="http://www.slippcases.com/skin/frontend/default/blank/images/navbar/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
Have we been transported back to the eighteenth century without me noticing?
And to find this gem half way through the code really does take some beating:
</table>
</body>
</div>
</html>
Stevie D is right, images take ages to load. CTRL + Shift + S and you’re all set
Hey Stevie and Lisa,
Thanks both for your replies it is all very useful advice.
I can totally appreciate that the navbar images are taking far to long to load and that it would probably be better to use some basic CSS but I chose to use images to ensure that all visitors saw that particular font, regardless of their own computer setup.
As for the massive blocks of colour they are just image placeholders where I was planning on placing product photo’s and flash elements - this I imagine will also slow down the load considerably.
Other than using PNG’s rather than Jpeg’s is there any way I can compress the images to speed up the load time, or any specific modifications/tips I could use to speed up the site more generally?
Thanks again for your help.
Tom
Now, no offense, but TRAIN WRECK.
I’m not going to sugar coat this, you need help – badly. Let me run down the list of what I’m seeing wrong:
Redundant icon embeds pointing at a subdirectory instead of just letting document root do it’s job.
spacer.gif? What is this, 1997?
Full paths to files making the site non-portable and wasting bandwidth.
330k of javascript in 13 files? You’ve got more scripts than you do IMAGES!?! FOR WHAT?!?!? Here’s a tip, if you’ve got more than 30k of javascript on a page that doesn’t even do anything yet, you’ve shutupped the puppy so hard you dislocated it’s eyeballs.
Of course that most of it is that stupid malfing prototype nonsense mated to the disaster known as scriptalicious – do yourself a HUGE favor and forget that bull even exists! I don’t know what you are using it for – but you shouldn’t be using it. The same goes for that mm_swap nonsense from adobe which is basically using scripting to do CSS’ job!
From there we have IE conditional comments for nothing, static scripting in the markup, unneccessary classes thrown in all over the place, tables for layout, dozens of unneccessary div’s, MULTIPLE body tags (there can be only one), which is why it’s a completely uneccessary 22k of markup for a mere 398 BYTES of content! (there’s no reason for that to be more than 5k MAX!)
Of course without content in the page, you shouldn’t be this far along in the markup or styling.
Speaking of styling, the CSS uses a fat bloated train wreck of a ‘reset’ that’s damned near a framework, redundant properties, it obviously has specificity issues given the over-the-top use of !important, appears to be built entirely on the concept of presentational classnames (defeating one of the points of CSS) and has no condensed properties. Much less the ‘slap it all on one line’ nonsense that pretty much guarantees you have redundancy since it makes keeping track of what’s declared a joke.
Add in the endless width declarations for christmas only knows what, use of selectors that aren’t ready for prime-time use on production pages, and it’s hardly a shock to see 53k of CSS – easily four to ten times what’s needed!
I’d have to see the actual CONTENT that’s going to be plugged into that, though I highly suspect we’re looking here at a ‘but it works in photoshop’ layout – which has about as much to do with web design as drawing in the sand in terms of bandwidth use, semantic markup, and accessibility. Three things your average “But I can make a pretty PSD” crowd are typically blissfully unaware of. I say this because of things like that giant banner heading area at the top that doesn’t even fit most screens, the screen elements forcing it to a fixed width that’s not even 1024 friendly, the illegibly small top menu, the legibility issues of the white menu on a grey background, the illegible light grey text on white in the footer, use of fixed metric fonts that will be dictated by the fixed height containers… Drug addiction, alcoholism, sadism, beastiality, mutilation, murder, vampirism, necrophilia, cannibalism, not to mention a gamut of sexual goodies. Shall I go on?
My advice, throw it away and start over… and that includes the design.
Not trying to be mean – I’m just telling you what I see and why I suggest.
– edit –
Just noticed this:
content=“Magento, Varien, E-commerce”
<mythbusters>Well there’s your problem</mythbusters>… combine this with the telltales of dreambeaver and it’s no wonder you’re having issues.
Addendum: Just to show you what I’m talking about, for what you are doing layout-wise the markup should be more something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<meta
name="description"
content="Default Description"
/>
<meta
name="keywords"
content="Magento, Varien, E-commerce"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<link
type="image/x-icon"
rel="shortcut icon"
href="favicon.ico"
/>
<title>
Home page
</title>
</head><body>
<div id="pageWrapper">
<h1>
<a href="/">
Slipp Cases
<span><!-- CSS Image --></span>
</a>
</h1>
<ul class="topMenu">
<li class="first" ><a href="/customer/account/">My Account</a></li>
<li><a href="/wishlist/">My Wishlist</a></li>
<li><a href="/checkout/cart/">My Cart</a></li>
<li><a href="/checkout/">Checkout</a></li>
<li class="last"><a href="/customer/account/login/">Log In</a></li>
</ul>
<ul id="mainMenu">
<li class="iPod">
<a href="/leather-ipod-case.html">
iPod
<span><!-- CSS Image --></span>
</a>
</li>
<li class="iPhone">
<a href="/leather-iphone-case.html">
iPhone
<span><!-- CSS Image --></span>
</a>
</li>
<li class="macBook">
<a href="/leather-macbook-case.html">
MacBook
<span><!-- CSS Image --></span>
</a>
</li>
<li class="macBookPro">
<a href="/leather-macbook-pro-case.html">
MacBook Pro
<span><!-- CSS Image --></span>
</a>
</li>
<li class="macBookAir">
<a href="/leather-macbook-air-case.html">
MacBook Air
<span><!-- CSS Image --></span>
</a>
</li><li class="iPad">
<a href="/leather-ipad-case.html">
iPad
<span><!-- CSS Image --></span>
</a>
</li>
</ul>
<form
id="topSearch"
action="/catalogsearch/result/"
method="get"
>
<fieldset">
<label for="search">Search:</label>
<input id="search" type="text" name="q" value="" />
<input type="image" class="submit" src="images/go.png" alt="Go" />
</fieldset>
</form>
<div id="homePageSection1">
<h2>
SLIPP Cases <span>Coming Soon!
</h2>
<img src="images/productImage.png" alt="product image?" />
</div>
<div id="homePageSection2">
<div class="subSection">
<h2>Subsection</h2>
<p>
Some Random content Some Random content Some Random content Some Random content Some Random content Some Random content
</p>
<!-- .subSection --></div>
<div class="subSection">
<h2>Subsection</h2>
<p>
Some Random content Some Random content Some Random content Some Random content Some Random content Some Random content
</p>
<!-- .subSection --></div>
<div class="subSection">
<h2>Subsection</h2>
<p>
Some Random content Some Random content Some Random content Some Random content Some Random content Some Random content
</p>
<!-- .subSection --></div>
<!-- #homePageSection2 --></div>
<div id="homePageSection3">
<div class="subSection">
<h2>Subsection</h2>
<p>
Some Random content Some Random content Some Random content Some Random content Some Random content Some Random content
</p>
<!-- .subSection --></div>
<div class="subSection">
<h2>Subsection</h2>
<p>
Some Random content Some Random content Some Random content Some Random content Some Random content Some Random content
</p>
<!-- .subSection --></div>
<div class="narrow subSection">
<h2>Subsection</h2>
<p>
Some Random content Some Random content Some Random content Some Random content Some Random content Some Random content
</p>
<!-- .subSection --></div>
<!-- #homePageSection3 --></div>
<div id="footer">
<div class="subSection news">
<h2>
News
<span><!-- CSS Image --></span>
</h2>
<img src="images/news_block.jpg" alt="" />
<!-- .subSection --></div>
<div class="subSection newsLetter">
<h2>
NewsLetter
<span><!-- CSS Image --></span>
</h2>
<form
action="/newsletter/subscriber/new/"
method="post"
>
<fieldset>
<legend><span>Be the first to know...</span></legend>
<label for="newsletter">
Exciting news and exclusive special offers!
</label>
<input
type="text"
name="email"
id="newsletter"
/>
<input
type="submit"
class="submit"
value="Subscribe"
/>
</fieldset>
</form>
<!-- .subsection --></div>
<div class="subSection customerService">
<h2>
Customer Service
<span><!-- CSS Image --></span>
</h2>
<ul>
<li><a href="/contacts">Contact Us</a></li>
<li><a href="/delivery-information">Delivery Information</a></li>
<li><a href="/returns-refunds">Returns & Refunds</a></li>
<li><a href="/terms-conditions">Terms & Conditions</a></li>
<li><a href="/common-questions">Common Questions</a></li>
<li><a href="/privacy-policy">Privacy Policy</a></li>
<li><a href="/catalog/seo_sitemap/category">Sitemap</a></li>
</ul>
<!-- .subsection --></div>
<div class="subSection slipp">
<h2>
Slipp
<span><!-- CSS Image --></span>
</h2>
<ul>
<li><a href="/about-slipp-cases">About Us</a></li>
<li><a href="/brand-values">Brand Values</a></li>
</ul>
<!-- .subsection --></div>
<p>© 2010 Slipp Ltd. All Rights Reserved.</p>
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
One quarter the markup even with dummy content plugged into some elements, provides all the hooks needed to apply that same styling…
Should give you an idea of how bad that existing markup is.
Well … that’s an interesting set of priorities. I mean … I would much rather that people saw a page that loaded up instantly, that had text they could highlight, copy, paste, search for … and of course, one that Google might find … rather than them having to wait for ages while pretty graphics load, and then not being able to do anything with the text. But … it isn’t the navbar images that are causing the problem … they’re less than 1KB each, so while they would be better as text, they aren’t the culprit for the slow loading. No, it’s your placeholder images that are killing it.
As for the massive blocks of colour they are just image placeholders where I was planning on placing product photo’s and flash elements - this I imagine will also slow down the load considerably.
And there you have the problem. If you have pictures that big, even if you do optimise them and save them in an appropriate form at an appropriate compression level, they’ll still be bleedin’ huge and will make your site slow. As well as making it difficult for people to use and impossible for search engines to read.
And as for Flash … :x
If you want a website that looks snazzy on a first impression, go ahead and use Flash. As long as you accept that it will probably be crap once people actually start using it. You have to be seriously professional to create a site involving Flash that works well - the overwhelming majority of Flash sites and objects are just showing off at the expense of a good user experience.
If you want to make a site that people will enjoy using, you need text content in HTML, and ditch the showing off.
Other than using PNG’s rather than Jpeg’s is there any way I can compress the images to speed up the load time, or any specific modifications/tips I could use to speed up the site more generally?
Yup. As DS60 said (he doesn’t do ‘nice’, but he does do ‘accurate’), scrap the lot, learn some basic HTML and CSS, and design the site from scratch yourself, without using any templates or editors, because without exception they will produce disastrous code unless you know exactly what you are doing with them.
Thing is he could have BOTH – it’s what image replacement methods are for. The problem is more how those images are embedded – multiple files, using javascript to precache them AND handle the hovers, and tons of pointless TD and spacer.gif’s doing padding’s job!
I mean, look at the first menu item and the accompanying dividers
<td rowspan="2"><img name="navbar_r1_c1" src="http://www.slippcases.com/skin/frontend/default/blank/images/navbar/navbar_r1_c1.jpg" width="6" height="28" border="0" id="navbar_r1_c1" alt="" /></td>
<td><a href="http://www.slippcases.com/index.php/leather-ipod-case.html" target="_top" onclick="MM_nbGroup('down','navbar1','navbar_r1_c2','http://www.slippcases.com/skin/frontend/default/blank/images/navbar/navbar_r1_c2_f3.jpg',1);" onmouseover="MM_nbGroup('over','navbar_r1_c2','http://www.slippcases.com/skin/frontend/default/blank/images/navbar/navbar_r1_c2_f2.jpg','http://www.slippcases.com/skin/frontend/default/blank/images/navbar/navbar_r1_c2_f4.jpg',1);" onmouseout="MM_nbGroup('out');"><img name="navbar_r1_c2" src="http://www.slippcases.com/skin/frontend/default/blank/images/navbar/navbar_r1_c2.jpg" width="37" height="27" border="0" id="navbar_r1_c2" alt="" /></a></td>
IMG tag on a presentational image, javascript doing CSS’ job, rowspan for no good reason, hordes of image links for nothing… ID’s that shouldn’t even be neccessary – That’s one disaster of code and pointless scripting to do this code’s job:
<li class="iPod">
<a href="/leather-ipod-case.html">
iPod
<span><!-- CSS Image --></span>
</a>
</li>
Especially since with so called “CSS Sprites” you could combine all those separate images down to a single file. Though really I agree with Dtevie, throw away the goofy font and live with that the user might get a different font than you’re designing for.
Yeah, let’s not even get started about the flashtard crap. Flash is for videos and games, NOT for web development. Anyone telling you otherwise is packing you SO full of sand you could change your name to Sahara.
I still don’t get where that wasn’t being nice – it’s pathetic enough I have to cater to the thin skinned wussies by saying “I’m not trying to be mean” and tone down my speech to PBS daytime levels just because they’ve never worked in a real business environment. :smash:
If you cannot say what you mean, you cannot possibly mean what you say. 
I had a few spare moments, so I tossed together CSS and new images to go with that code I posted above. It got a few changes as I took an axe to the images for the main menu hovers.
As with all my examples the directory…
http://www.cutcodedown.com/for_others/t_pinchen/
… is unlocked for easy access to the images and CSS file. Valid XHTML 1.0 Strict, Valid CSS 2.1, tested working perfect in IE 5.01, 5.5, 6, 7, 8 and 9, Opera 10.6, FF 2 & 3.5, and the latest flavors each of Safari and Chrome.
5k of markup, 5k of CSS, 10k of images for a grand total of 20k in 12 files… Compared to the 544k in 48 files of your original.
Really your existing codebase is biting you in five places.
Bloated markup with tables for layout with presentational CSS.
Too much javascript doing CSS’ job and a reliance upon fat bloated scripting libraries.
Scripting libraries are currently getting WAY out of hand. As a rule of thumb I don’t allow more than 30k of javascript on a page – MOST of your scripting libraries like Prototype, Mootools and jQuery all blow past that all by themselves, or barely come in under that amount when compressed – leaving no room for the actual code that DOES THINGS. I mean Prototype ALONE is sucking down 127k – 127k is only 13k shy of the upper limit I allow for an entire page on a site (markup + CSS + scripts + images) excluding content images! Normally I aim for 70k as my ideal page size.
Too many files. More files == more ‘handshakes’ to the server. Requesting a file has a real world overhead of anywhere from 100ms to a full second – depending on the browser you can ignore the first two or the first eight, and there is some overlap on requests – but realistically your 48 separate files was causing 15-45 seconds overhead when you first loaded the page… as opposed to the 1-3 seconds overhead this rewrite has.
Presentational images in the markup. Really I see only ONE element on the entire page as it sits right now that could even be considered content, and that’s the white box in the middle of the blue area-- and I’m GUESSING as to what that is.
lack of image optimization. You stored everything as jpeg when really .png would have been a lot more efficient – your 26k ‘wrapper.jpg’ for example ended up a 199 byte .png in my rewrite. Your 11k footer_bkg.jpg is replaced by sharing [url=http://www.cutcodedown.com/for_others/t_pinchen/images/menuDivider.png]the bullets with the top menu and then using a [url=http://www.cutcodedown.com/for_others/t_pinchen/images/footerH2.png]1.3k .png for the image-replacement on the h2’s. I was even able to take the 4k logo.jpg and turn it into a [url=http://www.cutcodedown.com/for_others/t_pinchen/images/h1Logo.png]1.2k .png
Said .png’s not using alpha transparency and having their GAMA lines stripped using tweakpng, hence their working in IE without problems or scripting assistance.
The above five come down to the approach at building a page, you appear to be designing a layout to shoe-horn content into, instead of writing up the content and styling it. Layout and style should be dictated by the content of the page and not the other way around. It’s a bitter pill for the artsy/visual types to swallow (lord knows I had that problem six years ago) but people do not visit websites for the goofy graphics you hang AROUND the content, they visit FOR the content. As a rule I don’t even THINK layout until I have my semantic markup written… and rarely do I even need to add extra containers apart from the occasional image sandbag to my markup when making the layout.
It’s why having a layout before content is just silly – it’s putting the cart before the horse.
– edit –
Oh, and your content is being served uncompressed – you may want to look into having gzip compression turned on for .js, .css and .html
Hey Stevie and Deathshadow,
Thanks so much for your replies, particularly bothering to go through and create effectively the same page with less of the rubbish.
The big problem I have is that I eventually want the page to be an ecommerce page, as I am sure you can tell by now, I have little to know experience in this type of thing and you would be unhappy to hear that in the past have created entire websites using Macromedia Fireworks exported into Dreamweaver.
This site obviously is very different however as the entire thing is based on Magento which,as I am sure you know, is an open source ecommerce platform that is now being adopted by many leading ecommerce developers.
If you say that Flash etc will slow down the site so dramatically how do websites that appear to use loads of images ensure that the sites run quickly. Take high end fashion websites for example, I admit that some are really not that good in terms of user experience but even the worst still maintain pretty good performance. If I want to create an ecommerce setup that is both as aesthetic, professional and speedy as the best what is the best way to go about it?
@Deathshadow - thanks again for creating the site mock up and providing all of the relevant links, I can see exactly what you mean when you say how overcoded my site is. I imagine a lot of the reason though is that professional web designers and programmers would cut out everything they didn’t need at the beginning whereas I just leave everything in so as not to break anything ha! What would you recommend as the best way to learn this all?
Thanks again,
Tom
All of thing deathshadow60 said are correct. However, many of those things are common sacrifices when using content management systems without any customization done. Its the cost you pay for the generic. If its bothering you than from the core you need to start customizing the software to better fit your needs. Its the same assortment of problems with any boxed solution.
Like anything, the more power you have beyond it the better its going to perform. regardless if its a bloated, resource intensive monstrosity. Get more server power behind it and the speed will increase. I’m not a server, guy but generally upgrading the hardware can alleviate/hide efficiency/poor programming issues or at least lessen them.
Magento by nature is a bloated, resource intensive monster. Your going to want to a have fine tuned, optimal environment to support it. Especially for a site consisting of a large database. The way in which it does things is questionable, but it works! – right. HTML and JavaScript are probably some of the least of your efficiency issues when it comes to Magento. Not that they aren’t important, but most the efficiency issues with the software span from poor programming decisions in the Application code with Magento such as; EAV schema <shivers>.
At this point it probably is best to do some profiling. I could probably tell you with ~90% certainty that most of the efficiency issues are server side, not client-side.
Well, since they are still placeholders, it is likely that you will notice a change when you put in the actual images that you will use. You just need sure that you keep the files as small as possible.
Is youre problem solved?
I had a very slow website ones to, till i found out that there was to much unnecessary Javascripts in it, this solved my problem.
Andrea
hi,
Well if your system main memory is low then also it takes time to load the high resolution images, and Images within flashes and java script will take very long time. So check with your hardware compatibility.
next problem would be in your approach, well fault can be anywhere, I mean in your web page designing then images from where your code reading these images.
next, It could be because of some virus which specifically slow down the speed of browser, and hence result into slow down of web page loading.
![199 byte .png in my rewrite. Your 11k footer_bkg.jpg is replaced by sharing [url=http://www.cutcodedown.com/for_others/t_pinchen/images/menuDivider.png]the bullets with the top menu and then using a [url=http://www.cutcodedown.com/for_others/t_pinchen/images/footerH2.png]1.3k .png for the image-replacement on the h2’s. I was even able to take the 4k logo.jpg and turn it into a [url=http://www.cutcodedown.com/for_others/t_pinchen/images/h1Logo.png]1.2k .png](http://www.cutcodedown.com/for_others/t_pinchen/images/bodyBackground.png){kind=link}