Render-blocking CSS

[Adlago]

I have written a lot about this subject, incl. and i have a design to use the critical CSS to remove the Render-blocking CSS. Yes, it works, but it takes a lot of time to analyze and develop a good critical CSS.
For a few days I've been exploring another idea that came to my mind.
Code in IncludeCSS works perfectly and this code tells the browser - download all those CSS and use them to represent the site. But this code does not tell the browser when and how to use them.

The idea I'm using right now is - I created a new template that I put before closing the tag head. In my experiment, this template looks like this:

{template="preload_css" app="core" location="global" group="analysis" params=""}

In this template I placed this code

{{foreach array_unique( \IPS\Output::i()->cssFiles, SORT_STRING ) as $file}}
<link rel='preload' href='{expression="\IPS\Http\Url::external( $file )->setQueryString( 'v', \IPS\CACHEBUST_KEY )"}' as="style">
{{endforeach}}
{{$customCss = \IPS\Theme::i()->css( 'custom.css', 'core', 'front' );}}
{{foreach $customCss as $css}}
<link rel='preload' href='{expression="\IPS\Http\Url::external( $css )->setQueryString( 'v', \IPS\CACHEBUST_KEY )"}' as="style">
{{endforeach}}

Now, besides a browser command to download all CSS, I send the browser a command - use these CSS as a matter of priority.
And the result of over 100 my tests - no render-blocking CSS ...
There are no side effects or any other bad impact.
I've installed it on my live site and it works perfectly.

If a development team wishes, let him test it and apply it in later releases. This will speed up all sites using this really good platform.

[Runar]

On 3/24/2019 at 7:39 PM, Adlago said:

There are no side effects or any other bad impact.

I’m not sure if you can call it a side effect or bad impact, but preload is not supported by neither IE nor Firefox: https://caniuse.com/#feat=link-rel-preload

Though, the website will still work in IE or Firefox!

[Adlago]

1 hour ago, Runar said:

I’m not sure if you can call it a side effect or bad impact, but preload is not supported by neither IE nor Firefox: https://caniuse.com/#feat=link-rel-preload

Though, the website will still work in IE or Firefox! 

For IE status In Development

https://developer.microsoft.com/en-us/microsoft-edge/platform/status/preload/

For FF after v.56 incl.

https://platform-status.mozilla.org/#link-rel-preload

For Android Browser - Works.
It is important to note - if a browser client does not support the preload function, the site will continue to load as before.
CSS are loading with rel='stylesheet' and the use of rel = "preload" creates only priority in CSS processing and this removes render-blocking.

[Runar]

37 minutes ago, Adlago said:

For FF after v.56 incl.

That's true, but it's disabled by default in version 57 and above, and must be manually enabled.

38 minutes ago, Adlago said:

It is important to note - if a browser client does not support the preload function, the site will continue to load as before.
CSS are loading with rel='stylesheet' and the use of rel = "preload" creates only priority in CSS processing and this removes render-blocking.

This is also true, so it's not really a problem that it's not supported in all browsers.

All I wanted to say was that this (preload) is not a quickfix to remove render blocking CSS from every visitor. I have added your example to my own site and it works perfectly!

[sudo]

Here is a pretty good breakdown of the various head options:

https://3perf.com/blog/link-rels/

[Adlago]

For several days I've introduced another experiment to my live site.
I've created another template, preload_js with content:

{{foreach array_unique( array_filter( \IPS\Output::i()->jsFiles ), SORT_STRING ) as $js}}
{{$js = \IPS\Http\Url::external( $js );}}
<link rel="preload" href='{{if $js->data["host"] == parse_url( \IPS\Settings::i()->base_url, PHP_URL_HOST )}}{expression="$js->setQueryString( 'v', \IPS\CACHEBUST_KEY )"}{{else}}{expression="$js"}{{endif}}'  as="script">
{{endforeach}}

