Hi Alex,
Thank you very much for your feedback!
It is indeed a very nice solution! It appears that the original solution is based on a Chrome based innovation that will be removed in Chrome 63. It doesn’t work in Firefox, IE etc.
https://gist.github.com/PaulKinlan/6284142#gistcomment-2112706
https://www.chromestatus.com/feature/4606972603138048
It is a simple trick that extracts CSS rules that apply to a view port. The resulting Critical CSS may not be of high quality, but it’s certainly a very nice and quick way to get started with critical CSS.
We will investigate the option for a cross browser based solution and include it in the next update.
For a professional critical CSS generator, see https://github.com/pocketjoso/penthouse
The popular Critical CSS generator [Critical](https://github.com/addyosmani/critical) by a Google engineer uses Penthouse.js to create Critical CSS (it’s a management layer). Penthouse.js was the original critical CSS generator innovation and it is actively developed/maintained. It recently moved from using PhantomJS to headless Chrome, a major update.
Hi @optimalisatie,
Thanks, and really expect your next version, and it will be really good and helpful for more people to use Page Speed Optimization for SEO.:)
I understand Optimization is a some kind of technical work. But, from my view, wordpress is a kind of CMS for users who are mostly not technical background, it would be much great for them if the plugin work as a intelligent tool. less steps more great experience, which is not just for non technical but also for technicals, less work more life:)
Really eager to the new model of Critical CSS generator in “Page Speed Optimization for SEO” 🙂
Thanks for your info, and have a nice day.
Alex
-
This reply was modified 8 years, 4 months ago by
alexlii.
Hello @optimalisatie,
our webpage is just flash once on every URL click, is it related to Critical CSS?
https://www.lovcour.com/
You professional comments would be appreciated.
Alex
Hi Alex,
What you are seeing is called a Flash of Unstyled Content (FOUC).
The critical CSS configuration is empty. You can view the result in the HTML source:
<style type=”text/css” id=”AbtfCSS” data-abtf>
/*!
* Above The Fold Optimization 2.9.5 // EMPTY
*/
</style>
`
Hi @optimalisatie,
Thanks, do you mean the Flash issue will disappear once critical CSS configuration is done?
Thanks?
Alex
BTW, I am using Autoptimize with Page Speed Optimization for SEO now. but more plugin more conflict.
I read some document at https://www.modpagespeed.com/doc/
The PageSpeed Modules, mod_pagespeed and ngx_pagespeed, are open-source webserver modules that optimize your site automatically.
According to those document, Nginx server will automatically optimize whole sites: https://www.modpagespeed.com/
is Autoptimize still need to run on our site after I installed thise source(https://www.modpagespeed.com/doc/build_ngx_pagespeed_from_source )?
Alex
Hi @alexlii,
Yes, the flash of unstyled content issue should be resolved once the critical CSS quality has been optimized.
In regards to the Mode Page Speed module, often the best results can be achieved with a optimization fine tuned for a specific website.
With developments such as PWA the requirements for a website in regards to optimization are much more tied to the purpose and design of a website. A custom optimization plugin in control by the web developer / designer may therefor be a better solution on the long term. It also provides much better results when configured correctly.
Are you currently using Mod Page Speed? The Google performance score is “off the scale” (Poor / 32% visitor loss)
https://testmysite.thinkwithgoogle.com/intl/en-us
