Support » Plugins and Hacks » Autoptimize » Eliminate Render Blocking CSS

Viewing 15 replies - 1 through 15 (of 141 total)
  • Plugin Author Frank Goossens

    (@futtta)


    kudo’s to AJ@wpfaster! 🙂

    🙂

    And kudos right back to Frank.

    AO plays a key role in the optimization architecture I teach in WpFASTER’s WordPress speed optimization course on Udemy. It is hands down the best minification and concatenation plugin in the WP repository. Full stop. And that Frank is so dedicated to supporting it is the icing on the proverbial cake.

    We use Autoptimize on our own site and we trust it to use it on client sites. …Need I say more?

    Enjoy! – and be well,
    AJ

    just linking to AJ’s useful post here too https://www.wpfaster.org/blog/how-to-use-autoptimize-inline-and-defer-css-option

    by following the pretty simple method he describes I was able to completely elminate all refernces to render blocking css above the fold on both mobile and desktop

    thanks to AJ for a great post and Frank for a great plugin 🙂

    I am using AO to deal with CSS deferment.

    On our site however, we need to use a per page inline CSS since the pages vary so much.

    I have configured AO for “Inline and Defer CSS?” and left the CSS field blank,

    Using “per page add to head” I have added the correct inline CSS to each to page, with an id, that is excluded in AO.

    However, on Google’s pagespeed I am still getting the message about deferring blocking CSS code for above the fold content…..

    Why would that be the case?

    Plugin Author Frank Goossens

    (@futtta)


    I’ve seen that mentioned elsewhere as well, as far as I can tell this is a fluke in GPSI really; the CSS in head is between noscript-tags so not loaded in normal circumstances, the CSS in footer is loaded by JavaScript only after the domContentReady has fired.

    hope this clarifies,
    frank

    Thank you. Another question.

    Using your plugin it creates 2 css files per HTML page.

    1) Why not one css file per page?
    2) Is combining the css files like this perhaps a bad thing?

    Say you have page 1 and page 2. Page 1 uses a.css, b.css, and c.css. Page 2 uses b.css and c.css.

    With this plugin, you create a combined css for page 1, and a different combined css for page2. However, assuming the browser is caching css files, this is actually worse since when the user moves from page 1 to 2 a new css needs to be loaded?

    Just curious if creating a combined css for every web page is necessarily a good thing. Seems like the page testing website think so, and maybe I am not getting something.

    Plugin Author Frank Goossens

    (@futtta)


    Well, AO honours the media-types the original CSS came with. Putting all CSS in 1 optimized file would most probably just break things.

    On a related note; the upcoming AO 2.0 will check if the size of the CSS is smaller then a predefined number of characters (currently 128 by default, but I might change that to 256 and the value is always overwriteable using a filter) and if so inline that CSS instead of linking it.

    frank

    What about item #2 I mentioned.

    In cases where multiple pages mostly use the same subset of css files, isnt autoptimizer degrading performance by making the browser download a combined css file when it may only need a very small portion, or none at all?

    Perhaps I don’t understand how the hash is created?

    Plugin Author Frank Goossens

    (@futtta)


    The hash is based on the CSS-code in the file. So if you have different CSS on each page, that would create a seperate CSS file for each page. This will indeed result in the CSS not being reusable from cache, so that is a clear disadvantage.

    As explained in the FAQ, best approach in that case is to exclude page-specific CSS from optimization; this will keep your cache-size smaller and will allow re-use of cached CSS between requests.

    frank

    Thanks! Makes perfect sense.

    One note, anyone who uses PageBuilder for their website needs to at least add the following two CSS to the ignore list as it is unique to every page built with pagebuilder.

    siteorigin-panels-grids-wp_head,siteorigin-panels-grids-wp_footer

    As an experiment, I took 2 pages.

    They each have about 8 css files in common, and then each have 2 small ones unique to each page.

    Using add per page header, I added the “missing” css to each page. I then check network dev tools in Firefox (after clearing cache), when I move from page 1 (where everything is downloaded), to page 2, nothing is downloaded. I checked both directions to be sure.

    However, I guess because the css files are in a different order, and therefore get aggregated differently by autoptimize, the hash is not the same, so autoptimize creates two merged CSS files unique to each page, removing the benefit.

    So, how, in WP, is it possible to create a common set of css files in every page so autoptimize can work well? On our site, we use only “pages” as we are delivering static content. And each page is developed with page builder and some pages use certain features and others use other features, apparently resulting in unique css entries on each page.

    I am fine adding “missing” css to individual pages to make sure they all have the same set, but it’s not helping……

    Plugin Author Frank Goossens

    (@futtta)


    order indeed has to be the identical, as AO respects the order files were found in (and the mediatypes).

    you could exclude all pagebuilder-initiated CSS, leaving your theme and plugin’s CSS (which is not impacted by pagebuilder?) to be optimized by AO?

    frank

    I don’t think its solely a page builder issue.

    Say for instance you have a page that uses some tab plug in. That page will require CSS for the tabs, but other pages won’t.

    If you use different “features” on different pages, you will have this issue if page specific CSS on every page.

    Perhaps you can add a feature that will re-order all CSS sheets by name (or something) (would need to look in header and footer), so they are always in the same “order” before autoptimize does it’s magic…..? Sort of hacky, but it is unfortunate that with custom pages there is no way to leverage combining the CSS files. And order is somewhat important for CSS, so it might cause other issue….. Not an expert, just trying to come up with a solution.

    Plugin Author Frank Goossens

    (@futtta)


    reordering stylesheets breaks things, so that’s a no-go really. in general wordpress setups, order of css will be no problem. an example

    1. page 1&3 have themestyle.css, childtheme.css, plugin1.css, plugin2.css
    2. but page 2 has themestyel.css, childtheme.css, pluign1.css, plugin3.css, plugin2.css

    for AO to create an identical file, one has to exclude plugin3.css and all is well.

    now if something (pagebuilder?) is messing with the order of the CSS, then AO can’t fix that in and of itself, as re-ordering of stylesheets will most certainly break things (e.g. styles in childtheme.css overriding styles from themesttyle.css, so the order has to remain).

    the solution would indeed be excluding anything which is not generic or (as of AO 2.0) using the API to give AO a whitelist of what can be aggregated.

    frank

    Two things that will be a big help:

    1) Whitelist functionality for CSS, which is coming.
    2) With JS optimization, ignore inline JS. Any inline JS is usually custom to the page and is really annoying to “exclude” it page by page… But this is coming too I understand.

    Thanks for the help, and the hard work.

Viewing 15 replies - 1 through 15 (of 141 total)
  • You must be logged in to reply to this topic.