Jump to content
Latest News: (loading..)

Recommended Posts

Hi, I am using this addon works wonderfully but the menu with images takes a very heavy loading time.. Is it possible to load the images later after render is complete.. so it does not affect the speed of website. My version is the Frozen CE latest oscommerce.

Help would be deeply appreciated..

Thank you in advance

Warm Regds,

radhavallabh

Edited by radhavallabh

Share this post


Link to post
Share on other sites

@radhavallabh

Do you have the KissIT Image Thumbnailer for BS addon installed? If you don't you should because it will recreate those images in the thumbnail size that are required for the menu and greatly lighten the page load.

https://apps.oscommerce.com/oTI8V&kissit-image-thumbnailer-bs

If you are not using this addon, then what's happening is, the product images are being loaded in their original dimensions and the server has to scale them to fit to that thumbnail size. While that alone takes time, the image's original file size stays with the image as well, making it load slow.

 

 

Share this post


Link to post
Share on other sites
2 minutes ago, Demitry said:

@radhavallabh

Do you have the KissIT Image Thumbnailer for BS addon installed? If you don't you should because it will recreate those images in the thumbnail size that are required for the menu and greatly lighten the page load.

https://apps.oscommerce.com/oTI8V&kissit-image-thumbnailer-bs

If you are not using this addon, then what's happening is, the product images are being loaded in their original dimensions and the server has to scale them to fit to that thumbnail size. While that alone takes time, the image's original file size stays with the image as well, making it load slow.

 

 

I am using it already.. But when I switch on the images in the menu the page load time doubles up.. I wanted that they do not effect the page load time..

Share this post


Link to post
Share on other sites

Well, adding a lot of images to a page will affect the page loading time regardless of whether they are thumbnails or not. That's because they load one at a time ...so each thumbnail image in the menu is a separate single trip to the server.

The only ways I know of to get around it is to either use sprites, or a custom javascript code that will load them at the end of the page load. Both of these solutions would require custom coding and the javascript solution would not so much shorten your page load, but instead help load all the other content first so that the page renders quicker, while the product menu thumbnails would still continue to load.

I suggest to look and see if that Thumbnailer addon actually created a menu thumbnail image for each of your products. That would be the first step  It would rule out that it is the server scaling and image file size that is slowing down the page load.

Edited by Demitry

Share this post


Link to post
Share on other sites
1 hour ago, radhavallabh said:

I am using it already.. But when I switch on the images in the menu the page load time doubles up.. I wanted that they do not effect the page load time..

It is imposible that using the thumbnailer the page load slows down other than for the very first page load. It is when the thumbs are created (they are created on demand, not whent the thumbnailer is switched on).

So from the second load on (in general terms, not for the same visitor) page load will speed up.

You can test it like follows:

1. reset the thumb cache

2. switch thumbnailer off

3. delete your browsers cache

4. visit a category page with product listing and measure the loading time

5. switch thumbnailer on

6. reload the same page (thumbs will be created and it may be slower)

7. delete your browsers cache

8. reload the same page and measure the loading time

 

Share this post


Link to post
Share on other sites
3 minutes ago, raiwa said:

It is imposible that using the thumbnailer the page load slows down other than for the very first page load. It is when the thumbs are created (they are created on demand, not whent the thumbnailer is switched on).

So from the second load on (in general terms, not for the same visitor) page load will speed up.

You can test it like follows:

1. reset the thumb cache

2. switch thumbnailer off

3. delete your browsers cache

4. visit a category page with product listing and measure the loading time

5. switch thumbnailer on

6. reload the same page (thumbs will be created and it may be slower)

7. delete your browsers cache

8. reload the same page and measure the loading time

 

I know thumbnailer does work like a charm for me.. My issue is that the BS Menu with the images ON.. increases page load time which is effecting the page speed a lot. So I was asking if it is possible to lazy load the menu images after page load.

Please help on this would be deeply appreciated..

Warm Regds,

radhavallabh

Share this post


Link to post
Share on other sites

does the BS menu use the tep_image function and pass the correct image size? This is required to use the thumbs in the correct (mini) size there. Sorry, I do not use that add-on with images and do not know the code used there.

Edited by raiwa

Share this post


Link to post
Share on other sites

Rainer, @raiwa

This horizontal menu addon has an option for adding image thumbnails to the menu.That means that each page has to load every single product thumbnail (for that menu) with each page. Your Thumbnailer contribution helps greatly reduce that page loading time, but nothing can really eliminate a slower page load unless you do not use that images option with that horizontal menu.

That option is designed for a store with only  a few products or someone technical to constantly update a sprites image and related CSS code. A javascript code that loads these images after the rest of the page loads is only going to help marginally.

 

 

 

Edited by Demitry

Share this post


Link to post
Share on other sites

Demitry @Demitry

