Sep 2021
20 Mon
21 Tue
22 Wed
23 Thu
24 Fri 12:00 PM – 02:35 PM IST
25 Sat
26 Sun
Make a submission
Accepting submissions till 03 Sep 2021, 11:00 PM
Sep 2021
20 Mon
21 Tue
22 Wed
23 Thu
24 Fri 12:00 PM – 02:35 PM IST
25 Sat
26 Sun
Accepting submissions till 03 Sep 2021, 11:00 PM
CSS loading optimizations like Critical CSS are often one of the main tools to optimise for the first meaningful paint metric. This directly impacts the user experience as it lets the browser paint pixels on the screen with minimum data possible.
There are multiple parts to this problem such as:
This conference is curated by Prateek Bhatnagar, frontend architect at Uber. Previously, Prateek was senior software engineer (frontend), collaborating with NextJS to help push the bar of performance on web using wrapper frameworks.
Speakers from Quintype, Publicis Sapient, Zivame and Miranj will share their experiences with implementing Critical CSS. See the Submissions and Schedule for details.
Contact information: For inquiries about participating in the conference, post a comment at https://hasgeek.com/jsfoo/css-loading-and-critical-css/comments
For more updates, follow JSFoo on Twitter
Amogh Sahasrabhojanee
@ags1773
Submitted Aug 20, 2021
We at Quintype have built a react framework which does isomorphic rendering. We also have a component library called Arrow which provides pre-styled customizable react components. For example some rows from here are being used here.
The problem:
On integrating Arrow components in our app, the pages were having quite poor web vitals. One of the reasons being the component CSS wasn’t being inlined during SSR
Solution:
Inline some of the CSS. We don’t know which components would be used above the fold at build time, since that can be customized from the CMS. However we do know this at runtime - 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.
This isn’t really critical css but it improved our scores - CLS has become close to 0
Sep 2021
20 Mon
21 Tue
22 Wed
23 Thu
24 Fri 12:00 PM – 02:35 PM IST
25 Sat
26 Sun
Accepting submissions till 03 Sep 2021, 11:00 PM
{{ gettext('Login to leave a comment') }}
{{ gettext('Post a comment…') }}{{ errorMsg }}
{{ gettext('No comments posted yet') }}