This tutorial will show you how to preload CSS stylesheets with HTML and JavaScript. It is recommended to preload and/or inline CSS to improve the speed of a website. This tutorial includes a full sample that you can use to test preloading.
Preloading means that a resource should be rendered as soon as possible but without blocking the rendering process of the page. Many resources can be loaded at the same time, a preloaded resource will be rendered when it has been loaded. In addition to style, you can also preload audio, document, script, font, video, image and more resources.
This code has been tested and is working with Google Chrome (75.0.3770.100), Mozilla Firefox (67.0.4) and Microsoft Edge (42.17134.1.0), without any polyfill. It works in Internet Explorer (11.829.17134.0) with a load CSS polyfill from Filament Group. If you want to support older browsers, check out our post on transpilation and polyfilling of JavaScript.
Stylesheets
We use three stylesheets in this example. The layout stylesheet shown below includes media queries for different screen sizes. Different stylesheets for different screen sizes might not be loaded when the screen is resized, it is safest to use only one stylesheet for the layout.
/* Standard layout */
@media screen and (min-width: 1280px)
{
.layout-outer-container {
margin: 0px auto 0px auto;
width: 1280px;
}
.layout-container-left {
float: left;
position: relative;
width: 976px;
background-color: #FFFFFF;
}
.layout-standard-header {
clear: both;
width: 976px;
height: 34px;
background-color: #ddddde;
}
.layout-mobile-header {
display: none;
}
.layout-searchbox {
position: absolute;
top: 2px;
right: 2px;
}
.layout-menu {
float: left;
display: block;
width: 280px;
min-height: 532px;
}
.layout-menu-padding {
padding: 20px 15px 20px 15px;
}
.layout-donation {
display: block;
border: 1px solid #808080;
padding: 5px;
text-align: center;
}
.layout-content {
float: left;
width: 696px;
height: auto;
overflow: auto;
}
.layout-content-padding {
padding: 20px 15px 20px 15px;
}
.layout-container-right {
float: left;
width: 304px;
}
.layout-fixed-ad {
display: block;
margin-left: 4px;
position: absolute;
}
.layout-footer {
clear: both;
width: 976px;
font-size: 16px;
line-height: 32px;
background-color: #ddddde;
}
.layout-footer-padding {
padding: 5px 5px 5px 10px;
}
.adslot-top {
display: inline-block;
width: 336px;
height: 280px;
}
.adslot-bottom {
display: inline-block;
width: 336px;
height: 280px;
}
}
/* Medium layout */
@media only screen and (min-width: 976px) and (max-width: 1279px)
{
.layout-outer-container {
margin: 0px auto 0px auto;
width: 976px;
}
.layout-container-left {
float: left;
position: relative;
width: 976px;
background-color: #FFFFFF;
}
.layout-standard-header {
clear: both;
width: 976px;
height: 34px;
background-color: #ddddde;
}
.layout-mobile-header {
display: none;
}
.layout-searchbox {
position: absolute;
top: 2px;
right: 2px;
}
.layout-menu {
float: left;
display: block;
width: 280px;
min-height: 532px;
}
.layout-menu-padding {
padding: 20px 15px 20px 15px;
}
.layout-donation {
display: block;
border: 1px solid #808080;
padding: 5px;
text-align: center;
}
.layout-content {
float: left;
width: 696px;
height: auto;
overflow: auto;
}
.layout-content-padding {
padding: 20px 15px 20px 15px;
}
.layout-container-right {
display: none;
}
.layout-fixed-ad {
display: none;
}
.layout-footer {
clear: both;
width: 976px;
font-size: 16px;
line-height: 32px;
background-color: #ddddde;
}
.layout-footer-padding {
padding: 5px 5px 5px 10px;
}
.adslot-top {
display: inline-block;
width: 336px;
height: 280px;
}
.adslot-bottom {
display: inline-block;
width: 336px;
height: 280px;
}
}
/* Mobile layout */
@media only screen and (max-width: 975px)
{
.layout-outer-container {
margin: 0px auto 0px auto;
max-width: 1280px;
}
.layout-standard-header {
display: none;
}
.layout-mobile-header {
clear: both;
position: relative;
max-width: 1280px;
height: 34px;
text-align: center;
background-color: #ddddde;
}
.layout-menu {
display: none;
z-index: 5;
position: absolute;
width: 280px;
height: auto;
background-color: #ffffff;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
}
.layout-menu-padding {
padding: 20px 15px 20px 15px;
}
.layout-donation {
display: block;
border: 1px solid #808080;
padding: 5px;
text-align: center;
}
.layout-searchbox {
display: none;
z-index: 5;
max-width: 1280px;
padding: 5px;
background-color: #ffffff;
text-align: right;
border-bottom: 1px solid #808080;
}
.layout-content {
max-width: 1280px;
background-color: #ffffff;
}
.layout-content-padding {
padding: 20px 15px 20px 15px;
}
.layout-container-right {
display: none;
}
.layout-fixed-ad {
display: none;
}
.layout-footer {
clear: both;
max-width: 1280px;
font-size: 16px;
line-height: 32px;
background-color: #ddddde;
}
.layout-footer-padding {
padding: 5px 5px 5px 10px;
}
.adslot-top {
display: none;
}
.adslot-bottom {
display: inline-block;
width: 300px;
height: 250px;
}
}We also have a stylesheet with general styles that does not apply to the layout och the website.
/* General css */
a, a:visited {
font-family: Verdana;
color: #4a5c84;
text-decoration: underline;
}
a:hover, a:visited:hover {
text-decoration: underline;
}
img {
max-width: 100%;
border: 0px;
margin: 0px;
vertical-align: top;
}
td {
vertical-align: top;
text-align: left;
font-size: 14px;
line-height: 21px;
padding: 2px;
word-break: break-all;
}
h1 {
color: #000000;
font-family: Verdana;
font-size: 28px;
line-height: 42px;
font-weight: bold;
margin: 0px 0px 10px 0px;
}
h2 {
color: #000000;
font-family: Verdana;
font-size: 18px;
line-height: 27px;
font-weight: bold;
margin: 0px 0px 5px 0px;
}
input, textarea {
font-size: 16px;
line-height: 24px;
font-family: Verdana;
color: #000000;
text-decoration: none;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/* Basic styles*/
.search-textbox {
width: 200px;
border: solid 1px #666666;
}
.search-button {
cursor: pointer;
border: 0px;
background-color: transparent;
color: #4a5c84;
text-align: center;
font-weight: bold;
padding-left: 4px;
font-size: 16px;
line-height: 28px;
}
.basic-breadtext {
font-size: 16px;
line-height: 24px;
}
.basic-space {
margin-bottom: 10px;
}
.basic-space-2x {
margin-bottom: 20px;
}
.basic-line {
clear: both;
border-top: 1px solid #9e9e9e;
}
.basic-button {
display: inline-block;
font-size: 16px;
line-height: 16px;
background-color: #4a5c84;
color: #ffffff !important;
font-weight: normal;
border-radius: 2px;
padding: 7px 10px 7px 10px;
margin: 0px;
text-decoration: none;
cursor: pointer;
border: 0px;
}
.basic-button:hover {
background-color: #34405B;
text-decoration: none;
}
.block-button {
display: block;
width: 100%;
padding: 6px 0px 6px 0px;
}
/* Input form*/
.textbox {
border: 1px solid #666666;
padding: 2px;
max-width: 600px;
margin: 0px;
}
/* Social sharing */
.share-content {
padding: 6px 0px 0px 0px;
}
/*Menu*/
.menu-link, .menu-link:visited {
font-size: 16px;
font-weight: bold;
color: #4a5c84;
line-height: 32px;
vertical-align: middle;
padding-left: 2px;
text-decoration: underline;
cursor: pointer;
}
.submenu-link, .submenu-link:visited {
font-size: 16px;
line-height: 30px;
font-weight: normal;
color: #696565;
vertical-align: middle;
padding-left: 2px;
cursor: pointer;
}
.menu-group {
display: none;
}
/*Cookie consent*/
.cookie-consent {
display: none;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index: 10;
color: #000000;
background-color: #d9d9d9;
border-bottom: 1px solid #9e9e9e;
padding: 10px 0px 10px 0px;
text-align: center;
}
.cookie-consent-text {
color: #000000;
font-size: 16px;
line-height: 24px;
font-weight: normal;
}The last stylesheet is for printing, this stylesheet should modify other styles to make pages look nice when they are printed. This stylesheet is mainly used to hide containers in the layout.
/* Print style */
.noprint {
display: none;
}
.layout-content {
background-color: #ffffff;
}HTML and JavaScript
Preloaded stylesheets has preload as it’s rel attribute, style as its as attribute and an onload event that changes the rel attribute when the CSS-file has been loaded. Some resources does not have to be preloaded, the favicon and the print-style for example. We have also included a polyfill for IE 11, it is safe to include this polyfill as it tests if the browser has support for preload. Very important styling should be inlined in the document as shown below.
<!DOCTYPE html>
<html>
<head>
<title>Preload CSS</title>
<meta charset="utf-8" />
<meta name="handheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=yes" />
<!-- Resources -->
<link href="/favicon.png" rel="shortcut icon" type="image/x-icon" />
<link href="/css/layout.css" rel="preload" as="style" onload="this.rel='stylesheet'" />
<link href="/css/styling.css" rel="preload" as="style" onload="this.rel='stylesheet'" />
<!-- Very important styling -->
<style>
body {
padding: 0px;
margin: 0px;
height: 100%;
text-align: left;
background-color: #4a5c84;
font-family: Verdana;
}
</style>
</head>
<body>
<div class="cookie-consent">
<span class="cookie-consent-text">Cookies and custom ads help us deliver our services. By using our services you agree to our use of cookies and custom ads.</span>
<button type="button" class="basic-button">Got it!</button>
<a href="/privacypolicy" class="cookie-consent-text">Read more</a>
</div>
<div class="layout-outer-container">
<div class="layout-container-left">
<div class="layout-standard-header noprint">
<a href="/" style="font-size:18px;line-height:34px;padding-left:5px;">Testsite.se - testing to preload CSS</a>
</div>
<div class="layout-mobile-header noprint">
<a href="/" style="font-size:18px;line-height:34px;">Testsite.se</a>
</div>
<div class="layout-searchbox noprint">
<input type="text" class="search-textbox" />
<input type="button" class="search-button" value="Search" />
</div>
<div class="layout-menu noprint">
<div class="layout-menu-padding">
<a class="menu-link" href="/item1" rel="nofollow">Item 1</a><br />
<a class="menu-link" href="/item2" rel="nofollow">Item 2</a><br />
<a class="menu-link" href="/item3" rel="nofollow">Item 3</a><br />
<a class="menu-link" href="/item4" rel="nofollow">Item 4</a><br />
</div>
</div>
<div class="layout-content">
<div class="layout-content-padding basic-breadtext">
<h1>Welcome to our website</h1>
<p>A Name Not Yet Taken AB is a creative company that helps businesses and individuals by offering products that provide both content and entertainment.</p>
<p>A Name Not Yet Taken AB was founded on 13 September 2011 and has taken over the business from JFS Bokforing HB, which started in early 2005.</p>
<p>Our business is project-based because we usually works on new projects in our daily activities. Our product portfolio consists of websites, games and apps for Android. We also have a small consulting business for accounting and programming, but our main focus is on improving existing products and developing new products.</p>
</div>
</div>
<div class="layout-footer">
<div class="layout-footer-padding">
<a href="https://www.annytab.com" target="_blank" rel="publisher">A Name Not Yet Taken AB</a> © 2019
</div>
</div>
</div>
<div class="layout-container-right noprint">
<div class="layout-fixed-ad">
<a href="https://www.doxservr.com" rel="nofollow" class="doxservr-right-ad">
<img src="https://www.bokforingstips.se/images/doxservr-v2-300x250.jpg" alt="Doxservr" style="display:block;max-width:300px;border:0px;" />
</a>
</div>
</div>
</div>
<!-- Scripts -->
<link media="print" href="/css/print_style.css" rel="stylesheet" />
<script src="/js/polyfills/csspreloader.min.js"></script>
</body>
</html>