How to Defer Parsing of JavaScript in Magento

If we are talking about E-commerce business, excellent service and user experience are key components. The longer a potential customer has to wait to complete the shopping, the more time he gets to change his mind to complete the process! When it comes to the site load speed, online shoppers are unforgiving!

Studies over time have clearly shown that the conversion rate is impacted by the site speed. Nobody likes to wait and Google is not interested in ranking a site that nobody likes! Hence it is utmost important to optimize the site speed in order to improve the rankings. Google’s algorithm compares your site speed with that of your competitor’s. The search giant awards or punishes you with the rankings accordingly!

To be blunt, the site speed is not the only factor responsible for ranking. But in the competitive E-commerce business, every effort counts and can earn you a dollar! And that’s why it is important to optimize the site speed.

Focussing on the Magento store, the defer parsing of Javascript helps improve the site speed. Usually, the Javascript is placed between the header tags and the code is implemented from top to bottom when a website loads. This results in loading of all the JS taking time which is not necessary at the point of time.

Before the defer parsing of JavaScript in Magento:

The defer parsing of Javascript in Magento enables loading of HTML and CSS scripts before the JS. This is enabled by replacing the Javascript from the header to footer tags. It results in the site speed appearing to be faster for the user! Hence happy user 🙂

Learn the step-wise method to defer parsing of Javascript in Magento given below!

Method to Defer Parsing of Javascript in Magento:

1. Add observer code in config.xml  
   
   <frontend>         <events>             <http_response_send_before>                 <observers>                     <extension_deferjs_http_response_send_before>                         <class>extension/observer</class>                         <type>singleton</type>                         <method>httpResponseSendBefore</method>                     </extension_deferjs_http_response_send_before>                 </observers>             </http_response_send_before>         </events>    </frontend>

   1 2 3 4 5 6 7 8 9 10 11 12 13

   <frontend>         <events>             <http_response_send_before>                 <observers>                     <extension_deferjs_http_response_send_before>                         <class>extension/observer</class>                         <type>singleton</type>                         <method>httpResponseSendBefore</method>                     </extension_deferjs_http_response_send_before>                 </observers>             </http_response_send_before>         </events>    </frontend>

    
2. Add below code in the observer.php file
   
   public function httpResponseSendBefore($observer)     {         $response = $observer->getEvent()->getResponse();         $html = $response->getBody();         preg_match_all('#(<script.*?</script>)#is', $html, $matches);         $js = '';         foreach ($matches[0] as $value)             $js .= $value;         $html = preg_replace('#<script.*?</script>#is', '', $html);         $html = preg_replace('#</body>#',$js.'</body>',$html);         $response->setBody($html);     }

   1 2 3 4 5 6 7 8 9 10 11 12

   public function httpResponseSendBefore($observer)     {         $response = $observer->getEvent()->getResponse();         $html = $response->getBody();         preg_match_all('#(<script.*?</script>)#is', $html, $matches);         $js = '';         foreach ($matches[0] as $value)             $js .= $value;         $html = preg_replace('#<script.*?</script>#is', '', $html);         $html = preg_replace('#</body>#',$js.'</body>',$html);         $response->setBody($html);     }

    

Implement the above two steps and offer an optimized Magento store to the visitors!

After the defer parsing of JavaScript in Magento:

 

Please share any doubts in the Comments section and I’d be solving it asap!

If you want to skip the tutorial and still want to have the best user experience at your store, try the free Magento Defer Parsing of Javascript extension!

Reward the post with 5 stars if it helped you optimize the Magento store!

Thank you for allowing me to help boost your website’s performance for a quicker and better experience! ?