The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design A proper way to (lazy) load css & js or silent injection

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #267410

    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


    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.


    Thanks .. looking already.,)


    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


    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


    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.


    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


    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.


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

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


    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?


    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.

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘Design’ is closed to new topics and replies.