Jump to content
Latest News: (loading..)

Recommended Posts

1 hour ago, JcMagpie said:

ruined by people installing poor quality add-ons, or just too many.

Very good point.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

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:

pingdom.jpg.39a0ae632afd2dd536156f350e16cb78.jpg

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);

pretty_button.jpg.083353390d78a28f56c2af20ba990512.jpg

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

  1. 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...
  2. 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)...


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites
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/


I'm using the cutting Edge v2.3.4.1 CE:thumbsup::smile:

Get the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

 

Share this post


Link to post
Share on other sites

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?

 


I'm using the cutting Edge v2.3.4.1 CE:thumbsup::smile:

Get the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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


I'm using the cutting Edge v2.3.4.1 CE:thumbsup::smile:

Get the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

 

Share this post


Link to post
Share on other sites

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.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

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">

Edited by JcMagpie

I'm using the cutting Edge v2.3.4.1 CE:thumbsup::smile:

Get the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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!


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

Edited by masc

Share this post


Link to post
Share on other sites

.css is faster loading, not by much though.

If you're happy with the svg/js stick with it.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

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

×