Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Speeding up your website load times.


JcMagpie

Recommended Posts

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

Link to comment
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?

 

 

Link to comment
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.

Link to comment
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

 

Link to comment
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.

Link to comment
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">

 

Link to comment
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.

Phoenix support now at https://phoenixcart.org/forum/
App created for phoenix
TinyMCE editor for admin

 

Link to comment
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!

Link to comment
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

Link to comment
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.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...