Plugin insert inline script and break if move jquery into footer
-
The plugin significantly worsens FCP performance because it loads its scripts (and therefore their dependencies) in the header of the web page.
On my website,
inspire_checkout_fields_checkout_js
is loaded in the head. This forces the browser to load such scripts asjquery
,jquery-ui-datepicker
,jquery-ui-core
in the head as well.The biggest problem here is that I can’t forcefully move
inspire_checkout_fields_checkout_js
andjquery
to the footer of the page, because the plugin inserts the inline script what require jquery into the body. In my case, it is inserted right before the checkout form:<style> #billing_company_field abbr { display: none !important; } #billing_address_2_field abbr { display: none !important; } </style> <script type="text/javascript"> jQuery(window).on('load', function() { jQuery('#billing_company_field').removeClass('validate-required'); jQuery('#billing_address_2_field').removeClass('validate-required'); }); var fcf_ajaxurl = 'https://wordpress.local:8081/horoscope-store/wp-admin/admin-ajax.php'; var inspire_upload_nonce = 'b20023f4e3'; </script>
This is expected to break if
inspire_checkout_fields_checkout_js
andjquery
are moved to the footer.The inline script needs to be rewritten without depends on
jquery
.inspire_checkout_fields_checkout_js
need to be moved to the footer of the page.Currently, loading
inspire_checkout_fields_checkout_js
and dependencies in the header costs me about 0.8 seconds FCP metric.
- The topic ‘Plugin insert inline script and break if move jquery into footer’ is closed to new replies.