I understand why AO don’t cache and minify external links (like google fonts, external jQuery or other external files). But, you already have great js function to defer css files. Could you add in this function that external file (if not excluded), without touching it.
<script>
function lCss(url, media) {
var d = document;
var l = d.createElement('link');
l.rel = 'stylesheet';
l.type = 'text/css';
l.href = url;
l.media = media;
d.getElementsByTagName('head')[0].appendChild(l);
}
function deferredCSS() {
/* external files, just copy the links or add it with filter */
lCss('https://fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext', 'all');
/* locally stored files that are combined, minified and cached */
lCss('http://localhost/wptheme/wp-content/cache/autoptimize/css/autoptimize_6e0a4760f534b17eb7b171d587b6ff27.css', 'all');
lCss('http://localhost/wptheme/wp-content/cache/autoptimize/css/autoptimize_190aa1d4c9a134184e620040f79be652.css', 'print');
lCss('http://localhost/wptheme/wp-content/cache/autoptimize/css/autoptimize_754b5ddb10e0022754e6f7eed1649002.css', 'screen');
}
if (window.addEventListener) {
window.addEventListener('DOMContentLoaded', deferredCSS, false);
} else {
window.onload = deferredCSS;
}
</script>
I tested and it works great. External link can be added with some filter
http://joxi.ru/4AkGbOySwYb8Aq
http://joxi.ru/gmv7oe8HPwwM2a
or store those external link in one array then add them to defer loading function.
Hi Alex;
I saw your pull request on Github, will have a look at that later this week. One quick question immediately though; this only works if “inline & defer” is choosen to optimize CSS, right?
kind regards,
frank
Yes, only if Inline and Defer CSS is selected.
Some good ideas in there, but couldn’t we make this more generic, so that the same principles apply to both JS (simply add defer flag) & CSS (do the lCSS-dance) and which works no matter what type of CSS optimization was chosen?
frank