♥JcMagpie Posted July 12, 2018 Author Share Posted July 12, 2018 Ok next one, 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. So this one? Looks to be linked to the search bar in header! <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, 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 More sharing options...
♥JcMagpie Posted July 12, 2018 Author Share Posted July 12, 2018 Now to look at the worst performer Progressive Web App! 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. Next Simply change icons size in manifest.json to 512px. 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! Going to put this on hold as I’m not sure its relevant to OcS? next, 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 More sharing options...
♥JcMagpie Posted July 12, 2018 Author Share Posted July 12, 2018 Ok so we have achieved this so far, So lets take a closer look at performance. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 12, 2018 Author Share Posted July 12, 2018 This is not critical! As was mentioned by Gary before its all to do with device speed and type of connection. So offscreen images, 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 More sharing options...
♥JcMagpie Posted July 12, 2018 Author Share Posted July 12, 2018 Ok Next problem, 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 More sharing options...
♥JcMagpie Posted July 12, 2018 Author Share Posted July 12, 2018 Same answer as previous error for this one. Next, 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 Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 12, 2018 Author Share Posted July 12, 2018 So this is the best I could do. 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 More sharing options...
valquiria23 Posted July 12, 2018 Share Posted July 12, 2018 Thank you very much Zahid for taking the time and analyzing each case. I hope this analysis is used positively to improve OSC !!! regards Valqui Community Oscommerce fan You'll find the latest osC community version here. Link to comment Share on other sites More sharing options...
burt Posted July 13, 2018 Share Posted July 13, 2018 What does the Manifest file actually "do". In other words, who uses it and for what? Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 13, 2018 Author Share Posted July 13, 2018 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 More sharing options...
♥JcMagpie Posted July 13, 2018 Author Share Posted July 13, 2018 A simple android app to give you a icon which will take you directly to the test website. Just install on any android phone. JustFastFood(1).apk Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 13, 2018 Author Share Posted July 13, 2018 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 More sharing options...
♥JcMagpie Posted July 13, 2018 Author Share Posted July 13, 2018 <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 More sharing options...
frankl Posted July 13, 2018 Share Posted July 13, 2018 On 11/07/2018 at 7:59 PM, JcMagpie said: Ok looking at the second issue short_name (from bottom) 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! Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 14, 2018 Author Share Posted July 14, 2018 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 More sharing options...
LeeFoster Posted July 14, 2018 Share Posted July 14, 2018 I've been away for a week with no internet but just caught up on this, good work. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.