Kit forms load JavaScript that bypass optimizations and affect PageSpeed scores

Resolved

(@wpdevwork)

When you have Kit forms on a page, it will load about 750KB of JavaScript. They also bypass Delay/Defer JavaScript optimizations with WP Rocket or Perfmatters. This causes very bad PageSpeed scores and core web vital metrics. Please provide a solution to this.

<script async data-uid="xxxx" src="https://xxxx.kit.com/xxxx/index.js" data-jetpack-boost="ignore" data-no-defer="1" nowprocket></script>

eg: For two forms, Kit creates following JsvsScript requests.

https://xxx.kit.com/xxxx/index.js
https://yyyy.kit.com/yyyy/index.js
https://f.convertkit.com/ckjs/ck.5.js
https://f.convertkit.com/ckjs/ck.6.js
https://www.google.com/recaptcha/api.js
https://www.gstatic.com/recaptcha/releases/gTpTIWhbKpxADzTzkcabhXN4/recaptcha__en.js
https://www.gstatic.com/recaptcha/releases/gTpTIWhbKpxADzTzkcabhXN4/recaptcha__en.js
https://www.google.com/recaptcha/api2/webworker.js

Kit also loads a large CSS file.

https://www.gstatic.com/recaptcha/releases/gTpTIWhbKpxADzTzkcabhXN4/styles__ltr.css

Kit causes following issues.


Reduce JavaScript execution time 2.1 s
Minimize main-thread work 2.8 s
Reduce unused JavaScript Est savings of 316 KiB
Reduce unused CSS Est savings of 64 KiB

This topic was modified 2 weeks, 2 days ago by wpdevwork.

Viewing 2 replies - 1 through 2 (of 2 total)

Plugin Support

Tim

(@n7studios)

1 week, 5 days ago

To permit Delay/Defer JavaScript optimizations with WP Rocket and Perfmatters, use the following code:

add_action( 'convertkit_initialize_frontend', function() {
// WP Rocket: Include Forms for JS minification and combine.
remove_filter( 'rocket_minify_excluded_external_js', array( WP_ConvertKit()->get_class( 'cache_plugins' ), 'exclude_hosts' ) );

// WP Rocket: Include Forms for Delay JavaScript execution.
remove_filter( 'convertkit_output_script_footer', array( WP_ConvertKit()->get_class( 'cache_plugins' ), 'wp_rocket_exclude_delay_js_execution' ) );
remove_filter( 'convertkit_resource_forms_output_script', array( WP_ConvertKit()->get_class( 'cache_plugins' ), 'wp_rocket_exclude_delay_js_execution' ) );

// Perfmatters: Include Forms for Delay JavaScript.
remove_filter( 'convertkit_output_script_footer', array( WP_ConvertKit()->get_class( 'cache_plugins' ), 'perfmatters_exclude_delay_js' ) );
remove_filter( 'convertkit_resource_forms_output_script', array( WP_ConvertKit()->get_class( 'cache_plugins' ), 'perfmatters_exclude_delay_js' ) );
remove_filter( 'perfmatters_lazyload', array( WP_ConvertKit()->get_class( 'cache_plugins' ), 'disable_image_lazy_loading_on_landing_pages' ) );
} );

You may experience inline forms don’t display, or don’t display in the correct place, which is why these optimizations are disabled by default.

Thread Starter

wpdevwork

(@wpdevwork)

1 week, 5 days ago

Thanks Tim for the solution. I implemented above code for Perfmatters and it worked perfectly without any display issues.

Viewing 2 replies - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

Tags