and I put a template after the template preload_css in global templates.

My original template includeJS loads before closing body tag.
This improves the speed loading site, as well as time First paint and DOM loaded.

If someone wants to test on their site and share results.

 

 

[Logik_]

https://developers.google.com/speed/pagespeed/insights/?hl=en&url=https%3A%2F%2Fkorandovod.ru%2Fforum%2F&tab=mobile

 

Remove unused CSS

Remove unused JavaScript

 

 

 

Edited October 31, 2020 by Logik_

[Prank]

Great info in here, thanks @Adlago!

Question though; I cannot get my CSS to add preload tags to the source.

I can add this and it works;

        <link rel="preload" href="/forums/applications/core/interface/font/fontawesome-webfont.woff2?v=4.7.0" as="font" type="font/woff2" crossorigin="anonymous">        

I can add this and it works; 

        <link rel="preload" href="/forums/uploads/css_built_16/341e4a57816af3ba440d891ca87450ff_framework.css?v=4dabe886c51604917814" as="style" type="font/woff2" crossorigin="anonymous">

But whenever I try to utilise the loops that currently load CSS, nothing happens;

{{foreach array_unique( \IPS\Output::i()->cssFiles, SORT_STRING ) as $file}}
	<link rel='stylesheet' test="test" href='{expression="\IPS\Http\Url::external( $file )->setQueryString( 'v', \IPS\Theme::i()->cssCacheBustKey() )"}' media="all">
{{endforeach}}

(Note test param) - this works!

But; 

{{foreach array_unique( \IPS\Output::i()->cssFiles, SORT_STRING ) as $file}}
	<link rel='preload' href='{expression="\IPS\Http\Url::external( $file )->setQueryString( 'v', \IPS\Theme::i()->cssCacheBustKey() )"}' as="style">
	<link rel='stylesheet' href='{expression="\IPS\Http\Url::external( $file )->setQueryString( 'v', \IPS\Theme::i()->cssCacheBustKey() )"}' media="all">
{{endforeach}}

This does not work - I do not get the preload tag in source.

I have tried adding separate loops that add only the preloads; 

{{foreach array_unique( \IPS\Output::i()->cssFiles, SORT_STRING ) as $file}}
	<link rel='preload' href='{expression="\IPS\Http\Url::external( $file )->setQueryString( 'v', \IPS\Theme::i()->cssCacheBustKey() )"}' as="style">
{{endforeach}}

And I've tried creating new templates, adding directly to global template, just wont work .

I'd love any advice. Thanks!

[Adlago]

3 hours ago, Prank said:

I'd love any advice. Thanks!

Preload CSS from a few months ago is not evaluated by test servers, incl. and from PSI. The effect of preload loading CSS to improve loading speed is very small and not worth using.

What removes CSS render-blocking is only critical CSS. But creating a working well-critical CSS takes a lot of time and this increases the budget maintenance of the site.

For several months I have been working on a project where I move a large volume of external CSS to the end of a global template before loading a java script. I also use and create my own critical css in the head, tailored to my content and the most important css rules.

Of course, all these changes that I make are related to many tests on the site, both with different test servers and direct tests with different browsers. However, a good site visitor experience is more important than a site loading speed.

For now, the tests on my site have an average mobile loading speed of 75 and 97 for the desktop in PSI tests.
But I still have a lot of work and analysis ...
Specific advice for your site, for improvement, I can write, but if you share a link to your community.

[Iwooo]

@Adlago Did anyone from IPS contact you or do you know if they are going to include it? 

[Adlago]

1 hour ago, Iwooo said:

@Adlago Did anyone from IPS contact you or do you know if they are going to include it? 

Nope, no one was interested in that. I have no idea how IPS will solve issues with speed improvements.

[Dll]

Mostly by not getting hung up on page speed score tests and worrying more about user experience, I expect.

 

[Prank]

10 hours ago, Dll said:

