I started looking into this, but afraid I’m not there yet naelnewmindsgroup; when I load the page with AO disabled entirely (by adding ?ao_noptimize=1 to the URL) I indeed see that the “XPRESS CARWASH” text overlaps and I see that that is not the case when AO is active. I also see that when changing the height of the browser window, the text layout changes. Based on this it looks like the critical CSS as generated by Pegasaas has responsive CSS that sets the size of that text depending on the viewport ans that CSS somehow is not availavble elsewhere (which is weird as typically Critical CSS generators do not “invent” CSS, but extract it from the full CSS).
I will later tonight/ tomorrow (it’s 21h10 here now) try to identify the “missing CSS” based on the critical CSS that is currently in use and get back on the subject, but I thought in the meantime above info might already also help you somehow?
more soon,
frank
OK, the missing CSS that makes that text look OK (not overlapping);
.home-header {
line-height:16vh!important
}
You could try adding that to Appearance -> Customize -> Extra CSS?
Hello, thank you for your reply. But the main issue isn’t only with the text overlapping. If you got to another page, such as https://supershinexpress.com/services/ and compare it with https://supershinexpress.com/services/?ao_noptimize=1 you’ll notice how the letter spacing and other font properties are different too, not only in the header but in other elements such as the price table for example. How can we restore these properties?
The problem is that the critical CSS as generated by Pegasus has styles that are missing from the current full CSS (both when Autoptimized or in the original state), meaning something else was changed (styles removed for some reason, maybe by the auto-generated pagebuilder CSS?) since you had Pegasus extract the critical CSS.
But Autoptimize does not change any of the original CSS (it is replaced on the fly in the HTML instead), so this is not something that can be due to/ solved by Autoptimize .. :-/
Thank you, we are aware of this issue but we don’t have access to the original CSS file/Know what happened to it, since as an agency we started working on the website recently (This was done by a previous developer). But we’ve noticed that the CSS files are stored under autoptimize directories such as:https://supershinexpress.com/wp-content/cache/autoptimize/css/autoptimize_single_9fdc95d699b22533f32c3a92b63d7ef0.css?ver=5.9.2 . And when the plugin is gone, these files are gone too. How are these files generated? And Is there a way to retrieve these?
The files are generated from the original CSS; simplified it works like this;
1. Autoptimize gets the full un-optimized HTML from the output buffer
2. AO searches for all linked or inlined CSS in the HTML and (if not excluded) reads the CSS from the original files and combines & minifies & caches it (the 2nd part of the filename is a hash of the CSS after combining but before minifying)
3. AO then replaces the links to the original CSS in the HTML with the links to the cached optimized CSS
So provided the cache has not been cleared, chances are you’ll find older optimized CSS in wp-content/cache/autoptimize/css maybe and you could try extracting the missing CSS from those (or from the critical CSS as generated by Pegasus)?
We found the autoptimize css files in the panel under the directory: wp-content/cache/autoptimize/css. We copied the CSS code from the file and pasted it under >Appearance> Customize> Additional CSS. It seemed to have solved the problem. Thank you for the support!
We found the autoptimize css files in the panel under the directory: wp-content/cache/autoptimize/css. We copied the CSS code from the file and pasted it under >Appearance> Customize> Additional CSS. It seemed to have solved the problem.
that’s a novel approach naelnewmindsgroup, but do keep in mind that it increases the amount of CSS used on your site somewhat.
Thank you for the support!
you’re welcome, feel free to leave a review of the plugin and support here! 🙂
