Add defer attribute

  • Resolved AndreiD

    (@andreiro37)


    9 years, 9 months ago

    Hi,

    i combined all JS files between the HEAD tag into a single one.

    1. How can i add a defer attribute to it?
    I have the following code in functions.php that add defer=defer to all .js files which are on the footer, but is not adding it to the .js file generated by Autoptimize

    function add_async_forscript($url) {

	if ( FALSE === strpos( $url, '.js' ) )
    { // not our file
        return $url;
    }
    // Must be a ', not "!
    return "$url' defer='defer";
}
add_filter('clean_url', 'add_async_forscript', 11, 1);

    2. The JS file generated is placed right after the </title> tag. Is possible to place it right before </head> tag? (i know that is better to load JS after CSS)

    https://www.ads-software.com/plugins/autoptimize/

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Frank Goossens

    (@futtta)

    Hi Andreiro37;
    both your requirements can be met by using the API, there’s example code for both use cases in wp-content/plugins/autoptimize/autoptimize_helper.php_example

    hope this helps,
    frank

    Plugin Author Frank Goossens

    (@futtta)

    small additional remark; there by default is a defer flag on optimized JS, except when you ‘force js into head’. adding the defer flag on js that is ‘forced into head’ might cause problems to surface which you tried to fix with ‘force into head’ in the first place.

    frank

    Thread Starter AndreiD

    (@andreiro37)

    Ok, thanks, solved with JS before closing head.
    Async to JS from head doesnt display the content, so i let it without async attribute.

    1. For HTML minify, it will be useful to minify all comments, instead removing. If i let comments, page doesnt pass Google Speed test. If i remove comments, some JS doesnt work. So an option will be to minify the comments instead removing or letting as they are.

    2. Combining CSS breaks the layout. For example,Wordpress Fastest Cache doesnt break it, but it creates 2-3 files instead a single one.

    BTW, very useful plugin.

    Plugin Author Frank Goossens

    (@futtta)

    page doesnt pass Google Speed test

    Google Pagespeed test is a nice tool to give you tips on how to improve, but don’t over overestimate the importance of some of the guidelines though. Removing comments from HTML will in most cases not yield significant real-world performance improvement (as measured by e.g. webpagetest.org).

    Combining CSS breaks the layout. For example,Wordpress Fastest Cache doesnt break it, but it creates 2-3 files instead a single one.

    In that case you should look into configuring AO in such a way that it doesn’t break you layout, have a look at the FAQ for information on troubleshooting JS or CSS issues ??

    frank

    Thread Starter AndreiD

    (@andreiro37)

    I have to improve the score for a client.
    If i remove the comments, JS is broken.
    If i let the comments untouched, Google PageSpeed doesnt still says that i need to minify HTML because of spaces, new lines, \r\n from the comments.

    I have to let the comments on page’s source, but get rid of new lines. Probably i have to write my own plugin and explore regex in depth.

    Plugin Author Frank Goossens

    (@futtta)

    Oh, customer-issues … ??

    you could hook into the “autoptimize_html_after_minify”-filter for that, which will provide you with the optimized HTML. as you disabled “remove comments”, the comments will be in there and you can indeed regex the newlines out.

    frank

    Thread Starter AndreiD

    (@andreiro37)

    I tried but the same result. New lines are eliminated, but there is a section in the footer where the function is not applied.

    The problem seems to be that those comments are not processed by the Autoptimize or my function (as you suggested). This comments appear due a setting on a slider plugin to put its JS code in the footer and i think its hook runs after your plugin.

    All the lines are eliminated until i get this.

    <script type='text/javascript'>
/* <![CDATA[ */
var ATTR = {"enable":"enable","width":"80","height":"45"};
/* ]]> */
</script>

    There is a way/hook to scan and preg replace the entire source code after the entire code is loaded? I have set the priority in the add_filter to 999, but no luck.

    Plugin Author Frank Goossens

    (@futtta)

    autoptimize uses the output buffer, and should as such theoretically have all the output. guess you’d have to look at how the plugin adds the JS to the page. maybe they use an output buffer as well and maybe you’ll have to do that too?

    Thread Starter AndreiD

    (@andreiro37)

    Probably is added by a JS code. I have tried after wp_load hook and is the same.

    Thanks for help!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Add defer attribute’ is closed to new replies.

Tags