I had a look now on that version and it is not about product images, it's about category images. And yes you are right, the number of categories affect the loading time, but once the images are downloaded and in browser cache, they will be not downloaded again, they are the same for all pages.

 

@radhavallabh, the image thumbs are used and created in the correct size, so nothing to improve there.

Sorry, I can't help with the script, but make sure that you are not evaluating only first time page loads.

Share this post


Link to post
Share on other sites

@radhavallabh

Just curious how many categories with images are you trying to show?
Remember what I wrote in the first post of this thread.

Quote

*Please note:
To offer a horizontal menu as a general module is always difficult since it is not matching for every store. Some stores have a large amount of categories and sub-categories and therefore it might not fit.

@raiwa

Yes it uses the tep_image function but it shows only category images. Here an example:

if (MODULE_CONTENT_HEADER_CATMENU_IMAGE == 'True') {
$result .=  tep_image('images/' . $category['image'], $category['name'], SMALL_IMAGE_WIDTH*0.5, SMALL_IMAGE_HEIGHT*0.5, 'style="display:inline-block;"') . ' ' . $link_title . (($caret != false) ? $caret : null) . '</a>';
}

Edit: I see you beat me to it.

Edited by Tsimi

Share this post


Link to post
Share on other sites

ok, my fault.. I thought it was not just category images, but an image for each product. Sorry about that.

I use both, the horizontal menu and the thumbnailer, ..I just do not opt for displaying images in the menu for similar reason that Kavita mentioned.

Edited by Demitry

Share this post


Link to post
Share on other sites

@raiwa

Yes the thumbnailer is at work on the Categories menu when I switch the images on! On second load too it makes a little difference only..

I guess you are right scope to improve time load with many images in menu does not seem possible.

@Tsimi

Yes I have 6 main categories and many subcategories and sub-sub categories due to which a huge load is summing up..

@Demitry

Thank for throwing light on this...Yes I guess using the images will not be possible for me now.. Hence will try doing without it!

 

Thank you so much for guiding me on this.

Warm Regds./

radhavallabh

Edited by radhavallabh

Share this post


Link to post
Share on other sites

@radhavallabh

Kavita,

Just a note on nested directories and SEO.

Search engine bots generally do not crawl 4th tier links. So, a good rule to adhere to when building your site structure, is to keep your most relevant pages at 3 tiers or less.

So, the following structure would be as deep as you want to go with your most relevant pages.

Category (tier 1)

     Sub-category (tier 2)

           Sub-subcategory (tier 3)

                    Product pages

If you have multiple nested directories, this is bad for SEO and relatedly, it becomes more confusing and overwhelming for the customer. Remember, each link the customer has to click is a conscious decision. The more decisions a customer has to make, the more complex the journey becomes to buying one of your products.

And ideally it is best practice to keep categories, sub-categories, and sub-subcategories to 5 – 7 each (though you can have unlimited products in each category). This makes it easier for a customer to skim these categories. When you have too many categories, it’s human nature to skip over most if not all of them.

If you have a lot of products, then you should focus on improving your site’s search feature. About a third of your visitors will go straight for the search bar, and even more if you have a ton of products to choose from.

Share this post


Link to post
Share on other sites
3 hours ago, Demitry said:

@radhavallabh

Kavita,

 

Just a note on nested directories and SEO.

 

Search engine bots generally do not crawl 4th tier links. So, a good rule to adhere to when building your site structure, is to keep your most relevant pages at 3 tiers or less.

 

So, the following structure would be as deep as you want to go with your most relevant pages.

 

Category (tier 1)

 

     Sub-category (tier 2)

 

           Sub-subcategory (tier 3)

 

                    Product pages

 

If you have multiple nested directories, this is bad for SEO and relatedly, it becomes more confusing and overwhelming for the customer. Remember, each link the customer has to click is a conscious decision. The more decisions a customer has to make, the more complex the journey becomes to buying one of your products.

 

And ideally it is best practice to keep categories, sub-categories, and sub-subcategories to 5 – 7 each (though you can have unlimited products in each category). This makes it easier for a customer to skim these categories. When you have too many categories, it’s human nature to skip over most if not all of them.

 

If you have a lot of products, then you should focus on improving your site’s search feature. About a third of your visitors will go straight for the search bar, and even more if you have a ton of products to choose from.

 

 

Thank you for the awesome input.. I do have a 3 Tier category structure with lots of products.. But I have a tleast 11 subcategories to each category. I will surely take this up and try improving my site functioning and SEO...

Will get back here if I face any issue about this;

Thank you so much again;

Very warm Regds./

radhavallabh

Share this post


Link to post
Share on other sites

Can someone tell me how to center the category links that appear and how to change the font color and size of those links?

I'm speaking of only those parent categories that appear in the header, not the additional subcat links.

I've been messing around with user.css but I cannot seem to affect any changes there.

If someone could point me in the right direction, I'd appreciate it!

- Andrea

Share this post


Link to post
Share on other sites

