Enhancing Performance with On-Demand CSS Loading in Flynt Theme

[rajpatel2435]

Hey team, @timohubois @aaronmeder

I wanted to propose an idea to improve performance in our Flynt theme projects: implementing on-demand CSS loading. By dynamically loading CSS files only when they are needed, we can reduce the initial page load time and enhance overall user experience.

Key Points for Discussion:

1. Dynamic Loading: Using JavaScript to create and append elements to the document's when needed. This approach is similar to how we handle JavaScript files.

2)Code Splitting: Integrating with build tools like Webpack to load CSS files on-demand based on specific JavaScript modules or routes.

Considerations: Address potential issues like Flash of Unstyled Content (FOUC) and ensure that critical CSS is still loaded initially to avoid rendering problems.

I'd love to hear your thoughts on this approach and discuss how we can implement it effectively in our Flynt theme projects.

[timohubois]

@rajpatel2435 we discussed this topic in detail internally and then decided to only create a css file instead of chunks, as we could not see any great advantage in terms of page speed in our tests and this file should be delivered from the local browser cache after the page is loaded for the first time.

For some latest tests I created a branch some few weeks ago: master...Timo/SplittCSS

This follows the idea to load one css file per component, only when a component is rendered. I would love to hear about your experiences with this approach.

[rajpatel2435]

Hi @timohubois

Thanks for sharing that. I will implement that and see the performance and let you know

I have another question can we apply gzip compression on images on production build as it is working for svg not for png webp and other formats.

Can you throw some light on this, please?

Thanks

[timohubois]

@rajpatel2435 regarding your other question about compressing images. This should usually be set in your hosting environment. If you have the option to choose between gzip and brotli, I would suggest brotli.

One question that came to my mind: Why do you want to compress already compressed file formats? I think that compressing already compressed files like images doesn't bring much advantage and may the images should optimized before they are used at the website.

[rajpatel2435]

Hey @timohubois

I have seen some of the files are not compressing while production build as you see in the attached images. For this reason, I want to enabled the gzip compression in flynt itself while in production build.

Thanks

[timohubois]

@rajpatel2435 gzip compression is applied to text-based file formats that are not already compressed. For instance, gzip can be effectively used on plain text files, HTML, CSS, JavaScript, XML, and JSON files to reduce their size and improve transmission speeds over networks. However, applying gzip to already compressed formats such as JPEG, PNG, ZIP, or other binary files would yield little to no size reduction and could potentially increase the file size due to gzip's own overhead.

[rajpatel2435]

@timohubois

Thank you for your valuable insights.