Jump to content
  • Our Picks

    Repair headsets from different manufacturers

    Repair of telephone exchanges and equipment

    Repair of intercom systems and equipment

    Remove Render-blocking CSS

    We are repairing different inverters

  • Vote for us

Render-blocking CSS - removing


Recommended Posts

  • Owner

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">
{{$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">

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 this site and it works perfectly.

Link to comment
Share on other sites

  • Nophelet changed the title to Render-blocking CSS - removing
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.