Jump to content

Render-blocking CSS

Adlago

By Adlago
in Feedback

 Share

Recommended Posts

Adlago Mentor

Adlago

Posted
Posted

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.

Adlago Mentor

Adlago

Posted
  • Author
Posted
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.

Runar Proficient

Runar

Posted
Posted
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:

Adlago Mentor

Adlago

Posted
  • Author
Posted

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.

 

 

  • 1 year later...
  • 3 weeks later...
Prank Collaborator

Prank

Posted
Posted

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 Mentor

Adlago

Posted
  • Author
Posted
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.

Adlago Mentor

Adlago

Posted
  • Author
Posted
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.

Prank Collaborator

Prank

Posted
Posted
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. 

  • 4 weeks later...
Marcel Iseli Explorer

Marcel Iseli

Posted
Posted
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 Mentor

Adlago

Posted
  • Author
Posted
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 Explorer

Marcel Iseli

Posted
Posted
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 Mentor

Adlago

Posted
  • Author
Posted
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.

  • 4 weeks later...
  • 2 years later...
Adlago Mentor

Adlago

Posted
  • Author
Posted (edited)

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 by Adlago
Dll Experienced

Dll

Posted
Posted
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 Mentor

Clover13

Posted
Posted
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?

Adlago Mentor

Adlago

Posted
  • Author
Posted
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,

 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
Invision Community © 2024 IPS, Inc.
×
×
  • Create New...