Jade is a Node.js template engine that uses indentation as part of the syntax
By default, Jade buffers the output so we have to be explicit when we want unbuffered code
If content contains html and you want to render it, use != like this:
div!=content
p!= 'This code is' + ' <strong>not</strong> escaped!'
Photo by Pankaj Patel on Unsplash
With only two simple steps your pages will load faster, and the most important: using only native JavaScript
The trick will be to use a default tag in rel attribute and modify it once the page loads
Include your stylesheets this way
<link id="stylesCss" as="style" rel="preload" href='/stylesheets/style.css' />
After the page loads call this piece of code:
document.getElementById('stylesCss').rel='stylesheet'
So the whole code will be
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
// load css styles after the page loaded
document.getElementById('stylesCss').rel='stylesheet'
});
</script>
After the page loads the tag will be this:
<link id="stylesCss" as="style" rel="stylesheet" href='/stylesheets/style.css' />
And that’s it. The browser will listen to this action and will load the stylesheets properly. Now your page will load a bit more faster
Of course, you can do this for any other style you have