Inline Critical CSS means writing styles that needed in first view inside HTML <head> tag.
When user first visit your website, some styles are needed as first priority, like styles of nav, header, first section etc. to display the page beautifully. (And let those styles outside of viewport keeping in external CSS files)
For example, you have a nav bar with class .c-menu, you can write this in HTML file:
<html><head><!-- write your critical css here --><style>.menu{width:100%height:auto;color:black;padding:01em;}</style></head><body><navclass="c-menu"><!-- Lots of items --></nav></html>
Since those styles inside <style> tag are embedded inside the HTML, browser can load those styles quickly without loading external CSS files. It can be less "render blocking", compared with putting CSS link in head, like <link rel="stylesheet" type="text/css" href="theme.css">.
So i took a loot at view-source:dev.to/snowleo208/three-things-i-l... your own page, and i found that inlined all css in
Would you please explain what do you mean by 'inline critical css' ?
Inline Critical CSS means writing styles that needed in first view inside HTML
<head>tag.When user first visit your website, some styles are needed as first priority, like styles of nav, header, first section etc. to display the page beautifully. (And let those styles outside of viewport keeping in external CSS files)
For example, you have a nav bar with class
.c-menu, you can write this in HTML file:Since those styles inside
<style>tag are embedded inside the HTML, browser can load those styles quickly without loading external CSS files. It can be less "render blocking", compared with putting CSS link in head, like<link rel="stylesheet" type="text/css" href="theme.css">.To learn more about Render Blocking, view here.
Hope this can clearing up your doubts! :)