Store v2.3.4 BS with Newsdesk revival and responsive boxes

[milerwan 16]

Hi all,

 

You could find v2.3.4 BS of my shop from this URL : http://www.infinitydream.com

The script has been updated with the old Newsdesk addon (http://addons.oscommerce.com/info/934).
NB: Many changes were necessary to be able to make it work in an v2.3.x environment.

 

I have adapted the Front Page Carousel module (http://addons.oscommerce.com/info/9444) to boxes modules to show only 1 product when in column format and several products in large format (XS and SM screen sizes).
Like this the boxes are able to display several products across the width simultaneously.

Finally, I modified the search bar to displays the results on the fly via a dropdown menu with product image and article content Newsdesk.
To do this, I have modified the original script of Store Search (BS) (http://addons.oscommerce.com/info/9328) to show picture product and use SEO product keywords which is very effective for the relevance of research.
You could find this addon here : Store Search with Image (BS)  (http://addons.oscommerce.com/info/9504).

Otherwise, I tried to optimize space whatever the screen size to limit the blank zones.

Hope this example gives some ideas for current or future users. ;)

 

Regards.

Edited September 25, 2016 by milerwan

[burt 1,497]

Every thing seems to work good.

 

The site is not pretty.  You need to do something more to move away from the stock look.

 

For me, I dislike scrolling boxes.  Maybe 1 is oK.  You have five on the home page - it makes the page move too much.

[milerwan 16]

Every thing seems to work good.

 

The site is not pretty.  You need to do something more to move away from the stock look.

 

For me, I dislike scrolling boxes.  Maybe 1 is oK.  You have five on the home page - it makes the page move too much.

Thank you for your opinion.

 

As you see, the goal is to immediately highlight the richness of the products of the store, rather than a long narrative of what the store offers.

To operate this, scroll boxes work fine in my case and several reviews displayed rates from the first moments which can put visitors in confidence.

Without scrolling boxe it's more difficult without loss screen space.

 

As I have deleted the left category column, witout animation and curiosity of visitor, this one can go his way because he does not perceived the product catalog at the first page.

 

 

 

Edited September 26, 2016 by milerwan

[GLWalker 123]

I see lots of work went into your site. Good job keeping it together. You have to much going on with the scrolling though.

 

All the scrolling items scroll at the same time and is a big distraction and will not be very welcoming to users with certain impairments/disabilities. See https://www.w3.org/TR/WCAG10/#gl-movement for accessibility guidelines. 

 

No one really cares how much space your saving by using hidden elements that scroll into focus. It looks neat, but if one is interested they will click further.

 

Good job implementing newsdesk. That is an old monster.

[ecommunlimited 24]

That's a whole lot of scrolling going on. Because of it your scores are suffering really bad. Test your homepage URL at the links below and you'll see what I mean. I'll show you the difference.

 

These are my averages

 

On GTmetrix - PageSpeed Score: A, 99% - YSlow A, 98%

On Pingdom  - Performance Grade: 97, Load Time, 946ms

On Google PageSpeed Tools: Mobile - 94/100 speed, Desktop - 96/100 speed

 

https://gtmetrix.com/

https://tools.pingdom.com/

https://developers.google.com/speed/pagespeed/insights/

 

I'm not picking on you nor am I patting myself on the back. I'm just trying to show you how bad scrolling can hurt you.

 

Bill

[Mikepo 25]

@@milerwan

the following page is missing

http://www.infinitydream.com/contact_us.php

[milerwan 16]

@@milerwan

the following page is missing

http://www.infinitydream.com/contact_us.php

Do you mean the contact us link ?

It is hidden in "Info" dropdown button (nearch search bar).

[milerwan 16]

That's a whole lot of scrolling going on. Because of it your scores are suffering really bad. Test your homepage URL at the links below and you'll see what I mean. I'll show you the difference.

 

These are my averages

 

On GTmetrix - PageSpeed Score: A, 99% - YSlow A, 98%

On Pingdom  - Performance Grade: 97, Load Time, 946ms

On Google PageSpeed Tools: Mobile - 94/100 speed, Desktop - 96/100 speed

 

https://gtmetrix.com/

https://tools.pingdom.com/

https://developers.google.com/speed/pagespeed/insights/

 

I'm not picking on you nor am I patting myself on the back. I'm just trying to show you how bad scrolling can hurt you.

 

Bill

What are the consequences of a low rate ?

[milerwan 16]

I see lots of work went into your site. Good job keeping it together. You have to much going on with the scrolling though.

 

All the scrolling items scroll at the same time and is a big distraction and will not be very welcoming to users with certain impairments/disabilities. See https://www.w3.org/TR/WCAG10/#gl-movement for accessibility guidelines. 

 

No one really cares how much space your saving by using hidden elements that scroll into focus. It looks neat, but if one is interested they will click further.

 

Good job implementing newsdesk. That is an old monster.

Another "old monster" adapted can be see here displayed: http://www.infinitydream.com/kynar-wire-awg-30-p-54.html

 

Quantity Price Breaks Per Product (http://addons.oscommerce.com/info/1242)

 

NB: Original version used.

Edited September 30, 2016 by milerwan

[ecommunlimited 24]

As a general rule a webpage should take no longer than than 2 seconds. On GTmetrix alone yours is 4.9 seconds. Google can / will penalize you for that and they'll put you lower in the search ranks. So will the others. Nobody likes to wait on a slow page to load. And many people aren't willing to wait for it. Think about how many times you left a page because it's slow and you got tired of waiting on it. You personally might have a blazing fast internet connection, but not everyone does. The majority of online shopping takes place on mobile phones or  other small devices through WiFi. Think about how many times in your life that you haven't had a strong cell signal. You can have the best cell phone or tablet in the world and it does you no good if you got a lousy signal or a slow internet connection.

 

This is how rendering works at different connections. The more Mbit/s the faster the connection is. A whole lot of folks in this world don't have a 10 Mbit connection. And you can't forget that.

 

178.6 sec       56 kbit/s
78.1 sec        128 kbit/s
19.5 sec        512 kbit/s
10.0 sec        1 Mbit/s
5.0 sec          2 Mbit/s
1.0 sec         10 Mbit/s

 

You stated earlier: "As you see, the goal is to immediately highlight the richness of the products of the store, rather than a long narrative of what the store offers.
To operate this, scroll boxes work fine in my case and several reviews displayed rates from the first moments which can put visitors in confidence."

 

A narrative of what a store offers is called Content. Google believes Content is a must have. Google don't give a hoot about products, they care about content. It's a relevancy thing. If you have no content, you're not relevant to Google. They make the rules and if you don't follow them, they're gonna punish you for it. And that is a fact. And you're breaking 2 of the rules that are most important to them.

 

You stated: "As you see, the goal is to immediately highlight the richness of the products of the store". Well that all fine and dandy. But if Google doesn't send perspective customers your way, they'll never see the richness of the products. That equates to low sales. I already told you, Google don't give a hoot about your products. But they do give a hoot if you break their rules.

 

A slow website with very little content and, being a very visually distracting page is a bad recipe.

 

So it all boils down to this. By breaking their rules they won't send customers your way and therefore, you won't make as mush money. That is your consequences.

 

I'm not trying to give you a hard time @@milerwan, I'm trying to help you. I hope you understand that. Take care sir.

 

Bill

[Mikepo 25]

Do you mean the contact us link ?

It is hidden in "Info" dropdown button (nearch search bar).

@@milerwan

in contactus link on this page is broken

http://www.infinitydream.com/infinitydream-has-a-new-look-n-168.html

[milerwan 16]

@@milerwan

in contactus link on this page is broken

http://www.infinitydream.com/infinitydream-has-a-new-look-n-168.html

Fixed. Thank you for your vigilance. ;)

[burt 1,497]

OK, but you must do more to make this site look different;

 

1.  so that it does not look like all the other shop using the Responsive version

2.  so that the owner of this look does not one day decide to stop you using it

[milerwan 16]

As a general rule a webpage should take no longer than than 2 seconds. On GTmetrix alone yours is 4.9 seconds. Google can / will penalize you for that and they'll put you lower in the search ranks. So will the others. Nobody likes to wait on a slow page to load. And many people aren't willing to wait for it. Think about how many times you left a page because it's slow and you got tired of waiting on it. You personally might have a blazing fast internet connection, but not everyone does. The majority of online shopping takes place on mobile phones or  other small devices through WiFi. Think about how many times in your life that you haven't had a strong cell signal. You can have the best cell phone or tablet in the world and it does you no good if you got a lousy signal or a slow internet connection.

I have made some tests with carousel boxes and index disabled that gives from Mobile Website Speed Testing Tool :

 

Without modification :

- mobile speed : 53

- desktop speed : 64

 

With all corousel windows disabled :

- mobile speed : 61

- desktop speed : 73

 

If I disabled just "Best seller scroll" box :

- mobile speed : 60

- desktop speed : 71

 

It seems Best seller scroll box is as greedy for himself alone than the 5 carousel windows together !!!

 

How can I optimize the "best seller scroll" display ?

Edited September 30, 2016 by milerwan

[milerwan 16]

If I minore the number of products displayed for all boxes the speed rate grows...

I have read some advices about mod_headers and mod_expires which can be parameterized in .htacess file.

 

Does anyone know optimized settings for an oscommerce website ?

[ecommunlimited 24]

I'm in a massive hurry so I'm only going to mention one thing right now that can really help you. I'll tell you more later.

 

Since your partial to scrolling and other high resource usage things, you're using a lot of JavaScript. That's one of the major thing causing your site to be slow. If you get a CDN (Content Delivery Network) it will help you immensely. It won't solve every issue but it will help a whole lot. There's one called Cloudflare. Here's a link to them. https://www.cloudflare.com/plans/. It doesn't matter what your budget is they can work with you, and it's easy to do. They got a thing called Rocket Loader (it's for speeding up JavaScript), Mobile optimization with Mirage and Image optimization with Polish. They have many other things as well that can speed up your site and protect it too. That all depends on your budget. There's other CDN's out there that are pretty good as well. The beauty of Cloudflare is, you can use it if you're a novice or a pro. Or, whether your a large or small shop. I don't have time to explain how it all works. Hopefully you can trust me on this one. They've got videos that can explain it to you.

 

Also, you should implement everything you can from GTmetrix and Google PageSpeed. Those two and Cloudflare will be some of the best things to ever happen to your site.

 

Bill

[ecommunlimited 24]

If your running Apache 2 these will help immensely in your root .htacces. Other forms of Apache are similar. Set the mod_expires per your need.

 

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/atom+xml
  AddOutputFilterByType DEFLATE application/font-woff
  AddOutputFilterByType DEFLATE application/font-woff2
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/json
  AddOutputFilterByType DEFLATE application/ld+json
  AddOutputFilterByType DEFLATE application/manifest+json
  AddOutputFilterByType DEFLATE application/pdf
  AddOutputFilterByType DEFLATE application/rdf+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/schema+json
  AddOutputFilterByType DEFLATE application/vnd.geo+json
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/x-font/eot
  AddOutputFilterByType DEFLATE application/x-font/otf
  AddOutputFilterByType DEFLATE application/x-font/ttf
  AddOutputFilterByType DEFLATE application/x-font/woff
  AddOutputFilterByType DEFLATE application/x-httpd-php
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/x-web-app-manifest+json
  AddOutputFilterByType DEFLATE font/eot
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE font/woff
  AddOutputFilterByType DEFLATE image/bmp
  AddOutputFilterByType DEFLATE image/gif
  AddOutputFilterByType DEFLATE image/jpg
  AddOutputFilterByType DEFLATE image/jpeg
  AddOutputFilterByType DEFLATE image/png
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/webp
  AddOutputFilterByType DEFLATE image/x-ico
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE image/x-generic
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/eot
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/pdf
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/richtext
  AddOutputFilterByType DEFLATE text/tff
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/xsd
  AddOutputFilterByType DEFLATE text/xsl
  AddOutputFilterByType DEFLATE text/x-generic

<IfModule mod_headers.c>
  <FilesMatch "\.(js|css|xml|eot|flv|gif|gz|htm|html|ico|jpg|jpeg|otf|png|pdf|php|swf|text|ttf|woff|woff2)$">
    Header append Vary: Accept-Encoding
  </FilesMatch>
</IfModule>

 

<IfModule mod_expires.c>
  <FilesMatch "\.(pdf|flv)$">
    Header set Cache-Control "public, max-age=2629746"
  </FilesMatch>
  <FilesMatch "\.(bmp|cur|gif|ico|jpg|jpeg|png|svgz|swf|webp)$">
    Header set Cache-Control "public, max-age=2629746"
  </FilesMatch>
  <FilesMatch "\.(css|js)$">
    Header set Cache-Control "proxy-revalidate, max-age=31556926"
  </FilesMatch>
  <FilesMatch "\.(html|htm|php|txt|xml)$">
    Header set Cache-Control "proxy-revalidate, max-age=600"
  </FilesMatch>
  <FilesMatch "\.(woff|woff2|ttf|eot)$">
    Header set Cache-Control "public, max-age=2629746"
  </FilesMatch>
</IfModule>

 

Bill

[ecommunlimited 24]

@@milerwan you stated: 'If I minore the number of products displayed for all boxes the speed rate grows...". Some scrolling mods have a speed rate setting. Look in the documentation for the install and operation of your addon. There may be something in there to tell you how to slow it down.

 

In regards to your question about "How can I optimize the "best seller scroll" display?" there's several thing you can do. All of what I'm about to tell you can work for far more than just your Best Seller box.

You can minify any high resource usage blocks of js, css or html code that are in there. You can minify the whole files too.

You can use this javascript minifier.
http://dean.edwards.name/packer/

You can use this css minifier. They have far more options than just css.
http://cssminifier.com/

You can use this html minifier.
https://kangax.github.io/html-minifier/

All of these work very well.

You can minify your whole site too. An absolutely beautiful server side minifier for your whole site is Chemo Compress. It works with any version of osC. It takes about 60 seconds to install. And it works wonderful.
http://addons.oscommerce.com/info/8928

You do not have to have any coding experience to use anything I mentioned above. The default setting work just fine for ordinary use. There's some stuff out there that other consider to be better. Although they take more knowledge to make them work in your favor, more time to learn how to operate them and more time to implement.

I highly recommend Chemo Compress

Bill

[milerwan 16]

@@milerwan you stated: 'If I minore the number of products displayed for all boxes the speed rate grows...". Some scrolling mods have a speed rate setting. Look in the documentation for the install and operation of your addon. There may be something in there to tell you how to slow it down.

 

In regards to your question about "How can I optimize the "best seller scroll" display?" there's several thing you can do. All of what I'm about to tell you can work for far more than just your Best Seller box.

I mean data speed rate (sure there are settings into the carousel module to improve speed of product/image scrolling).

 

 

@@ecommunlimited

 

Very interesting links you offer me, thank you.

Does the load acceleration will be concretely significant on an oscommerce script ?

 

When you use minifer, I guess you have to put aside the original files in case of change.

Need to keep a full backup of the website out or in the server, isn't it ? 

Edited October 1, 2016 by milerwan

[ecommunlimited 24]

@@milerwan

 

Yes, minification can increase that rate of the data transfer. Minification removes unrequired charectors and white spaces in the data. If there's less charectors and white spaces, then it takes the servers less time to read and transfer the data. So that's how it can increace the rate of the data being transfered.

Although, you must know this about minification. If you chose to minify a file you have to be aware of the fact that some files have mixed content in them. There can be a mix of js, css and html in a file. Each one of those are to be minified differently. Using js as an example, a charector that may be requied for js, may or may not be requied for html or css. If you remove or alter something that is required for one, you can break another. Or you can break your whole site.

The only time I minify a whole file all at one time is if it has only one type of code in it. If it has mixed types of code in it, I minify each block of code seperately. First I minified many files and after I did that I minified my whole site.  

If you really want to increase the speed of your site you should use the things I suggested ealier like using a CDN, use the code (or something similar) for the root .htaccess file and minify as much as you can. You should also compress your images as well as sprite images where you can. You should also decrease the amount of your js and css files. You can combine most of your js into one file and combine most of your css into one file.

Yes, you should always make a complete backup before you make changes to your files or folders. You should backup your database as well. A really great backup will save you if you ever screw up or if the code is poorly written. You can also rename a file an original file and create a new one with the old name. An example of this is: original file named whatever.php renamed to whatever.php.orig then create a new file and name it whatever.php. You then copy the code from whatever.php.orig and paste it into the new whatever.php.

You can also create a temp folder called temp (or some other name you chose) and move the original whatever.php file to the new temp folder. You can copy whatever.php to a temp folder as well.

 

Bill
 

[milerwan 16]

Attentive to your remarks about the visual gene caused by carousels, I slowed down considerably the speed of scrolling of products.
The result seems to be less aggressive for eyes.  >_<

Edited October 4, 2016 by milerwan

[auzStar 134]

@@milerwan

Attentive to your remarks about the visual gene caused by carousels, I slowed down considerably the speed of scrolling of products.
The result seems to be less aggressive for eyes.  >_<

 

You could go one step further and turn off auto-play for some carousels. Not necessary to have them all scrolling. The scroll indicators will still be visible and if a customer wants to scroll through carousels they can.

 

cheers

[ecommunlimited 24]

By slowing the scrolling rate down, and whatever else you've done, you brought your page load scores down from 4.9 to about 3.3 seconds. If you do as auzStar suggested they'll come down even more. Everyone here can see you're trying to improve, you get a pat on the back for that @@milerwan.

[milerwan 16]

By slowing the scrolling rate down, and whatever else you've done, you brought your page load scores down from 4.9 to about 3.3 seconds. If you do as auzStar suggested they'll come down even more. Everyone here can see you're trying to improve, you get a pat on the back for that @@milerwan.

You're right, page speed loading is still too hight for some pages (product_info.php for example).

When I make a PageSpeed Insights test, it says that there are js scripts that block the page displaying :

• ext/jquery/jquery-2.2.3.min.js
• ext/menu_xs/js/modernizr.custom.js
• ext/menu_xs/js/jquery.dlmenu.js

But the call of "jquery/jquery-2.2.3.min.js" is originaly located in template_top.php file as style .css files :

<link href="ext/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- font awesome -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<link href="custom.css" rel="stylesheet">
<link href="user.css" rel="stylesheet">

<!--[if lt IE 9]>
   <script src="ext/js/html5shiv.js"></script>
   <script src="ext/js/respond.min.js"></script>
   <script src="ext/js/excanvas.min.js"></script>
<![endif]-->
 
<script src="ext/jquery/jquery-2.2.3.min.js"></script>

Do these calls files must be placed in template_bottom.php file rather than template_top.php file ?!?

Edited October 5, 2016 by milerwan

[ecommunlimited 24]

@@milerwan

You're on the right track, I can help you make your site faster. You won't have to go through as much of a leaning curve as I did. Your version of osC is close to mine so a lot of the stuff that worked for me will work for you. I have to go to the store first and then I'll come back and put something together that will help you out. If you do what I suggest your site will speed up very quickly and most of the stuff the testing sites complain about will be a whole lot less. The osC community is about helping one another out as well as many other good things. I'll be back.

 

Bill