Theme file structure

Shopify Partner
4 0 0

We bought a paid theme from themforest last year and it looks great but because there are so many options in the theme it's rather bloated and when doing speed checks it is saying remove or defer render blocking content. 

 

As it stands right now all of the js and css files are all loading with the Theme.liquid file, regardless of what page you are on, is this best practice? I wasn't sure if i should be splitting product page specific .js and css into their own files that are only loaded when the product pages are loaded?


Any help is much appreciated

0 Likes
Shopify Partner
1841 170 484

Hello!

 

You could do that but consider the following - upon first page visit, whichever page, your script assets and styles will be cached in the browser. Now, unless your theme vendor has built a massive web app with near 1mb of JS and styles, you shouldn't have to worry too much about code splitting. A regular high resolution product image weighs in at 200 to 500kB just for comparison.

 

Of course there are many benefits to keeping your JS and CSS as small as possible simply because the browser engine needs to interpret all that code so unlike images, large JS and CSS does have a recurring cost beyond the initial network cost.

 

I'd be surprised if the theme code itself is so large - usually it's apps like chatbots etc. that are horrendous. Check what resources get loaded from your apps if you are using any and then consider their technical cost / value.

 

Also, one option if you really want to optimise your theme JS / CSS assets is minification which you'd need to perform during a build step as Shopify doesn't do this.

 

Best wishes!

I turn coffee in to code - since 1998
0 Likes
Shopify Expert
471 14 75

I wouldn't bother too much with this, especially if you don't know the theme's structure well. If you change the loading behaviour of JS files, it might break the theme. If your theme's performance is really that bad, it's probably easier to look for a new theme.

 

Some themes these days, even from the Shopify Theme Store, come with (comparatively) huge JS files. E. g. Grid's theme.js is 646 KB, Pacific is 563 KB. Which is why these themes often have some kind of deferred loading mechanism in place so they don't block page rendering. Many ThemeForest themes unfortunately don't follow these practices and as they try to offer every feature under the sun, they're bloated and slow.

 

It's usually a good idea to run any theme through Google Page Speed Insights and/or https://www.webpagetest.org/ before purchasing. Not that those scores should be taken too seriously, but as a way to compare themes to each other. For Theme Store themes there's also http://fastshopifythemes.com/, which gives you an overview of all Shopify Theme Store themes that you can sort by various criteria.

 

 

★ ThemeUp: Nifty Upgrades for your Shopify Store ★ https://themeup.net
1 Like
Highlighted
Shopify Partner
1841 170 484

Ooo lala! Genial! Thanks @ThomasBorowski for that fastshopifythemes link - great comparison tool for reference.

 

Nochmals danke!

I turn coffee in to code - since 1998
0 Likes
Shopify Expert
471 14 75

Hat tip to Matt Magi on the Partners Slack for that one ;)

★ ThemeUp: Nifty Upgrades for your Shopify Store ★ https://themeup.net
0 Likes