Eliminate render-blocking CSS

[ciferkey]

Environment

• Minimal Mistakes version: 4.22.0
• Ruby gem or remote theme version: 4.22.0
• Jekyll version: 3.9.0
• Git repository URL: https://github.com/ciferkey/ciferkey.github.com
• GitHub Pages hosted (if yes provide URL to site): https://blog.matthewbrunelle.com
• Operating system: NixOS

Expected behavior

The theme does not use render blocking style sheets.

Steps to reproduce the behavior

Create a blog with the theme. Run a Google Lighthouse report of the site.

It will flag it with render blocking style sheets for the following files:

• …css/main.css
• …css/all.min.css(cdn.jsdelivr.net)

Other

I believe these are the lines where the style sheets are loaded in:

minimal-mistakes/_includes/head.html

Lines 17 to 18 in 7bb68ed

	<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css">

It looks like the project is using SASS but it also looks like its converted to CSS and then the CSS is included.

One option might be to use Scssify to inline critical CSS but I'm not sure if this is compatible with how the project is setup.

Previous Issues

Here is all the previous discussion I could find:

• Inline the Main.scss  #2704 was opened and closed 2 days later by the OP with no discussion

[iBug]

It's going to add a lot of complexity and not easily feasible with the current setup. You can give it a try if you have the right ideas but I won't consider this "an issue" of the theme.

Also, it's a bad idea to try to apply whatever "optimization guide" blindly without understanding them (and your site).