Shape 5

Joomla Templates => Sea of Glass - September - Club => : apessoa January 01, 2009, 04:20:30 AM



: Site takes forever to load
: apessoa January 01, 2009, 04:20:30 AM
Hi all and happy new year

I've created a site using joomla 1.5.5 with SOG 1.0 and virtuemart 1.1.2 but, unlike the demo of SOG, it takes forever to load.

I had to disable the main cache component since it has issues with virtuemart but am using QCache for trying to speed things up and a content optimizer plugin that further reduces image size. I'm also using gzip compression.
The URL rewrite is using SH404SEF.
All the tables were optimized with phpmyadmin.
I only use the core joomla components and the active components (frontpage slide, virtuemart cart, ...), having removed all non-published components that are not part of the joomla core instalation.


Running a website performance analyser here (http://analyze.websiteoptimization.com) I get the following results:

Diagnosis
Global Statistics
Total HTTP Requests:   102
Total Size:   550127 bytes

Object Size Totals
Object type   Size (bytes)   Download @ 56K (seconds)   Download @ T1 (seconds)
HTML:   9589    2.11    0.25
HTML Images:   207261    43.91    3.70
CSS Images:   65613    27.88    15.15
Total Images:   272874    71.79    18.85
Javascript:   227450    47.33    3.21
CSS:   40214    8.81    1.01
Multimedia:   0    0.00    0.00
Other:   0    0.00    0.00
External Objects
External Object   QTY
Total HTML:   1
Total HTML Images:   13
Total CSS Images:   74
Total Images:   87
Total Scripts:   10
Total CSS imports:   4
Total Frames:   0
Total Iframes:   0



For what i can understand, the main problems with the size of the homepage are the images and the .js

I've already optimized the images to a minimum size and even changed the homepage image to the standard demo image to see if it performs better - no changes in performance

I see that there are 227kB of javascript being loaded, including mootools, lytebox (that I disabled in the template options), suckerfish (also, not selected in the template options), and some additional stuff which I don't know if is really needed for the homepage.

Can someone help or give me hints on how to solve this?

The URL is http://www.acqualisboa.pt

cheers
Alexandre



: Re: Site takes forever to load
: jonahh January 01, 2009, 11:09:19 AM
Hello Alexandre,

I would try disabling whatever is being powered by Mootools to see if this is causing the problem.  If this doesn't help try temporarily taking out the analytics code.  These are the only 2 differences between your site and our demo that I see, so I'm guessing one of these must be the culprit.

Regards,


: Re: Site takes forever to load
: apessoa January 01, 2009, 07:56:36 PM
Hi jonahh

Thank you for the reply.
I'll try to find out what's using mootols and will also disable the analytics code.

In the meantime I checked the formatted html generated by the homepage and noticed that it loads (or at least calls) all the menu backgrounds. since every page has a different background, that could mean a lot of requests. The code sample is below. Is there any way of speeding this also?

Thank you in advance and best regards
Alexandre


code (sorry for the mess, or see in http://analyze.websiteoptimization.com/POP_formatted_HTML.php?file=www.acqualisboa.pt):
-----------

 <div ID="s5_middlemenu">
<div ID="s5_menu">
<div ID="s5_navv">
<ul ONMOUSEOVER="check_id()">
<li CLASS="active">
<span CLASS="s5_outer_active"><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/woodrepeat.jpg')" CLASS="s5_rs"><a CLASS="active" HREF="/">Home[/url]</span></span>
</li>
<li>
<span CLASS="s5_outer_active"><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/woodrepeat_short.jpg')" CLASS="s5_rs"><a CLASS="active" HREF="/O-Acqua-Lisboa/">O Acqua Lisboa[/url]</span></span>
<ul>
<li CLASS='noback'> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/lake.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/vida.html">O A da sua Vida[/url]</span></span>
</li>
<li CLASS='noback'> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/gui1.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/diferente.html">Sobre n?s[/url]</span></span>
</li>
<li CLASS='noback'> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/boat1.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/equipa.html">A equipa Acqua Lisboa[/url]</span></span> </li>
<li CLASS='noback'> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/sky.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/contactos.html">Contactos[/url]</span></span>
</li>
<li CLASS='noback'> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/woodrepeat_short.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/explore-o-nosso-site.html">Explore o site[/url]</span></span> </li> </ul> </li>
<li> <span CLASS="s5_outer_active"><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/sunset2.jpg')" CLASS="s5_rs"><a CLASS="active" HREF="/Os-Rituais/">Os Rituais[/url]</span></span> <ul>
<li CLASS='noback'> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/andaluzia.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/escolha.html">Como escolher?[/url]</span></span> </li>
<li CLASS='noback'> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/tree1.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/Com-Assinatura.html">Com Assinatura[/url]</span></span> </li>
<li CLASS='noback'> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/coins.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/Exoticos.html">Ex?ticos[/url]</span></span> </li>
<li CLASS='noback'> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/pontoon.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/Entardecer-no-Pacifico.html">Entardecer no Pac?fico[/url]</span></span> </li>
<li CLASS='noback'> <span><span><a CLASS="parent" HREF="/Os-Especiais.html">Os Especiais[/url]</span></span> <ul> <li> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/snowtree.jpg')" CLASS="s5_rs">
<a CLASS="sub" HREF="/Para-os-Noivos.html">Para os Noivos[/url]</span></span> </li> <li> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/beach2.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/Despedida-de-Solteiro.html">Despedida de Solteiro[/url]</span></span> </li>
<li> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/beach5.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/Sazonais.html">Sazonais[/url]</span></span> </li> </ul> </li>
<li CLASS='noback'> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/castle.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/etiquette.html">SPA Etiquette[/url]</span></span> </li> </ul> </li>
<li> <span CLASS="s5_outer_active"><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/clouds1b.jpg')" CLASS="s5_rs"><a CLASS="active" HREF="/Corpo-Perfeito/">O Corpo Perfeito[/url]</span></span> <ul>
<li CLASS='noback'> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/zen1.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/A-saber/">A saber[/url]</span></span> </li>
<li CLASS='noback'> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/sun1.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/Programas-de-Corpo.html">Programas de Corpo[/url]</span></span> </li>
<li CLASS='noback'> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/droplet1.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/Programas-de-Rosto.html">Programas de Rosto[/url]</span></span> </li>
<li CLASS='noback'> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/star2.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/Tratamentos-Pontuais.html">Tratamentos Pontuais[/url]</span></span> </li>
<li CLASS='noback'> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/grass3.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/Contorno-e-Firmeza.html">Contorno e Firmeza[/url]</span></span> </li>
<li CLASS='noback'> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/snow2.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/Terapias-Sensoriais.html">Terapias Sensoriais[/url]</span></span> </li>
<li CLASS='noback'> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/beach2.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/Depilacao-definitiva.html">Depila??o definitiva[/url]</span></span> </li> </ul> </li>
<li> <span CLASS="s5_outer_active"><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/winter.jpg')" CLASS="s5_rs"><a CLASS="active" HREF="/Ofereca/">Ofere?a[/url]</span></span> <ul>
<li CLASS='noback'> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/gui1.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/tesouros-para-si.html">Escolha para si[/url]</span></span> </li> <li CLASS='noback'> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/coins.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/o-presente-perfeito.html">Ofere?a um Voucher[/url]</span></span> </li> </ul> </li>
<li> <span CLASS="s5_outer_active"><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/water1b.jpg')" CLASS="s5_rs"><a CLASS="active" HREF="/Novidades/">Novidades[/url]</span></span> <ul> <li CLASS='noback'> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/star.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/Promocoes/">Promo??es[/url]</span></span> </li>
<li CLASS='noback'> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/spa5.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/Novidades/">Novidades[/url]</span></span> </li>
<li CLASS='noback'> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/bagas2.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/parceiros.html">Parceiros[/url]</span></span> </li>
<li CLASS='noback'> <span><span STYLE="background-image: url('http://www.acqualisboa.pt/images/stories/bagas1.jpg')" CLASS="s5_rs"><a CLASS="sub" HREF="/media.html">Media[/url]</span></span> </li> </ul>
</li>
</ul>
<script TYPE="text/javascript" SRC="/templates/seaofglass/js/s5_fading_no_moo_menu.js">
</script>
<script TYPE="text/javascript"> s5_load_bg();
</script>
</div>


: Re: Site takes forever to load
: jonahh January 16, 2009, 02:54:13 PM
Hello,

There really isn't a way around this as the Javascripts runs through a loop and assigns the images.


: Re: Site takes forever to load
: delliana February 14, 2009, 09:20:41 PM
May I ask what content optimiser?


: Re: Site takes forever to load
: apessoa February 15, 2009, 12:35:51 AM
Hi
I ended up reducing the page size to half by using a css/js compressor called SmartOptimizer that I found in a forum (not a joomla component but designed to work with joomla). I'm sorry, don't remember the url, maybe you can google for it.
I installed, followed the instructions for editing .htaccess and voil?, homepage size was reduced by half, with all the css and the .js compressed by 90%. The site is now much faster.

However, it's still very slow compared to other sites and to the demos.
Some things I found and couldn't work out:
- if you assign a different background to each menu (like I did), then the homepage tries to load them all or, at least, call's them when loading. This puts a significative overhead on the page.
- If you try to get around this, by not linking the pages to the mainmenu and rather have them on another submenu, then all these pages will not have a specific background and rather a dull sitewize backgroud color.  :-[
- Even if you are not using them, all the images in tipography (stars, checkboxes,...) are loaded in the homepage. Some more kilobytes to the page...;
- no matter if you have selected a specific type of menu, they will all load (no-fading, moo-menu,...).

Running the website analyser I get the indication of a page size of about 200kb and 100 http requests. According to this analyser, all images are squashed down and the css/.js is compressed, but the worst problem of my site is latency, because of so many requests, thus delaying it.

For now, I've given up trying to further optimize it (I spent many, many, many hours in trying this). I'll probalby move to some other transparent theme (Yoo, RT,..) as soon as I have a couple of free days to do the job.

Hope this helped

Best regards
Alexandre


: Re: Site takes forever to load
: jonahh February 17, 2009, 01:36:00 PM
In response:

- If you try to get around this, by not linking the pages to the mainmenu and rather have them on another submenu, then all these pages will not have a specific background and rather a dull sitewize backgroud color.  Embarrassed

You can change this background color and even specify a background image via the template parameters area of the template.

- Even if you are not using them, all the images in tipography (stars, checkboxes,...) are loaded in the homepage. Some more kilobytes to the page...;

I'm not sure what you mean by this, they aren't called on every page.  Only for IE6 as we had to apply CSS filters at the top of the index.php for that wondeful browser :)

- no matter if you have selected a specific type of menu, they will all load (no-fading, moo-menu,...).

We actually have PHP statements included so this does not occur and only the menu you select will be output:

:
<?php if ($s5_menu  == "1") { ?>
<script type="text/javascript" src="<?php echo $LiveSite ?>/templates/seaofglass/js/s5_no_moo_menu.js"></script>
<?php ?>
<?php if ($s5_menu  == "3") { ?>
<script type="text/javascript" src="<?php echo $LiveSite ?>/templates/seaofglass/js/s5_fading_no_moo_menu.js"></script>
<?php ?>


: Re: Site takes forever to load
: apessoa February 17, 2009, 01:53:13 PM
Hi Jonahh
Can you explain me a bit more on the template color feature?

In my template configuration I only have one color to select (pls see image attached).

Thank you and best regards



: Re: Site takes forever to load
: jonahh February 18, 2009, 09:02:45 PM
This is the area I was referring to when I said:

You can change this background color and even specify a background image via the template parameters area of the template.

You can set a background site wide (right above the background color) or a default color site wide.