Inline and Defer Option Suggestions

AJ @ WpFASTER.org
(@ajm_1976)

9 years, 6 months ago

Hey Frank,

I laud you for being the first to truly tackle inlining CSS via a WordPress plugin. We’ve run into some issues with the option, however, that have made it unusable for anything other than the most stylistically simplistic installs; which, in turn, has led me to want to make some suggestions for future AO updates:

The primary problem is that, as Autoptimize’s Inline and Defer CSS option currently is, the critical CSS entered is applied globally. So, while ideal for one page… not so much for another.

To illustrate, while all pages on a site are drawing from the same stylesheets, which aspects of a site’s total CSS are and are not part of a particular page’s critical (or optimal) rendering path is nearly always different from page to page, to some or another extent (excepting, as alluded to, bare-bones, minimalist and aesthetically redundant instances). So, where the globally-applied, in-lined CSS works swimmingly on one page, it causes FOUC/FOUT/FOPUCaoT (flash of partially unstyled content and-or text) on others.

An example: a Homepage looking great, but a blog index page not rendering optimally; or, a blog index page rendering optimally, but the posts it links to issuing FOUC/FOUT/FOPUCaoT, etc. and on we go with the permutations and potentialities.

What would be great, is the capacity to apply specific, critical, in-lined CSS to specific pages with the option to apply a ‘standard’ block of in-lined CSS to the rest. For example, one block of in-lined CSS for a Homepage, one for a blog index, one for all posts, etc etc thereby solving the problems exampled above.

Best,
AJ

https://wordpress.org/plugins/autoptimize/

Viewing 6 replies - 1 through 6 (of 6 total)

WebPrezence
(@webprezence)

9 years, 6 months ago
This may not be the answer you’re looking for, AJ.

First, the author of this plugin did a wonderful job in developing it, and does a wonderful job of maintaining it as well as supporting it. I’m thankful he provides this on the WordPress repository.

I can see how it would be confusing for those who, I mean … cannot even view the html output of a page.

For my money, the best option for me is to tick Optimize CSS Code and then tick Inline All CSS.

I have read the author’s explanation as to what Google wants, rendering things above the fold, etc., pages appear faster and all that, but this does the best job for me.

The author explains that using this option may not be best for high-traffic websites. But frankly, I haven’t found that to be true. I understand his thinking behind saying that, but I’ve tested this plugin on several sites (some high-traffic), multisites, and this option still works best for me.

Also, I wouldn’t take everything Matt Cutts and Google have to say word-for-word, necessarily. Sometimes, you just have to experiment and test for yourself. For example, https://nationalcdp.org/ is not a high traffic multisite WordPress installation (yet). Here, I’m using Optimize JS and excluding 4 scripts. I’m using the Inline everything in the CSS optimization.

But based off of other tests I’ve ran, I wouldn’t expect a slowdown at all once I launch the SEO campaign and traffic begins to creep in.

Just my two cents.

Lastly, if you’re adamant about using the inline & defer option:
1. I would simply load Google Page Speed Insights and get a list of the stylesheets that are loading on the page you’re having issues with — without Autoptimize; uncheck everything css-related.
2. Take that list, and just paste the stylesheets (just the .css part, not the http / wp-content / plugins, etc. part.) … one on a line should do, or at least separate ’em by commas.
3. Tick the Autoptimize CSS Code box. Paste the .css stylesheets in the “exclude” box all at once. Your page should load normally now, as if Autoptimize wasn’t messing with your css.
4. From there, simply eliminate them one-by-one until you find the culprit that’s messing up your front-end. Once you find the culprit, well, that’s what you exclude from deferring. Just save/clear cache and refresh the page you’re having issues with. This may sound tedious, but I bet it takes you less than 10 minutes.
Good luck!
Thread Starter AJ @ WpFASTER.org
(@ajm_1976)

9 years, 6 months ago

Hi WebPrezence,

I’m not looking for an answer to anything, per se, but making suggestions for potential improvements to the new Inline and Defer CSS option within AO.

While I’m not interested in a debate on the merits of optimizing a site’s critical rendering path (it would be like debating whether or not gasoline is ‘good’ for a car), I’m compelled to address a few things you’ve mentioned for the benefit of a learning audience that might read this thread.

I’m not sure what is meant by inlining all CSS “doing the best job for [you]”, but as far as inlining all CSS goes, it is literally never the best option for any website except those with very, very small amounts of total CSS. The vast majority of WordPress sites have large, complex CSS.

