Critical CSS for CMS-based Server-rendered Websites

Critical CSS for CMS-based, Server-rendered Websites

CMS Browser Server /home

CMS Browser Server /hom e <html>  <head > <body >
<header > .. . <section > <section > .. . <footer>  </html>

Bolt   Kirby   Ghost   Drupal   Joomla  
Magento   Cra ft CMS   WordPress   Expression Engine

Recap: Critical CSS

How fast does the page load? ⚡

1 large CSS file with rules for entire page/site ⏳

Only a part of the page is visible 🪟

Fetch CSS for visible portion of the page only 🧐

Fetch CSS for visible portion of the page only 🧐
a.k.a Critical CSS

Bundle CSS for visible portion of the page with HTML
📦

Async-load rest of the CSS 🚶

Improve “perceived” load speed 🪄⏱

First Contentful Paint (FCP) ⏱

“The time from when the page starts loading to when
any part of the page’s content is rendered on the screen.” web.dev/fcp

Credit: web.dev/fcp Time

1.8 seconds or less 🚀

Critical CSS directly impacts FCP

Largest Contentful Paint (LCP) ⏱

“The render time of the largest image or text block
visible within the viewport, relative to when the page first started loading.” web.dev/lcp

Credit: web.dev/lcp Time

2.5 seconds or less 🚀

Critical CSS indirectly impacts LCP

Apply this to CMS-based sites

1. Content is dynamic.   What is above the fold?

2. Extracted CSS will go out of sync as website
styles change

3. Can subsequent pages avoid bundling extra CSS with HTML?

4. How does this work with server side page caching?

1. Page Selection

We might have 1000s of active pages on any site

But these 1000s of pages are powered by handful of
templates

Article Category Author

Extract Critical CSS per template, not for every single page

Pick one average case sample per unique template

Article Category Author

Extract CSS for that page & re-use for all instances
of that template

article.critical.css,   index.critical.css,   category.critical.css,   etc.

2. CSS Extraction

1. Render full page (HTML, CSS, assets etc.) 2. Define
viewport width & height 3. Filter CSS selectors used in the viewport

Web-based Command line Build tools

We have to re-extract every time any HTML or CSS
changes

Automate!

Use a build tool such as Gulp.js

1. Get a fully rendered sample page (per template) 2.
Feed this HTML & CSS to the tool 3. Save generated Critical CSS (per template) 4. Watch for changes in template or CSS files, repeat steps 1-3.

1. One sample page per template const samples = { 
article: 'http://site.local/article-2',  page: 'http://site.local/about',  index: 'http://site.local/page/2',  category: 'http://site.local/categories/perf',  }

2. Extract Critical CSS using `npm i critical` function extract(src,
destination) {  return critical.generate({  src,  css: ['dist/styles.css'],  target: `dist/${destination}.critical.css`,  minify: true,  dimensions: [  { width: 400, height: 900 },  { width: 1300, height: 900 },  ],  })  }

3. Run the extraction for all templates Object.entries(samples)  .forEach(([template, sample])
=> {  exports[`critical:${template}`] = () => extract(sample, template)  })    exports.critical = gulp.parallel(  ...Object.keys(samples)  .map(template => `critical:${template}`)  )

4. Watch for changes in template or CSS files, repeat
exports.default = () => {  gulp.watch('dist/styles.css', 'critical')  gulp.watch('templates/**/*.{html,twig}', 'critical')  }

3. Delivery

CSS is typically included via one (or more) external files

<html > <head > <link rel=stylesheet href=styles.css> .. . 🚫
Blocks rendering

<html > <head > <link rel=stylesheet href=styles.css> .. .

<html > <head > <style>  /* Critical CSS */  </style> 
<link rel=stylesheet href=styles.css > ... 📦 Bundle with HTML

<html > <head > <style > /* Critical CSS *
/ </style >   <link rel=stylesheet href=styles.css  media=print  onload="this.media='all'; this.onload=null;">  ... 🚶 Async load full CSS

This is great for first-time visitors. ⚡

What about subsequent or   repeat visits?

The browser already has the full CSS from the first
visit.

<html> <!-- Repeat Visit -- > <head > <link rel=stylesheet
href=styles.css> .. . ✅ Cached locally

<html> <!-- Repeat Visit -- > <head > <style >
/* Critical CSS * / </style > <link rel=stylesheet href=styles.css  media=print  onload="this.media='all'; this.onload=null;">  ... 📦 Avoid extra baggage

Di ff erent responses for   first time visits &
repeat visits

<html > <head > <style> 
/* Critical CSS */  </style>    <link rel=styleshee t href=styles.css media=print onload="this.media='all'"> ...     <html > <head >   <link rel=styleshee t href=styles.css>    ...

How do we figure out if a request is a
first or repeat visit? 🤔

Set a cookie during the first visit 🍪

Does the request contain 🍪?   ✅ has cookie =
repeat visit ❌ no cookie = first visit

<html > <head > <style> 
/* Critical CSS */  </style>    <link rel=styleshee t href=styles.css media=print onload="this.media='all'"> ...     <html > <head >   <link rel=styleshee t href=styles.css>    ...

<html > <head >
<style>  /* Critical CSS */  </style>    <link rel=styleshee t href=styles.css media=print onload="this.media='all'"> ...     <html > <head >   <link rel=styleshee t href=styles.css>    ...

Credit: instagram.com/dudewithsign

“Technical cookie”, no personally identifiable information,   no cookie banner
🧑💻🔒

4. Caching

CMS Browser /home

CMS Browser ⏳ Takes some time

CMS Browser /home <html>

CMS Browser Cache /home

CMS Browser Cache /home <html>...</html>

CMS Browser Cache /home <html>...</html> /about <html>...</html>

CMS Browser Cache /home <html>...</html> /about <html>...</html> /blog <html>...</html> /article-1
<html>...</html> /article-2 <html>...</html> /article-3 <html>...</html>

CMS Browser Cache /home

CMS Browser Cache /home 🍪 <html>...</html>

CMS Browser Cache /home 🍪 <html>...</html> - <html>...</html>

CMS Browser Cache /home 🍪 <html>...</html> - <html>...</html> /about 🍪
<html>...</html> - <html>...</html> /blog 🍪 <html>...</html> - <html>...</html>

We now cache two versions for each URL 🍪

• Pick one representative sample per template • Automate Critical
CSS generation via a build tool • Inline critical CSS (only) for first time visitors • Set a cookie to di ff erentiate first vs repeat visits • Cache two versions of each URL

</talk>

🙏 @rungta @miranj

Critical CSS for CMS-based Server-rendered Webs...

Critical CSS for CMS-based Server-rendered Websites

More Decks by Prateek Rungta

Other Decks in Programming

Featured

Transcript