WordPress.org

Ready to get started?Download WordPress

Forums

Autoptimize
Two things: Exclude CSS files and Inline javascripts (23 posts)

  1. akis
    Member
    Posted 1 year ago #

    There's any chance to do any of those?

    Why exclude CSS you may ask. Well, some plugins include the css files only on single or homepage for example, this will generate 2 separate and quite large (in some cases) combined&minified files which is pretty bad.

    Thanks.

    PS. Awesome plugin by the way, I was using BWP minify before.

    http://wordpress.org/plugins/autoptimize/

  2. Frank Goossens
    Member
    Plugin Author

    Posted 1 year ago #

    well, 1.6.6 (eta 2nd half of september) should come with support for "do not autoptimize" comment tags, like this;
    <!-- noptimize --><script>alert("your javascript here</script><!-- /noptimize -->

    this should allow you to exclude whatever CSS & JS you want?

  3. akis
    Member
    Posted 1 year ago #

    Thank you for your reply.
    This will be better but most of the inline javascript or css files are added automatically by plugins so not really helpful.

    The exclusion of inline javascripts seems to work pretty well now, I didn't realized at first. Excluding CSS by using the same method will be fine or by registered handle as BWP Minify does.

  4. Frank Goossens
    Member
    Plugin Author

    Posted 1 year ago #

    I'll add CSS-exclusion (much like it works for JS) in version 1.7.0 (eta somewhere in Q4). Removing CDN & YUI from admin will give me some space for the CSS exclusion input field.

  5. admintiger
    Member
    Posted 1 year ago #

    The "do not autoptimize" comment tags will be a valuable improvement, because they will make it possible to greatly reduce the number of cached files where inline js or css code changes from page-to-page. For example, I have a site that has about 5,000 content pages. Each of those pages has a single line of inline js code that is different from page-to-page, resulting in the creation of about 5,000 unique js files in the cache. Masking that single line with <!-- noptimize --> ... <!-- /noptimize --> tags will make it possible for all those content pages to share a single js file. Not only will that greatly reduce the number of files cached on the server, but also will reduce visitor webpage loading times after any first page has been loaded.

  6. Frank Goossens
    Member
    Plugin Author

    Posted 11 months ago #

    I'm pushing a "beta"-version of 1.6.6 out (download here), which has noptimize-support.

    A simple example of JS being excluded;
    <!--noptimize--><script>alert('this will not get autoptimized');</script><!--/noptimize-->

    Looking forward to your feedback!

  7. admintiger
    Member
    Posted 11 months ago #

    Great! I will give it a try tomorrow afternoon.

  8. Frank Goossens
    Member
    Plugin Author

    Posted 11 months ago #

    Did you have the chance to test this admintiger?

    fyi: up until this morning the 1.6.6 beta-version contained a bug where multiple noptimize-blocks were considered as one big block, but that was solved with a new commit in trunk.

    Looking forward to your feedback! :-)

  9. Rajasekharan N
    Member
    Posted 11 months ago #

    I have a good news for you Futtta. Autoptimize 1.6.6. along with WP-Minify gives me a Google page speed score of 100/100.

    However, I want to exclude an inline javascript whenever it is called. I am unable to use <!--noptimize--><!--/noptimize--> on the Autoptimize settings page. Am I doing something wrong?

  10. Frank Goossens
    Member
    Plugin Author

    Posted 11 months ago #

    Great Rajasekharan! the <!--noptimize--><!--/noptimize-->-code is supposed to be in the raw HTML, not in the admin-screen (where exclusion is based on -part of- a filename).

  11. Rajasekharan N
    Member
    Posted 11 months ago #

    Since it is an inline javascript, do you mean to add <!--noptimize--> in the raw php file where the javascript code appears, altering the template? But that would be erased every time the template is updated?

  12. Frank Goossens
    Member
    Plugin Author

    Posted 11 months ago #

    True (although in general themes don't tend to get updated often?). In that case you can also add a string (e.g. "window.location.replace" in your case) from the inline javascript to the "Exclude scripts from autoptimize"-list in the admin-screen.

  13. Rajasekharan N
    Member
    Posted 11 months ago #

    Wow. Thanks for the lightning speed reply. As we talked about a theme update here, there came one update, Graphene 1.9.1 to 1.9.2.

    After updating the theme, I tried both the methods that you said above. However, it is not working. The script is an automated search on a 404 page. If I disable minifying/optimizing javascript, it works smoothly; if I enable it, automated search is not working. This holds good for both WP-Minify and Autoptimize.

    Initially I came here searching for an option to exclude inline javascript and tried Autoptimize. The primary intention didn't work; however, page speed score moved a notch up from 99 to 100! I would be glad if I could exclude that inline javascript too.

  14. Frank Goossens
    Member
    Plugin Author

    Posted 11 months ago #

    well exclusions can be tricky, requiring trial and error. sometimes "look for scripts only in head" is the easier solution, maybe you could try that?

  15. Rajasekharan N
    Member
    Posted 11 months ago #

    When I tick the option "Force JavaScript in <head>?" the autosearch on 404 works, irrespective of whether I tick or not "Look for scripts only in <head>?" However, the page speed score dropped to 96/100.

    So I think now I may have to forgo either the full page speed score or the autosearch on a 404. However, I would love to have them both.

  16. Frank Goossens
    Member
    Plugin Author

    Posted 11 months ago #

    I did a quick test with graphene on my testblog (good thing graphene isn't a "premium" plugin) and got it working.

    Excluding "window.location.replace" works, but the entire snippet of javascript that is excluded that way, requires jquery to be loaded. So if you configure autoptimize to exclude

    window.location.replace, jquery.js

    from javascript optimization, then it indeed does work. But you'll probably not have an incredible 100 pagespeed score any more.

    I would be interested in seeing your pagespeed score for wp-minify standalone, autoptimize standalone and the two combined by the way, would you be willing to test and share that? :-)

  17. Rajasekharan N
    Member
    Posted 11 months ago #

    Yes, sure. I will cooperate with you, and I have a good news for you!

    Here is the test score of WP-Minify standalone with JS minified by it:

    Page Speed Score: 99/100
    Remove query strings from static resources
    Resources with a "?" in the URL are not cached by some proxy caching servers. Remove the query string and encode the parameters into the URL for the following resources:

    http://example.com/blog/wp-content/plugins/wp-minify/min/?f=wp-content/themes/graphene/style.css,wp-content/plugins/wp-pagenavi/pagenavi-css.css&b=blog&m=1379134744

    Here is the test score of Autoptimize standalone with JS minified by it:

    Page Speed Score: 100/100 (Autoptimize alone fetches this good score and that is the good news.)

    So I don't need WP-Minify anymore! Now only I have that issue of autosearch in 404.

    Feel free to revert if I can of any further help.

  18. Frank Goossens
    Member
    Plugin Author

    Posted 11 months ago #

    Ah, but the solution for the autosearch in 404 is in my previous answer (éxclude window.location.replace and jquery.js) :-)

  19. Rajasekharan N
    Member
    Posted 11 months ago #

    Sorry, I messed up a bit, didn't empty the cache.

    Here are the standalone results for Autoptimize with Javascript minified by it:
    Page Speed Score: 98/100
    Defer parsing of JavaScript
    95.8KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.
    http://example.com/blog/wp-content/cache/autoptimize/autoptimize_b452c5faaea19a4171c47af758897faf.php (95.6KiB)
    http://example.com/ (215B of inline JavaScript)

    Here are the standalone results for WP-Minify with Javascript minified by it:
    Page Speed Score: 99/100
    ▾Remove query strings from static resources
    Resources with a "?" in the URL are not cached by some proxy caching servers. Remove the query string and encode the parameters into the URL for the following resources:
    http://example.com/blog/wp-content/plugins/wp-minify/min/?f=wp-content/themes/graphene/style.css&b=blog&m=1379134744

    Now, with Autoptimize standalone and using the solution that you said above:
    Page Speed Score: 96/100
    ▾ Optimize the order of styles and scripts
    The following inline script blocks were found in http://example.com/ between an external CSS file and another resource. To allow parallel downloading, move the inline script before the external CSS file, or after the next resource.

    Inline script block #2

    ▾Defer parsing of JavaScript
    95.8KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.
    http://example.com/blog/wp-includes/js/jquery/jquery.js?ver=1.10.2 (83.7KiB)
    http://example.com/blog/wp-content/cache/autoptimize/autoptimize_73888be765e20d6744365c693bfa40ab.php (11.9KiB)
    http://example.com/ (215B of inline JavaScript)
    ▾Remove query strings from static resources
    Resources with a "?" in the URL are not cached by some proxy caching servers. Remove the query string and encode the parameters into the URL for the following resources:
    http://example.com/blog/wp-includes/js/jquery/jquery.js?ver=1.10.2

  20. Frank Goossens
    Member
    Plugin Author

    Posted 11 months ago #

    regarding the 404+autosearch; the way the theme people coded it, you need jquery loaded before the window.location.replace-part. there's no simple solution I can think of that will allow you a perfect pagescore (which is very exceptional by the way, congrats) and a working 404+autosearch (unless the theme-guys would alter their approach for one that didn't involve jquery or even javascript).

  21. Rajasekharan N
    Member
    Posted 11 months ago #

    I think I can sacrifice autosearch for a good page speed score.

    Meanwhile, it was a nice experience working with you Frank. Thank you so much.

  22. Frank Goossens
    Member
    Plugin Author

    Posted 11 months ago #

    Nice experience indeed, thanks for the feedback!

  23. Frank Goossens
    Member
    Plugin Author

    Posted 10 months ago #

    excluding css is coming in 1.7.0 and I could use some testing-help there. :-)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.