My test site has a huge loading time and test shows I can cut performance by minifying JS and CSS assets.
What Shopify uses to minimize JavaScript and CSS?
Thanks
Shopify doesn't have the ability to auto-minify your Javascript (you need to do that yourself), but it does have the ability to auto-minify your CSS by giving it an 'scss' suffix, then including it in your site with the suffix .scss.css
So if your CSS file is currently named theme.css.liquid and included in your site with {{ 'theme.css' | asset_url | stylesheet_tag }}:
Change the name of your CSS file to end with .scss (or .scss.liquid, if the file in question ends with .css.liquid) - so in this case, the file becomes theme.scss.liquid
Change the reference to the file to end in .scss.css - so in this case, the include becomes {{ 'theme.scss.css' | asset_url | stylesheet_tag }} (Note that a .liquid suffix, if any, is not included here)
The result will be a minified CSS file built from your un-minified source code.
As John Bell mentions in a comment to your main post, though, minification alone probably won't resolve the underlying problems. If you look at the waterfall results from your speed test, look for files that have a long 'Waiting' or 'TTFB' time - those are files that are taking a long time for Shopify to compile, and indicate that your Liquid code is what needs to be optimized. Also look for files with a long 'Downloading' time, and see if those files could be compressed or only deferred so that they only load after the initial page has completed.
Related
Currently I'm developing a website using the following stack:
vue.js
#vue/server-renderer
vite
tailwind CSS
SSG was chosen as the rendering mode.
Tailwind, as described in the documentation, allows you to specify directories and file extensions (content property) , in which he will try to find the classes, in order to leave only those that are actually used in the project.
As a result, the 'main.css' file is formed, in which only those classes that are used remain.
Next, I just take this file and include it in every page that was rendered during the build phase of the project.
This results in:
index.html - main.css
about.html - main.css
blog.html - main.css
It turns out that main.css file may contain classes that are needed only for one of the pages and are not needed for others.
I would like to implement the following:
Take main.css which turned out
Render a page, for examle about.html
take only those styles that are needed for about.html page from the main.css file
create a new about.css file
link the resulting about.css styles to about.html
I’ve already tried to implement this using an awesome PurgeCSS tool as following:
render page content usind #vue/server-renderer's renderToString() method;
Pass an resulting css and html sources to PurgeCSS
here is an example
But there are too many corner cases around this solution, such as:
Dynamic classes which can be added to the html on the client side
Some components may be missing in rendered html and their content will be added later (for example, v-if directive was used on the component)
A few takeaways:
PurgeCSS is not needed anymore since Tailwind v2 (the latest being v3.x)
as far as I know, you cannot have code-splitting with Tailwind, not that it matters anyway since it will still perform okay with further optmizations
the classes that will be generated, will be only once for the whole app (hence no need to have a bg-red-500 for index or about page, both are referencing the same unique declaration)
if you want to have SSR/SSG, I recommend the usage of Nuxt (in it's v3 if you're using Vue3 or plan to have anything long-term)
dynamic classes are not possible with Tailwind, you can create things like bg-[#ccc] but it goes on the opposite side of what Tailwind is achieving and should be used exceptionally
for Tailwind's content, still the defaults on this page, section Configure your template paths, no need to do anything crazy or complicated
if you want to have some scoped/local style, style to using style scoped, you can still use Tailwind inside of those tags tho
if you want to write vanilla CSS into dedicated CSS files like index, about, blog etc, then Tailwind is probably not the best approach because this is not how it is supposed to work
stay simple, the performance will still be amazing. Only focus on not having too many screens, colors etc that you're not using
you could run some bundle size tests to see if the CSS is taking a huge chunk in terms of size. Will probably not, but if it still is: you can then start making complex configurations
JS will be far harder to reduce and be more impactful regarding the performance (because of how a browser works with it: parsing, executing is indeed blocking the main thread)
I currently face the following problem:
I included a couple of assets (PNG images) in src/assets/images/img.png. Inside the snippet where I want to display the image, I wrote this (as defined in the documentation):
<img src="{{ '../assets/images/img.png' | asset_url }}"/>
When executing slate build I can also see those images show up during the build process in the log. But when I start my dev server (npm run start:dev) the link to the image is broken and it doesn't get displayed. Any thoughts on how to solve this issue?
Your link is built all wrong. The Liquid filter asset_url resolves the path for you. All you need to provide is the name of the asset. So if you rewrite your Liquid correctly it would look like this:
{{ 'img.png' | asset_url }}
Reads as hey Shopify, go find img.png in the assets and return for me the complete path to it.
My problem is that when trying to insert some kind of a background image in Shopify, it never shows anything.
I have a navigation bar that has a pattern which the client wants and when I try to enable it, again nothing happens.
The code I'm using on that css background line (from googling around) is
background:url( "{{'navBggreen.jpg' | asset_url }}")
I've also tried
background:url( {{'navBggreen.jpg' | asset_url }} )
and nothing. Tutorials or any kind of documentation is extremely scarce for Shopify so...
Anyway, does anyone know how to get this working?
Make sure your css file has .liquid extension so that it can process liquid code as asset_url is part of liquid. so make sure, your css file name is something like style.css.liquid.
You call it like this from your CSS file in Assets:
.nav{background: url("navBggreen.jpg");}
if you want to include images in your layout you will have to use the asset_url filter. However, if your images are called via a CSS stylesheet then you do not need to use asset_url - except if they are used in a theme settings form. Take out the asset_url and it should work ok.
I'm trying to reduce the size of my CSS file. It is from a template which is very CSS & JS heavy. Even with CSSMin the CSS file size is 250kb.
Whilst I use alot of the CSS - I know I dont use it all. So I'm trying to work out which styles can be removed. I'm aware of Dust-Me selector - but that only takes a static look at the website. With HTML5 and CSS3 - websites are now very dynamic, and most of my CSS occurs from dynamic events, or 'responsive' events i.e. Bootstrap.
Question: Is there a tool which 'records' all my CSS use on a website for a perioid of time, so I can go and click/hover/move over each element and interact with my site. Then at the end let me know which styles were & were not used?
CSS Usage is a great extension for firefox. It tells which css are currently used in a page.
Link: https://addons.mozilla.org/en-us/firefox/addon/css-usage/
There are two tools that I think might help you out.
helium is a javascript tool that will discover any unused css rules.
csscss is a source code analyzer that will report any duplication. I'm biased because I wrote csscss precisely because I couldn't find anything that did this. But many people seem to find it useful.
250kb is really such a big figure for just CSS files.
The templates generally have all the CSS required for all the pages in a single file.
I would suggest:
Do not cut your CSS code, they might be needed some point of time.
Instead i would suggest, break your CSS file into number of small files for different page stylings,
such as a different CSS for login page, different CSS file for home page, etc.
Read your own CSS and HTML code vigorously to find out which significant part of CSS code is used in which HTML section.
Update:
You may try Removed Unused CSS - CSS optimizer.
I personally did not use it just hope it works for you.
I'm having a problem with the django templating system.
I have a template with html, css, and js. When I use this template for my site, all of its margins and paddings change, and my template seems to become another template. For example margin 0 auto; seems to become margin 0 0;.
Note: I have a temp.html file and, for example, in the index of my home app, I have a file index.html that contains a {% extends "temp.html" %} tag and other block that they are in temp.html. (ed: ?)
If you need more code, please let me know.
You will need to make use of Django's built-in media hooks and relative URLs:
Django media URLs in CSS files