{"id":656,"date":"2019-11-25T06:27:10","date_gmt":"2019-11-25T06:27:10","guid":{"rendered":"http:\/\/blog.hostinger.io\/hostinger-tutorials\/uncategorized\/wordpresshow-to-defer-parsing-of-javascript-in-wordpress\/"},"modified":"2025-04-23T09:14:55","modified_gmt":"2025-04-23T09:14:55","slug":"how-to-defer-parsing-of-javascript","status":"publish","type":"post","link":"\/in\/tutorials\/how-to-defer-parsing-of-javascript\/","title":{"rendered":"How to Improve Your Site&#8217;s Speed in WordPress by Deferring JavaScript Parsing"},"content":{"rendered":"<p class=\"wp-block-paragraph\">If you want to cut your website&rsquo;s loading time, you can try to defer parsing of JavaScript. It allows the browser to render JavaScript <strong>only<\/strong> after it finishes loading the main content of a site. In this tutorial, we will cover several ways on how to defer parsing of JavaScript in WordPress CMS.<\/p><p class=\"has-text-align-center wp-block-paragraph\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Mega-WordPress-Cheat-EN.pdf\" target=\"_blank\" rel=\"noopener\">Download all in one WordPress cheat sheet<\/a><\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-why-should-you-defer-parsing-of-javascript\">Why Should You Defer Parsing of JavaScript?<\/h2><p class=\"wp-block-paragraph\">When you open a website, your browser will receive the site&rsquo;s content from the server and loads the code from top to bottom. However, if it finds JavaScript, the loading process will be interrupted until it finishes downloading all the JavaScript.<\/p><p class=\"wp-block-paragraph\">To solve this issue, you can defer parsing of JavaScript, which allows the browser to load the full content without waiting for the scripts to load. By implementing this task, JavaScript parsing won&rsquo;t negatively affect your website&rsquo;s loading time.<\/p><p class=\"wp-block-paragraph\">Keep in mind that having lots of JavaScript isn&rsquo;t bad. After all, It&rsquo;s one of the essential <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Web_Components\" target=\"_blank\" rel=\"noreferrer noopener\">web components<\/a>, which allows you to extend the functionality of your site.<\/p><p class=\"wp-block-paragraph\">The point is, there are two main benefits you can get:<\/p><ul class=\"wp-block-list\">\n<li><strong>Better user experience<\/strong> &ndash; visitors won&rsquo;t have to wait long to view your website content.<\/li>\n\n\n\n<li><strong>Improved SEO ranking<\/strong> &ndash; <a href=\"https:\/\/developers.google.com\/search\/docs\/crawling-indexing\/googlebot\" target=\"_blank\" rel=\"noreferrer noopener\">Google bots<\/a> can crawl your site faster.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-how-to-defer-parsing-of-javascript-in-wordpress\">How to Defer Parsing of JavaScript in WordPress?<\/h2><p class=\"wp-block-paragraph\">This section will show you a step-by-step guide to defer parsing of JavaScript. To top it off, we&rsquo;ll also show you how to analyze the problem and test the changes after applying the task.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-analyze-the-site\">1. Analyze the site<\/h3><p class=\"wp-block-paragraph\">To find out whether you should defer parsing of JavaScript in your WordPress website, analyze it using <a href=\"\/in\/tutorials\/website-speed-test\/\" target=\"_blank\" rel=\"noreferrer noopener\">site speed testing tools<\/a> like <a href=\"https:\/\/www.gtmetrix.com\" target=\"_blank\" rel=\"noreferrer noopener\">GTMetrix<\/a>. As an example, here is the performance result of a website before implementing the method:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1120\" height=\"373\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2016\/10\/analyze-defer-parsing-of-javascript-in-gtmetrix.png\/public\" alt=\"GTMetrix recommending to defer parsing of JavaScript to reduce blocking of page rendering\" class=\"wp-image-22821\" srcset=\"https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2016\/10\/analyze-defer-parsing-of-javascript-in-gtmetrix.png 1120w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2016\/10\/analyze-defer-parsing-of-javascript-in-gtmetrix-150x50.png 150w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2016\/10\/analyze-defer-parsing-of-javascript-in-gtmetrix-300x100.png 300w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2016\/10\/analyze-defer-parsing-of-javascript-in-gtmetrix-768x256.png 768w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2016\/10\/analyze-defer-parsing-of-javascript-in-gtmetrix-1024x341.png 1024w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">It shows that there&rsquo;s an issue regarding JavaScript parsing, which means the website site needs to defer it.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/in\/wordpress-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"2048\" height=\"600\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/06\/New-WP_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-111781\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/06\/New-WP_in-text-banner.png\/w=2048,fit=scale-down 2048w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/06\/New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/06\/New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/06\/New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/06\/New-WP_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/06\/New-WP_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/><\/a><\/figure><h3 class=\"wp-block-heading\" id=\"h-2-defer-parsing-of-javascript-in-wordpress\">2. Defer Parsing of JavaScript in WordPress<\/h3><p class=\"wp-block-paragraph\">Now, let&rsquo;s get into the steps of deferring parsing of JavaScript! There are two ways to do it &ndash; installing a plugin or adding a code snippet manually.<\/p><h4 class=\"wp-block-heading\" id=\"h-using-wordpress-plugins\">Using WordPress plugins<\/h4><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"940\" height=\"305\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2016\/10\/banner-of-speed-booster-pack.jpg\/public\" alt=\"Speed Booster Pack WordPress plugin\" class=\"wp-image-22829\" srcset=\"https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2016\/10\/banner-of-speed-booster-pack.jpg 940w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2016\/10\/banner-of-speed-booster-pack-150x49.jpg 150w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2016\/10\/banner-of-speed-booster-pack-300x97.jpg 300w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2016\/10\/banner-of-speed-booster-pack-768x249.jpg 768w\" sizes=\"(max-width: 940px) 100vw, 940px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">One of the easiest ways to defer JavaScript parsing is by using a plugin. <a href=\"https:\/\/wordpress.org\/plugins\/speed-booster-pack\/\" target=\"_blank\" rel=\"noreferrer noopener\">Speed Booster Pack<\/a> is one of the most popular plugins for this task. To begin, <a href=\"\/in\/tutorials\/wordpress\/how-to-install-wordpress-plugins\/\" target=\"_blank\" rel=\"noreferrer noopener\">install the plugin<\/a> and activate it, then follow these steps:<\/p><ol class=\"wp-block-list\">\n<li>Go to your WordPress Dashboard.<\/li>\n\n\n\n<li>On the left sidebar, navigate to <strong>Speed Booster<\/strong>.<\/li>\n\n\n\n<li>Click the <strong>Advanced <\/strong>tab, and activate <strong>Defer parsing of JS files.<br><img decoding=\"async\" width=\"1017\" height=\"838\" class=\"aligncenter size-full wp-image-22830\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2016\/10\/defer-parsing-of-wordpress-javascript-using-speed-booster-pack-plugin.png\" alt=\"defer parsing of wordpress javascript using speed booster pack plugin\" srcset=\"https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2016\/10\/defer-parsing-of-wordpress-javascript-using-speed-booster-pack-plugin.png 1017w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2016\/10\/defer-parsing-of-wordpress-javascript-using-speed-booster-pack-plugin-150x124.png 150w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2016\/10\/defer-parsing-of-wordpress-javascript-using-speed-booster-pack-plugin-300x247.png 300w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2016\/10\/defer-parsing-of-wordpress-javascript-using-speed-booster-pack-plugin-768x633.png 768w\" sizes=\"(max-width: 1017px) 100vw, 1017px\" \/><\/strong><\/li>\n\n\n\n<li>Once done, tap <strong>Save Changes<\/strong>.<\/li>\n<\/ol><h4 class=\"wp-block-heading\" id=\"h-defer-parsing-of-javascript-via-functions-php\">Defer Parsing of JavaScript via functions.php<\/h4><p class=\"wp-block-paragraph\">Alternatively, you can carry out the task manually by editing one of the WordPress core files. Make sure to <a href=\"\/in\/tutorials\/backups\/downloading-website-backup\/\" target=\"_blank\" rel=\"noreferrer noopener\">backup your website<\/a> before proceeding. Here are the steps:<\/p><ol class=\"wp-block-list\">\n<li>From your WordPress admin area, go to <strong>Appearance -&gt; Theme Editor<\/strong><\/li>\n\n\n\n<li>Select <a href=\"\/in\/tutorials\/functions-php-wordpress\/\">functions.php<\/a><strong> <\/strong>in the <strong>Theme Files<br><img decoding=\"async\" width=\"1892\" height=\"717\" class=\"aligncenter size-full wp-image-22834\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2016\/10\/open-theme-editor-to-defer-parsing-of-javascript.png\" alt=\"open theme editor to defer parsing of javascript\" srcset=\"https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2016\/10\/open-theme-editor-to-defer-parsing-of-javascript.png 1024w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2016\/10\/open-theme-editor-to-defer-parsing-of-javascript-150x57.png 150w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2016\/10\/open-theme-editor-to-defer-parsing-of-javascript-300x114.png 300w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2016\/10\/open-theme-editor-to-defer-parsing-of-javascript-768x291.png 768w\" sizes=\"(max-width: 1892px) 100vw, 1892px\" \/><\/strong><\/li>\n\n\n\n<li>Enter this code at the bottom of the file:\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">function defer_parsing_of_js ( $url ) {\nif ( FALSE === strpos( $url, '.js' ) ) return $url;\nif ( strpos( $url, 'jquery.js' ) ) return $url;\nreturn \"$url' defer \";\n}\nadd_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );<\/pre>\n<\/li>\n\n\n\n<li>Click <strong>Update File<\/strong>.<\/li>\n<\/ol><h3 class=\"wp-block-heading\" id=\"h-3-test-the-changes\">3. Test the Changes<\/h3><p class=\"wp-block-paragraph\">After using one of the above options, <a href=\"\/in\/tutorials\/gtmetrix-for-testing-websites-speed\/\">re-analyze your site with GTMetrix<\/a>:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1069\" height=\"128\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2016\/10\/successful-defer-parsing-of-javascript-in-gtmetrix.png\/public\" alt=\"Successful defer parsing of JavaScript in GTmetrix.\" class=\"wp-image-22832\" srcset=\"https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2016\/10\/successful-defer-parsing-of-javascript-in-gtmetrix.png 1069w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2016\/10\/successful-defer-parsing-of-javascript-in-gtmetrix-150x18.png 150w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2016\/10\/successful-defer-parsing-of-javascript-in-gtmetrix-300x36.png 300w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2016\/10\/successful-defer-parsing-of-javascript-in-gtmetrix-768x92.png 768w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2016\/10\/successful-defer-parsing-of-javascript-in-gtmetrix-1024x123.png 1024w\" sizes=\"(max-width: 1069px) 100vw, 1069px\" \/><\/figure>\n<\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p class=\"wp-block-paragraph\">In this tutorial, you&rsquo;ve learned how to <a href=\"\/in\/tutorials\/speed-up-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">improve your WordPress site speed<\/a> by deferring parsing of JavaScript. You can do so by using a plugin or adding a code snippet to the theme&rsquo;s functions.php file.<\/p><p class=\"wp-block-paragraph\">Keep in mind that improving your website&rsquo;s loading time will lead to better user experience and improved SEO ranking.<\/p><p class=\"wp-block-paragraph\">Do you have any questions regarding this topic? Share your thoughts in the comment section below!<\/p><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Discover More Expert WordPress Techniques                <\/p>\n            <\/div>\n            <p class=\"protip__content\"><a href=\"\/in\/tutorials\/wordpress-javascript\/\">How to Add JavaScript to WordPress<\/a><br>\n<a href=\"\/in\/tutorials\/external-javascript-wordpress\/\">Combine External JavaScript in WordPress<\/a><br>\n<a href=\"\/in\/tutorials\/remove-query-strings-static-resources\/\">Remove Query Strings From Static Resources<\/a><br>\n<a href=\"\/in\/tutorials\/how-to-fix-admin-ajax-file\/\">How to Fix Admin Ajax File in WordPress<\/a><br>\n<a href=\"\/in\/tutorials\/how-to-fix-eliminate-render-blocking-javascript-and-css-in-above-the-fold-content-on-wordpress\/\">How to Eliminate Render Blocking JavaScript and CSS<\/a><\/p>\n                    <\/div>\n        \n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you want to cut your website&rsquo;s loading time, you can try to defer parsing of JavaScript. It allows the browser to render JavaScript only after it finishes loading the main content of a site. In this tutorial, we will cover several ways on how to defer parsing of JavaScript in WordPress CMS. Why Should [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/in\/tutorials\/how-to-defer-parsing-of-javascript\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"","rank_math_description":"","rank_math_focus_keyword":"","footnotes":""},"categories":[22636,22633],"tags":[],"class_list":["post-656","post","type-post","status-publish","format-standard","hentry","category-security-and-maintenance","category-wordpress"],"hreflangs":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/posts\/656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/comments?post=656"}],"version-history":[{"count":28,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/posts\/656\/revisions"}],"predecessor-version":[{"id":104433,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/posts\/656\/revisions\/104433"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/media?parent=656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/categories?post=656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/tags?post=656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}