Hi,
Google PageSpeed suggests to move css at the bottom of the page avoiding the page render blocking.
I’ve successfully used your page booster plugin for all js and css, but …content/themes/Newsmag/style.css?ver=1.6
If I add huge 400kb theme style.css to page booster plugin, website flicks until it is loaded at the bottom of the page. If I hold css theme in header, Google mark it as a red problem. How i can fix it?
Thanks
Hi,
If you don’t move it it’s not a big deal, it’s only intended to load the other elements (html) first.
Please provide more details about the “website flicks until it is loaded” issue.
Thank you, Emil G.
Hi,
for “website flicks until css is loaded”, I mean website load faster but for a little fraction of time it appear without css and then it’s rendered properly.
Can I split main css theme in 2 parts,
putting a small one in the header with most important formatting rules and the bigger one in the bottom of the page?
Work in progress site here: http://www.wemedia.it
Best bet is to have ONE file, so it is one less file for browser to load; however you should minify it to load faster.
The flash of unstyled text is more often from the custom CSS, and you can often fix THAT by actually editing the CSS in style.css vs adding bunches of things to custom.css panel.
Just make a record of WHAT you change to reapply with future theme updates.
In any case, that’s what I do 🙂
Hi,
@phabio76
As Chris stated that usually happens because of the custom css added to the page which is loaded after the main style-sheet and in the first instance the page is loaded with the default style then switches to your preferences. You could avoid this by making the css changes to the main style-sheet in the style.css file, then your style will become default.
Thanks
Hi,
I have no custom style!
I load the defualt configuration with css theme in the head section. (a 400kb css)
Google pagespeed tool says that page loading is blocked until the css is completly loaded and mark this a red problem.
If i put the css at the bottom of the page with tagdiv page booster plugin, the page render without css (no style, not only text) and remain ugly until css is loaded. When I say that page flicks, I mean it remain without css for 0,5 sec…
Can I fix it anyway or I have to maintain a smaller css in the header?
Hi,
Using the latest version of the speed booster plugin which is 3.2 theme style will not be moved to the footer and will remain at the top of the page.
Usually by default in old speed booster versions, theme’s style css file was also moved to the footer but we have changed this in the latest version because this is the reason of loading the unstyled theme for a moment.
Using the default speed booster configurations and not moving the theme style to the footer and making the changes/customization to the theme’s style.css file without overwriting the initial design should solve this for now. But you could do this your way.
We’re also looking for a solution for this and we will implement it in next version of the plugin if we manage to find a better implementation.
Thanks
Ok, thanks.
I think the problem is not the plugin itself, but the big css in the header.