Mostly by not getting hung up on page speed score tests and worrying more about user experience, I expect.

 

While I don't want to get into an argument the reason these scores are important to me is because Google have stated that various lighthouse metrics will be used in SEO ranking. Including the content shift score which will be used from 2021. There are 9 confirmed metrics that will affect seo from memory.

I think my site is fast enough and works will for all speeds but a huge number of my page views come from Google searches and I can't risk losing them.

Thanks for the info @Adlagoi was more wondering why the tags were not present in the source. 

[Marcel Iseli]

On 3/24/2019 at 7:39 PM, Adlago said:

I have written a lot about this subject, incl. and i have a design to use the critical CSS to remove the Render-blocking CSS. Yes, it works, but it takes a lot of time to analyze and develop a good critical CSS.
For a few days I've been exploring another idea that came to my mind.
Code in IncludeCSS works perfectly and this code tells the browser - download all those CSS and use them to represent the site. But this code does not tell the browser when and how to use them.

The idea I'm using right now is - I created a new template that I put before closing the tag head. In my experiment, this template looks like this:

{template="preload_css" app="core" location="global" group="analysis" params=""}

In this template I placed this code

{{foreach array_unique( \IPS\Output::i()->cssFiles, SORT_STRING ) as $file}}
<link rel='preload' href='{expression="\IPS\Http\Url::external( $file )->setQueryString( 'v', \IPS\CACHEBUST_KEY )"}' as="style">
{{endforeach}}
{{$customCss = \IPS\Theme::i()->css( 'custom.css', 'core', 'front' );}}
{{foreach $customCss as $css}}
<link rel='preload' href='{expression="\IPS\Http\Url::external( $css )->setQueryString( 'v', \IPS\CACHEBUST_KEY )"}' as="style">
{{endforeach}}

Now, besides a browser command to download all CSS, I send the browser a command - use these CSS as a matter of priority.
And the result of over 100 my tests - no render-blocking CSS ...
There are no side effects or any other bad impact.
I've installed it on my live site and it works perfectly.

If a development team wishes, let him test it and apply it in later releases. This will speed up all sites using this really good platform.

Could you please tell me in which file I would need to add this? in the custom.css file? best wishes, Marcel

[Adlago]

8 hours ago, Marcel Iseli said:

Could you please tell me in which file I would need to add this? in the custom.css file? best wishes, Marcel

Critical CSS is an inline presented CSS. This CSS rules  is tagged ...

<style>
  
  your Critical CSS rules
  
</style>

and placed in a head site before closing the tag head. (</head>)

[Marcel Iseli]

50 minutes ago, Adlago said:

Critical CSS is an inline presented CSS. This CSS rules  is tagged ...

<style>
  
  your Critical CSS rules
  
</style>

and placed in a head site before closing the tag head. (</head>)

I am sorry but I am still not sure how I would need to do this. Do I need to create a template first in the default theme? and then I will just add the rest of that code before the closing head-tag or would I just need to put the whole code (with the first line which includes the template-info) as it is before the closing head tag?

[Adlago]

10 minutes ago, Marcel Iseli said:

I am sorry but I am still not sure how I would need to do this. Do I need to create a template first in the default theme? and then I will just add the rest of that code before the closing head-tag or would I just need to put the whole code (with the first line which includes the template-info) as it is before the closing head tag?

Yes, it's best to create your own template and put your Critical CSS in it.

[kims79]

 

Do you plan to make it a plugin or an application? Saving time could be interesting!

[Adlago]

I confess to myself - I have forgotten this topic... But there is one accidental, or not quite solution that I have found.
And here I am sharing it with you.
Open the Include CSS template
Find it

{{foreach array_unique( \IPS\Output::i()->cssFiles, SORT_STRING ) as $file}}
<link rel='stylesheet' href='{expression="\IPS\Http\Url::external( $file )->setQueryString( 'v', \IPS\Theme::i()->cssCacheBustKey() )"}' media='all'>
{{endforeach}}