@puggybelle

hi Andrea,

I'm not sure if this will work for your store, but this is what I used. Add this to your user.css file and after you upload it to the server, be sure to do a hard refresh (SHIFT CTRL R) of your browser. You have to do that every time you make any CSS change.

/* this will center the menu links */
.navbar-nav { width:100%; text-align:center; }
.navbar-nav > li { float:none; display:inline-block; }

The font color and button colors are in the bootstrap.css file, I think. I'll look for it and get back to you.

 

Share this post


Link to post
Share on other sites

@puggybelle

Andrea,

The font color is in the bootstrap.css file, but you should be fine if you add the following to your user.css file.

/* changes the menu font color and background */
.navbar-default .navbar-nav > li > a {
  color: #fff;
}
.navbar-default .navbar-nav > li > a:hover {
  color: red;
  background-color: #eee;
}
.navbar-default .navbar-nav > li > a:focus {
  color: #fff;
  background-color: #0066cc;
}

Please note that these are colors I use and you would need to change them to those of your own. My menu links are set to white on a blue background and will change to red with a light gray background on hover. See screenshot below.

I don't recommend changing these settings in the bootstrap.css file because you will need to regenerate the minified version of that file, as well as add those same changes to the two .map files. Adding this to the user.css file should be sufficient. And always remember to hard refresh (SHIFT CTRL R) the browser to view the new changes.

menu-screenshot.png.db1474c6d4db9fb61e70fb1bb0ba3885.png

 

Edited by Demitry

Share this post


Link to post
Share on other sites

@Demitry - Thanks so much for all of that!

Only one fly in the ointment.  The links at the very top of the website (navbar-inverse?) are now centering, as opposed to being right-justified as assigned in Admin > Modules > Navbar Modules.

I tried putting text-align:right in user.css for the navbar-inverse (already have something there to control the background color) but it's not moving the links back over.

Changed the font size, too, on my category links and that is also affecting the top navbar links like My Account and whatnot.  Any ideas?

- Andrea

 

Share this post


Link to post
Share on other sites

@puggybelle

Andrea,

Are you referring to the navigation bar at the very top of the page, because I don't use that on my site. I do use several of the sub-module buttons from it though. Could you pm me a screenshot of what you are referring to?

 

Share this post


Link to post
Share on other sites

Thanks @Demitry for helping out.
I think what she means is, when you add the css code you posted it will also change the looks of the links within the navbar since those also use the same classes.

Best would be to give it a new, unique class that only refers to that parent category link.
For example;

Inside the ..includes/classes/catmenu.php file

FIND
 

$root_link_title =  '<span><span class="fas fa-list"></span>&nbsp;' . $link_title . '</span>';

REPLACE WITH
 

$root_link_title =  '<span class="parent"><span class="fas fa-list"></span>&nbsp;' . $link_title . '</span>';

We added the class parent for this example. Name it whatever you want later.

Then add this to your user.css file

.parent {
 color: red;
}

This should have changed the parent link color to red.
Change the css code to whatever you like.

Edited by Tsimi

Share this post


Link to post
Share on other sites

@Tsimi

hi Lambros,

Thanks for that. I figured Andrea was referring to the top navigation bar, but forgot that the BS code affects both since I don't use that bar.

 

Share this post


Link to post
Share on other sites

@Tsimi

The suggestions you offered only affect the dropdown menus when a category is clicked on.

There is no change in the appearance of the category menu itself.

Stripping out all of @Demitry's code (but putting it back shortly!) and putting this in user.css only changes the dropdown links in the menu..

.parent {
color: red;
width: 100%;
text-align: center;
font-size: 22px;
}

- Andrea

 

Share this post


Link to post
Share on other sites

Changed the navbar style from inverse to default in Admin.

Added this to user.css

.navbar-nav.navbar-right {
    text-align:right;
    font-size:16px;
}

This stylesheet mess with CE is a PITA.  2.2 was much nicer to play with.

- Andrea

Share this post


Link to post
Share on other sites

@Tsimi Lambros this may have been reported before...I didn't see but it might have been. 

The use of this code in /includes/modules/content/header/templates/catmenu.php...

<?php if(MODULE_CONTENT_HEADER_CATMENU_XS_STATUS == 'True') { 
		echo '<div id="catMenu" class="col-sm-12 hidden-xs hidden-sm">';
	  } else {
		echo '<div id="catMenu" class="col-sm-12">';
	  } 
?>

Will result in an undefined constant warning if Categories Menu XS is not installed.  Obviously it's not a big deal but since I noticed it I thought I'm mention it FWIW.

Dan

Share this post


Link to post
Share on other sites

Trying to capitalize only the main categories without affecting the second level. Why doesn't the following (the second line) work?

#bs-navbar-collapse .dropdown-toggle {text-transform:uppercase;}
#bs-navbar-collapse .dropdown-submenu {text-transform:none;}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×