Critical CSS + Fail 🧨

[@sekenikola]

Great episode. One thing. You didn't have to install audit extension. It's integrated into Chrome. Just go to inspect mode and click on two arrows in the menu bar.

[@OfficialDevTips]

HAHA what! Mind blown! You're right.

[@malith_videco]

Yeah i was thinking the same.

[@davidluhr]

@@OfficialDevTips Yep! It's awesome. More specifically, it's under the "Audits" tab in Dev Tools.

[@GifCoDigital]

Yea and not to mention you can test local files when you use the built in lighthouse!! lol

[@thommoraisdarosa]

@@OfficialDevTips And since you both have puppeteer installed already, you can use lighthouse CLI

[@v.bourdeix]

I love watching you guys struggle to achieve every small things >< ! It feels exactly like real life (in particular with IT things), when all should be so simple in theory but depending on various factors, you have a hard time getting started :-) Thank you for keeping this stuff and showing the world you too are facing failures ^^.

[@OfficialDevTips]

Yay thanks for the encouragement!

[@GifCoDigital]

This was a perfect mix of editing out / speeding up pointless parts but keeping the back and forth of trying to figure things out! Great job! :)

[@OfficialDevTips]

Thanks!!

[@jagdishpatil02]

I am writing CSS for almost 1 year and never introduced to this topic. Thank you for bringing it to the show.

[@Zealotux]

If don't think you actually deferred the loading of your full CSS file though which might explain the worst performance, I did some testing on my side and I actually got a huge improvement (from 3600ms to 1750ms for FMP) by loading my full CSS this way: , there are much better ways of deferring CSS (this one doesn't have a noscript fallback) but it's enough for testing purpose. Give it a try and tell me what you think!

[@OfficialDevTips]

Thanks for the idea! Something like that seems nicer. Yeah you could also set it as , would have the same effect I think. To keep it simple and understandable we just put the links at the end to have it run on "page load".

[@BossShivaji]

This video has fantastic quality and great mental strength. Also good timing with ze offer, been looking for a good domain for my coding site.

[@OfficialDevTips]

Stock up on those .techs!

[@JonPreece]

I've complained about the last few videos. I'd like to say that this video was considerably better. Interesting content, better preparation, and I enjoyed seeing you guys encounter the same kind of issues I encounter of a regular basis!

[@OfficialDevTips]

Thanks for the encouraging words!

[@JacobMGEvans]

I personally appreciated the effort to prepare. I also like that even though it "Failed" it was successfully finished and would be a good place to start from again for either people learning stuff to continue from or for you all to continue it if you ever want too. Great work!

[@this.channel]

8:10 Thank you for putting that in. It means so much to me that I hear this from my peers, so I know I'm not a total failure.

[@OfficialDevTips]

We are all total failures!

[@TomHacks]

Suggestion - 23:13 - isn't that what rel="preload" is for? If you want to minify the css even further the npm package "minimalcss" is a better alternative (opinionated). It'll extract useless unused fonts (just like in you case) as well + it'll even recognise style "after" javascript things are loaded. It also skips the manual css loading things, though. Killer...

[@sarahadi45]

Love your videos and the struggles you go through. Keep it up guys !

[@rw251]

I've found that using lighthouse in incognito mode is more consistent as it doesn't load any extensions.

[@Soundtech98]

Interesting to watch. I wonder if the Throttling Settings had an impact on the results. The initial benchmark (4:38) did not appear to have been throttled, all subsequent readings were taken after you had played with the 3G speeds - maybe it's somehow related? When is the Online Business series continuing? It's so informative - always looking forward to it at the end of the week, watching in anticipation.

[@OfficialDevTips]

The online business will continue when it continues! It's mainly David's project and he has another job so it is very much based on his workload. We're also looking forward to more of it. Thanks for the support!

[@mtheoryx83]

You can run 'npx ws' for a super quick no-install webserver! `npx` can run node modules without requiring an install and a package.json. And ws just spins up a server in that directory. It's presumably faster than pushing up something to `now` for quick experiments like your lighthouse test from a local file.

[@maximemoreau711]

Oh thanks! I didn't know about ws :)

[@ashbash986]

How's the agency app going? are they still making videos about it?

[@justfly1984]

Guys, you don't need a plugin, you just need to open Audit tab in chrome's inspector

[@mikecks]

The difference between the results Daniel was seeing compared to MPJ may be the throttling option in lighthouse. I find it massively changes the results I get, also you don't need the extension anymore - lighthouse is baked into the chrome audits tab.

[@nickwoodward819]

i like the unpreparedness and anger. keep it up.

[@OfficialDevTips]

Mental note: schedule very early recordings to get Mattias into grumpy-and-angry mode.

[@mllr_nyc]

31:02 I'm dying 😂 ... great show

[@simoneicardi3967]

