Start Render, FCP
Initial Paints
The first time pixels and content start to become visible to the user.
Example.com please!
Sure! Here's the HTML rst.
fi
}
HTML CSS
BLANK
SCREEN
CSS
JS
JS
https://httparchive.org/reports/loading-speed
The render blockers
<head>
<link rel="stylesheet" href="site.css">
<script src="site.js"></script>
</head>
Unblocking render: async JS
<head>
<script src="site.js" defer></script>
<script src="site.js" async></script>
</head>
Async or Defer?
Async: load in parallel and execute the script
whenever it arrives.
Defer: load in parallel and execute the script
later, just before domContentLoaded, in the
order referenced
https://medium.com/the-telegraph-engineering/improving-third-party-web-performance-at-the-telegraph-a0a1000be5
Another way to defer…
<head>
<script src="site.js" type="module"></script>
</head>
And another…
<head>
<script>
var script = document.createElement('script');
script.src = "site.js";
script.async = false;
document.body.append(script);
</script>
</head>
…which is nice for conditional loading
<head>
<link rel="stylesheet" href="site.css">
<script>
if( …some condition… ){
var script = document.createElement('script');
script.src = "site.js";
script.async = false;
document.body.append(script);
}
</script>
Or reference it later.
…
<script src="site.js"></script>
</body>
Unblocking render: async CSS
<head>
<link rel="stylesheet" href="site.css"
media="print">
</head>
Unblocking render: defer
<head>
<link rel="stylesheet" href="site.css"
media="print" onload="this.media='all'">
</head>
Which JavaScript is “critical?”
Ideally, none! But…
Feature tests
Poly lls
File loaders
Conditional logic to bootstrap the page
fi
https://www.filamentgroup.com/lab/enhancing-optimistically.html
Avoid FOUC with an early class
<script>
window.document.documentElement.className += "
enhanced";
</script>
<style>
.foo {
/* basic styles for .foo go here */
}
.enhanced .foo {
/* enhanced styles for .foo go here */
}
https://www.filamentgroup.com/lab/enhancing-optimistically.html
Inlining files
“
If the external CSS resources are small, you
can insert those directly into the HTML
document, which is called inlining.
PageSpeed Insights
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
Inlining CSS
<head>
<style>
.header { background: #09878}
h1 { font-size: 1.2em; col… }
h2 { margin: 0; }
…
</style>
</head>
“
In the case of a large CSS file,… Identify and
“inline” the CSS necessary for rendering the
above-the-fold content
PageSpeed Insights
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
Thinking Critically
Full CSS Critical Home
.header { background: #09878} .header { background: #09878}
h1 { font-size: 1.2em; col… } h1 { font-size: 1.2em; col… }
h2 { margin: 0; } h2 { margin: 0; }
ol { color: red; } ol { color: red; }
li { color: blue; backgrou… } li { color: blue; backgrou… }
li:hover { color: purple; … } li:first-child { color: gr… }
li:first-child { color: gr… }
li:last-child { color: pin… }
.footer { border-top: 1px … }
.copyright { font-size: 1.… }
.legal { font-size: 1.… }
.smallprint { font-size: 1.… }
.social { font-size: 1.… }
https://github.com/filamentgroup/grunt-criticalcss
Extracting critical CSS
criticalcss: {
home: {
options: {
outputfile : 'css/critical/critical-home.css',
filename : 'all.css',
url : 'http://fgwebsite.local'
}
},
services: {
options: {
outputfile : 'css/critical/critical-services.css',
filename : 'all.css',
url : 'http://fgwebsite.local/services/'
}
},
about: {
Inlining lightweight CSS
<head>
<style>
<% include “critical-home.css” %>
</style>
</head>
Inlining critical CSS, async the rest
<head>
<style>
<% include “critical-home.css” %>
</style>
<link rel="stylesheet" href="site.css"
media="print" onload="this.media='all'">
</head>
Break files by global / local
<head>
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="homepage.css">
<script src="global.js"></script>
<script src="homepage.js"></script>
</head>
Break files by global / local
<head>
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="product.css">
<script src="global.js"></script>
<script src="product.js"></script>
</head>
Splitting in other ways..
<head>
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="global-small.css"
media="(max-width: 400px)">
<link rel="stylesheet" href="global-large.css"
media="(min-width: 401px)">
To recap, free up first paint times:
Identify which css & JS is critical to block render
Serve those critical css and JS les either by:
Inlining
Referencing in contextual ways by template,
media queries, etc.
Load anything async/deferred that you can
fi
