Hi, I just finished my new site and I am running some SEO tests. Google PSI suggest that I have JS & CSS blocking resources, I did manage to fix the JS issue using 'async' , however, I am not sure how to fix the CSS. Many recommend to output the 'above the fold styles' as inline styles then defer loading the rest.

My question is how do you output a CSS file content within a layout - Not linking to a file. Something similar to file_get_content but for Twig which inserts the styles inline.

 // insert inline CSS here from file1.css


// then defer load the rest from file2.css

var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = "{{ 'assets/css/file2.css'|theme }}";
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);

Last updated 8 years ago

Hi,

Why dont you add all your .css files in an array to one link tag so they get combined and are served as one file? (+ minified when in non debug mode), just like that: <link href="{{ [ 'assets/css/flexslider.css', 'assets/css/colorbox.css', 'assets/css/shake.css', 'assets/css/bootstrap.css', 'assets/css/style.css', 'assets/css/style_0_767.css', 'assets/css/style_768_991.css', 'assets/css/style_992_1199.css', 'assets/css/style_1200_9999.css', ]|theme }}" rel="stylesheet">

Another option is writing your own plugin that registers new twig function/filter whatever you want really. If you need some more help with creating such functionality I can help you out.

PS: The js can be combined the same way

Last updated 8 years ago

Hi Tedomir,

At the moment that is what I am doing, combining multiple files into one using Grunt. However, google page speed suggest to insert some CSS inline first to enhance page rendering. I did try that manually and it works. I just want to avoid doing it manually every time I compile a new style sheet.

So my plan is to split this file into two parts ( or compile two ). One is the CSS that goes inline ( contains grid elements, header, menu...) the elements needed to render important blocks of my page, then the less important one i will add a reference to it, will keep it just as it is now.

Using Twig {% include %} can be an option but not for October, I was thinking maybe loading the file using the onStart() , assign it to a variable and Output that inside the style tags in my layouts . What do you think about this ?

How do you register Twig functions in OctoberCMS ? Any good reference for newbies ?

Thanks

Last updated 8 years ago

https://octobercms.com/docs/plugin/registration#extending-twig

You need to create a new plugin for this. Well basically you should read from top to bottom if you wanna take this route (best one imho, the plugin api is nice and clean so gl!). Then its just a matter of creating a function that will output contents of a file. Basic php

You can also use this plugin: https://octobercms.com/plugin/newride-inlineassets

Thanks for the suggestion will give it shot