[Resolved] Two questions

[epickenyan]

Hi.
1. Is the schema inside GP enough for type ‘articles?
2. After changing to SVG in the theme (alpha 3), loading the site on mobile flashes the off-canvas menu on the screen and the black icons (search and menu I guess), and on chrome, the menu seems to flash (break and organize itself back) in milliseconds) and also noticed similar behaviour in brave browser. Not sure if you can see that from your end.

[Tom]

Hi there,

1. I don’t believe so. You’d need to set up an Organization name/image etc.. using a JSON+LD solution (plugin, Yoast SEO etc..)

2. I’m not experiencing this. Can you try clearing your browser cache on your phone?

Let me know 🙂

[epickenyan]

1. Do you think this plugin covers everything? And do I need to disable the theme schema? (I switched from Yoast to SEO Framework but the latter does not have Article schema in the free version so I unticked the other schema options)
2. I did some further digging and found out when I choose SVG in the customiser (updated theme to beta version), that is when the issue occurs. I took a quick screenshot with my phone to demonstrate what I mean which you can see here. I am on a Litespeed server optimizing with Litespeed cache plugin and the option for ‘load CSS asynchronously” is what is causing those SVG links in the menu (off canvas) to ‘jump’ as in the screenshot. It shows in my connection for like a second but I am sure in much slower connections it could be a bother.

[Tom]

1. That plugin should do the trick. You can disable the GP schema like this:

add_filter( 'generate_schema_type', '__return_false' );

2. So if you turn off “load CSS asynchronously” the issue goes away?

[epickenyan]

1. Okay, thanks.
2. Yes, it does. Seems there is a conflict somewhere that I cannot figure out (I found using google lighthouse on incognito mode also shows the menu retraction. Maybe try that and tell me if you see it, especially with chrome).

[Tom]

2. But that only happens with this CSS option checked, yes? It sounds like the CSS is taking too long to load, so the images are showing up first with no styling.

I’ll check to see if this is something we can prevent and will get back to you 🙂

[epickenyan]

Yes, it happens only with this option checked. I tried unchecking all optimization settings and enabling them one by one and only this option returned the error. I will wait for your feedback on the same.

[Tom]

Does the plugin give you an option to add critical CSS that needs to be left alone?

If so, you may need to do add this:

.gp-icon svg {
    height: 1em;
    width: 1em;
    top: .125em;
    position: relative;
    fill: currentColor;
}

.icon-menu-bars svg:nth-child(2), 
.toggled .icon-menu-bars svg:nth-child(1), 
.icon-search svg:nth-child(2), 
.close-search .icon-search svg:nth-child(1) {
    display: none;
}

[epickenyan]

Hi Tom, this worked. Just a slight new issue. Now for a moment when the menu loads, the x icon shows next to the search icon and hamburger icon, both on the right side as shown here.

[Tom]

I’ve just updated the CSS above 🙂

[epickenyan]

Thanks a lot, Tom! It worked. Consider this resolved.

[Tom]

Glad I could help 🙂

[Author]

Posts