Page Builder Modules Generates Css Inside Body
jan.sejna
Hello,
so I have found out recently that sppb modules used on pages generates big amount of css inside the body tag. In most cases even empty lines like "@media (max-width: 1199.98px) {#sppb-addon-1665407300837 .sppb-addon-title{}}" when there aren't any changes to responsivity in the addon. We need to use the modules, because there is some content replicated through the website and making changes to them individually would take unnecessary time. However having half of the source code containing unused css (like the one above) is really bad for SEO..
Is there any solution to this, so the css is loaded in separate file? (I know and have enabled the production mode, but it does not work with the modules..) Or at least some workaround so the modules don't generate the empty css lines..
Thanks
Joomla version: 4.3.0 | SPPB version: 4.0.10
Pavel
Accepted AnswerHi.
This is an old problem and has no solution. This was reported for several years by users.
The only workaround is not to use SPPB modules or put up with it. Unfortunately.
And I can’t even imagine how the developers could solve this in the context of the possibility of custom CSS. Usually, a module has one CSS file that is used in all its copies. But if the module has custom CSS, then its code can only be added to Body to make it unique
Thomas Fischer
Accepted AnswerNot sure if i do understand your requirement correctly, but have you thought about changing your workflow? If you need to replicate content, create an article, edit with SP Pagebuilder and style to your hearts content. Instead of using a module you use the article addon. This way you only need to change one single article. It should fix your issue with responsiveness.
jan.sejna
Accepted AnswerHi, I don't have issues with responsivness, but with the empty css lines it generates for every device width and for every part of the addon, like this:
<style type="text/css">#sppb-addon-R1OgzKTYflk_OAutFJEV9 .sppb-addon-header .sppb-addon-title{
font-family: Archivo Narrow;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
}
@media (max-width: 1199.98px) {#sppb-addon-R1OgzKTYflk_OAutFJEV9 .sppb-addon-header .sppb-addon-title{}}
@media (max-width: 991.98px) {#sppb-addon-R1OgzKTYflk_OAutFJEV9 .sppb-addon-header .sppb-addon-title{}}
@media (max-width: 767.98px) {#sppb-addon-R1OgzKTYflk_OAutFJEV9 .sppb-addon-header .sppb-addon-title{}}
@media (max-width: 575.98px) {#sppb-addon-R1OgzKTYflk_OAutFJEV9 .sppb-addon-header .sppb-addon-title{}}#sppb-addon-R1OgzKTYflk_OAutFJEV9 .sppb-addon.sppb-addon-header{
text-align: left;
}
@media (max-width: 1199.98px) {#sppb-addon-R1OgzKTYflk_OAutFJEV9 .sppb-addon.sppb-addon-header{}}
@media (max-width: 991.98px) {#sppb-addon-R1OgzKTYflk_OAutFJEV9 .sppb-addon.sppb-addon-header{}}
@media (max-width: 767.98px) {#sppb-addon-R1OgzKTYflk_OAutFJEV9 .sppb-addon.sppb-addon-header{}}
@media (max-width: 575.98px) {#sppb-addon-R1OgzKTYflk_OAutFJEV9 .sppb-addon.sppb-addon-header{}}#sppb-addon-R1OgzKTYflk_OAutFJEV9 .sppb-addon-header .sppb-addon-title{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
@media (max-width: 1199.98px) {#sppb-addon-R1OgzKTYflk_OAutFJEV9 .sppb-addon-header .sppb-addon-title{}}
@media (max-width: 991.98px) {#sppb-addon-R1OgzKTYflk_OAutFJEV9 .sppb-addon-header .sppb-addon-title{}}
@media (max-width: 767.98px) {#sppb-addon-R1OgzKTYflk_OAutFJEV9 .sppb-addon-header .sppb-addon-title{}}
@media (max-width: 575.98px) {#sppb-addon-R1OgzKTYflk_OAutFJEV9 .sppb-addon-header .sppb-addon-title{}}</style>There are only 3 lines actually used and the rest is empty and this goes for every addon in the modules, all of this inside the <body> which makes it hard to read for search engines then..
Also the content which is replicated through the website is for example footer, testamonials, partners logos, mega menu module etc. I don't think that could be done with articles at all..
Thomas Fischer
Accepted AnswerAhhh OK, but how should the server know what kind of screen size you use and how about users that change the size of their browser on the fly? I sometimes arrange my windows on my screen to four windows, each one taking a quarter of the space. For that i find the dynamic resizing and styling quite good. After all, how the page is displayed is decided on the client. And you certainly don't want a resize causing a page reload each and every time, because that would cause a ton more traffic. Adding a few bytes that might or might not get used, is here the lesser evil.
Templates need to consider all users on the internet and how they use their devices. You are asking a fundamental question that also has nothing to do with the template itself, but rather with how CSS, Responsiveness and how people work. And with the availability of high bandwidth connections nowadays, 1000 bytes more or less become negligable. In essence that is not even one single full TCP Packet that is wasted. So i don't really see any problem here, unless you run a site that serves millions of pagesviews in an hour.