Jump to content

Render-blocking CSS


Adlago
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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/

IE.thumb.png.ef55eb82d701e7b11158ce37072e0987.png

For FF after v.56 incl.

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

FF.thumb.png.4d4d7bd96c545110c3b55c598c164a8d.png

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.

Link to comment
Share on other sites

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! :happy:

Link to comment
Share on other sites

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.

preload_js.thumb.png.4881be6efeaed295d0c1c53ba7b18acb.png

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

 

 

Link to comment
Share on other sites

  • 1 year later...
  • 3 weeks later...

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • 4 weeks later...
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

Link to comment
Share on other sites

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>)

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 4 weeks later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...