Skip to main content

Forums

This topic contains 10 replies, has 4 voices, and was last updated by  Shikkediel 12 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #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?

    #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.

    #267413

    Funkaholik
    Participant

    Thanks .. looking already.,)

    #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

    #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

    #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.

    #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

    #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.

    #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)…

    #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?

    #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.

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

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star