Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

How good is stock OsCommerce?


JcMagpie

Recommended Posts

Ok next one,

image.png.1eff0fa371975cc370b21949f367201f.png

The issue appears to be with manufacturers box !

<select name="manufacturers_id" onchange="this.form.submit();" size="1" style="width: 100%" class="form-control"><option value="" selected="selected">Please Select</option><option value="6">Canon</option><option value="4">Fox</option><option value="8">GT Interactive</option><option value="9">Hewlett Packard</option><option value="5">Logitech</option><option value="1">Matrox</option><option value="2">Microsoft</option><option value="10">Samsung</option><option value="7">Sierra</option><option value="3">Warner</option></select>

Sorry but will take time,  Simply turn off manufacturing box and look into this later.

image.png.3f250cb2edbe6a665fc6b139f06cedf9.png

So this one? Looks to be linked to the search bar in header!

image.png.b71234734ec8e85ba10dabe5e4d630ca.png

<form name="quick_find" action="https://www.justfastfood.com/advanced_search_result.php" method="get" class="form-horizontal"> <div class="input-group"><input type="search" name="keywords" required="" placeholder="Search" class="form-control"><span class="input-group-btn"><button type="submit" class="btn btn-info"><svg class="svg-inline--fa fa-search fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg><!-- <i class="fa fa-search"></i> --></button></span> </div></form>

Sorry but for now simply turn off and look into this later.

The fix for both is,

Programmatically associate labels to all form controls and ensure there are no duplicate labels. You can do so by using an implicit <label>, explicit <label>aria-label or aria-labelledby.”

So with the 2 problems turned off we now get,

image.png.255a797e6dd9d4501d0dad5d9b4324bc.png

Oh by the way I am using one page as benchmark for all changes!

https://www.justfastfood.com/product_info.php/products_id/27

Some changes are site wide but some are page specific.

 

Link to comment
Share on other sites

  • Replies 65
  • Created
  • Last Reply

Now to look at the worst performer Progressive Web App!

image.png.463ff0da2b249a4901d7c24b6b04ff4b.png

So missing theme-color tag? An easy fix just make sure the main theme color ( typically your header) on your site is also in your manifest.json file and template_top all match!

As you can see for my test site its black. So added this to template_top

<meta name="theme-color" content="#101010">

We get another small improvement.

image.png.0d9aa45a52981105b392e00baa252c97.png

Next

Simply change icons size in manifest.json to 512px.

image.png.e705e10ef3c476c0fa9782846c60f13c.png

Next.

Recommendations

Add a display property to your Web App Manifest and set it to one of the following values: fullscreen, standalone, or browser.

So we simply add "display": "fullscreen", to manifest.json

Well that's a pain, got rid of part of the problem but no improvement!

image.png.40a5339fb32865ae85e1a626a728770a.png

Going to put this on hold as I’m not sure its relevant to OcS?

next,

image.png.5ab11cee0b2b040e6e8a565ad6a6bc8c.png

 

Also ignoring this as its the same error we had earlier.

I believe this is to do with software that is capable of being used offline on mobile devices when you have no signal.

You can down load a App version which you can use with no signal and when signal is available is just connects and updates with your device.

 

 

 

Link to comment
Share on other sites

This is not critical! As was mentioned by Gary before its all to do with device speed and type of connection.

image.png.b58d87ef2c785d03aeff3cf5b5dccbf1.png

So offscreen images,

image.png.d71863bb85ac3a634c9d1b768cf23be4.png

This is one for the experts! As its not something that can be done as a patch.

https://developers.google.com/web/tools/lighthouse/audits/offscreen-images

Recommendations

To pass this audit, refactor your pages to only download above-the-fold images during the initial request. Applying this strategy to your JS, HTML, CSS, and other resources can also speed up page load time. See Critical Rendering Path to learn more.

Basically if an image is off screen then don't bother loading it. Only load those images that can be seen.

 

Link to comment
Share on other sites

