The ultimate guide to web performance

Learn how to analyze and optimize the performance of any website. In this tutorial, we explore tips and tricks to build faster UIs that are ideal for search engine optimization.
#webdevelopment #javascript #css
🔥 Become a PRO member fireship.io/pro
💵 Use code BEYOND25 to save 25%
Unlighthouse github.com/harlan-zw/unlighth...
Web Vitals Plugin web.dev/debug-cwvs-with-web-v...

Пікірлер: 324

  • @ImaDoofus
    @ImaDoofus Жыл бұрын

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

  • @PawitSahare

    @PawitSahare

    Жыл бұрын

    Ok bro

  • @iercan1234

    @iercan1234

    Жыл бұрын

    you're the guy from hypixel housing right

  • @randxalthor

    @randxalthor

    Жыл бұрын

    Simpleton

  • @sabrinakingsley798

    @sabrinakingsley798

    Жыл бұрын

    I see this comment on every video

  • @medaliboulaamail6491

    @medaliboulaamail6491

    Жыл бұрын

    I'm an even simpler man I see my brother then I smash with him

  • @radi4nt_
    @radi4nt_ Жыл бұрын

    likes.

  • @NoorquackerInd

    @NoorquackerInd

    Жыл бұрын

    _inside_ of you???

  • @brooksgunn5235

    @brooksgunn5235

    Жыл бұрын

    Hol up

  • @owenwexler7214

    @owenwexler7214

    Жыл бұрын

    somebody just ran a detailed Lighthouse analysis on PH lmao

  • @ranaakhil

    @ranaakhil

    Жыл бұрын

    Waitt a minnuuttee

  • @kamehameha38

    @kamehameha38

    Жыл бұрын

    something ain't right

  • @aryangavale4878
    @aryangavale4878 Жыл бұрын

    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

    Жыл бұрын

    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

    9 ай бұрын

    Jeff is da man

  • @ThePersonWhoKnocks
    @ThePersonWhoKnocks Жыл бұрын

    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!

  • @Patrity
    @Patrity Жыл бұрын

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

  • @omnilothar

    @omnilothar

    Жыл бұрын

    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?

  • @michaelai8274
    @michaelai8274 Жыл бұрын

    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

    Жыл бұрын

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

  • @moritz759

    @moritz759

    8 ай бұрын

    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.

  • @loaded_with_hay
    @loaded_with_hay Жыл бұрын

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

  • @martinchya2546
    @martinchya2546 Жыл бұрын

    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.

  • @MatVids2
    @MatVids2 Жыл бұрын

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

  • @emilz0r

    @emilz0r

    Жыл бұрын

    😬📸

  • @Nagrajvasu

    @Nagrajvasu

    Жыл бұрын

    😳📸

  • @gappsanon4869

    @gappsanon4869

    8 ай бұрын

    Ouch!

  • @speedandpower8577

    @speedandpower8577

    8 ай бұрын

    ayo

  • @thefynn
    @thefynn Жыл бұрын

    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.

  • @SurprisedSyrup
    @SurprisedSyrup Жыл бұрын

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

  • @NotTheHeroStudios
    @NotTheHeroStudios Жыл бұрын

    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

  • @rukeeojigbo2221
    @rukeeojigbo222111 ай бұрын

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

  • @universaltoons
    @universaltoons Жыл бұрын

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

  • @AmxCsifier

    @AmxCsifier

    Жыл бұрын

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

  • @eviltom8783

    @eviltom8783

    Жыл бұрын

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

  • @ArthurKhazbs

    @ArthurKhazbs

    Жыл бұрын

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

  • @p_o_z_e
    @p_o_z_e Жыл бұрын

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

  • @atirpok3
    @atirpok3 Жыл бұрын

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

  • @thelateweeb2799
    @thelateweeb2799 Жыл бұрын

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

  • @SAMs3piol
    @SAMs3piol Жыл бұрын

    Dude, this Beyond Fireship stuff is pure gold.

  • @almightytony09
    @almightytony09 Жыл бұрын

    Great video Jeff! Love the info!

  • @svilen12345
    @svilen12345 Жыл бұрын

    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

  • @oc4725
    @oc4725 Жыл бұрын

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

  • @roid1510
    @roid1510 Жыл бұрын

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

  • @lpanebr
    @lpanebr Жыл бұрын

    Amazing content. Exponential value per minute. Thanks.

  • @nicomirinda
    @nicomirinda Жыл бұрын

    oh god, I learn so much from your (

  • @HARIKRISHNANSRSRSHD
    @HARIKRISHNANSRSRSHD Жыл бұрын

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

  • @ComradeTomatoTurtle
    @ComradeTomatoTurtle11 ай бұрын

    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.

  • @onthegocode1443
    @onthegocode1443 Жыл бұрын

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

  • @addidix

    @addidix

    Жыл бұрын

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

  • @hyper_channel

    @hyper_channel

    Жыл бұрын

    @@addidix yes

  • @moatez
    @moatez Жыл бұрын

    Great video ❤, more on performance pls 🎉

  • @xcrap
    @xcrap9 ай бұрын

    That UnLighthouse is really helpful! Thanks a lot :)

  • @dennis9566
    @dennis9566Ай бұрын

    That's the perfect beginning!

  • @TechDiffuse
    @TechDiffuse Жыл бұрын

    Awesome video! Keep up the great work!

  • @ralfllanasas4258
    @ralfllanasas4258 Жыл бұрын

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

  • @ben_sch
    @ben_sch Жыл бұрын

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

  • @7bagette
    @7bagette Жыл бұрын

    Thank you so much for unlighthouse!!!

  • @austinamento
    @austinamento Жыл бұрын

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

  • @hakuna_matata_hakuna
    @hakuna_matata_hakuna Жыл бұрын

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

  • @YuriG03042

    @YuriG03042

    Жыл бұрын

    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

  • @vaisakhkm783

    @vaisakhkm783

    Жыл бұрын

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

  • @nixcreativecoding
    @nixcreativecoding2 ай бұрын

    Awesome content! 🔥🔥

  • @ricardocnn
    @ricardocnn Жыл бұрын

    Facebook and Google tracking scripts hit a lot the performance

  • @kr30000

    @kr30000

    Жыл бұрын

    Did you look into partytown?

  • @jondoe6608

    @jondoe6608

    Жыл бұрын

    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.

  • @YatharthVerma
    @YatharthVerma8 ай бұрын

    Great Video. Learnt a lot. thanks

  • @subinaypanda9936
    @subinaypanda9936 Жыл бұрын

    Your sense of humour is really beyond fireship

  • @PranavKunjir
    @PranavKunjir Жыл бұрын

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

  • @ShahriarAhmedShovon
    @ShahriarAhmedShovon Жыл бұрын

    True gem. Thanks.

  • @nagesh007
    @nagesh00711 ай бұрын

    Awesome Info 😍, Thanks

  • @UmanPC
    @UmanPC Жыл бұрын

    Definitely a big LIKE from me

  • @atomisku
    @atomisku Жыл бұрын

    This guy does it yet again

  • @NicolasSilvaVasault
    @NicolasSilvaVasault Жыл бұрын

    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

  • @brNoMundo123
    @brNoMundo123 Жыл бұрын

    Great video!

  • @chromevillager
    @chromevillager Жыл бұрын

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

  • @sullivanb2306

    @sullivanb2306

    Жыл бұрын

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

  • @chaseclingman
    @chaseclingman Жыл бұрын

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

  • @baggier
    @baggier Жыл бұрын

    10% web development guide 90% horny goat weed

  • @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)

  • @40fps143
    @40fps143 Жыл бұрын

    Whenever I see a new fireship video I come fast.

  • @codename_enzo
    @codename_enzo Жыл бұрын

    I like this video even before I start watching it

  • @rdec5448
    @rdec5448 Жыл бұрын

    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.

  • @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😉

  • @markilabot14
    @markilabot14 Жыл бұрын

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

  • @zeeshannagori007
    @zeeshannagori007 Жыл бұрын

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

  • @nanow1990
    @nanow1990 Жыл бұрын

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

  • @lewismuriungi4564
    @lewismuriungi45645 ай бұрын

    Amazing content

  • @freakfreak786
    @freakfreak7862 ай бұрын

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

  • @wmcphail
    @wmcphail Жыл бұрын

    thank you!

  • @Sooyush
    @Sooyush Жыл бұрын

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

  • @LukasSoftwareDeveloper
    @LukasSoftwareDeveloper Жыл бұрын

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

  • @marius1029
    @marius1029 Жыл бұрын

    great video 🎉

  • @SKRUBL0RD
    @SKRUBL0RD Жыл бұрын

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

  • @hipdev_
    @hipdev_ Жыл бұрын

    🔥 content!

  • @NotesNNotes

    @NotesNNotes

    Жыл бұрын

    🔥🚢 content!

  • @gotoastal
    @gotoastal Жыл бұрын

    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.

  • @radezzientertainment501
    @radezzientertainment501 Жыл бұрын

    this is fantasmic

  • @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

    Жыл бұрын

    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.

  • @7heMech
    @7heMech Жыл бұрын

    Didn't expect the hub reference

  • @user-dx8om6dl9p
    @user-dx8om6dl9p Жыл бұрын

    Hi, great vid, just one note on the use of unlighthouse, you must add --throttle to the command line, without it you won't see genuine lighthouse results

  • @user-ec6mo9yn5r
    @user-ec6mo9yn5r4 ай бұрын

    cool video)

  • @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

  • @dave6012
    @dave6012 Жыл бұрын

    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 😄

  • @sm2azad255
    @sm2azad255 Жыл бұрын

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

  • @DioArsya
    @DioArsya Жыл бұрын

    astro literally sick

  • @pepperpeterpiperpickled9805
    @pepperpeterpiperpickled9805 Жыл бұрын

    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?!"*

  • @pepperpeterpiperpickled9805

    @pepperpeterpiperpickled9805

    Жыл бұрын

    Wait, did you guys read that last part?

  • @OkayNoway
    @OkayNoway Жыл бұрын

    Why did you censor github?

  • @laniquo
    @laniquo Жыл бұрын

    "Aspect Ratio: 69/420" 😂

  • @roodiger
    @roodiger Жыл бұрын

    Can you use unlighthouse for projects that use an MVC model like laravel? I tried it on my product, and it wouldn't mind any routes. I then tried just feeding it directly the URL's for my projects 10 biggest webpages, and it ignored the routes in the URL so it didn't work.

  • @tommyhetrick
    @tommyhetrick Жыл бұрын

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

  • @gururajchadaga
    @gururajchadaga5 ай бұрын

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

  • @nielskersic328
    @nielskersic328 Жыл бұрын

    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

  • @deepjoshi356
    @deepjoshi356 Жыл бұрын

    How would the unlighthouse website performed on unlighthouse analysis?

  • @universaltoons
    @universaltoons Жыл бұрын

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

  • @s0ulweaver
    @s0ulweaver Жыл бұрын

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

  • @johnychinese
    @johnychinese Жыл бұрын

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

  • @jaejonmalloy1341
    @jaejonmalloy134111 ай бұрын

    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.

  • @HemstitchedIrony
    @HemstitchedIrony Жыл бұрын

    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.

  • @poulticegeist

    @poulticegeist

    Жыл бұрын

    Thanks, Rich Harris

  • @Jamiered18
    @Jamiered18 Жыл бұрын

    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.

  • @Makwaje
    @Makwaje5 ай бұрын

    Astro is wild

  • @HariHaran_10
    @HariHaran_10 Жыл бұрын

    How to enable that console ligging optionsi cant find

  • @itgeltgankhulug5874
    @itgeltgankhulug5874 Жыл бұрын

  • @pratikbhetwal3670
    @pratikbhetwal3670 Жыл бұрын

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

  • @milanpaudyal7671
    @milanpaudyal7671 Жыл бұрын

    I was unable to try unlighthouse by following the docs. Can anyone who have tried it help me.

  • @tenebrae1191
    @tenebrae119111 ай бұрын

    👏

  • @iankamandew9777
    @iankamandew9777 Жыл бұрын

    Here for the memes!😄

  • @basil127
    @basil127 Жыл бұрын

    Is unlighthouse work for spa?

  • @colinmaharaj
    @colinmaharaj11 ай бұрын

    HGW ordering is important

  • @anushibinj
    @anushibinj Жыл бұрын

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