Advertisement

Easily improve any website with LIGHTHOUSE

Easily improve any website with LIGHTHOUSE Written version of this tutorial:
Source code: mountaindew.com

Today we'll be exploring one of my favorite tools: L i G h T h O u S e!! Like this video if u like #Google or the #chrome team or just lighthouses in general or πŸ¦’

πŸ‘¨πŸ»‍πŸ’» QUESTIONS
➜ Should I stick to coding videos?
➜ Steak too codin?
➜ Stique to code?
➜ STICK TO CODING?!

πŸ₯° Thanks to the maintainer(s):
Paul Irish (lol he'll never watch this video πŸ˜‚)

⭐ RECAP:
⌨️ 0:15 what is Google' #Lighthouse
⌨️ 0:21 too real πŸ˜”πŸ˜‹
⌨️ 0:45 Native developers
⌨️ 0:53 History lesson
⌨️ 1:29 Getting started
⌨️ 1:30 Side-tracked
⌨️ 1:58 Truly random, prolly should have rehearsal'd
⌨️ 2:10 Audits tab
⌨️ 2:33 User Agent
⌨️ 3:00 Throttling
⌨️ 3:31 P R O T I P
⌨️ 3:45 Running an audit
⌨️ 4:05 "tutorial"
⌨️ 4:25 #npm speedline
⌨️ 4:38 TTI
⌨️ 5:00 Channel Rules 1: I don't know what I'm talking about
⌨️ 5:19 Beginning of the #tutorial
⌨️ 5:26 End of the tutorial
⌨️ 5:40 I'm describing the `font-display` attribute btw. It's cool, look it up! I'm adding it to expo-font here
⌨️ 6:02 We don't deserve these godly tools
⌨️ 6:09 Channel Rules 2: No cool stuff in my videos!!
⌨️ 6:33 Here we go...
⌨️ 6:35 If I'm not allowed to post videos anymore, this is why...
⌨️ 6:41 #Flutter God
⌨️ 6:43 πŸ¦’
⌨️ 6:50 πŸŒ³πŸ¦’
⌨️ 6:57 πŸ”ŽπŸ¦’
⌨️ 7:00 πŸ¦’πŸŒŠπŸ¦’πŸŒŠ
⌨️ 7:06 πŸŽ΅πŸ”½
⌨️ 7:08 πŸ¦’πŸŒˆ
⌨️ 7:14 πŸŽ₯πŸš«πŸ¦’
⌨️ 7:19 IMG srcset
⌨️ 7:25 πŸ—ΏπŸ¦’
⌨️ 7:30 MASTER FRAMEWORK #WORDPRESS
⌨️ 7:33 πŸ¦’CDN
⌨️ 7:41 πŸ¦’πŸ‘…Manually
⌨️ 7:45 Photoshop
⌨️ 7:46 run `expo optimize` in a project to optimize the images. Really you should combine this option with one of the others
⌨️ 7:50 Man there are so many jumps in this video
⌨️ 7:58 Render Blocking
⌨️ 8:17 daddy
⌨️ 8:26 This is actually pretty useful
⌨️ 8:43 REMEMBER TO DISABLE THIS LATER
⌨️ 9:25 Sorry I couldn't resist adding some code :]
⌨️ 9:29 Hentag
⌨️ 9:57 Quick math
⌨️ 10:09 The ballad of Evan Bacon
⌨️ 10:21 Passed audits
⌨️ 10:42 #Expo Web (beta) 😎
⌨️ 10:51 it's not that good... yet πŸ˜›
⌨️ 10:56 A N O T H E R P R O T I P
⌨️ 11:36 I cut a lot of the other examples out cuz this video was getting a little too wild

Thanks for watching and reading! If you have any mo' questions feel free to inbox me on instagram 😁 @baconbrix πŸ₯“

SEO (πŸ˜…)

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

You can run #Lighthouse in #Chrome #DevTools, from the command line, or as a #Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.

lighthouse,chrome dev tools,react,google chrome,debugging,javascript,web development,expo web,react native for web,evan bacon,ssr,improving seo,next.js,react debugging,wordpress tutorial,paul irish,react native tutorial,interview questions,css sucks,baconbrix,programming tutorial,chrome audits,web speed test,graphql,

Post a Comment

0 Comments