If you put a webpage on Google's PageSpeed Insights, it tells you to avoid using any CSS on the head and instead use inline CSS to render the above the fold part (at least). I understand that there would be a small blink for the rest of the page as the CSS loads afterwards.

You can read more here: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

Regards, Nischay Nahata

On Wed, Jul 18, 2018 at 11:04 PM Tom Hutchison tom@hutch4.us wrote:

What are you trying to accomplish? The styles are there for a purpose and Foreground relies on Foundation CSS or it will break.

Tom

*From:* Foreground foreground-bounces@lists.wikimedia.org *On Behalf Of *Nischay Nahata *Sent:* Wednesday, July 18, 2018 6:46 AM *To:* Discussion about the Mediawiki skin Foreground ( https://www.mediawiki.org/wiki/Skin:Foreground) < foreground@lists.wikimedia.org> *Subject:* [Foreground] Removing render blocking CSS

Hi Everyone,

I am trying to modify the skin to remove the CSS links in head, specifically the "site" module and the "skins.foreground.styles" and instead add inline CSS for the top-bar.

Any recommendations?

Regards, Nischay Nahata _______________________________________________ Foreground mailing list Foreground@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/foreground

Well, their page doesn't need that as much as we do (SEO). And it's not like their advice is wrong. The flash of unstyled content is debatable, some of our pages where we want to do this will look okay without the CSS loading as well.

Anyway, As I further researched on this, I think I am only concerned about a few pages like the homepage where I can load the foreground resources a bit late. I would have to not use the top-bar and other foreground things in that case. The skin has already been customized to a great deal anyway :/

Regards, Nischay Nahata

On Thu, Jul 19, 2018 at 5:54 PM Tom tom@hutch4.us wrote:

Before you make yourself crazy on chasing something that has become silly on the part of Google, run one of Google‘s pages through their own tests. It is the classic example of do as I say not as I do.

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fde...

Furthermore, subjecting your users to a “flash of unstyled content“ makes for a very bad user experience.

Tom

On Jul 19, 2018, at 3:48 AM, Nischay Nahata nischayn22@gmail.com wrote:

If you put a webpage on Google's PageSpeed Insights, it tells you to avoid using any CSS on the head and instead use inline CSS to render the above the fold part (at least). I understand that there would be a small blink for the rest of the page as the CSS loads afterwards.

You can read more here: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

Regards, Nischay Nahata

On Wed, Jul 18, 2018 at 11:04 PM Tom Hutchison tom@hutch4.us wrote:

...

What are you trying to accomplish? The styles are there for a purpose and Foreground relies on Foundation CSS or it will break.

Tom

*From:* Foreground foreground-bounces@lists.wikimedia.org *On Behalf Of *Nischay Nahata *Sent:* Wednesday, July 18, 2018 6:46 AM *To:* Discussion about the Mediawiki skin Foreground ( https://www.mediawiki.org/wiki/Skin:Foreground) < foreground@lists.wikimedia.org> *Subject:* [Foreground] Removing render blocking CSS

Hi Everyone,

I am trying to modify the skin to remove the CSS links in head, specifically the "site" module and the "skins.foreground.styles" and instead add inline CSS for the top-bar.

Any recommendations?

Regards, Nischay Nahata _______________________________________________ Foreground mailing list Foreground@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/foreground

---

Foreground mailing list Foreground@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/foreground

---

Foreground mailing list Foreground@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/foreground