I Still love this format just because it's so real, I learn something and it makes feel less "alone" in some ways :-)

[@rajashekhar433]

What about performance tab...

[@zeocamo]

thanks, the massing up is so fun

[@foobar8478]

Never tried this. Even though you guys didn't see the results you wanted I'm still going to give it a shot and see if I notice any improvement. Thanks.

[@HashimWarren]

i started pairing because of these videos. I no longer feel self conscious about running into walls in front of another person.

[@Archil1997]

lighthouse is included in the recent versions of chrome. you don't need to install the extention, it's in the chrome devtools.

[@OfficialDevTips]

Chrome Dev Tools are so good. Having such a great thing and people like us don't even know about it. There should be some tutorials on Chrome Dev Tools!

[@kamaboko1]

"Above the fold" is often heard in Weight Watchers, but the meaning is very different.

[@bookwormhead]

Can this be apply in CMS platform like WordPress without breaking the site?

[@OfficialDevTips]

Yes!

[@qianj.j.5919]

love it. thanks for your help

[@jacksonlenhartmusic]

Watching developers fail at CSS is my new favorite form of entertainment :) Edit: Now further into the video, I realize this is more failing at web profiling rather than css. I will leave the above though because this comment is a fail in and of itself!

[@OfficialDevTips]

Haha thanks for updating and sharing your progress

[@mattcroat]

I love you guys! Keep it real.

[@nathantorquato9777]

`to the people who are like: "you're not prepared".. screw you.. that's what real development is like` - MPJ, the legend LOL 😂😂😂

[@OfficialDevTips]

He's a quote generator. We should build some JavaScript around his mouth to capture the quotes.

[@shauntricks]

Where do you get all those cool stickers that Everybody has on their laptops

[@rajashekhar433]

For fast rendering can we use puppetter prerender npm plugin which is from google

[@OfficialDevTips]

I could be wrong, but I think it simply renders down the JS app. It doesn't move around the CSS to get the critical loaded first when the browser tries to parse and draw the page.

[@rajashekhar433]

DevTips please provide videos on nodejs.im confused what need to learn for beginners

[@justfly1984]

One more thing - CSS above the fold is useful only if it is less than 12k, cos there is a limit on initial packet size. Optimize your CSS selectors guys)

[@OfficialDevTips]

Yeah of course. We just took a random site on the internet that we don’t control.

[@justfly1984]

Guys, why don't you go to South East Asia for a month? you can work from a villa on the coast of the ocean for a difference, with enough sunlight!

[@oktavic777]

Inlining external resources in my opinion is a bad idea, because this resources can't be cached.

[@chrsbll]

In some situations it's a good idea, because you can also cache your html

[@maximemoreau711]

For critical css it's a really good idea, no extra request. But be aware to have a small amount of css inlined, don't fall into "oh yeah, I'll inline everything!" ;)

[@philmirez]

MPJ’s meme game is on point.

[@OfficialDevTips]

The creator of FFF is also an MMM: MPJ MEME MACHINE

[@BlueClarification]

I like you guys the way you are

[@bibibobs]

9:53 I would've wrapped a div with the id critical around the image and visible content and pointed to the children from the #critical div and pasted those styles in the head

[@bibibobs]

I'd like to add that you should aim for 16/9 and 18/9 (9/16, 9/18) devices

[@justfly1984]

Don't use extension, use Audit tab in chrome!

[@MrRicharddaniel]

Wait so .tech domains is 95% off and then additional 10% off ? is my maths wrong here?

[@OfficialDevTips]

I don't know the details, but I _think_ they will subtract 10% off what's left after having subtracted from the first offer.

[@JasonStoudt]

The pushback is real

[@zeocamo]

and yes you want it in the html

[@marcinkrysinski1566]

I like some fails in yours videos

[@isatriya2]

God damned! Both of u are not well prepared as hell!! There is a "css" feature to read the css file 😅

[@Rob-ib8xw]

thank you!

[@jorge0092]

awesome content... real code and not overly scripted

[@OfficialDevTips]

Thank you!

[@natqe4049]

thanks boys

[@CoderPranav]

8:03 r/WatchPeopleDieInside

[@AntonKristensen]

Like to see you guys fail! Just shows the reality :D Keep it up! :)

[@OfficialDevTips]

THANKS!

[@voxel8606]

I Love devTips this chanel changed mm live but can you make shorter Videos ? The topics are nice but I don‘t like 30min Videos cut it nice and Short 😉

[@LNTutorialsNL]

At around 2:07 your home address is visible

[@OfficialDevTips]

Not a super big deal. You know, we live in Sweden where a lot of information like that is public already. Addresses, tax filings (how much you make) etc.

[@calebprenger3928]

Here is a great tip, make a website as fast as you can without doing a bunch of extra crap. That is the real world

[@bhupinderbhattarai244]

1st view