kbowson

so… interesting… it moves that asset up on the waterfall to #2: https://imgur.com/a/3EVIr5

but it does not seem to improve the LCP seconds on PSI: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.galtelligence.com%2Fwhat-to-do-after-a-breakup%2F

related/unrelated, am I able to wildcard something on that preload section? The Social Warfare font has a ?ver=4.10 at the end of it (that correspond with the plugin number).
https://www.galtelligence.com/wp-content/plugins/social-warfare/assets/fonts/sw-icon-font.woff?ver=4.1.0

this is crazy making…

… is there any way to make that variable or based on a css class or? (that image changes for every post)

Hey, I’m sorry… I feel like I am taking crazy pills. I have tried everything I can think of to expedite the loading of the LCP image (I have gone as far as changing themes, removing all plugins but AO (including the Social Warfare font), tested the unused CSS extension, etc.) and nothing seems to work. I guess I just don’t understand why in the webpagetest waterfall, it shows that our AOed CSS + JS are loading BEFORE page render. These (to me) seem to be the only real competitors for resources.

How can this be (I have critical css set AND the ‘defer all render blocking js/jquery’ (in the critical css extension)? Is this that http2 thing you were talking about?

View post on imgur.com

hah no! okay, thank you frank!

and no way to block those in AO, right?

okay gotcha. I did turn off all google fonts in AO. Is there a way to make this more… aggresive (we are still loading Google fonts and some woff ones)

hey, sorry, just ran the webpagetest on a mobile device and it says the css is loading with ‘low’ priority. is there a way to set it to idle on mobile too? Or more aggressively defer it? or?

https://www.webpagetest.org/result/201104_Di2J_756c0e2b6c33556b17594c3e02f3a3a0/1/details/

I am 100% sure you know about this… but thought this was cool: https://developers.google.com/web/updates/2019/02/priority-hints

this is super super helpful. great to know that the css is set to ‘idle’. I did not know that there was that priority selection!

man… it is crazy to me that we have it coming in 4th, and it still takes so long to ‘fully’ load.

Thanks frank!

hey frank,

sorry should have provided more detail. I already added the exclusion from lazy load. The biggest thing to load, that seems to slow down the page load, is our css file. But I certainly could be wrong. Anyway you could take a look?

https://www.mantelligence.com/fun-trivia-questions/

looks perfect / amazing, thank you guys!

okay, thank you!

Okay, after some investigation into this, it turns out that filter cause some weird behaviors of descendants. I did see that there was a loophole so to speak… that if you move the filter from the body to the root (html) then it fixes the issue.

So, we would need to do is add this to the CSS:

body.pojo-a11y-grayscale {
    filter: unset !important;
    -webkit-filter: unset !important;
    -moz-filter: unset !important;
    -ms-filter: unset !important;
    -o-filter: unset !important;
}

and then dynamically add this css if someone clicks the button. That is above my pay grade. Anyone know how to add this css dynamically?

html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray;
}

• This reply was modified 4 years, 10 months ago by kbowson.
• This reply was modified 4 years, 10 months ago by kbowson.
• This reply was modified 4 years, 10 months ago by kbowson.
• This reply was modified 4 years, 10 months ago by kbowson.

Got this figured out. Was an issue with an old manually-generated critical css file being served from autoptimize.

+1 for this. We noticed this as well…