QUOTE(iammyself @ Mar 24 2018, 12:03 PM)
I'm sure you would agree with me if I say if loading speed is only one part of a good UX.
Using the example that you provided, "Try host a website with tons of images and videos, then another one with just some text",
Youtube can't just become a pure text website all of sudden in the name of loading speed.
That's not good UX, that's no UX.
The loading test example i provided above is not to ask you to build your website in pure text but in purpose to show you the number of files and file size is in fact will affect site loading speed since you say "I'm sure you know this isn't true." when i said "The less the size and number of your website's file the faster your website speed.". Of course everyone, even non-developer know websites normally come with at least some images or videos. This is a no-brainer.
QUOTE(iammyself @ Mar 24 2018, 12:03 PM)
So yes, we need a fast website. One way to achieve this is to minimize the number of files served to the user.
Again not necessarily true in all cases, because this way you can't parallel load your files!
Serve a minimal number of files, but not in a way that affects good UX and functionality of the website.
I am not kind of sure what you mean by "you can't parallel load your files!". Rendering and loading assets is the job of user's browser not the server, server only serve request, and the way browser rendering and loading is not exactly parallel due to it's way of getting assets. In other words, it will be faster if lesser files needed to be downloaded by browser.
I am going to give you examples how should we minimize the number of files? One way to do this is decrease the number of third party script usage, like ads, tracker, javascript, jquery and third party images and modules, instead of sacrifice your design to cut the number of files which of course will hurt your site ux and definitely the content of your site.
Decrease third party assets usage can decrease the number of request send to the server and this will help your user's browser avoid downloading so many files for rendering and will enhance the loading speed. If you must use that specific assets, choose the slim version or if you know how to do code split which I am not going detail here.
Another way is minimize the number of images usage or if possible avoid images at all which encourage by google "https://developers.google.com/web/fundamentals/design-and-ux/responsive/images#avoid_images_completely". However, avoid image for code might hurt mobile ux. Use chrome dev tool to check how your files and dom loaded is the best way to get more information how to optimize your site.
These are many other optimization need to do of course like choosing the right format of image, reduce the sizes and so on.
QUOTE(iammyself @ Mar 24 2018, 12:03 PM)
This brings me to the next point. The number of files served to the user != the number of files you have in the backend.
This actually reminds me of my train of thought in the previous reply when I said "There many other factors that can affect a website's speed than just the size and number of files", I meant to say the size and number of files in the backend!
Number of files served != the number of files in server storage is true and performance is of course mostly not affected by the number of files stored in the server storage, but number of files like images, scripts or other assets which you import into html will definitely heavily affect the performance of a website and that's what i meant by number of files will affect performance. So I think this is what I made you misunderstood here. Of course there are many factors will affect website performance which I never deny.
QUOTE(iammyself @ Mar 24 2018, 12:03 PM)
Using Shopify's liquid templates as an example. Parent theme has a file parent/checkout.liquid. IF I want to add some trust signals in there, says "verified by Visa" just for example. I will simply duplicate checkout.liquid from the Parent theme, add that line in there and save as child/checkout.liquid.
When the generator/compiler kicks in, it will simply use child/checkout.liquid instead of parent/checkout.liquid.
To the end user, there's no difference in terms of number of files.
Or perhaps I'm being adventurous. I really want to add a separate CSS file in my child theme called child.css, in addition to the parent's style.css.
Say the file size is 50kB -- pretty negligible. Shopify could minify it to make it even smaller. Combine all css into one file (bad for parallel loading). Distribute it through CDN.
When you think about that 50kb load in your example is nothing for your site and your users. Try think about what you're using is a saas. You're not using your own dedicated server and obviously you're not shopify's only customer. Think about sending the 50kb for hundred thousands of users concurrently every seconds, and we not yet mention about resources for compiling. Think about bandwidth cost. You will get your answer. And obviously shopify need to consider about ALL their customer's performance benefit vs their own like cost.
This post has been edited by k8houz: Mar 24 2018, 05:44 PM