How bad is an external CSS or Javascript source for website speed/performance?

[WoutervdMeer]

Hi community,

For some applications or custom code an external css and javascript source is used.

For example the date picker: https://help.shopify.com/en/manual/online-store/themes/customizing-themes/add-date-picker

My question is whether this is making your webshop slower?

In other words, is it favorable to create your own css and javascript files and direct to these in the source code in stead of the online css and javascript files?

Since the css and javascript is accesible it is possible to copy this and create my own .css and .js files.

To me it sounds that this would lead to a better speed score, can you please provide me with information?

Looking forward to the answer 🙂

Store: https://www.biervaneigenbodem.nl/

Kind regards,

Wouter from Biervaneigenbodem

[made4Uo]

Hi @WoutervdMeer,

It is hard to rate on what extent the external libraries affects the speed of your website, since it is based on the size of the external library. When you add external libraries to your website, the website will make a connection to that link and read the codes provided. External libraries tends to have a large codes and some codes might not be applicable to you. The website will spend time in reading those codes, whereas, if you have the code available in your website files, they can be triggered when needed. 

External libraries are sometimes crucial to website to function but we have to make sure that we tried other solution first and use the external library as the last resort. And yes, if you are able to copy the code from the external library and weed the codes that are not applicable to your settings, this would be better.

[Cedcommerce]

Hello @WoutervdMeer, 

This will not heavily affect your website speed, but in some cases, it might be arousing from a network issue, server response error, etc. 

So if you want to totally avoid these cases then you need to create your own CSS and JS file and use it directly.

Regards, 

CedCommerce

[flareAI]

Hello @WoutervdMeer,

I'm Gina - Product Manager at flareAI. flareAI has helped Shopify stores generate $5+ million in sales from Google Search, on autopilot.

If it's helpful to you, please let me know by giving it a like or marking it as a solution.

I would like to share a few suggestions while going through your question. I hope my tips will help you provide the solution you are looking for.

The main problem with the external libraries is they have a lot of code that you don't need at all in your website and also can take much time to load.

You can surely create your own js files. Always make sure to copy the related css also. The only disadvantage to this case is you won't know if the original external library is updated to a new and better version.

Also, you can consider using minified js and css files to reduce the page load.

I hope my suggestion will help you.

If you found the answer helpful consider supporting the Shopify Community by giving it a Like + Accept the solution.

Gina
flareAI

[speedboostr]

Hi Wouter,

It's making it slower then using the Shopify CDN because you are hosting it on another server which will mean the dns must be resolved and then the file download completed, and the routing my be sub-optimal in comparison with the default Shopify CDN.

These two overheads are why you should always take advantage of Shopify's free /asset directory that comes with your theme. You can upload any css, javascript, image or font files you need here and they will be served using the same connection that delivers your theme and product images etc. This reduces the dns lookups and ensures the routing is the same as the rest of your theme.

As a best practice you should always aim to concatenate all of your javascript and css files into one file, and save them as a .liquid so they are served minified by Shopify automatically. You can then pre-load this Javascript and CSS using a resource hint and it will be as fast as it possibly can be.

Keep in mind that there is an exception to this rule - in the case of elements that only appear on one page and not all pages, instead of concatenating assets you should use code splitting so the code only is requested on the page it is used on.

If you need help with any of these tasks or just want to ask questions and get general consultancy, contact us and we'll help make your store as fast as possible!