The ultimate guide to web performance

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

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

  • @aryangavale4878
    @aryangavale4878 Год назад +293

    The amount of knowledge he gave about web performance is just insane judging by the amount of time he told it in. This information would have been a lot harder to process if it would be told by someone other that fireship

    • @ThomPorter74
      @ThomPorter74 Год назад +7

      Agreed! I knew about LCP, but had never heard of CLS or FID. A few minutes with a Fireship video and suddenly I'm an expert. He's by far my favorite dev-related content creator.

    • @colinpickup5770
      @colinpickup5770 Год назад

      Jeff is da man

    • @AndreiGeorgescu-j9p
      @AndreiGeorgescu-j9p 3 месяца назад

      He says nearly nothing you guys are just idiots

  • @ImaDoofus
    @ImaDoofus Год назад +450

    I'm a simple man, I see a fireship video, I click.

  • @ThePersonWhoKnocks
    @ThePersonWhoKnocks Год назад +63

    This video is a gold mine for web developers! Fireship's knowledge on web performance is impressive, and he managed to explain everything in just 6 minutes and 43 seconds. I particularly appreciate his tips on LCP, FID, and CLS, and I can't wait to apply them to my projects. Thank you for another amazing video, Beyond Fireship!

  • @michaelai8274
    @michaelai8274 Год назад +42

    There was a time I used to think about what exactly companies required retaining web developers for after the initial website build and deployment, and its later I discovered the functionalities of dynamic websites, time series apps, things like this video - performance which requires continuous integrations possibly, website updates, ui updates, etc. With these little and many more, I discovered yeah, its actually work - work, work, work, work...
    On my journey to becoming a web developer btw.

    • @shivankbatra5643
      @shivankbatra5643 Год назад +3

      same man same, its an ocean when you peek into it

    • @moritz759
      @moritz759 Год назад +2

      I got the chance to have a look at web developers work in two awesome companies and what I discovered is that there’s basically always work left to do. Whether it’s bug fixing, adding new features or improving the site. You really need a team of skilled developers just to maintain a large site.

  • @universaltoons
    @universaltoons Год назад +76

    Fireship puts so much effort in his videos that I can feel it coming inside of me

    • @AmxCsifier
      @AmxCsifier Год назад +35

      Wtf with these inside of me jokes? Is this some kind of an inside joke? Wait.... 🤦‍♂

    • @eviltom8783
      @eviltom8783 Год назад +1

      ​@@AmxCsifierI believe they just copied the tip comment for likes.

    • @ArthurKhazbs
      @ArthurKhazbs Год назад +3

      @@AmxCsifier They're probably making naughty comments just because the P. Hub was mentioned in this video

  • @MatVids2
    @MatVids2 Год назад +44

    Fireship really knows how to take his concept and jam it right where I need it the most. Thanks, Jeff!

  • @NotTheHeroStudios
    @NotTheHeroStudios Год назад +7

    the level quality Jeff puts out is incredible. It feels like he has an entire team behind him, but from what I know, its just him

  • @Patrity
    @Patrity Год назад +93

    Unlighthouse has been a great help to my workflow. Awesome tool!

    • @omnilothar
      @omnilothar Год назад +2

      it is not an extension? so I need to have nodejs in local, clone the repo, and npm install then run the npx within the same dir?

  • @atirpok3
    @atirpok3 Год назад +14

    That is definitely the perfect aspect ratio for all images. Definitely superior to the golden mean.

  • @martinchya2546
    @martinchya2546 Год назад +4

    As for general website optimization, image lazy-loading is quite low-hanging fruit. It can shave few seconds on LCP for unoptimized sites due to resource competition in critical rendering path. And you can turn the optimization with single attribute nowadays.

  • @thefynn
    @thefynn Год назад +20

    Thank you for that video, just a few hours ago searched for layout shift issues because my build has horrible layoutshifts for no reason. Your video came in the right moment.

  • @loaded_with_hay
    @loaded_with_hay Год назад +1

    I had heard about those before but could never remember which was which. Now everything is crystal clear. Good job.

  • @rukeeojigbo2221
    @rukeeojigbo2221 Год назад +1

    Wow!!!!!!!!!!! Men, how you break things down so clearly and in such a practical manner is beyond me. Thanks a lot for this video

  • @hakuna_matata_hakuna
    @hakuna_matata_hakuna Год назад +8

    am so glad you're off theAI hype train and dripping awesome practical content again

    • @YuriG03042
      @YuriG03042 Год назад +1

      he has never been on the hype train? he just reports AI news when it's relevant, but he says that AI won't take our jobs

    • @vaisakh_km
      @vaisakh_km Год назад +3

      @@YuriG03042 atleast he is out of that...

  • @radi4nt_
    @radi4nt_ Год назад +1184

    likes.

  • @p_o_z_e
    @p_o_z_e Год назад +2

    Scary timing as i have just been tasked with trying to find these kind of performance bottlenecks, awesome video like always!

  • @onthegocode1443
    @onthegocode1443 Год назад +13

    Awesome stuff, now I'm going to use this to optimize my portfolio

    • @return0328-i5r
      @return0328-i5r Год назад +33

      need my simple black and white single page portfolio to be blazingly fast

    • @hyper_channel
      @hyper_channel Год назад +1

      @@return0328-i5r yes

  • @oc4725
    @oc4725 Год назад +1

    Thanks alot for helping the world become more efficient and familiar with high quality web development

  • @SurprisedSyrup
    @SurprisedSyrup Год назад

    I'm so glad I found this channel, learning so much new stuff on every single video

  • @SPYTHandle
    @SPYTHandle Год назад

    I used to work for this WP plugin Nitropack, which did wonders with these metrics. Loading critical resources first and separating above-the-fold content for priority load. A-level

  • @subinaypanda9936
    @subinaypanda9936 Год назад

    Your sense of humour is really beyond fireship

  • @SAMs3piol
    @SAMs3piol Год назад

    Dude, this Beyond Fireship stuff is pure gold.

  • @ComradeTomatoTurtle
    @ComradeTomatoTurtle Год назад

    It’s amazing what you fit in such a short video when I spent weeks learning to optimize all sorts of websites for speed. I still spend hours on this for clients, but lighthouse is not the best way to check page performance, I find gtmetrix a better tool. Lighthouse gets negativity effected by chrome extensions and thus have to perform it incognito or turn extensions off.

  • @HARIKRISHNANSRSRSHD
    @HARIKRISHNANSRSRSHD Год назад

    Amazing. You are doing an awesome job for the tech community.
    I dont have words to express the gratitude.

  • @gotoastal
    @gotoastal Год назад +1

    I would add JPEG-XL to modern image formats; slap it in your picture elements and image-sets now so browsers know your site wants supports (some forks do support it).
    CDN can often time be an expensive premature optimization. I don't think folks should blindly assume they need one in a lot of cases. “Workers” can be overkill too. The free services will go the way of Heroku in the future and drop their free tier so it’s better to avoid if you can. Frameworks like Qwik don’t even work with out JavaScript which circles back to many sites don’t need more than HTML, a single CSS file, and sparing JavaScript for enhancement; so many sites are broken with ‘optimizations’ that make things worse. The added complexity can just as much add cost to maintenance and development.

  • @austinamento
    @austinamento Год назад

    I hope you never stop making videos or else my job will be at risk!

  • @nicomirinda
    @nicomirinda Год назад

    oh god, I learn so much from your (

  • @thelateweeb2799
    @thelateweeb2799 Год назад

    These videos are great I can feel all the hard work inserted inside

  • @ben_sch
    @ben_sch Год назад

    Glad to see Astro crushing it in the Unlighthouse reports. Am using it for my next client project 😁

  • @OkayNoway
    @OkayNoway Год назад +41

    Why did you censor github?

  • @roid1510
    @roid1510 Год назад

    Thank you for this great tutorial. Id love to hear more towards accessibility

  • @yuanqili7104
    @yuanqili7104 2 месяца назад

    Accidentally opened this video and you made it 🎉

  • @lpanebr
    @lpanebr Год назад

    Amazing content. Exponential value per minute. Thanks.

  • @redabelouch6776
    @redabelouch6776 Год назад

    Hell no, you don't need to capture my attention. I see a fireship video, i sit down, click, and focus with the video😉

  • @chaseclingman
    @chaseclingman Год назад +33

    I think more importantly is that developers need to focus on the instant gratification that the user gets when the page loads.

  • @Sooyush
    @Sooyush Год назад +1

    fireship was in Demon level of educational content delivery, now he's just Dragon level heading to God.

  • @ricardocnn
    @ricardocnn Год назад +11

    Facebook and Google tracking scripts hit a lot the performance

    • @kr30000
      @kr30000 Год назад +1

      Did you look into partytown?

    • @jondoe6608
      @jondoe6608 Год назад +2

      Or even better don’t be evil and don’t have google and facebook tracking

    • @ricardocnn
      @ricardocnn Год назад

      @@kr30000 No

    • @ra2enjoyer708
      @ra2enjoyer708 Год назад

      @@kr30000 Partytown has a loads of issues with loading 3rd-party scripts.

    • @kr30000
      @kr30000 Год назад

      @@ra2enjoyer708
      I mean yea, 3-rd party scripts might always have issues depending on many factors.

  • @PranavKunjir
    @PranavKunjir Год назад

    i like how the beyond fireship became like the main channel before ai revolution!

  • @rdec5448
    @rdec5448 Год назад +5

    There is a "Browser Rendering Optimization" playlist with detailed explanation from Google employees about how it all works behind the scenes in chromium. But... it was released 7 years ago, maybe some things changed.

  • @dave6012
    @dave6012 Год назад +1

    I instantly improved my lighthouse score by doing this simple trick 😱 (fireship bots hate him)
    I disabled react developer tools 💪

    • @YuriG03042
      @YuriG03042 Год назад

      you had that enabled on prod???

    • @dave6012
      @dave6012 Год назад

      @@YuriG03042 it’s a browser extension 😄

  • @NicolasSilvaVasault
    @NicolasSilvaVasault Год назад +1

    wow even tho i'm no longer a web dev, these tools are fucking amazing, unlighthouse is stupidly useful too, i can't even believe is free, i wish we had something like this for react native or native ios/android

  • @ralfllanasas4258
    @ralfllanasas4258 Год назад

    Appreciate the detailed video. Would love to see you optimize an actual page live.

  • @xcrap
    @xcrap Год назад

    That UnLighthouse is really helpful! Thanks a lot :)

  • @markilabot14
    @markilabot14 Год назад

    Can we just appreciate the amount of meme fireship puts inside of me

  • @lynwoodcallahan7286
    @lynwoodcallahan7286 Год назад

    wtf, this is like EXACTLY the video I needed right now! Now I finally know who my NSA agent is, thanks for the clarification 👍👌 (also thank you for the very helpful video)

  • @nanow1990
    @nanow1990 Год назад

    I feed all this information to my AI and now it's able to write a fast and modern websites for me.

  • @almightytony09
    @almightytony09 Год назад +2

    Great video Jeff! Love the info!

  • @dennis9566
    @dennis9566 7 месяцев назад

    That's the perfect beginning!

  • @moatez
    @moatez Год назад +3

    Great video ❤, more on performance pls 🎉

  • @chromevillager
    @chromevillager Год назад +30

    Amazing how the college board website is bad in every one of these metrics

    • @sullivanb2306
      @sullivanb2306 Год назад +9

      collegeboard’s website makes me want to die every time I have to use it

  • @40fps143
    @40fps143 Год назад

    Whenever I see a new fireship video I come fast.

  • @HemstitchedIrony
    @HemstitchedIrony Год назад +3

    Just remember, when a measure becomes a target it stops being a good measure, lighthouse is a diagnostic tool not an optimization target, use your judgement.

  • @cody9916
    @cody9916 Месяц назад

    shout out to the w and h at 69/420, great video. very informative and learned a thing or two. 10/10

  • @7bagette
    @7bagette Год назад

    Thank you so much for unlighthouse!!!

  • @neovim.
    @neovim. Год назад

    I like this video even before I start watching it

  • @mitchbet
    @mitchbet 9 месяцев назад +2

    Has Google tried implementing these methods to their own cloud console??? Literally takes 15-45 seconds to load the page every time I click on a tab or element

  • @pratikbhetwal3670
    @pratikbhetwal3670 Год назад +3

    Also avoid JS methods that cause layout thrashing such as getBoundingClientRect(), getComputedStyles() etc.

  • @atomisku
    @atomisku Год назад

    This guy does it yet again

  • @LukasSoftwareDeveloper
    @LukasSoftwareDeveloper Год назад

    2:26 Hol up what is that href XD Fantastic video thank you

  • @pepperpeterpiperpickled9805
    @pepperpeterpiperpickled9805 Год назад +1

    this is sadly too true, I feel like that guy from the simpsons episode "barts comet" who cuts off professor frink's introduction by screaming *"QUIT STALLING; WHAT'S THE PLAN?!"*

  • @SKRUBL0RD
    @SKRUBL0RD Год назад

    this video taught me to give up on trying to make websites at all

  • @freakfreak786
    @freakfreak786 8 месяцев назад

    5:35 man that one got me real good
    almost choked
    thank you

  • @MePeterNicholls
    @MePeterNicholls Год назад +5

    Google Adsense is causing slow performance that Google Adsense doesn’t like.

  • @anushibinj
    @anushibinj Год назад +2

    2:04 you missed marking the function as an "async" function 😅

  • @TechDiffuse
    @TechDiffuse Год назад

    Awesome video! Keep up the great work!

  • @universaltoons
    @universaltoons Год назад

    is Astro better than QwikCity and/or SolidStart in terms of performance?

  • @Jamiered18
    @Jamiered18 Год назад +2

    This is all foreign to me. Building an enterprise web app that our clients open at the start of the day, then leave open. It's actually preferable for us to have some delay on first load, get it all in the cache, and then a smooth experience after that.

  • @baggier
    @baggier Год назад +3

    10% web development guide
    90% horny goat weed

  • @7heMech
    @7heMech Год назад

    Didn't expect the hub reference

  • @YatharthVerma
    @YatharthVerma Год назад

    Great Video. Learnt a lot. thanks

  • @zeeshannagori007
    @zeeshannagori007 Год назад +1

    Great 🎉
    Can you also make a video on how can we optimise 3rd libraries to improve the performance of the website?

  • @nielskersic328
    @nielskersic328 Год назад +7

    By far the most common cause of unexpected CLS I come across is Google ads that keep changing size. It would be nice if they could do something about that

  • @nixwebdev
    @nixwebdev 8 месяцев назад

    Awesome content! 🔥🔥

  • @UmanPC
    @UmanPC Год назад

    Definitely a big LIKE from me

  • @nagesh007
    @nagesh007 Год назад

    Awesome Info 😍, Thanks

  • @s0ulweaver
    @s0ulweaver Год назад

    This topic is fine, the video is fine, the comments are fine except a few comments are inside me.

  • @ShahriarAhmedShovon
    @ShahriarAhmedShovon Год назад

    True gem. Thanks.

  • @gururajchadaga
    @gururajchadaga 11 месяцев назад

    I would love the see an aspect ration of 69/420 in production.
    Hilarious, thanks for the good laugh along with kickass content.

  • @tommyhetrick
    @tommyhetrick Год назад

    The irony of me just without thinking double clicking the right side of the screen after the first line 😂

  • @hipdev_
    @hipdev_ Год назад +2

    🔥 content!

  • @sm2azad255
    @sm2azad255 Год назад

    please make a video on sql optimization, it will be very helpful.

  • @wmcphail
    @wmcphail Год назад

    thank you!

  • @radezzientertainment501
    @radezzientertainment501 Год назад

    this is fantasmic

  • @brNoMundo123
    @brNoMundo123 Год назад

    Great video!

  • @johnychinese
    @johnychinese Год назад +1

    Nextjs: add few default html properties to img tag: we fix the image tag😁

  • @lewismuriungi4564
    @lewismuriungi4564 Год назад

    Amazing content

  • @Emanuele-mw8hc
    @Emanuele-mw8hc Год назад

    Look man, you do a video with that blue thing floating around and I could listen to you for an hour

  • @marius1029
    @marius1029 Год назад

    great video 🎉

  • @jaejonmalloy1341
    @jaejonmalloy1341 Год назад

    Not a huge fan of the yellow furniture, but mad respect to any mother fucker that runs a blade brace; guaranteed shoulder bruising... And now a felony, because reasons.

  • @vitormalencar
    @vitormalencar Год назад

    I think the tool is great, but I've noticed some differences when running it on my CI. I already have a setup that checks for Lighthouse scores, and I've found that there's a significant gap between the scores in production and those reported by the tool. For example, while the production score is around 75 (which seems correct), the same page scores 95 on Unlighthouse.

    • @martinchya2546
      @martinchya2546 Год назад +1

      Lightouse is not a tool meant to be comparable between different machines/environments. Only compare LH audits to another LH audits on the same machine. Its heavly influenced by your network speed, operating system, cpu hardware, etc. There is no point comparing scores on CI vs your personal machine. Even tools like WPT and GSPI both use LightHouse under the hood, yet you will get vastly different scores using them.

  • @DaviAreias
    @DaviAreias Год назад +11

    Or pay 250$ for a “speed optimization developer” to detect google lighthouse user agent, then run obfuscated code to serve a fake version of your website and get 100 score 🤡

  • @sushiroikura
    @sushiroikura Год назад

    regarding CLS, Google does this thing where they add "People also search for" box below the result you clicked on when you go back to the search results page from the site you clicked on. This component blows

  • @efari
    @efari Год назад

    Funny how you pronounce contentful.
    I always pronounced it content-full (both words pronounced as you would pronounce them separately, and “content” in the meaning of “there’s stuff inside”, not “happiness”).
    The way you pronounce it, imo sounds like you mean “fully satisfied” as opposed to “full of stuff”

  • @GbpsGbps-vn3jy
    @GbpsGbps-vn3jy Год назад +1

    preload as audio still not supported

  • @maloxi1472
    @maloxi1472 Год назад

    Joke's on you Jeff.
    You captured my attention well before I clicked on the video 😉

  • @DioArsya
    @DioArsya Год назад

    astro literally sick

  • @colinmaharaj
    @colinmaharaj Год назад

    HGW ordering is important

  • @toxiccan175
    @toxiccan175 Год назад +1

    The secret is using super geocached fluxcapacitors with a metamaterial mainframe subcomplex.

  • @AbhishekTiwari-tj4hj
    @AbhishekTiwari-tj4hj Месяц назад

    🔥🔥

  • @SaurabhShelar-cm5xi
    @SaurabhShelar-cm5xi Год назад

    Can you make a video tutorial on how to make Mixed Reality (AR + VR_ Apps using React native or something?

    • @kehan6252
      @kehan6252 Год назад

      I think you might need to use something like Unity for those kinds of things. React native is best used for common mobile apps like Ecommerce apps.