Critical CSS + Fail 🧨

Подписаться 353 тыс.

Просмотров 14 тыс.

50% 1

Sponsored by: .TECH, thanks! Pre-register for your .TECH domain and get a further 10% discount at go.tech/Devtips
Oookay. Improving web performance by first including only the CRITICAL CSS, then lazily loading the actual full CSS on page load.
Experimenting with Lighthouse to see how much better the first meaningful paint got. Had... some... troubles (le fail) with this.
HIGH QUALITY SOFTWARE ENGINGEERING in this video. Watch.
🗿 MILESTONES
⏯ 00:01 Just watch this entire video.
⏯ XX:XX Forgot to include fika break. 🍪
Critical CSS generator called Penthouse by Jonas Ohlsson Aden
💥 github.com/pocketjoso/penthouse
Guide to saving a page with all its assets using Puppeteer (only mentioned in passing in the video)
📝 fettblog.eu/scraping-with-pup...
The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.
💻 code.visualstudio.com/
DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
DevTips has a sister channel called Fun Fun Function, check it out!
❤️ / funfunfunction
#criticalcss #webperformance #lighthouse

Опубликовано:

15 ноя 2018

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 86

@sekenikola 5 лет назад

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 5 лет назад

HAHA what! Mind blown! You're right.

@nextifydev 5 лет назад

Yeah i was thinking the same.

@davidluhr 5 лет назад

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

@GifCoDigital 5 лет назад

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

@thommoraisdarosa 5 лет назад

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

@v.bourdeix 5 лет назад

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 5 лет назад

Yay thanks for the encouragement!

@jagdishpatil02 5 лет назад

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

@GifCoDigital 5 лет назад

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 5 лет назад

Thanks!!

@BossShivaji 5 лет назад

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 5 лет назад

Stock up on those .techs!

@Zealotux 5 лет назад

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 5 лет назад

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".

@JonPreece 5 лет назад

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 5 лет назад

Thanks for the encouraging words!

@sarahadi45 5 лет назад

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

@JacobMGEvans 5 лет назад

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!

@ashbash986 5 лет назад

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

@rw251 5 лет назад

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

@justfly1984 5 лет назад

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

@mtheoryx83 5 лет назад

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 5 лет назад

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

@qianj.j.5919 Год назад

love it. thanks for your help

@Soundtech98 5 лет назад

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 5 лет назад

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!

@this.channel 5 лет назад

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 5 лет назад

We are all total failures!

@zeocamo 5 лет назад

thanks, the massing up is so fun

@mikecks 5 лет назад

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.

@simoneicardi3967 5 лет назад

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

@mattcroat 5 лет назад

I love you guys! Keep it real.

@TomHacks 5 лет назад

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...

@foobar8478 5 лет назад

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.

@mllr_nyc 5 лет назад

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

@nickwoodward819 5 лет назад

i like the unpreparedness and anger. keep it up.

@OfficialDevTips 5 лет назад

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

@shauntricks 5 лет назад

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

@bookwormhead 5 лет назад

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

@OfficialDevTips 5 лет назад

Yes!

@Archil1997 5 лет назад

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

@OfficialDevTips 5 лет назад

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!

@rajashekhar433 5 лет назад

What about performance tab...

@HashimWarren 5 лет назад

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

@kamaboko1 5 лет назад

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

@nathantorquato9777 5 лет назад

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

@OfficialDevTips 5 лет назад

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

@Rob-ib8xw 3 года назад

thank you!

@jacksonlenhartmusic 5 лет назад

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 5 лет назад

Haha thanks for updating and sharing your progress

@rajashekhar433 5 лет назад

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

@OfficialDevTips 5 лет назад

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 5 лет назад

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

@natqe4049 5 лет назад

thanks boys

@justfly1984 5 лет назад

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 5 лет назад

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

@BlueClarification 5 лет назад

I like you guys the way you are

@philmirez 5 лет назад

MPJ’s meme game is on point.

@OfficialDevTips 5 лет назад

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

@marcinkrysinski1566 5 лет назад

I like some fails in yours videos

@justfly1984 5 лет назад

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!

@jorge0092 5 лет назад

awesome content... real code and not overly scripted

@OfficialDevTips 5 лет назад

Thank you!

@bibibobs 5 лет назад

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 5 лет назад

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

@zeocamo 5 лет назад

and yes you want it in the html

@JasonStoudt 5 лет назад

The pushback is real

@justfly1984 5 лет назад

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

@isatriya2 2 года назад

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

@AntonKristensen 5 лет назад

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

@OfficialDevTips 5 лет назад

THANKS!

@oktavic777 5 лет назад

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

@chrsbll 5 лет назад

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

@maximemoreau711 5 лет назад

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!" ;)

@MrRicharddaniel 5 лет назад

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

@OfficialDevTips 5 лет назад

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

@voxel8606 5 лет назад

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 😉

@CoderPranav 5 лет назад

8:03 r/WatchPeopleDieInside

@calebprenger3928 5 лет назад

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 5 лет назад

1st view

@LNTutorialsNL 5 лет назад

At around 2:07 your home address is visible

@OfficialDevTips 5 лет назад

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.