{{if \IPS\Dispatcher::i()->controllerLocation == 'front'}}
{{$customCss = \IPS\Theme::i()->css( 'custom.css', 'core', 'front' );}}
{{foreach $customCss as $css}}
<link rel='stylesheet' href='{expression="\IPS\Http\Url::external( $css )->setQueryString( 'v', \IPS\Theme::i()->cssCacheBustKey() )"}' media='all'>
{{endforeach}}
{{endif}}

And replace code with

{{foreach array_unique( \IPS\Output::i()->cssFiles, SORT_STRING ) as $file}}
<link rel='preload stylesheet' href='{expression="\IPS\Http\Url::external( $file )->setQueryString( 'v', \IPS\Theme::i()->cssCacheBustKey() )"}' as="style" media='all'>
{{endforeach}}

{{if \IPS\Dispatcher::i()->controllerLocation == 'front'}}
{{$customCss = \IPS\Theme::i()->css( 'custom.css', 'core', 'front' );}}
{{foreach $customCss as $css}}
<link rel='preload stylesheet' href='{expression="\IPS\Http\Url::external( $css )->setQueryString( 'v', \IPS\Theme::i()->cssCacheBustKey() )"}' as="style" media='all'>
{{endforeach}}
{{endif}}

You will eliminate render blоcking CSS without much effort...

Of course, there are other little (hard to do) tricks for even better performance, but the above will also make you smile…

Edited June 26, 2023 by Adlago

[Dll]

Preloading all of the css is not a good idea. 

[Clover13]

58 minutes ago, Dll said:

Preloading all of the css is not a good idea. 

Why?

[Dll]

8 minutes ago, Clover13 said:

Why?

Because downloading it all is still going to block something else from loading. So by moving all the CSS to be pre-loaded, it's actually going to block things that should and would have downloaded first. Browsers are actually quite good at prioritising these days, so you can do more harm than good by messing with the order and preloading potentially large files that don't actually need to be pre-loaded.

In an ideal world the key CSS (eg the CSS needed to render the visible part of the page) would be pre-loaded or hard coded into the html. Just not all of it. 

[Clover13]

15 minutes ago, Dll said:

Because downloading it all is still going to block something else from loading. So by moving all the CSS to be pre-loaded, it's actually going to block things that should and would have downloaded first. Browsers are actually quite good at prioritising these days, so you can do more harm than good by messing with the order and preloading potentially large files that don't actually need to be pre-loaded.

In an ideal world the key CSS (eg the CSS needed to render the visible part of the page) would be pre-loaded or hard coded into the html. Just not all of it. 

Same with prefetch of JS?

[Dll]

28 minutes ago, Clover13 said:

Same with prefetch of JS?

You should only prefetch files that need to be loaded as a priority, js, CSS or whatever else.

[Adlago]

5 hours ago, Dll said:

Because downloading it all is still going to block something else from loading. So by moving all the CSS to be pre-loaded, it's actually going to block things that should and would have downloaded first. Browsers are actually quite good at prioritising these days, so you can do more harm than good by messing with the order and preloading potentially large files that don't actually need to be pre-loaded.

In an ideal world the key CSS (eg the CSS needed to render the visible part of the page) would be pre-loaded or hard coded into the html. Just not all of it. 

Simply put, you are delusional, somehow...
What you say was true when protocol h1 was leading... In the presence of h2 - i.e. parallel download, slows down acceleration when downloading unused CSS is no more than 200 ms.. which compared to site performance acceleration is negligible...
Of course, my advice is not mandatory and is for people who are looking for solutions to many recent Google requirements...
This does not prevent the use of critical CSS, which further improves site loading.
But onloag loading CSS unused is too time-consuming task - and as you know, IPS suspended access to architecture CSS...
CSS prefetch is a stupid solution and doesn't work well,