category oscprofessionals - Blogs - Optimize for Speed: Eliminate Render Blocking Resources In Magento 2

Optimize for Speed: Eliminate Render Blocking Resources In Magento 2

Delivering a lightning-fast experience is crucial for your Magento 2 store’s success. However, certain resources can act as roadblocks, hindering initial page rendering and frustrating users. These culprits are known as render-blocking resources, including static files like fonts, HTML, CSS, and JavaScript.

The Importance of Minimizing Render-Blocking –

Prioritize Above-the-Fold Content: Ensure critical resources for the initial page view (above-the-fold content) are not blocked, allowing users to see essential information quickly.
Enhanced User Experience: Faster loading times improve user engagement and reduce bounce rates, leading to higher conversion rates.
Improved SEO Ranking: Google prioritizes speed as a ranking factor, making render-blocking optimization crucial for better search visibility.

1. Identifying the Opportunities in Tools

Powerful tools like GTmetrix, Lighthouse, and PageSpeed Insights help pinpoint render-blocking resources within your Magento 2 store. These tools provide valuable insights into specific files causing delays and guide you toward optimization strategies.

By strategically addressing render-blocking resources, you can unlock a smoother, faster experience for your users, boosting your store’s performance and search ranking.

1.2 Minify Your JavaScript for Peak Performance

Minification transforms your JavaScript by removing unnecessary elements like comments, white spaces, and redundant code. This results in significantly smaller file sizes, leading to:

Faster Loading: Smaller files download quicker, ensuring your pages render swiftly and deliver a seamless user experience.
Enhanced Performance: Reduced file size translates to reduced bandwidth usage, optimizing site performance across various devices and network conditions.
Potential Efficiency Gains: In some cases, minification can also improve code execution efficiency by utilizing shorter variable and function names.

1.2.1 Leverage Magento Backend Settings

For developer mode: navigate to Stores > Configuration > Advanced > Developer > JavaScript Settings.
Set “Minify JavaScript Files” to “Yes”.
Remember to clear and flush the cache afterward.

1.2.2 Optimize Script Placement

Move <script> tags from the <head> section to just before the closing </body> tag. This removes them from the critical rendering path.

1.2.3 Choose the Right Attribute

Async: Use for scripts independent of other scripts and ready DOM.

Example:

<script async src="script.js"></script>

Defer: Use for scripts that don’t block DOMContentLoaded but might depend on other scripts.

Example:

<script defer src="script.js"></script>

By following these strategies, you can ensure your JavaScript loads efficiently, minimizing its impact on overall page rendering speed.

Optimize Script Delivery: Leveraging JavaScript Bundling Techniques

1.3 Unify and Conquer: Inbuilt Magento 2 Bundling

Reduce both HTTP requests and their size through JavaScript bundling, an essential performance optimization technique. Magento 2 offers built-in bundling capabilities accessible through two methods.

Backend Interface

Navigate to Stores > Settings > Configuration > Advanced > Developer > JavaScript Settings.
Enable “Enable JS Bundling”.

Command Line

Set your store in production mode.
Run a full deployment using the relevant Magento commands.

Benefits

Fewer HTTP requests translate to faster page load times.

Smaller request sizes result in reduced bandwidth usage and improved performance.

1.4 Enhanced Optimization with Amasty Extension (Optional)

For advanced users, the Amasty Google Page Speed Optimizer extension provides additional bundling options:

Access it through Stores > Configuration > Amasty Extension > Google Page Speed Optimizer > Settings > Javascript.
Enable “Amasty JS Optimization”.

Remember

Thoroughly test different configurations to find the optimal setup for your specific store and needs.
Clear all caches and set appropriate permissions after enabling bundling.

Test cases –

i) Backend > store > Configuration > Advanced > Developer > Javascript settings

Merge javascript file : No
Enable js bundling: Yes
Minify js files : No
Move js code to bottom : Yes

ii) Backend > store > Configuration > Amasty extension > Google page speed optimizer > settings > Javascript

Amasty js optimization : Enabled
Is magento Cloud : No
Run optimization option and follow all the steps
Click on save configuration button

iii) From CLI

Set store mode as production
Run full deployment
Clear all caches and set all permissions

After Bundle –

i) It looks like most of the JS code is missing in newly created bundle.js files.

ii) Along with newly created bundle.js files. All JS files are present in the request queue.

iii) Observed that the Merge JavaScript Files option was automatically set to “Yes” but was not before.

2. How to eliminate render-blocking CSS

Remove Unused CSS: Identify and eliminate any CSS code that’s not actively used on your site to reduce file size and improve loading times.
Minify CSS: Remove unnecessary characters like spaces, indentation, and comments from CSS files to further reduce file size and speed up rendering.
Load Non-Critical CSS Asynchronously: Use the loadCSS library to load styles that aren’t essential for initial rendering in the background, preventing render-blocking.
Preload Critical CSS: Employ the rel=”preload” attribute to signal the browser to prioritize the loading of critical CSS files, enhancing rendering speed.

Streamline Your Styles: Conquer Render-Blocking CSS for a Flawless Magento 2 Experience

Combating render-blocking CSS is crucial for delivering a fast and seamless user experience in your Magento 2 store. By following these key strategies, you can unlock significant performance gains:

1. Eliminate Unused CSS

Ruthlessly audit your stylesheets, removing any code not actively used. Consider moving rarely used styles to separate sheets loaded only when needed.
Tools like Google PageSpeed Insights can help identify unused CSS.

2. Embrace Minification

Eliminate unnecessary characters like spaces, indentation, and comments from your CSS files. This reduces file size and speeds up download and rendering.
Magento 2 offers built-in minification options or leverage third-party tools for advanced minification.

3. LoadCSS for Non-Critical Styles

Utilize the loadCSS library to asynchronously load styles not essential for initial rendering. This prevents critical content from being blocked while less important styles download in the background.

4. Preload Critical Resources

Use the rel=”preload” attribute to indicate critical CSS files to the browser. This signals their importance and encourages prioritized loading, enhancing rendering speed.

Conclusion

By actively addressing render-blocking CSS, you empower your Magento 2 store to deliver a lightning-fast experience that engages users and drives conversions. Remember, a smooth and speedy shopping journey is vital for success in today’s competitive online landscape. Implement these strategies and unlock the full potential of your Magento 2 store’s performance!