{"id":23083,"date":"2024-08-13T10:35:54","date_gmt":"2024-08-13T10:35:54","guid":{"rendered":"https:\/\/kwebby.com\/blog\/?p=23083"},"modified":"2024-08-13T10:35:59","modified_gmt":"2024-08-13T10:35:59","slug":"reduce-javascript-execution-time","status":"publish","type":"post","link":"https:\/\/kwebby.com\/blog\/reduce-javascript-execution-time\/","title":{"rendered":"How to Reduce JavaScript execution time (5 Methods)"},"content":{"rendered":"\n<p>When it comes to boosting your <a href=\"https:\/\/kwebby.com\/blog\/google-core-web-vitals\/\" data-type=\"post\" data-id=\"14090\">website&#8217;s performance<\/a>, reducing <a href=\"https:\/\/kwebby.com\/blog\/avoid-serving-legacy-javascript-to-modern-browsers\/\" data-type=\"post\" data-id=\"22844\">JavaScript execution time<\/a> is like finding the secret sauce for a mouth-watering dish\u2014it just makes everything better!<\/p>\n\n\n\n<p>If you&#8217;ve ever wondered why your <a href=\"https:\/\/kwebby.com\/blog\/speed-up-wordpress-performance\/\" data-type=\"post\" data-id=\"13857\">WordPress site seems to lag<\/a>, look no further than your JavaScript files. They can be major culprits when it comes to slow loading times and poor user experience.<\/p>\n\n\n\n<p>In this article, we&#8217;ll dive into the nitty-gritty of how <a href=\"https:\/\/web.dev\/articles\/optimize-javascript-execution\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/web.dev\/articles\/optimize-javascript-execution\" rel=\"noreferrer noopener\">JavaScript execution<\/a> affects your site&#8217;s performance and why it&#8217;s crucial to get a handle on those pesky execution times.<\/p>\n\n\n\n<p>We\u2019ll explore measuring JavaScript execution time, identifying the notorious JS issues that might be weighing down your load time, and share some nifty tricks (including handy plugins) to reduce those delays.<\/p>\n\n\n\n<p>Buckle up because we&#8217;re about to level up your coding game and ensure your site delivers a seamless experience faster than you can say &#8220;<strong>PageSpeed Insights!<\/strong>&#8220;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How Does Javascript Execution Time Affect Your Website&#8217;s Performance<\/h2>\n\n\n\n<p>Let&#8217;s chat about how JavaScript execution time can throw a wrench into your <a href=\"https:\/\/kwebby.com\/blog\/use-passive-listeners\/\" data-type=\"post\" data-id=\"14828\">website&#8217;s performance<\/a>!<\/p>\n\n\n\n<p>It\u2019s like trying to have a conversation while someone\u2019s blasting music in the background\u2014you can\u2019t focus on what matters.<\/p>\n\n\n\n<p>To really get a sense of the impact, check out metrics like <a href=\"https:\/\/kwebby.com\/blog\/interaction-to-next-paint-inp\/\" data-type=\"post\" data-id=\"17218\">Interaction to Next Paint (INP) <\/a>and <a href=\"https:\/\/kwebby.com\/blog\/first-input-delay-fid\/\" data-type=\"post\" data-id=\"14281\">First Input Delay (FID<\/a>) along with your <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/performance\/performance-scoring\" data-type=\"link\" data-id=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/performance\/performance-scoring\" target=\"_blank\">Lighthouse performance score<\/a>. Starting <a href=\"https:\/\/developers.google.com\/search\/blog\/2023\/05\/introducing-inp\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/developers.google.com\/search\/blog\/2023\/05\/introducing-inp\" rel=\"noreferrer noopener\">March 2024, INP will take the spotlight<\/a> as the new <a href=\"https:\/\/kwebby.com\/blog\/google-core-web-vitals\/\" data-type=\"post\" data-id=\"14090\">Core Web Vital<\/a> metric to keep an eye on.<\/p>\n\n\n\n<p>Both FID and INP help measure your page\u2019s interactivity and responsiveness; if your browser is knee-deep in processing those JS files when you try to click something, you\u2019ll be left hanging, and that\u2019s no <a href=\"https:\/\/kwebby.com\/blog\/fun-tie-breaker-trivia-questions\/\" data-wpil-monitor-id=\"1430\">fun<\/a>!<\/p>\n\n\n\n<p>Here\u2019s a breakdown of how JavaScript execution <a href=\"https:\/\/kwebby.com\/blog\/how-server-response-time-affects-googles-crawling\/\" data-wpil-monitor-id=\"1431\">time affects<\/a> performance:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>User Experience:<\/strong> A long JavaScript execution time can lead to noticeable lags, frustrating users trying to interact with your site.<\/li>\n\n\n\n<li><strong>Interactivity Metrics:<\/strong> FID measures how quickly the browser responds to user interactions. Poor JS execution can skyrocket this number.<\/li>\n\n\n\n<li><strong>INP Score:<\/strong> INP focuses on how quickly your page becomes interactive, making it essential for high-performing <a href=\"https:\/\/kwebby.com\/blog\/reduce-unused-css\/\" data-wpil-monitor-id=\"1424\">sites<\/a>.<\/li>\n\n\n\n<li><strong>Total Blocking Time (TBT):<\/strong> TBT accounts for 30% of your Lighthouse performance score, meaning delays in JavaScript execution directly impact your PageSpeed Insights rating.<\/li>\n\n\n\n<li><strong>Asynchronous Loading:<\/strong> Implementing techniques like lazy loading and deferring non-critical JavaScript can significantly reduce execution time.<\/li>\n\n\n\n<li><strong>Minifying JavaScript:<\/strong> Smaller file sizes mean faster load times, helping to enhance overall site performance.<\/li>\n\n\n\n<li><strong>Unused Code:<\/strong> Identifying and eliminating unused JavaScript can shave off precious milliseconds, making your site snappier.<\/li>\n<\/ul>\n\n\n\n<p>So, let\u2019s roll up our sleeves and tackle those JavaScript performance issues to give your site a boost! <\/p>\n\n\n\n<p>By measuring JavaScript execution time and proactively addressing those pesky delays, you&#8217;ll level up your coding game and keep users happily engaged.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">First, Measure Your Javascript Execution Time<\/h2>\n\n\n\n<p>Reducing JavaScript execution time is key to keeping your users happy and your site running smoothly. So, let\u2019s dive into the nitty-gritty of measuring and managing those pesky execution times!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to Measure Your JavaScript Execution Time<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Use Google PageSpeed Insights<\/strong>: <a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/pagespeed.web.dev\/\" rel=\"noreferrer noopener\">This nifty tool<\/a> is your go-to for evaluating your site&#8217;s performance. Just toss in your URL, and check the Diagnostics section. If there&#8217;s an issue, you\u2019ll see a warning about reducing JavaScript execution time. The tool breaks down the execution process into three main parts:<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Script Parse<\/strong> (the parsing stage)<\/li>\n\n\n\n<li><strong>Script Evaluation<\/strong> (the compiling stage)<\/li>\n\n\n\n<li><strong>Total CPU Time<\/strong> (the memory cost that can totally freeze your page!)<\/li>\n<\/ul>\n\n\n\n<p>Pay close attention, because if any of your JS scripts take longer than 2 seconds to run, it\u2019ll flag that for you.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"550\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-48-45-1024x550.png\" alt=\"\" class=\"wp-image-23084\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-48-45-1024x550.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-48-45-300x161.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-48-45-768x412.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-48-45-1536x825.png 1536w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-48-45.png 1890w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul start=\"2\" class=\"wp-block-list\">\n<li><strong>Check GTmetrix<\/strong>: This tool is like <a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/gtmetrix.com\/\" rel=\"noreferrer noopener\">having a performance ninja in your toolkit<\/a>. Run your URL through GTmetrix and head to the Structure tab. Here, you&#8217;ll find details about the JavaScript execution time, similar to what PageSpeed Insights provides. Keep an eye out for any JS execution times that exceed 2 seconds, as they need your attention too!<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"221\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-53-18-1024x221.png\" alt=\"\" class=\"wp-image-23085\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-53-18-1024x221.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-53-18-300x65.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-53-18-768x165.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-53-18-1536x331.png 1536w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-53-18-2048x441.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Kwebby&#8217;s Website Reviewer:<\/strong> You can also use our <a href=\"https:\/\/kwebby.com\/website-reviewer\" data-type=\"link\" data-id=\"https:\/\/kwebby.com\/website-reviewer\">Website reviewer<\/a> to get insights into your website for such errors. <\/li>\n<\/ul>\n\n\n\n<ul start=\"2\" class=\"wp-block-list\">\n<li><strong>Look for Critical JavaScript<\/strong>: Identify any high-impact scripts that might be slowing down your page load. You can analyze how different JavaScript files are affecting your site performance and find potential culprits to either minify or tackle during loading.<\/li>\n\n\n\n<li><strong>Optimize User Interaction<\/strong>: Persistent delays in JavaScript execution can lead to increased input delay and a frustrating user experience. Improving the speed of your JavaScript execution time helps ensure that users can interact with your site more smoothly.<\/li>\n\n\n\n<li><strong>Manage Unused JavaScript<\/strong>: If you have scripts lying around that aren&#8217;t being used, it\u2019s time to say goodbye. Stripping away unused code minimizes the load on your browser and can significantly improve elapsed time.<\/li>\n<\/ul>\n\n\n\n<p>By keeping a close eye on these aspects, you\u2019ll not only reduce JavaScript execution time but also elevate overall website performance. After all, who wouldn\u2019t want a site that runs smoother and keeps users engaged?<\/p>\n\n\n\n<p>Let&#8217;s level up that coding game!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Reduce Javascript Execution Time<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">#1 Use Cloudflare&#8217;s Zaraz to Load JS on Cloud<\/h3>\n\n\n\n<p>Ready to take control of your JavaScript execution time and level up your site performance? Let\u2019s explore how <a href=\"https:\/\/www.cloudflare.com\/en-in\/application-services\/products\/zaraz\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/www.cloudflare.com\/en-in\/application-services\/products\/zaraz\/\" rel=\"noreferrer noopener\">Cloudflare\u2019s Zaraz<\/a> can help you streamline your JavaScript loading processes without breaking a sweat.<\/p>\n\n\n\n<p>Form your left side and select Zaraz; you\u2019ll find an arsenal of ready-made templates just waiting to be used! Whether you need to load Google AdSense, Google Analytics, or other services, Zaraz makes it a breeze\u2014no need to fuss about integrating them directly into your app.<\/p>\n\n\n\n<p>Here\u2019s how to get started:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Select Zaraz<\/strong>: From your Cloudflare dashboard, head over to the left side navigation and select Zaraz. It\u2019s just a click away!<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"694\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-57-21-1-1024x694.png\" alt=\"\" class=\"wp-image-23087\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-57-21-1-1024x694.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-57-21-1-300x203.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-57-21-1-768x520.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-57-21-1.png 1472w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Explore Ready-Made Templates<\/strong>: Browse through the plethora of templates available. You\u2019ll find options to easily integrate popular services like <a href=\"https:\/\/kwebby.com\/blog\/seo-metrics-google-analytics\/\" data-wpil-monitor-id=\"1425\">Google Analytics<\/a> or AdSense without needing to mess around with any complex setups. Just click and go!<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"698\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-58-03-1024x698.png\" alt=\"\" class=\"wp-image-23088\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-58-03-1024x698.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-58-03-300x204.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-58-03-768x523.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-58-03-1536x1047.png 1536w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-58-03.png 1968w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Add Custom JavaScript<\/strong>: If you\u2019ve got a special JavaScript file that\u2019s not covered by the templates, no problem! Choose the \u201cHTML\u201d template and simply paste your custom JS code into the provided field. This is a fantastic way to ensure that your unique functionalities are loaded efficiently.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"821\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-58-37-1024x821.png\" alt=\"\" class=\"wp-image-23089\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-58-37-1024x821.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-58-37-300x240.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-58-37-768x616.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-58-37-1536x1231.png 1536w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-58-37-2048x1642.png 2048w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/08\/2024-08-13_15-58-37-220x175.png 220w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Save Your Changes<\/strong>: Don\u2019t forget to hit save after you\u2019ve added your JavaScript! This will ensure that everything is stored correctly and ready for the next step.<\/li>\n\n\n\n<li><strong>Check the Audit<\/strong>: Head back to your site&#8217;s performance metrics and run an audit again. You\u2019ll be amazed at how much smoother your page load becomes and how your JavaScript execution time improves!<\/li>\n<\/ul>\n\n\n\n<p>By harnessing the power of Zaraz, you&#8217;re not only reducing script delays and performance issues but also enhancing your overall user experience.<\/p>\n\n\n\n<p>Optimizing the way your website loads JavaScript translates to faster interaction and less input delay, which is crucial for keeping users engaged.<\/p>\n\n\n\n<p>With these steps, you&#8217;re well on your way to squeezing out those precious milliseconds and minimizing total blocking time. Let&#8217;s keep rolling and make your site a shining example of better programming and performance!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">#2 Remove or Replace Unnecessary Plugins<\/h3>\n\n\n\n<p>Alright, time to get to the nitty-gritty of your site\u2019s performance\u2014let\u2019s talk about those bloated plugins and themes! If you&#8217;ve been using multipurpose themes on your <a href=\"https:\/\/kwebby.com\/blog\/migrate-wordpress-websites\/\" data-wpil-monitor-id=\"1426\">WordPress site<\/a>, it might be time for a change.<\/p>\n\n\n\n<p>Many of these themes are designed to cater to a wide variety of users, which results in huge file sizes packed with features that you may never even use.<\/p>\n\n\n\n<p>Those hefty JavaScript files and extra code can seriously slow down your page load time and drag down your overall website performance.<\/p>\n\n\n\n<p>By removing unnecessary plugins and replacing them with lean alternatives, you can significantly improve your JavaScript execution time.<\/p>\n\n\n\n<p>For example, ditching bloated builders like Elementor or excessive social sharing plugins can clean up unused code and streamline your site. Not only does this reduce total blocking time for users, but it also means less input delay when they interact with your site.<\/p>\n\n\n\n<p>Streamlining your JavaScript files and trimming away critical JavaScript that just isn&#8217;t needed is key. As you tackle those performance issues, consider implementing asynchronous loading for non-critical JavaScript.<\/p>\n\n\n\n<p>This way, you can keep your users engaged without the frustration of delays. Plus, by measuring JavaScript execution time using tools like Google PageSpeed Insights, you&#8217;ll see just how removing that excess baggage can level up your coding game and enhance user experience. So go ahead\u2014give your site a fresh, speedy makeover by reducing elapsed time on those bloated plugins!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">#3 Delay Javascript Loading<\/h3>\n\n\n\n<p>The delay javascript method will download and execute JS files after the user&#8217;s first interaction.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">For Non-WordPress users<\/h4>\n\n\n\n<p>For those who aren&#8217;t using WordPress or prefer a custom solution, delaying JavaScript loading can be achieved through a straightforward approach using a simple script. Here&#8217;s how you can do it step-by-step:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Identify Your JavaScript Files<\/strong>: First, pinpoint the non-critical JavaScript files that can be deferred to enhance page load speed. You want to focus on scripts that aren\u2019t essential for your page\u2019s initial render.<\/li>\n\n\n\n<li><strong>Insert an Event Listener<\/strong>: Open your HTML file and embed an event listener that will execute your JavaScript after the page has fully loaded. This ensures that the code runs only after the necessary elements are available for user interaction.<\/li>\n<\/ol>\n\n\n\n<p>Here\u2019s a basic example:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;script&gt;\n\nwindow.addEventListener('load', function() {\n\n\/\/ Your non-critical JavaScript here\n\nconst script = document.createElement('script');\n\nscript.src = 'path-to-your-non-critical-script.js';\n\ndocument.body.appendChild(script);\n\n});\n\n&lt;\/script&gt;\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;script&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">window.addEventListener(&#39;load&#39;, function() <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/ Your non-critical JavaScript here<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">script<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">createElement<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">script<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">script<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">src<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">path-to-your-non-critical-script.js<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">body<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">appendChild<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">script<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/script&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>Load JavaScript with Lazy Loading<\/strong>: An alternative method is to implement a <a href=\"https:\/\/kwebby.com\/blog\/lazyload-images-videos-and-iframes\/\" data-wpil-monitor-id=\"1427\">lazy loading technique<\/a> by including your JavaScript in a way that defers loading until the user interacts with a specific element, like a button or a link.<\/li>\n<\/ol>\n\n\n\n<p>Example:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"   &lt;button id=&quot;loadScriptBtn&quot;&gt;Load More Content&lt;\/button&gt;\n   &lt;script&gt;\n      document.getElementById('loadScriptBtn').addEventListener('click', function() {\n          const script = document.createElement('script');\n          script.src = 'path-to-your-non-critical-script.js';\n          document.body.appendChild(script);\n      });\n   &lt;\/script&gt;\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">   <\/span><span style=\"color: #81A1C1\">&lt;button<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">id<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">loadScriptBtn<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">Load More Content<\/span><span style=\"color: #81A1C1\">&lt;\/button&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">   <\/span><span style=\"color: #81A1C1\">&lt;script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      document.getElementById(&#39;loadScriptBtn&#39;).addEventListener(&#39;click&#39;, function() <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #D8DEE9\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">script<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">createElement<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">script<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #D8DEE9\">script<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">src<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">path-to-your-non-critical-script.js<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">body<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">appendChild<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">script<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">   <\/span><span style=\"color: #81A1C1\">&lt;\/script&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">For WordPress users<\/h4>\n\n\n\n<p>For WordPress users who prefer a hassle-free solution, the FlyingPress plugin can help you effectively delay JavaScript loading:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Install FlyingPress<\/strong>: Begin by installing the <a href=\"https:\/\/flyingpress.com\/?ref=xvbz\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/flyingpress.com\/?ref=xvbz\" rel=\"noreferrer noopener\">FlyingPress plugin<\/a> from the WordPress repository.<\/li>\n\n\n\n<li><strong>Access the FlyingPress Dashboard<\/strong>: Once activated, navigate to the FlyingPress dashboard.<\/li>\n\n\n\n<li><strong>Go to the JavaScript Tab<\/strong>: Locate and click on the JavaScript tab within the plugin.<\/li>\n\n\n\n<li><strong>Select Delay JavaScript<\/strong>: Choose the &#8220;delay JavaScript&#8221; option from the available settings. It\u2019s crucial to opt for the &#8216;delay selected&#8217; method rather than &#8216;delay all&#8217;, as this can potentially break your website.<\/li>\n\n\n\n<li><strong>Choose Third-Party JavaScript<\/strong>: Finally, identify the third-party JavaScript integrations on your website that you want to delay loading until after the HTML\/content is fully rendered. This technique minimizes input delay and boosts user experience, ensuring that while the essential content is visible, the non-critical elements are loaded in the background.<\/li>\n<\/ol>\n\n\n\n<p>By effectively implementing these strategies, you\u2019ll not only reduce JavaScript execution time but also elevate your overall website performance.<\/p>\n\n\n\n<p>Remember, a smoothly <a href=\"https:\/\/kwebby.com\/blog\/load-balance-wordpress\/\" data-wpil-monitor-id=\"1428\">loading site can cut down total blocking time<\/a>, improve interaction, and make for a far better programming experience\u2014because who doesn\u2019t love a site that runs like a well-oiled machine? Let&#8217;s keep that momentum going!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">#4 Defer Javascript Files<\/h3>\n\n\n\n<p>Time to take your website&#8217;s performance to the next level by deferring your JavaScript files!<\/p>\n\n\n\n<p>This clever technique allows your browser to load essential HTML content first, ensuring a seamless user experience.<\/p>\n\n\n\n<p>By deferring JavaScript execution, you can effectively cut down on input delay and optimize page load times, making your site feel snappier and more responsive. Here\u2019s how to do it, step by step!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">For Non-WordPress Users<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Identify Your JavaScript Files<\/strong>: Start by finding those pesky JavaScript files that can wait to load. Look for scripts that aren&#8217;t part of your critical rendering path.<\/li>\n<\/ol>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>Add the `defer` Attribute<\/strong>: Modify your script tags to include the `defer` attribute, allowing the browser to load these scripts only after parsing the HTML. Here&#8217;s a simple example:<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;script src=&quot;path-to-your-non-critical-script.js&quot; defer&gt;&lt;\/script&gt;\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;script<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">src<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">path-to-your-non-critical-script.js<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">defer<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/script&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>Use an Event Listener for Execution<\/strong>: If you want to execute a piece of JavaScript after the entire page has loaded, wrap it in an event listener connected to the window load event:<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;script&gt;\n\nwindow.addEventListener('load', function() {\n\n\/\/ Your non-critical JavaScript here\n\nconst deferredScript = document.createElement('script');\n\ndeferredScript.src = 'path-to-your-non-critical-script.js';\n\ndocument.body.appendChild(deferredScript);\n\n});\n\n&lt;\/script&gt;\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;script&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">window.addEventListener(&#39;load&#39;, function() <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/ Your non-critical JavaScript here<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">deferredScript<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">createElement<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">script<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">deferredScript<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">src<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">path-to-your-non-critical-script.js<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">body<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">appendChild<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">deferredScript<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/script&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">For WordPress Users<\/h4>\n\n\n\n<p>For those using WordPress, deferring JavaScript loading is a breeze with the <a href=\"https:\/\/flyingpress.com\/?ref=xvbz\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/flyingpress.com\/?ref=xvbz\" rel=\"noreferrer noopener\">FlyingPress plugin<\/a>! Follow these steps to enhance your website&#8217;s performance:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Install FlyingPress<\/strong>: Head over to the WordPress repository and get yourself the <a href=\"https:\/\/flyingpress.com\/?ref=xvbz\" data-type=\"link\" data-id=\"https:\/\/flyingpress.com\/?ref=xvbz\" target=\"_blank\">FlyingPress plugin<\/a>. It\u2019s a game changer for managing JavaScript loading.<\/li>\n\n\n\n<li><strong>Access the FlyingPress Dashboard<\/strong>: Once you\u2019ve activated the plugin, navigate to the FlyingPress dashboard.<\/li>\n\n\n\n<li><strong>Go to the JavaScript Tab<\/strong>: Click on the JavaScript tab where all the magic happens.<\/li>\n\n\n\n<li><strong>Select the Defer JavaScript Option<\/strong>: Choose the &#8220;defer JavaScript&#8221; option to ensure your scripts execute only after the HTML is fully parsed. Here&#8217;s a handy tip: opt for the &#8216;defer selected&#8217; method rather than &#8216;defer all&#8217; to avoid breaking your site.<\/li>\n\n\n\n<li><strong>Optional &#8211; Defer Inline Scripts<\/strong>: If you want even more control, feel free to select &#8220;defer inline&#8221; to execute only those inline scripts that aren\u2019t critical for rendering.<\/li>\n\n\n\n<li><strong>Exclude Critical Scripts<\/strong>: You can also specify scripts that should be excluded from deferring, ensuring that your essential functions remain fast and functional without hiccups.<\/li>\n<\/ol>\n\n\n\n<p>By implementing these techniques, you\u2019re not just reducing JavaScript execution time; you\u2019re stepping up your website&#8217;s performance game!<\/p>\n\n\n\n<p>By cutting down on total blocking time and optimizing execution time, you\u2019ve created a better user experience. Who doesn\u2019t want to showcase a website that runs smoother than ever?<\/p>\n\n\n\n<p>Keep the momentum going, and let\u2019s level up your coding skills even further!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">#5 Minify JS Files<\/h3>\n\n\n\n<p>Let\u2019s turbocharge your website&#8217;s performance by diving into minifying those JavaScript files! Minification is a fantastic way to reduce the size of your JavaScript code, boosting loading times and enhancing user experience. Here\u2019s how to do it, step by step, for non-WordPress users:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">For Non-WordPress Users<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Head to the Online Minifier<\/strong>: Go over to <a href=\"https:\/\/kwebby.com\/js-minifier\">https:\/\/kwebby.com\/js-minifier<\/a>.<\/li>\n\n\n\n<li><strong>Upload Your Files<\/strong>: You can upload up to 10 JavaScript files at a time. This is where you\u2019ll see the magic happen!<\/li>\n\n\n\n<li><strong>Submit Your Files<\/strong>: After selecting your files, click the submit button and watch as the tool works its charm.<\/li>\n\n\n\n<li><strong>Download Minified Files<\/strong>: Once processed, you&#8217;ll have the option to download your freshly minified JS files.<\/li>\n\n\n\n<li><strong>Upload to Your Server<\/strong>: Finally, simply upload these minified files back to your server, replacing the original versions. This means your scripts will only execute after the HTML is parsed, effectively reducing input delay and enhancing overall website performance.<\/li>\n<\/ol>\n\n\n\n<p>By taking these steps, you\u2019re actively working to reduce JavaScript execution time and improving your site\u2019s speed. Now, for our WordPress users, here\u2019s a quick run-through:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">For WordPress Users<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Navigate to the FlyingPress Dashboard<\/strong>: Once you\u2019ve activated the<a href=\"https:\/\/flyingpress.com\/?ref=xvbz\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/flyingpress.com\/?ref=xvbz\" rel=\"noreferrer noopener\"> FlyingPress plugin<\/a>, it\u2019s time to boost your site\u2019s performance!<\/li>\n\n\n\n<li><strong>Click on the JavaScript Tab<\/strong>: Find and click on the JavaScript tab to access the minification settings.<\/li>\n\n\n\n<li><strong>Select the Minify JavaScript Option<\/strong>: Check the &#8220;<strong>minify javascript<\/strong>&#8221; option to enable minification for your scripts.<\/li>\n\n\n\n<li><strong>Save Your Changes<\/strong>: Don\u2019t forget to hit save, and voil\u00e0\u2014you\u2019re all set!<\/li>\n<\/ol>\n\n\n\n<p>With these simple actions, you\u2019re minimizing unused JavaScript and cutting down on total blocking time, leading to a snappier, more responsive site.<\/p>\n\n\n\n<p>Whether you\u2019re measuring JavaScript execution time or tackling performance issues, every millisecond counts in delivering a stellar user experience. So, let\u2019s level up your coding, and ensure your scripts are running smoother than ever!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up!<\/h2>\n\n\n\n<p>In conclusion, optimizing your <a href=\"https:\/\/kwebby.com\/blog\/improve-user-experience\/\" data-wpil-monitor-id=\"1429\">website\u2019s performance is essential for creating a seamless user experience<\/a>. By focusing on reducing JavaScript execution time and implementing techniques such as deferring non-critical JavaScript and minifying your JavaScript files, you can significantly enhance your page load speed.<\/p>\n\n\n\n<p>Monitoring tools like Google PageSpeed Insights will help you assess your current time and uncover potential performance issues.<\/p>\n\n\n\n<p>Additionally, leveraging features like asynchronous loading and event listeners ensures efficient code execution, minimizing input delay and total blocking time.<\/p>\n\n\n\n<p>With every millisecond counting, taking the time to address these factors will lead to a snappier site and elevate your programming skills.<\/p>\n\n\n\n<p>Whether you\u2019re measuring JavaScript execution or tackling unused code, there\u2019s always room to level up your coding and embrace the web technologies that propel your site performance.<\/p>\n\n\n\n<p>So, let\u2019s get to work and create a website that wows users with lightning-fast load times and flawless interactivity!<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When it comes to boosting your website&#8217;s performance, reducing JavaScript execution time is like finding the secret sauce for a mouth-watering dish\u2014it just makes everything&hellip;<\/p>\n","protected":false},"author":1,"featured_media":23090,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[734,848,4],"tags":[],"class_list":["post-23083","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-core-web-vitals","category-performance","category-tutorials"],"_links":{"self":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts\/23083","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/comments?post=23083"}],"version-history":[{"count":0,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts\/23083\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/media\/23090"}],"wp:attachment":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/media?parent=23083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/categories?post=23083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/tags?post=23083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}