Defer parsing JavaScript.

Hello,

We have a client who is asking us to "please optimize the form for load time," and lists the below text. Is there anything we can do to remove this warning they are seeing? Not sure if it's from Google PageSpeed Insights or another service.

Thanks very much!

428.2KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.

https://cdn.jotfor.ms/static/jotform.forms.js?3.3.7665 (309.9KiB) https://cdn.jotfor.ms/static/prototype.forms.js (117.3KiB) https://form.jotform.com/82666515356161 (1.0KiB of inline JavaScript)

What method is used to embed the form on your client's website? If possible use the Iframe Embed Method to add the form to the website. This will only load code for the Iframe and then render the form. No javascript resources will be loaded on the page.

I did, the code below is what I used. We are using the Divi theme and page builder on that site if that makes a difference.

<iframe id="JotFormIFrame-82666515356161" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/82666515356161" frameborder="0" style="width: 1px; min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-82666515356161"); if(window.location.href && window.location.href.indexOf("?") > -1) { var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } window.handleIFrameMessage = function(e) { var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { iframe = document.getElementById("JotFormIFrame"); } if (!iframe) { return; } switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height = args[1] + "px"; break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; case "loadScript": var src = args[1]; if (args.length > 3) { src = args[1] + ':' + args[2]; } var script = document.createElement('script'); script.src = src; script.type = 'text/javascript'; document.body.appendChild(script); break; case "exitFullscreen": if (window.document.exitFullscreen) window.document.exitFullscreen(); else if (window.document.mozCancelFullScreen) window.document.mozCancelFullScreen(); else if (window.document.mozCancelFullscreen) window.document.mozCancelFullScreen(); else if (window.document.webkitExitFullscreen) window.document.webkitExitFullscreen(); else if (window.document.msExitFullscreen) window.document.msExitFullscreen(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } </script>

The Divi Theme and Page Builder helps. Since it is a Wordpress website, we have plugins that you can install and use to embed the form.

Refer to this guide: https://www.jotform.com/help/324-A-Guide-to-Embed-Forms-for-WordPress-Users

Note that the Jotform does contain javascript elements that have to be loaded for the form to work effectively.

Deferring the parsing might load the website faster but the form will not load till the Javascript required to make it run is loaded and parsed.

This could create a bad experience for the user because they have to wait for the form to load.

Hello,

The guide you linked is from June 1, 2017, the plugins it recommends have not been updated in 2 years and are not compatible with current Wordpress versions. Will either plugin be updated to reflect the current version of WP?

If not, are there any other recommendations you can make? When we test our site on gtmetrix.com other scores are good except for Defer parsing of JavaScript, and most of the files are from https://cdn.jotfor.ms/. See: https://www.screencast.com/t/rvyDV7rYGa

Thanks for any new info you can provide.

As far as I know, the plugin is still working and can load the form without any problems. Are you not able to install the plugin in the current version of your Wordpress? If not, please give us the WP version and details so we can try it at our end.

For "Defer parsing of JavaScript", since you are using WordPress we can not use the iFrame code, we can not shorten the length and size of the unnecessary part of the script.

I installed both plugins but was not able to get either to work. When I tried the Embed Form plugin and clicked the button in a new page, a dialog box appeared but blank and said, "File not found." See: https://www.screencast.com/t/bK9ifM4p

For the oEmbed plugin, I installed and activated but when I pasted my form url into a new page it just appeared blank. See: https://www.screencast.com/t/sdO8tuvu and: https://www.screencast.com/t/og8IogeKvh

We are running a Divi child theme on WordPress 5.0.3.

Give me more time and I will do some tests on my end. Could you please clarify if your website is Wordpress.org or Wordpress.com so I can test it on the right platform?

Thank you and sorry for the trouble caused to you.

wordpress.org

Wordpress.org
*THANKS!*
Steve
-----------------------------------------------------------
P: 937.361.4166
*henryclarke.co | LinkedIN
*
...

Thanks, we will perform some tests and get back to you as soon as possible. 

Sorry for delayed response. I made some tests using the latest (updated) version of wordpress.org and I am not able to replicate the issue. I tried to embed the form using javascript code and the embed code for Wordpress.org and it works.

Screencast:

Are you still experiencing the issue? Please try again and confirm if it's still not working on your webpage.

Guide: 

- Adding Forms to Wordpress.org Version.

- Adding a Form to a Web Page.