BEGIN:VCALENDAR VERSION:2.0 PRODID:-//HasGeek//NONSGML Funnel//EN DESCRIPTION:Solving for CSS loading optimizations X-WR-CALDESC:Solving for CSS loading optimizations NAME:CSS loading and Critical CSS X-WR-CALNAME:CSS loading and Critical CSS REFRESH-INTERVAL;VALUE=DURATION:PT12H SUMMARY:CSS loading and Critical CSS TIMEZONE-ID:Asia/Kolkata X-PUBLISHED-TTL:PT12H X-WR-TIMEZONE:Asia/Kolkata BEGIN:VEVENT SUMMARY:Housekeeping Rules and Intro DTSTART:20210924T063000Z DTEND:20210924T064000Z DTSTAMP:20260421T111750Z UID:session/JUUPwWp1zKS2br6UWtB7gg@hasgeek.com SEQUENCE:0 CREATED:20210922T110757Z LAST-MODIFIED:20210922T110817Z LOCATION:Online ORGANIZER;CN=JSFoo:MAILTO:no-reply@hasgeek.com BEGIN:VALARM ACTION:display DESCRIPTION:Housekeeping Rules and Intro in 5 minutes TRIGGER:-PT5M END:VALARM END:VEVENT BEGIN:VEVENT SUMMARY:Introduction to the conference - CSS loading and Critical CSS DTSTART:20210924T064000Z DTEND:20210924T065000Z DTSTAMP:20260421T111750Z UID:session/LPgFMtSGmEpCn9e2TxHWiP@hasgeek.com SEQUENCE:0 CREATED:20210714T045609Z LAST-MODIFIED:20210922T110630Z LOCATION:Online ORGANIZER;CN=JSFoo:MAILTO:no-reply@hasgeek.com BEGIN:VALARM ACTION:display DESCRIPTION:Introduction to the conference - CSS loading and Critical CSS in 5 minutes TRIGGER:-PT5M END:VALARM END:VEVENT BEGIN:VEVENT SUMMARY:Critical CSS: an introduction to why\, what and how. DTSTART:20210924T065000Z DTEND:20210924T071500Z DTSTAMP:20260421T111750Z UID:session/8h5sJUpahKBuKUhEpMehxW@hasgeek.com SEQUENCE:1 CREATED:20210917T101251Z DESCRIPTION:Before getting to the fulfilment of any subject\, it is import ant to understand the requirement that led to its inception. So this talk will dwell on the fundamentals of\,\n- CSSOM\,\n- Render-blocking resource s\n- Page performance measurement metrics\n- Key improvement areas for ove rall and perceived performance\n- CSS extraction techniques for better spe ed and UX\,\n- Frameworks/libraries implementing those techniques along wi th the pros & cons list\n- The best practices to follow for implementation .\n\nAfter this session\, you should have an understanding \n- To assess t he relevance of a particular optimisation against their project context.\n - To measure the degree of its applicability.\n- To identify resources and directions to explore to achieve the same. LAST-MODIFIED:20230108T103046Z LOCATION:Online ORGANIZER;CN=JSFoo:MAILTO:no-reply@hasgeek.com URL:https://hasgeek.com/jsfoo/css-loading-and-critical-css/schedule/critic al-css-the-what-why-how-8h5sJUpahKBuKUhEpMehxW BEGIN:VALARM ACTION:display DESCRIPTION:Critical CSS: an introduction to why\, what and how. in 5 minu tes TRIGGER:-PT5M END:VALARM END:VEVENT BEGIN:VEVENT SUMMARY:Inlining CSS from React component library to improve Web Vitals DTSTART:20210924T071500Z DTEND:20210924T074000Z DTSTAMP:20260421T111750Z UID:session/3D3JJ4xUYf1kazMytVj3Tq@hasgeek.com SEQUENCE:1 CREATED:20210916T104452Z DESCRIPTION:We at [Quintype](https://www.quintype.com/) have built a [reac t framework](https://developers.quintype.com/malibu/) which does isomorphi c rendering. We also have a component library called [Arrow](https://www.n pmjs.com/package/@quintype/arrow) which provides pre-styled customizable r eact components. For example some *rows* from [here](https://developers.q uintype.com/quintype-node-arrow/?path=/story/rows-four-col-grid--default) are being used [here](https://malibu-advanced-web.quintype.io/).\n\n**The problem:**\nOn integrating Arrow components in our app\, the pages were ha ving quite poor web vitals. One of the reasons being the component CSS was n't being inlined during SSR\n\n**Solution:**\nInline some of the CSS. We don't know which components would be used above the fold at build time\, s ince that can be customized from the CMS. However we do know this at runti me - the CMS sends it as a config. So we generated seperate CSS files for every library component\, created seperate bundles for every row component in our app and changed the SSR logic to inline the styles of the 1st row component.\nThis isn't really *critical css* but it improved our scores - CLS has become close to 0 LAST-MODIFIED:20230108T103046Z LOCATION:Online ORGANIZER;CN=JSFoo:MAILTO:no-reply@hasgeek.com URL:https://hasgeek.com/jsfoo/css-loading-and-critical-css/schedule/inlini ng-css-from-react-component-library-to-improve-web-vitals-3D3JJ4xUYf1kazMy tVj3Tq BEGIN:VALARM ACTION:display DESCRIPTION:Inlining CSS from React component library to improve Web Vital s in 5 minutes TRIGGER:-PT5M END:VALARM END:VEVENT BEGIN:VEVENT SUMMARY:Web Vitals at Zivame DTSTART:20210924T074000Z DTEND:20210924T081000Z DTSTAMP:20260421T111750Z UID:session/Dzuo2wM6SQ2ByKzK2Lf3AW@hasgeek.com SEQUENCE:1 CREATED:20210916T110822Z DESCRIPTION:Here we discuss how we manage pagespeed score at zivame.com. W ith page experienc becoming important parameter for search ranking the tec h is on its toe to improve it page performance. It has been a challenge in dustry wide to improve CLS score and make page perform faster. Here we loo k at things we did inorder to handle this change. LAST-MODIFIED:20230108T103046Z LOCATION:Online ORGANIZER;CN=JSFoo:MAILTO:no-reply@hasgeek.com URL:https://hasgeek.com/jsfoo/css-loading-and-critical-css/schedule/webvit als-zivame-Dzuo2wM6SQ2ByKzK2Lf3AW BEGIN:VALARM ACTION:display DESCRIPTION:Web Vitals at Zivame in 5 minutes TRIGGER:-PT5M END:VALARM END:VEVENT BEGIN:VEVENT SUMMARY:Critical CSS for CMS-based server rendered websites DTSTART:20210924T081000Z DTEND:20210924T083500Z DTSTAMP:20260421T111750Z UID:session/NCNkWCB9e64GveWm4AnnjQ@hasgeek.com SEQUENCE:1 CREATED:20210916T110432Z DESCRIPTION:A super fast website often involves inlining your critical CSS while lazy loading the non-critical CSS. You understand what that means\, but you’ve got a CMS-based website with many templates and hundreds or more (server rendered) pages but no simple switch or plugin to “Turn on Critical CSS”. This talk will show you how to marry Critical CSS with a site like yours to produce webpages that load quickly and get your green s cores in your performance monitors.\n\nWe’ll look at an end-to-end solut ion that we have evolved and battle tested over the years at [Miranj](http s://miranj.in). I’ll cover identifying target templates\, leveraging the [Critical](http://github.com/addyosmani/critical) & [Penthouse](https://g ithub.com/pocketjoso/penthouse) libraries to extract critical CSS\, automa ting the extraction process using [Gulp](https://gulpjs.com/)\, reducing r esponse size for repeat visitors\, and getting this entire system to work with the caching layer(s) that you may already be using. LAST-MODIFIED:20230108T103046Z LOCATION:Online ORGANIZER;CN=JSFoo:MAILTO:no-reply@hasgeek.com URL:https://hasgeek.com/jsfoo/css-loading-and-critical-css/schedule/critic al-css-for-cms-based-server-rendered-websites-NCNkWCB9e64GveWm4AnnjQ BEGIN:VALARM ACTION:display DESCRIPTION:Critical CSS for CMS-based server rendered websites in 5 minut es TRIGGER:-PT5M END:VALARM END:VEVENT BEGIN:VEVENT SUMMARY:Critical CSS | Prioritizing critical rendering path | What and how to manage DTSTART:20210924T083500Z DTEND:20210924T090000Z DTSTAMP:20260421T111750Z UID:session/PEKBrqQF41t8vrnJMpYyHJ@hasgeek.com SEQUENCE:2 CREATED:20210917T081044Z DESCRIPTION:Understanding of what critical CSS is\, why it is important an d how to manage it. \nThis session will cover core web vitals impacted bec ause of render blocking CSS. We will deep dive in the process of finding b ottlenecks in performance metrics along with right tooling to measure bene fit of critical CSS implementation to improve core web vitals. \n LAST-MODIFIED:20230810T072606Z LOCATION:Online ORGANIZER;CN=JSFoo:MAILTO:no-reply@hasgeek.com URL:https://hasgeek.com/jsfoo/css-loading-and-critical-css/schedule/critic al-css-prioritizing-critical-rendering-path-what-and-how-to-manage-PEKBrqQ F41t8vrnJMpYyHJ BEGIN:VALARM ACTION:display DESCRIPTION:Critical CSS | Prioritizing critical rendering path | What and how to manage in 5 minutes TRIGGER:-PT5M END:VALARM END:VEVENT BEGIN:VEVENT SUMMARY:Summary and takeaways\; way forward DTSTART:20210924T090000Z DTEND:20210924T090500Z DTSTAMP:20260421T111750Z UID:session/NbnD1txiWYBWfMqsmbybhp@hasgeek.com SEQUENCE:0 CREATED:20210920T103322Z LAST-MODIFIED:20210920T103349Z LOCATION:Online ORGANIZER;CN=JSFoo:MAILTO:no-reply@hasgeek.com BEGIN:VALARM ACTION:display DESCRIPTION:Summary and takeaways\; way forward in 5 minutes TRIGGER:-PT5M END:VALARM END:VEVENT END:VCALENDAR