Is it a good idea to have most of the page code build with liquid and html?

[hiba_abdelk]

I have a Shopify website where I discovered, after disabling JavaScript, that the content of the page heavily depends on it and I'm trying to optimize the website and make it more dependable on Liquid, HTML, and CSS and keep JavaScript only for interactivity

However, what I'm afraid of is making the request heavy on the server to process it which could potentially lead to a slow initial page load 

I'd appreciate if someone has recommendations

[oscprofessional · Accepted solution]

Hello @hiba_abdelk ,

You're right to be concerned about initial page load when optimizing your Shopify store for minimal JavaScript reliance. Here's a strategy to achieve your goal while minimizing server load:

1. Prioritize Liquid for Content:

• Move content generation to Liquid: Focus on building your page structure and content with Liquid templates. This ensures content is pre-rendered on the server, reducing the initial load on JavaScript.
• Use sections strategically: Utilize Shopify sections to manage dynamic content areas. This allows for a mix of Liquid and JavaScript within sections, keeping the core page structure lightweight.

2. Optimize for Efficiency:

• Minify Liquid, HTML, and CSS: Remove unnecessary whitespace and comments from your Liquid, HTML, and CSS files. This reduces file size and improves server response time.
• Lazy load images: Implement lazy loading to defer image loading until they are scrolled into view. This reduces the initial payload and improves perceived performance.

3. Leverage Critical CSS:

• Identify critical CSS: Tools like Google Chrome DevTools can help identify the CSS styles required for initial page rendering.
• Inline critical CSS: Include this critical CSS directly in your HTML file. This ensures a faster initial rendering of your page layout.
• Load non-critical CSS asynchronously: Defer or asynchronously load the remaining CSS files. This allows the core page to render quickly while non-critical styles load in the background.

4. Reduce Server-Side Processing:

• Cache static content: Leverage Shopify's built-in caching mechanisms to store frequently accessed static content like images and CSS files. This reduces server load for repeat visitors.
• Optimize Liquid logic: Keep Liquid code clean and efficient. Avoid unnecessary loops and calculations that could overburden the server. Consider using pre-processing techniques for complex logic, if needed.

Monitoring and Testing:

• Use Shopify Theme Check: After making changes, utilize Shopify Theme Check to identify potential performance issues.
• Test your website: Regularly test your website's speed using tools like Google PageSpeed Insights to monitor the impact of your optimizations.

Trade-off Considerations:

While these steps can significantly improve page load without heavy JavaScript, there's always a trade-off. Moving complex interactions entirely to Liquid might increase server processing initially. Here, consider using libraries like Flickity.js for lightweight carousels or A11Y Project for accessibility enhancements.

By following these strategies, you can create a Shopify store that prioritizes Liquid, HTML, and CSS for content and layout, while keeping JavaScript for essential interactions, resulting in a faster and more reliable user experience.