Channel: DevTips

Category: Education

Tags: how tocssdev tipsweb design tutsreact jslighthousefriendly internetdesigner who codesprototypingadvicedevelopment advicegraphic designerweb designinternet codetipscode editingcodingreact.jswebauditdesignhtmlweb developmentcritical csstutorialdevtoolsprogrammingdesigners who codecoding tutorialnet tutswebsitedesign prototypingworkflowchromegraphic designjavascriptweb tutsprogramming helpweb performanceinternet

Description: 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-puppeteer 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! ❤️ youtube.com/funfunfunction #criticalcss #webperformance #lighthouse