Web Performance Mini Series: Load

Поделиться
HTML-код
  • Опубликовано: 10 сен 2024

Комментарии • 71

  • @ritwickdey97
    @ritwickdey97 5 лет назад +17

    For few seconds, I thought my internet connection is gone ... hahaha

  • @NanobyteOnline
    @NanobyteOnline 5 лет назад +14

    omg how did he got me with that fake ... -.-"

  • @mister_azz
    @mister_azz 5 лет назад +7

    "Who wants that?"
    I want that.

  • @jradplowman
    @jradplowman 5 лет назад

    Love the ambient background music!

  • @Prolantis
    @Prolantis 5 лет назад +3

    You had my like for the video within 30 seconds :P
    Keep on being awesome and hilarious ;)

  • @symonperalta6196
    @symonperalta6196 5 лет назад

    Thank you Paul, looking for more Web Performance series in the future.

    • @aerotwist
      @aerotwist  5 лет назад

      Don't get too comfy, I don't want to spend all my time there :)

    • @symonperalta6196
      @symonperalta6196 5 лет назад

      @@aerotwist requestOnYourIdleCallback(moreVideos) 😁

    • @aerotwist
      @aerotwist  5 лет назад

      You'll need a timeout on that ;)

  • @maximerossignol582
    @maximerossignol582 5 лет назад

    Thanks for this series, it's always a pleasure to learn new things just by watching a small clear video.
    Keep it up !
    (also well played for the fake loading state, Rrrrrr...)

  • @jumpalottahigh
    @jumpalottahigh 5 лет назад +2

    Got me too :)

  • @haythemfarhat6218
    @haythemfarhat6218 5 лет назад

    I hate to admit this but you actually got me with that loading intro

  • @dominikdeimel9486
    @dominikdeimel9486 5 лет назад +4

    Do you Mind putting this Code on github? I‘d Love Tod Build someting from it :)
    BTW: Awesome Series!

  • @JoeYoni
    @JoeYoni 5 лет назад +3

    Great intro!

  • @BjoernBeckmann
    @BjoernBeckmann 5 лет назад

    haha you got me with that intro! :D

  • @greven182
    @greven182 5 лет назад +2

    You got me there.
    I actually reloaded the video... :P

  • @bulliboogah
    @bulliboogah 5 лет назад

    An excellent end to a great video series. .. loved the fake loading screen

  • @jradplowman
    @jradplowman 5 лет назад

    Outtakes are brilliant btw :D thanks for videos, going to apply some of RAIL tomorrow at work.

  • @mladjo2505
    @mladjo2505 5 лет назад

    The BASSics of web development.

  • @draganoiugeorge6010
    @draganoiugeorge6010 5 лет назад

    "i dont know what im doing, but were doing it anyway" should probably be engraved :D
    great video :)

  • @durchschnittlich
    @durchschnittlich 5 лет назад +3

    My video had a minute of buffer and still, I was like "wtf is wrong now?"

  • @mohamadtajjiou7508
    @mohamadtajjiou7508 5 лет назад

    Thank you

  • @yixuanwang2466
    @yixuanwang2466 4 года назад

    What do the 'Documents' and 'Documents Frames' amount mean in the performance panel of Chrome Dev Tools?

  • @lavishly
    @lavishly 5 лет назад

    Paul, would you still in this day and age still use FastDOM or 'layoutBoundries' to avoid layout-thrashing? Most discussions on these libs are 5+yrs old. Has plain requestIdleCallback and rAF with increased Javascript render speed replaced the need? A detailed update video on this stuff would be awesome! (Even Popmotion has a FastDOM knock off).

  • @GifCoDigital
    @GifCoDigital 5 лет назад

    Hey Paul, what would be a good fallback if intersectObservable is not supported like in Safari? Would you just use: if ( !'IntersectionObserver' in window ) { //load imgs in order } ???
    Great video as always! Wish this was a full series, loving this perf stuff! :)

    • @aerotwist
      @aerotwist  5 лет назад

      It's in the Tech Preview, I believe, and there's a w3c polyfill

  • @AleksandrUlatov
    @AleksandrUlatov 5 лет назад +2

    Can i take 14:37 sound for notification sound? Please 😏

  • @mohamedhussainsh7913
    @mohamedhussainsh7913 5 лет назад

    Hi Paul,
    you are using the custom elements from the Javascript, so will it need javascript to load first then only renders the custom element....is there any good article or doc to study about it?...Thanks for the video as always...Paul I asked you one question on your previous video about the loading in , i think you are busy or my question is not relevant to the video....

    • @aerotwist
      @aerotwist  5 лет назад

      You can always put placeholders in for custom elements (I did this in my guitar tuner). I put the elements themselves in the HTML in case I wanted to reserve space even earlier.

  • @kuqmua755
    @kuqmua755 5 лет назад

    Few seconds of despair)

  • @pajotrus
    @pajotrus 5 лет назад

    ok, so basically downloading of the file begins when we set the src attribute and when it's downloaded then the onload callback on this image is triggered? this is so easy yet I've only grasped it now. Thanks for the video (of course, i'm very impatient and when you did the trick I clicked space and CMD+R haha)

  • @bibibobs
    @bibibobs 5 лет назад

    You really got me haha

  • @FilipChalupa
    @FilipChalupa 5 лет назад +1

    Every time I see a lazy loading tutorial I wonder how to make it work without javascript. There should be some kind of a fallback. Even loading everything instantly is good enough. Javascript may be disabled, fail to load, fail to execute or not be supported (e.g. basic web scraper). Is `` tag a solution? Can anybody point me in the right direction please?

    • @AndrewBone
      @AndrewBone 5 лет назад +1

      There is talk of adding lazy loading to the IMG element but it's still a proposal

    • @FilipChalupa
      @FilipChalupa 5 лет назад

      @@AndrewBone I heard about it, and look forward to it. :)

  • @inDeeenial
    @inDeeenial 5 лет назад

    Hey Paul, love your videos. Quick question (hopefully): how does lazy loading affect SEO? Any insights on the subject? Cheers!

  • @codruterdei
    @codruterdei 5 лет назад +3

    Nice intro

    • @aerotwist
      @aerotwist  5 лет назад

      Wonder if I'll fool anyone...

    • @redders6600
      @redders6600 5 лет назад

      @@aerotwist You did (commenting for a friend).

    • @aerotwist
      @aerotwist  5 лет назад

      Loooooool

  • @rainrider2
    @rainrider2 5 лет назад

    I asked myself: since loading is the first thing that happens in RAIL from a user perspective, why is it not spelled the other way around ... and then I found out :)
    P.S. Could we please hear that bass? Just a bit maybe?

    • @aerotwist
      @aerotwist  5 лет назад

      Lol yes, and no 😁🙌

  • @mutebg
    @mutebg 5 лет назад

    Thanks for the video Paul, can you share the code for the lazy-image component?

  • @jmalonzo
    @jmalonzo 5 лет назад

    Had to check my internet connection Paul!

  • @steadyannie3467
    @steadyannie3467 5 лет назад

    Hi Paul, thanks for very informative video. What's the music playing in background?

    • @aerotwist
      @aerotwist  5 лет назад

      It's all from Epidemic Sound. If there's a particular track let me know and I'll point you at it

  • @martinjaskulla2363
    @martinjaskulla2363 5 лет назад

    Why not share the code? Would be much appreciated! Great video btw!

  • @NeoChromer
    @NeoChromer 5 лет назад

    stupid question, these techniques (RAIL) are technology agnostic, right ?

    • @aerotwist
      @aerotwist  5 лет назад +1

      Not stupid, yes they are. They are based on human perception. How you achieve them is then a matter of craft and art.

  • @BogdanTeodoru
    @BogdanTeodoru 5 лет назад

    Where are my music links... :(

  • @nathsimpson
    @nathsimpson 5 лет назад

    I fell for it! 😂

  • @Aly_Fahmy
    @Aly_Fahmy 3 года назад

    Why has he stopped making videos??

  • @sahilsatishkumar
    @sahilsatishkumar 5 лет назад

    I for once thought my internet's gone.

  • @baldurpan
    @baldurpan 5 лет назад

    Would you update vscode already!
    That update badge is driving me bonkers. :)

    • @aerotwist
      @aerotwist  5 лет назад +1

      Lol I just don't care 😂

    • @aerotwist
      @aerotwist  5 лет назад +1

      I mean, I will but 🤷‍♂️

  • @bibekthapa9468
    @bibekthapa9468 5 лет назад

    great! I can get link to the code.

  • @Cleberfsantana
    @Cleberfsantana 5 лет назад

    Ha! Didn't get me! :D

    • @aerotwist
      @aerotwist  5 лет назад +2

      Whatever. I'm hilarious.

  • @DenisTRUFFAUT
    @DenisTRUFFAUT 5 лет назад

    Also check this : ruclips.net/video/tHJwRWrexqg/видео.html

  • @AmxCsifier
    @AmxCsifier 5 лет назад

    Oh not this! Oh wait.. pun detected

    • @aerotwist
      @aerotwist  5 лет назад +1

      I have no defence.

    • @aerotwist
      @aerotwist  5 лет назад +1

      Oh yes I do. I'm hilarious.

  • @SAS-qq5ce
    @SAS-qq5ce 5 лет назад

    First one

  • @mister_azz
    @mister_azz 5 лет назад

    First on last