When one in-lines large amounts of CSS into their site’s HTML (your website’s homepage, for example, linked to via your forum username, its HTML weighing-in at a massive 82.2kB), the browser cannot cache that… it has to deal with that on every page load as someone navigates throughout a website. Obviously, this slows down not only the first, initial rendering of a page when someone first lands on such a site, but slows down moving from one page of that site to the other; and, in effect, kills the benefits of things such as page caching.

In-lining only the CSS required to render ‘above-the-fold’ content (and deferring the rest) saves a round trip to the server and allows for much faster rendering of a page given that the rendering is not blocked by a CSS file. That said, combining a site’s CSS into a single, cachable file (thereby reducing HTTP requests) nonetheless constitutes the more optimized scenario — and does so on orders of magnitude — than does in-lining massive amounts of CSS, for the reasons already mentioned and then some.

Which is why Autoptimize’s Inline and Defer CSS option is so exciting, as AO is (to the best of my knowledge) the only plugin in existence that enables one to truly optimize the rendering path. The feature is not problem-free, however, and will go through, I imagine, several incarnations — the next one I hope to shape. Ergo this thread.

Best,
AJ

Thread Starter AJ @ WpFASTER.org
(@ajm_1976)

9 years, 6 months ago

…One other quick thing:

Lastly, if you’re adamant about using the inline & defer option:

I would simply load Google Page Speed Insights and get a list of the stylesheets that are loading on the page you’re having issues with — without Autoptimize; uncheck everything css-related.
Take that list, and just paste the stylesheets (just the .css part, not the http / wp-content / plugins, etc. part.) … one on a line should do, or at least separate ’em by commas.
Tick the Autoptimize CSS Code box. Paste the .css stylesheets in the “exclude” box all at once. Your page should load normally now, as if Autoptimize wasn’t messing with your css.
From there, simply eliminate them one-by-one until you find the culprit that’s messing up your front-end. Once you find the culprit, well, that’s what you exclude from deferring. Just save/clear cache and refresh the page you’re having issues with. This may sound tedious, but I bet it takes you less than 10 minutes.

^ This indicates a misapprehension of how the Inline and Defer CSS option works (and in-lining CSS more generally).

The CSS critical to rendering ‘above-the-fold’ content is comprised of aspects from most — usually all — of a sites stylesheets. It makes no sense to speak of excluding stylehseets, as only critical CSS (again, taking from a site’s total CSS) is in-lined in the first place.

The problem I am addressing (cf. first post) is that the CSS critical to one page usually differs on others. Therefore, a universally applied (site-wide) block of critical CSS, however optimal for the page(s) for which it is, is sub- or nonoptimal for others.

AJ

Plugin Author Frank Goossens
(@futtta)

9 years, 6 months ago

very interesting discussion & suggestions guys, will get back to this when I have a bit more time to read your comments in detail and come up with a sensible reply 😉

have a nice weekend,
frank
Plugin Author Frank Goossens
(@futtta)

9 years, 6 months ago
So, sidestepping the interesting but far-from-easy discussion for a second and replying to AJ’s;

What would be great, is the capacity to apply specific, critical, in-lined CSS to specific pages with the option to apply a ‘standard’ block of in-lined CSS to the rest

Well, that capacity is there already. You can do that, but not using the GUI but the API instead. A _very_ simple example to show how the inlined CSS can be different for e.g. a gallery-page;
```
add_filter('autoptimize_filter_css_defer_inline','AJ_ao_css_defer_inline',10,1);
function AJ_ao_css_defer_inline($inlined) {
	if (strpos($_SERVER['REQUEST_URI'],'/gallery/')!==false) {
		return $inlined.".gallery{display:block;}
	} else {
		return $inlined;
	}
}
```
Not sure if you’re into coding AJ, but if so you’ll no doubt see there’s a whole lot more you could do with that (and some of the other) filter(s).

frank
Thread Starter AJ @ WpFASTER.org
(@ajm_1976)

9 years, 6 months ago

Not sure if you’re into coding AJ

I’m no Frank Goossens 😉 but I see where you’re going with the above example. It’s definitely something I’ll pass along to the team.

All of my suggestions are, however, predicated on the idea of being able to accomplish a more refined in-lining approach via the GUI, even if only for the convenience value that offers to everyone, from advanced coders to those launching their very first WordPress site… That said, I do realize there’s only so much time available to evolving a free plugin, regardless of the soundness of the argument that necessarily follows from the above premise.

Ultimately, I suppose my concern is that AO’s option to inline and defer one’s CSS will go unused, when everyone should at least be trying to use it.

Best,
AJ

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Inline and Defer Option Suggestions’ is closed to new replies.