Combine external JS & CSS
-
Both YSLOW and PINGDOM TOOLS, report LOW on combine JS & CSS?
Does AUTOPTIMIZE does combining the JS & CSS files?
I TICKED Optimize HTML + Optimize JS + Optimize CSS (+ Inline all CSS + URI’s for all Images).
But still the score is low on both the above – i,e combining JS & CSS.
-
And added to that because of the above, the overall score remains low, in between 70-80.
Yes, AO aggregates all CSS/JS on your blog’s domain (so not 3rd party CSS/JS) except for the ones you excluded from being autoptimized. You should be able to check in your HTML source what is and what isn’t aggregated. If you’d provide your blog’s URL, I’ll be happy to have a look π
Thanks for the reply.
Since PINGDOM and YSLOW reported close to 45 JS & CSS files NOT combined, I was searching for other COMBINE ONLY plug-ins.
My site is : http://www.nammavidyaranyapura.org/.
Your help will be of great use to me.
Also having some form of CACHE CONTROL is very much required.
I read that CACHE can be as big as GIGA-BYTES.
Very dangerous for our site which is on shared-hosting.CSS seems aggregated (and inlined), but JS not. I think either you’ve got optimize JS turned off, or the plugin used to do CDN is active before autoptimize, resulting in autoptimize skipping the JS as it’s on a different URL.
So either enable JS optimization (although that typically is the more difficult one to configure) or, if it is enabled already, temporary disable the plugin in which you do CDN to allow Autoptimize to be able to aggregate the JS.
Iam using cloudfront for static files caching and the same is specified in wp supercache.
Iam getting considerable speed up because of cloud front.
Enabling either js or css , are causing some pages not rendering properly.
I also enabled browser caching.
Is there any way, I can enable only combining and not minification
.ah you indeed have js optimization disabled? combining without minification is not possible I’m afraid, but you can exclude specific JS (or CSS) from being aggregated, to ensure all continues to work.
in general for jquery-heavy themes, you could just exclude jquery.js (or jquery-min.js or jquery.min.js, depending on theme) and one or more jquery plugins that need to run non-optimized (combined and/or minified). an alternative is to “force JS in head” and/ or “look only in head”.
hope this helps,
frankLet me clarify more.
a) Currently both JS & CSS are ENABLED.
b) If I’m right – Supercacche sends compressed files to cloudfront and cloudfront renders the same based on user/browser page request.
c) Where does AUTOPTIMIZE minification fit in the sequence of events when CLODFRONT/CDN server is being used?
d) Somehow MINIFYING CSS/JS files is disturbing the page styles. Finding and disabling one by one, does take time. Sometimes some functions are not working.
e)If AUTOPTIMIZE minifies and combines all JS (and for CSS also) into one single BIG file (which is reported by WEBPAGETEST as being load time running to close 7000ms), then loading such a BIG file by CLOUDFRONT CDN server, will defy the whole purpose of CDN – Am I Right? I mean distributed loading of files by all CDN servers parallely. If files are small, I feel better for CDN and parallel distribution by global servers. If there is ONE BIG JS or CSS file, it can’t be split among CDN servers and thereby slowing down the page rendering and increasing the page load time.
f) If Iam right, AUTOPTIMIZE is good for shared hosting, non-CDN web sites – pl clarify.
g) YSLOW and PAGE SPEED reporting LOW scores on many JS and CSS files being not combined – is by design and not by intention because of CDN servers. It might be valid for single, shared, non-CDN sites. Pl clarify. In that case using AUTOPTIMIZE or any MINIFY tool is of tremendous use.
h) What I observe is I get better/faster page rendering by disabling AUTOPTIMIZE than ENABLING it. But WEBPAGETEST/GTMETRIX/PINGDOM report more time for page rendering. Is it because of BROWSER cache ?
If I enable, AUTOPTIMIZE, then all the test sites report better page speed, but my actual experience on page rendering which is visible to me is slow. There is a clear and distinct speed difference with/without AUTOPTIMIZE. But test sites do report higher page load times. Not able to understand why?The chain is; WordPress creates HTML, Autoptimize optimizes JS & CSS, WP Super Cache caches the optimized page. Not sure where cloudfront comes into play; do you use WP Super Cache’s CDN functinality or a specific CloudFront plugin?
regarding CDN with multiple small CSS/JS files vs one (or only a few) files; the creation of new HTTP-connections and the overhead (which can be small, but still) of handling the request, make it better to have a few big files, even when on a CDN. Based on my experience, Autoptimize is beneficial for shared & dedicated hosting, with and without CDN.
Now if the site is slower (the only really important metric, pagespeed scores are theory) then there clearly is a problem in using Autoptimize in your case which should be solved. The 7000ms load time; is that for one of the optimized files or for your base page (HTML)? How big is that file?
Futtta,
Thank you so much for your detailed reply.
I definitely want to use AO to improve my web site scores as well as
true user experience in faster page loads.
Currently AO is disabled, just to see the page speed difference.
If you have time, request you to see page speed for different pages.
I will enable AO and will send you the detailed reports from 3 test sites.
Hope to send the same in next 3 Hours.
Can you mail me your email-id.you can contact me at futtta-at-gmail-dot-com. I would also be interested in the theme you are using; can I download it somewhere to test on my own infrastructure?
I) Test results without – AUTOPTIMIZE
——————————————
a) webpagetest results :http://www.webpagetest.org/result/140420_MJ_AH3/
b) pingdom results : http://tools.pingdom.com/fpt/?testurl=http%3A%2F%2Fwww.nammavidyaranyapura.org#!/bZXHCB/http://www.nammavidyaranyapura.org
c) gtmetrix results : http://gtmetrix.com/reports/www.nammavidyaranyapura.org/gjMsQLcCNB : Each test was conducted 3 times in sequence to ward-off any errors due to test related/net related errors.
I’m using WP Super Cache’s CDN functionality and NO other 3rd party tool.
In order to use AUTOPTIMIZE, pl let me know what options, you want me to enable and do the test. So that I can send the results after AUTOPTIMIZE ON.
Regarding the theme, I’m using one of the most popular and highly rated FREE theme, i.e, – SUFFUSION. You might be knowing this already.
If not – you can check below :
a) https://ww.wp.xz.cn/themes/suffusion
b) http://aquoid.com/newsI have done good amount of CSS customization and nothing else.
OK, did a quick test with suffusion and at first sight all seems well at first sight.
Could you redo the 3 tests for your blog with Autoptimize activated (HTML, JS & CSS)?
I will do test with AO ON and will give the feedback in a day-or-two.
A Quick Check :
Currently I’m testing with AO ON.When I check LIVE HTTP headers in OPERA, I see, JS file of AO.
“
GET /wp-content/cache/autoptimize/autoptimize_78be5096842be853ca6e2f7d7a48abd0.js HTTP/1.1
Host: vrpdev.nammavidyaranyapura.org
“But I don’t see the same for CSS fie, i.e, AO file of CSS.
Am I missing Anything from the options.
Currently I’m testing with HTML, JS and CSS ON + CDN ON + SAVE static files ON.
The topic ‘Combine external JS & CSS’ is closed to new replies.