A proper way to (lazy) load css & js or silent injection - CSS-Tricks

This topic is empty.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
February 23, 2018 at 12:52 am #267410
Funkaholik
Participant
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?
February 23, 2018 at 1:34 am #267411

Beverleyh
Participant

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.

February 23, 2018 at 2:04 am #267413

Funkaholik
Participant

Thanks .. looking already.,)

February 26, 2018 at 8:55 pm #267538

uspstracking
Participant

I’m actually tired of validators keeps telling me that i have css files & A proper way to (lazy) load css & js or silent injection here you can check the furthur details us-pstracking.com

March 24, 2018 at 10:29 am #268811
Funkaholik
Participant
As long as i understand correctly
- Critical CSS is the exact thing i was talking about which is
  inline css for first screen
- And Load CSS loads it asynchronously so user firstly will see a raw html and
  only when browser will render css file styles would be appllied (which is no good))
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
March 24, 2018 at 4:45 pm #268827

Shikkediel
Participant

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.

March 26, 2018 at 1:27 pm #268899

Funkaholik
Participant

Gotta try that.,)
Actually i though that all scripts by default have a async attr
so html will load regardless of any scripts .. but i guess not

March 26, 2018 at 2:30 pm #268900

Shikkediel
Participant

Without either the async or 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.

March 26, 2018 at 4:18 pm #268906

Shikkediel
Participant

Neh, looks that that’ll work. Don’t see any errors here:

codepen.io/GxOjxB

I only used direct script injection to deal with IE apparently (couldn’t remember exactly)…

March 27, 2018 at 1:28 am #268944

Funkaholik
Participant

I don’t really get your point with last pen, Shik
i can just set defer atrribute for all of my js files (including analytics)
so html will load regardless of any js files?
And is there any difference between defer & asynch?

March 27, 2018 at 2:04 am #268945

Shikkediel
Participant

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.

Using 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.
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

The forum ‘Design’ is closed to new topics and replies.