Last active
June 12, 2017 21:20
-
-
Save branneman/78d4af2703e0b6be4b3d496e12bfbfd7 to your computer and use it in GitHub Desktop.
Minimalistic Critical CSS, see also: https://github.com/branneman/playground-nodejs-http2-criticalcss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Homepage</title> | |
<!-- If HTTP/1: Inline with <style>, remove this <link> --> | |
<!-- If HTTP/2: Server push this CSS file, and leave this <link> --> | |
<link rel="stylesheet" href="critical-homepage.css"> | |
<!-- Preload remaining CSS, and apply on arrival (with no-js fallback) --> | |
<link rel="preload" href="all.css" as="style" onload="this.rel='stylesheet'"> | |
<noscript><link rel="stylesheet" href="all.css"></noscript> | |
<!-- Paste in the loadCSS implementation and rel=preload polyfill here --> | |
<script> | |
/* ... https://github.com/filamentgroup/loadCSS ... */ | |
</script> | |
</head> | |
<body> | |
<div class="first-paint"> | |
<h1>I'm content above the fold, visible on most (if not all) screens without user interaction!</h1> | |
</div> | |
<div class="after-interaction"> | |
<h2>I'm secondary content, visible after user interaction</h2> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* All remaining components that are visible after user interaction | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Typography | |
* Fonts | |
* All components that are visible without user interaction | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment