I’m actually tired of validators keeps telling me that i have css files
blocking page load speed (and js also even if its before tag)
<link rel="stylesheet" href="fonts/fontawesome/css/font-awesome.min.css"> <link rel="stylesheet" href="fonts/font/stylesheet.min.css"> <link rel="stylesheet" href="css/main.min.css">
i’m thinking that there should be a proper way in 2018 to load fonts & styles etc
i’ve read somewhere about google page speed that it cares only about load speed of the first screen of page
so its recommended to write styles for that first screen in the head of html
so it can fastly load a first screen and then go through your main css file
<head> <style>...</style> </head>
Haven’t test it yet .. does anybody have a solution for that?
Have a look into the work that Filament Group has done with loadcss and loadjs for asynchronous asset loading.
The other thing you’re talking about is “critical css”. There are extraction/compilation tools you can build in to your workflow, and there are online generators you can try. Check out Google for details.
As long as i understand correctly
Summing use of Critical CSS still force me to paste inline styles in html manually
if i’m not going to use any builds that can inject a portion of inline css in the html on build
I’ve stopped caring about CSS blocking and think it’s not really worth it unless you have a huge file.
For JS, I use the
defer attribute. That’ll work fine if you don’t care about IE9 and is actually quicker than putting scripts at the bottom of the page – you can put them in the head section and it’ll load asynchronously (simultaneous) with the page itself.
Without either the
defer attribute, the script with be synchronous. That’s why it’s being referred to as “blocking” when there’s still page markup to follow.
The approach I use myself it to make the jQuery library async, wait for it to be loaded and then inject the rest of the scripts in a deferred manner once that happens. Come to think of it, I’ll have to check again if that isn’t actually the only correct way. Scripts depending on jQuery might trigger errors otherwise. I’ll see if I can create an example.
It was just a test to see if the second script fired in the correct order without being bothered by dependency on the jQuery library.
defer is easier, the scripts all fire in the right order (expect glitches on IE9) and right after page load. But
async on the other hand will fire as soon as the script itself has finished loading. This could happen before the page has rendered which would be too soon – and there is no particular order other than what happens to load first. In the example, the second script is a lot shorter and would fire before jQuery itself is ready.
I think Google Analytics can use
async because it is neither dependent on another script nor does it need to wait for page load.
You must be logged in to reply to this topic.