burt Posted July 17, 2018 Share Posted July 17, 2018 1 hour ago, JcMagpie said: ruined by people installing poor quality add-ons, or just too many. Very good point. Link to comment Share on other sites More sharing options...
burt Posted July 18, 2018 Share Posted July 18, 2018 Here is the same page from Pingdom: https://tools.pingdom.com/#!/FovH0/http://template.me.uk/frozen2bs4/specials.php You can see here that the result is also great, at "100" with a load time of .6 of a second. Scrolling down a bit shows this: What this says is 71% of the "weight" of the page is due to loading fontawesome (FA). So if shopowner really wanted to optimise, they could remove the call to the FA script. Mostly FA is used to make buttons look pretty by having a nice little icon (eg the cart icon on the buy button); By removing the call to FA, that icon (and all the other button icons) and everything else that uses FA would disappear. Problems caused by removing FA there are a few buttons where FA icon is used with no text. From memory; - search module in header - refresh buttons in cart - delete button in cart - there may be more... Payment Icons in footer_suffix module The next step, if someone wants to take it on...is to explore the possibility of replacing the full FA with a version that just has the icons needed (ie, the ones that are just decorative)... Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 18, 2018 Author Share Posted July 18, 2018 1 hour ago, burt said: someone wants to take it on Do we have a list of all the icons used in frozen? Reading this article, looks like you have a couple of ways to do this. https://blog.webjeda.com/optimize-fontawesome/ Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 18, 2018 Author Share Posted July 18, 2018 How would you prefer to do this, using http://fontello.com/ We can simply pick the icons we need and download a reduced font set. You then simply install that and point to that instead of https://use.fontawesome.com/releases/v5.0.6/js/all.js This would limit anyone adding a new icon in an addon? Link to comment Share on other sites More sharing options...
Hotclutch Posted July 18, 2018 Share Posted July 18, 2018 To be honest I don't think this one is worth doing. Besides the inconvenience to yourself to have to maintain that file every time you want to make a change, the file won't be cached in the same way as when you're linking to CDN. A user coming to your site may already have the FA in their cache, and won't have to download again. Whereas now they will have to download your custom CSS everytime. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 18, 2018 Author Share Posted July 18, 2018 Ok have installed as local fonts, <script defer src="/ext/fontawesome-free-5.1.1-web/js/all.js"> We then have to edit all.js to include just the fonts we need. This is a cut down version of all.js with most of the junk taken out. Its installed on the test site www.justfastfood.com would be good if a few others can try it and see if they see an improvement or do I still need to cut more out? all.js Link to comment Share on other sites More sharing options...
burt Posted July 18, 2018 Share Posted July 18, 2018 Just for my satisfaction, I removed the call to FontAwesome. I then tested the page again; Pingdom: https://tools.pingdom.com/#!/bFNGAJ/http://template.me.uk/frozen2bs4/specials.php Requests down from 14 to 13 Loaded time reduces from 0.674s to 0.582s GT Metrix: https://gtmetrix.com/reports/template.me.uk/HDTZvPTi Pagespeed stays at A 100 Y Slow moves from A 98 to A 99 Loaded Time reduces from 2.0s to 1.5s Page Size down from 396kb to 119kb Requests down from 15 to 14 Conclusion Shave milliseconds off the page load time. Worth doing? Maybe for some shopowners, but not for core. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 18, 2018 Author Share Posted July 18, 2018 Is there any reason for using the all.js? I replaced it with all.css locally and it looks like it working faster! <link rel="stylesheet" href="/ext/fontawesome-free-5.1.1-web/css/all.css"> This cdn also looks to work smother than the v5.0.6/js/all.js .......cdn <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css"> Link to comment Share on other sites More sharing options...
puddlec Posted July 18, 2018 Share Posted July 18, 2018 33 minutes ago, JcMagpie said: Is there any reason for using the all.js? I replaced it with all.css locally and it looks like it working faster! <link rel="stylesheet" href="/ext/fontawesome-free-5.1.1-web/css/all.css"> This cdn also looks to work smother than the v5.0.6/js/all.js .......cdn <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css"> I changed to using the css version a few weeks ago, in the tests i did it did cut down on the amount that needs to be downloaded (the amount depends on what icons "packs that get used"), have not see any problems using the css version so far. Phoenix support now at https://phoenixcart.org/forum/ App created for phoenixTinyMCE editor for admin Link to comment Share on other sites More sharing options...
burt Posted July 18, 2018 Share Posted July 18, 2018 I was testing the differences between the js and svg and css versions. Don't know why I left it on js..... good spot guys! Changing to the .css version: Pingdom https://tools.pingdom.com/#!/djjgqq/http://template.me.uk/frozen2bs4/specials.php Reduces load time to 0.488s GT Metrix https://gtmetrix.com/reports/template.me.uk/xZZMH1i8 Reduces load time to 1.0s That is blazing fast! Link to comment Share on other sites More sharing options...
PiLLaO Posted July 19, 2018 Share Posted July 19, 2018 And how many sql queries use to load the website? https://apps.oscommerce.com/TbX2f&kisser-error-handling-debugging Link to comment Share on other sites More sharing options...
♥Moxamint Posted July 19, 2018 Share Posted July 19, 2018 20 hours ago, burt said: I was testing the differences between the js and svg and css versions. Don't know why I left it on js..... @burt On the Font Awesome website it sez SVG & JS is "new and advanced framework" and has an advantage of "Auto-Accessibility" and other. Is that enough a reason to stay using slower SVG & JS? Thanks, Eddy Link to comment Share on other sites More sharing options...
masc Posted July 19, 2018 Share Posted July 19, 2018 On my site I load font awesome asynchronously, so it doesn't affect page load at all. It's simple to do with the loadcss js snippet (google it) and the aysnc attribute on the script tag for js. I also use a tool that combines all js and css files into one file so it loads quicker with only 1 file required to download with less overheads. I even experimented with loading the page with the minimum css for render and loading the rest of the css async. Basically get all the structure loaded first and fade in the rest with transitions. Big gains there, but then had to move to a new site and got side-tracked never finished it. Link to comment Share on other sites More sharing options...
burt Posted July 19, 2018 Share Posted July 19, 2018 .css is faster loading, not by much though. If you're happy with the svg/js stick with it. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.