Performance Tips video question

[threeoten]

In your youtube video here: https://www.youtube.com/watch?v=3WqXHfJ719g

I am wondering, the whole adding the critical CSS above the fold in Autoptimize… you only have to do this for the home page? What about other pages on the site?

[ruenel]

Hello @threeoten,

Thanks for writing in! For the other pages, you will need to generate the critical CSS as well. For more details, please check the FAQ.

• Check the FAQ

Regards.

[threeoten]

Let me ask a different way…

In Autoptimize there is a field where you are supposed to paste your above the fold CSS. In your video they show you how to find the entire CSS on one page (presumably the home page) using dev tools. The you use the critical css generator to get your critical css which you paste in the box mentioned above. This is only for the home page though? What about the above the fold content for other pages? How do I do that when there’s only one box to put it in?

Is that original CSS file that is optimized by AO the same on every page?

[rad]

Hi @threeoten,

Any CSS added to that input area will be applied to all pages. There are common CSS, and there are unique CSS. This means on the same input area, you may have to add the generated CSS from each page.

I recommend testing your page first to see if the issue exists, if not, then you don’t need to generate another set of CSS. You’ll have to combine all CSS from all pages to be placed on that input, but not always needed if there is no issue

Thanks!

[christopher]

Hi @threeoten,

I also should mention that The free version of Autoptimize plugin does not allow to add the CSS per page. But the paid version does it automatically for all pages and cache the result for the next page visit.

Also, there are other paid plugins that do the process automatically.

Thank you.