Skip to content

Instantly share code, notes, and snippets.

@branneman

branneman/a-page.html

Last active June 12, 2017 21:20
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save branneman/78d4af2703e0b6be4b3d496e12bfbfd7 to your computer and use it in GitHub Desktop.
Save branneman/78d4af2703e0b6be4b3d496e12bfbfd7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
a-page.html
<!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>
Raw
all.css
/**
* All remaining components that are visible after user interaction
*/
Raw
critical-homepage.css
/**
* 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