Compatible plugin to combine CSS and JS files

  • Resolved keyra

    (@keyra)


    8 years, 9 months ago

    Using:
    – WordPress 4.5.2
    – PHP 7.0.7
    – WordFence 6.1.8 (with Falcon activated)
    – Divi theme 2.7.5 (from ElegantThemes)
    – WordPress multisite (subdomain with domain mapping)

    At the moment I’m using Autoptimize with CSS concatenation to optimize CSS files. It doesn’t work well for JS combining (there are errors in JS files).

    I’ve not found a well-maintained and respected plugin that combines JS files.

    Am I missing something in Wordfence’s configuration for either or does someone have a suggestion on one to use for CSS or JS combining?

    I tried 4-5, but none worked well with Wordfence + Falcon.

    I want to get that extra 0.5-1s gain in speed for better conversion, SEO and to get an edge on competition.

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

Viewing 15 replies - 1 through 15 (of 33 total)

  • At the moment I’m using Autoptimize with CSS concatenation to optimize CSS files. It doesn’t work well for JS combining (there are errors in JS files).

    Have a look at Autoptimize’s FAQ on how to troubleshoot problems keyra.

    I tried 4-5, but none worked well with Wordfence + Falcon.

    AO (and most others) can work flawlessly with Falcon, but you depending on your context (the combintion of the JS in theme & plugins) you might have errors which need the configuration on Autoptimize’s settings screen to change.

    hope this clarifies,
    frank (ao dev)

    My take, for years I’ve tried all sorts of junk that’s supposed to minimize or otherwise optimize JS and CSS. None of it worked reliably. My approach is to now simply do a moderate amount of minification on my theme CSS file (either by hand or using various online tools), and be careful how many plugins I use as well as only using plugins that play nice with how they load their JS, especially whether they lazy load or not, or can be configured to do so.

    Perspective is important. You can spend literally days fooling around with JS optimization when you can just compress a few images, eliminate one or two from the homepage, and get a major reduction in site load time. Likewise, if you have regular readers of your site, spending time configuring basic caching (not using plugins, just settings in .htaccess) also gives good bang for the buck.

    My 2 cents, anyhow. MTN

    Thread Starter keyra

    (@keyra)

    Thanks Frank Goossens for the suggestions. ??

    I took some time to adjust settings and finally found one that seems to work with autoptimize. I’ll test it for some days.

    Using Autoptimize 2.0.2:
    – Optimize JavaScript Code (checked)
    – Force JavaScript in <head> (checked)
    – Exclude scripts from Autoptimize: public.js,cvpro.min.js,frontend-builder-scripts.js,wp-slimstat.min.js
    – Optimize CSS Code (checked)
    – Remove Google Fonts (checked)
    – Save aggregated script/css as static files (checked)

    I’m using these that seem to not be fully compatible with autoptimize:
    – Divi (theme from ElegantThemes)
    – Content Views (plugin)
    – Content Views Pro (plugin)
    – WP Slimstat Analytics (plugin)

    I dropped my number of file requests by a lot and I did get a 0.5-1s gain in speed (from 1.5-2s to 0.5-1s on most pages). I’m on a dedicated server.

    great job Keyra! ??

    droid

    (@android1pro)

    Thank you Frank,
    Can you tell me if I still would improve further on optimization by using AO or would the over all benefits be very mimimal with reall added page loading speed ??

    Currently site in question has 1.2 seconds load time with both page speed scre and Y slow score above 90%

    Here is the waterfall screenshot
    https://easycaptures.com/fs/uploaded/956/9807523769.jpg

    Can you tell me if I still would improve further on optimization by using AO

    I think so, yes; you should be able to reduce your time to start render by optimizing your CSS (ideally going for “inline & defer”). It could also help you getting rid of rocketloader if you’d want to (AO’ed JS by default is “forced in head”, but if you untick that safer option your JS is loaded in a non-blocking matter).

    So, give it a go on a non-prod environment and test results before & after (ideally on webpagetest.org, which has way more realistic results then gtmetrix, which does not “see” the JS being loaded).

    have fun! ??
    frank

    droid

    (@android1pro)

    Frank,
    Vital update

    1) I use CloudFlare as my CDN so what would be the entry for
    “CDN blog root directory URL”
    or how exactly to find it on CloudFlare?

    2) Turned off Rocket loader on CloudFlare. is that better ?

    3) Where to find “above the fold” in order to paste for the box labelled
    “Inline and Defer CSS?” in AO advaced settings

    Thanks

    droid

    (@android1pro)

    FYI: I use Falcon feature from WF as the ONLY cache function

    droid

    (@android1pro)

    Here is before installing AO screenshot of speed test waterfall
    https://easycaptures.com/fs/uploaded/957/7157114264.png

    Here is after installing AO screenshot of the same speed test waterfall with Rocketloader on automatic
    https://easycaptures.com/fs/uploaded/957/2575050798.png

    Here is after installing AO screenshot of the same speed test waterfall with Rocketloader off
    https://easycaptures.com/fs/uploaded/957/7637528727.png

    droid

    (@android1pro)

    (DETAILED VIEW)
    Here is after installing AO screenshot of the same speed test waterfall with Rocketloader on automatic
    https://easycaptures.com/fs/uploaded/957/9716065355.png

    (DETAILED VIEW)
    Here is after installing AO screenshot of the same speed test waterfall with Rocketloader off
    https://easycaptures.com/fs/uploaded/957/8377699310.png

    1. no need to fill anything in under AO’s CDN
    2. you’ve got the best results with rocketloader, so I would leave it on, no?
    3. critical CSS; have a look at AO’s FAQ for more info

    regarding AO; can’t be sure (can’t check HTML cause I’m blocked) but I think you have “force JS in head” on, you could get better results with that option off actually (you might have to tinker some other settings, e.g. “aggregate inline JS”).

    frank

    droid

    (@android1pro)

    Thanks Frank

    So CF Rocket loader is ON with the following AO setting:

    – Optimize JavaScript Code (checked)
    – Force JavaScript in <head> (unchecked)
    – Also aggregate inline JS? (checked)
    – Exclude scripts from Autoptimize: public.js,cvpro.min.js,frontend-builder-scripts.js,wp-slimstat.min.js
    – Add try-catch wrapping? (unchecked)

    – Optimize CSS Code (checked)
    – Generate data: URIs for images? (checked)
    – Remove Google Fonts (checked)
    – Also aggregate inline CSS? (checked)
    – Inline and Defer CSS? (checked) but I still have no idea what goes in white box
    – Save aggregated script/css as static files? (checked)

    Now
    Here is desktop unresolved issues according to Google page speed insights
    https://easycaptures.com/fs/uploaded/957/5024654159.png

    Here is mobile unresolved issues according to Google page speed insights
    https://easycaptures.com/fs/uploaded/957/0015300838.png

    Q1: what to place exactly under Inline and Defer CSS? box ?
    Q2: How to resolve google page speed insights desktop and mobile ?

    regarding Q1; have a look at the FAQ, it has links to resources that can extract your critical CSS

    regarding Q2; except for the render-blocking Autoptimized CSS (for which “inline & defer” will help), there’s nothing that needs to be done in AO. Most important one could be the installation of an image optimizer really ??

    frank

    droid

    (@android1pro)

    Thank you Frank,

    I did extract the critical CSS which was the following:

    body {
    color: #202020;
    }

    ,then paste it into the AO settings white box and saved it.

    However since you are the author of this AO plugin, you would know all details than any one else about your plugin issues and the exact best solution for any of them.

    So here are a few small minor issues requiring your solution fix:

    1) I noticed that there is slight millisecond appearance of intermittent page before browser will finally show the post intended
    (happened on chrome and Firefox browsers on my end ).
    Can you confirm on your end ?
    If so,what is your best solution to this unpleasant undesired issue that lower user experience and is clearly unwanted byproduct of using AO

    2) The overall quality of images appearing on each posts has gone down in terms of increase in blurriness and fuzziness in place of sharp clarity that were there before activating AO plugin.
    What is your best solution to restore the high quality of posts photos many of which are HD quality

    3) on any of the website posts,
    when choosing anyone of categories under categories drop down menu on the right hand side
    the page does not go there like it should, which what normally happened before
    What is your best solution fix to this quality issue that never happened prior to using AO ?

    4) The results of page speed testing using https://www.webpagetest.org/
    vary dramatically when using different browser

    Here is Chrome browser version
    https://easycaptures.com/fs/uploaded/958/1655290315.png

    Here is Firefox version of the same test
    https://screencast.com/t/R2Pn23rQcH

    Here is IE version of the same test
    https://screencast.com/t/jiqxdvqOQg2

    So,
    Which version test results,is to be trusted and why ?

    Keep up the good work of continued good support of your own plugin

    regarding (1); the critical CSS you’re using is not correct (just the body color is not enough. Did a quick extract on https://jonassebastianohlsson.com/criticalpathcssgenerator/ and you can find the resulting CSS here (not perfect, just to show you you need more then just one line of CSS)

    regarding (2); no idea really, as AO does not do anything to images (you can compare AO’ed page with the version wihtout AO by adding ?ao_noptimize=1 to the URL). The only possible reason is if you have some retina-JS that loads images at a higher resolution in some cases that doesn’t function correctly when being autoptimized.

    regarding (3); probably a javascript issue, have a look at AO’s FAQ for info on how to troubleshoot such problems

    regarding (4); the browser you access webpagetest.org with, has no impact on the test-result, the browser you choose in webpagetest.org can have an impact. test-results indeed can differ between runs and depend on a lot of things, to minimize this impact it is better to run multiple runs and use the median result.

    frank

Viewing 15 replies - 1 through 15 (of 33 total)
  • The topic ‘Compatible plugin to combine CSS and JS files’ is closed to new replies.