css and java minify and compression

[ihs1]

Hi

im really struggling with working out how to minify and compress css and java

ive watched countless videos and read through a lot of threads, but as a new website owner and no experience in coding, im really struggling to get this done.

i keep coming across errors on seo audits about this

can someone point me in the right direction, how i can do this and which files i need to minify. i watched one video which said i take the code off my theme.css liquid file and then put it into a minify tool, but im worried all the settings will be lost and website will not look like it does now, and with zero experience on how to get it back to what it is now

[ihs1]

my website is www.infraredheatingsupplies.com

[Geist]

If you have no experience this will be a bit hard, because even with experience doing these things right can be tricky. You need to use webpack, its a bundler. I'm not going to go too deep into this, you need to get your code on your machine, you can use the shopify cli, run "npm init -y" set "type": "module" in package.json, which is what is initialized from running npm init -y, and install webpack as a dev dependency. You will need to configure webpack then and the issue with shopify is webpack doesn't work the greatest with liquid files.

If you are serious about your site, it makes more sense to go headless and these things can be done the right way where every single file is built and minified for each deploy.

[ihs1]

Hi

wow that definitely sounds daunting

what about all these other threads ive been reading about minify apps and doing it this way. I just havent attempted to do it this way because im not sure which files i need to minify and also im worried about breaking something on the site, as i have zero coding experience then i wont know how to resolve it

[Geist]

Ok so I would stay away from apps, they inject scripts all over the place. If you want a good site it needs to be maintainable and there's nothing worse than working on a site that installed a bunch of apps and there's scripts and code all over the place that doesn't make sense.

The thing about using a bundler is that if you have a script to main.js in the main template of your theme, it might look like this <script src="main.js"...

When you use a bunder is appends a hash and your script look like this <script src="main.1223322.js"... This is for cache busting. You also need to worry about using webpack loaders and plugins. If you use nextjs or nuxtjs ( you should ), there is a command npm run build and it does this for you each time. The other thing about minifying is it's smart enough to change the variable names into shorter characters as well to make the file size smaller. There are some online minifiers that don't do this.

My personal advice would be to just leave it as is, shopify uses a cdn, it should be good enough as is. If you want to take your site to the next level it only makes sense to go headless for the long run, it will save you a lot of pain. If you want to speed up your site, you could try to break away from the main javascript file if your site only uses a few sections and make sure your images are properly optimized.

A good example of this would be if you had a toyota camry, sure you could try to make it faster and try to do little things like change the air filter and put in better fuel ect., but at the end of the day if you really want it to be fast you should drop in a whole different engine. In your case I would not stress, if you make a move to headless you get this anyways, and if not your site will be just fine, just don't worry about using apps.

If you aren't familiar with what a cdn is, you might here of the "edge" or "edge nodes", a cdn sits between the origin server (where your code lives) and the users device (phone, laptop ...). Shopify uses the cloudflare cdn, the assets are cached there so your site will be ok as it is.

[ihs1]

HI

thank you for all the info. i guess for now i am just going to leave it as it is as there is no way i can do this on my own. I have just moved to shpify and have never done any coding or built a website before, so im new to all this terminology

The headless website you mention, does this basically mean creating a whole new website but in this headless form? 

im also getting erros such as too much unused css, i assume this all is linked to the above issues. 

I know you mention that it wont affect the site much by leaving it as it is, but then google pagespeed keeps showing these erros and say my site isnt the fastest etc. my technical seo audits always keep shwoing errors of unminified css etc, so will google rankings be affected too becuase of this?

[Geist]

When you run lighthouse make sure you do it in incognito mode. If you want traffic to your site in the beginning you need to pay for it with ads. You need to also log into google search console and make sure your site has been indexed. The google algorithm takes into account how many clicks a site gets when ranking so if it isn‘t getting a ton of traffic it won‘t really rank. If you don‘t have the greatest lighthouse scores in the world it‘s ok, paid ads will get you traffic and show you if the idea is worth pursuing or not