Fixed Render-blocking JQuery in WordPress with Autoptimize
Tags: javascript, wordpress, optimization, jquery
Published: 2020-07-24 08:35:24

---
cover_image: https://rajeshroyal.com/wp-content/uploads/2020/07/fix-render-blocking-jquery-in-wordpress-google-page-speed-insight-result-fix.jpg
title: Fixed Render-blocking JQuery in WordPress with Autoptimize
published: true
date: 2020-07-20 12:42:35 UTC
tags: js,wordpress,optimization,jquery
canonical_url: https://rajeshroyal.com/fixed-render-blocking-jquery-in-wordpress-with-autoptimize/
---

Autoptimize by default excludes inline JS and `jquery.js` from optimization. Inline JS is excluded because it is a typical cache-buster (due to changing variables in it) and as inline JS often requires jQuery being available as a consequence that needs to be excluded as well.

The result of this “safe default” however is that `jquery.js is a render-blocking resource.` So even if you’re doing **“inline & defer CSS”** your Start-Render time (or one of the variations thereof) will be sub-optimal.

Jonas, the smart guy behind [criticalcss.com](https://criticalcss.com/?aff=1), proposed to embed inline JS that requires jQuery in a function that executes after the `DomContentLoaded event`. And so I created a small code snippet as a  **proof of concept**  which **hooks** into Autoptimize’s API and that seems to work just fine;

Add below code to your themes `function.php` file. This code will replace all the `$(document).ready()` with Js native `DOMContentLoaded` event listener.

```php
add_action('plugins_loaded','ao_defer_inline_init');

function ao_defer_inline_init() {
if ( get_option('autoptimize_js_include_inline') != 'on' ) {
add_filter('autoptimize_html_after_minify','ao_defer_inline_jquery',10,1);
}
}

function ao_defer_inline_jquery( $in ) {
if ( preg_match_all( '#<script.*>(.*)</script>#Usmi', $in, $matches, PREG_SET_ORDER ) ) {
foreach( $matches as $match ) {
if ( $match[1] !== '' && ( strpos( $match[1], 'jQuery' ) !== false || strpos( $match[1], '$' ) !== false ) ) {
// inline js that requires jquery, wrap deferring JS around it to defer it.
$new_match = 'var aoDeferInlineJQuery=function(){'.$match[1].'}; if (document.readyState === "loading") {document.addEventListener("DOMContentLoaded", aoDeferInlineJQuery);} else {aoDeferInlineJQuery();}';
$in = str_replace( $match[1], $new_match, $in );
} else if ( $match[1] === '' && strpos( $match[0], 'src=' ) !== false && strpos( $match[0], 'defer' ) === false ) {
// linked non-aggregated JS, defer it.
$new_match = str_replace( '<script ', '<script defer ', $match[0] );
$in = str_replace( $match[0], $new_match, $in );
}
}
}
return $in;
}
```
Now you can load jQuery `defer` or `async` on your site.
Your  **feedback is more than welcome.**

original author: [Gregor](https://blog.futtta.be/2018/12/13/how-to-fix-render-blocking-jquery-js-in-autoptimize/) || [Code from this Github gist](https://gist.github.com/futtta/01ba20efa0893edb52b0a233a5c05ae8)

## results:

![fix render blocking jquery in wordpress google page speed insight php code github gist](https://rajeshroyal.com/wp-content/uploads/2020/07/fix-render-blocking-jquery-in-wordpress-google-page-speed-insight-php-code.jpg)

The post [Fixed Render-blocking JQuery in wordpress with Autoptimize](https://rajeshroyal.com/fixed-render-blocking-jquery-in-wordpress-with-autoptimize/) appeared first on [Rajesh Royal](https://rajeshroyal.com).