Ok Next problem,

image.png.9d42d21ceecbdc3ccd9e018f7c53e074.png

Basically some scripts are slowing down the rendering of the first page. As you can see we are talking very small numbers, but if it can be avoided why not. The advise is,

https://developers.google.com/web/tools/lighthouse/audits/blocking-resources

 

  • For critical scripts, consider inlining them in your HTML. For non-critical scripts, consider marking them with the async or defer attributes. See Adding Interactivity with JavaScript to learn more.

  • For stylesheets, consider splitting up your styles into different files, organized by media query, and then adding a media attribute to each stylesheet link. When loading a page, the browser only blocks the first paint to retrieve the stylesheets that match the user's device. See Render-Blocking CSS to learn more.

  • For non-critical HTML imports, mark them with the async attribute. As a general rule, async should be used with HTML imports as much as possible.

Not a lot I/we can do with this so lets move on and let the experts work on this.

 

Link to comment
Share on other sites

Same answer as previous error for this one.

image.png.646317a47c9d383d426d2968319a1532.png

Next,

image.png.efcfcd3db8a3729453a5ec5c2047285c.png

So properly size images, Well as it says make sure all your images are the right size for the container you are displaying them in. Resizing on the fly is not recommended (the only exception is vector images).

So if you want to display a 800x600 image make sure that is the size of your image and container. Google recommends having the right size image for each device you are going to display on.

No point having a 2000x2000 image and showing it on a 200x200 container!

We already have addons that will do this work for you. Full recommendations here,

https://developers.google.com/web/tools/lighthouse/audits/oversized-images

 

Next, Unused css rules

Another one best left to the team as its nothing critical.

  

https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

 

 

image.png

 

Link to comment
Share on other sites

So this is the best I could do.

image.png.9287f4486ac6811f3481303a7e15ed5d.png

I hope this shows that with a little time you can make small improvements to the stock install which is very good to start with.

Please don't think you have to do any off this. For the average shop owner your time is best spent getting good content onto your website.

Zahid.

 

 

Link to comment
Share on other sites

Sorry I moved on when I found it was not relevant unless you plan to have a OsC app available. Its basically the file that holds all the info to allow the app to be added to the home screen.

https://developers.google.com/web/tools/lighthouse/audits/manifest-exists#recommendations

The web app manifest is a simple JSON file that tells the browser about your web application and how it should behave when 'installed' on the users mobile device or desktop. Having a manifest is required by Chrome to show the Add to Home Screen prompt.

A typical manifest file includes information about the app name, icons it should use, the start_url it should start at when launched, and more.

 

A complete manifest.json file for a progressive web app.

{
  "short_name": "Maps",
  "name": "Google Maps",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/maps/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/maps/",
  "theme_color": "#3367D6"
}

 

Link to comment
Share on other sites

19 minutes ago, crimble crumble said:

I've found defer loading JavaScript helps quite a bit with page speed.

please post what you did as not everyone will know what you mean :)

 

Link to comment
Share on other sites

<script src="myscript.js" defer></script>

The defer attribute is only for external scripts (should only be used if the src attribute is present).  however make sure you are not deferring anything critical to page load.

 

Link to comment
Share on other sites

On 11/07/2018 at 7:59 PM, JcMagpie said:

Ok looking at the second issue short_name (from bottom)

image.png.843e1cd9981921eab395c72803c8dbef.png

Simply by adding a manifest.json file and adding

<link rel="manifest" href="manifest.json" />

To <head> in template_top.php got rid of that and improved our best practice rating.

 

osCommerce is not a Progressive Web App so this is totally unnecessary.

osCommerce user since 2003! :thumbsup:

Link to comment
Share on other sites

On 7/13/2018 at 12:21 PM, JcMagpie said:

Sorry I moved on when I found it was not relevant unless you plan to have a OsC app available. Its basically the file that holds all the info to allow the app to be added to the home screen.

Just one of a number mistakes I made

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...