Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Http/2 preloaded css is not applied and considered unused

Tags:

html

css

http2

I'm trying to get a simple http/2 server push demo to work with the following simple hello world example:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Http 2 push demo</title>
    <link rel="preload" href="core.css" as="style">
</head>
<body>
 Hello World!
</body>
</html>

core.css

body {
    font-size: larger;
    font-weight: bold;
    color: red;
}

In Chrome 66.0.x the css seems to be loaded successfully but I keep getting the following warning:

The resource http://localhost:8080/core.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it Please make sure it has an appropriate as value and it is preloaded intentionally.

and the css is not applied to the html body.

Am I missing something? Any ideas?

like image 758
Robert Avatar asked Jul 31 '18 12:07

Robert


People also ask

Should you preload CSS files?

Preloading CSS files # Waiting for JavaScript to execute before loading non-critical CSS can cause delays in rendering when users scroll, so it's a good idea to use <link rel="preload"> to initiate the download sooner.

How do I preload CSS?

<link rel="preload"> tells the browser to download and cache a resource (like a script or a stylesheet) as soon as possible. It's helpful when you need that resource a few seconds after loading the page, and you want to speed it up. The browser doesn't do anything with the resource after downloading it.

How do I know if preload is working?

If preloading is supported, the request for the image should be made before the JavaScript gets executed, i.e. you should see the request for the image immediately after the one for the HTML document is done.

What does HTML preload do?

The preload attribute specifies if and how the author thinks that the media file should be loaded when the page loads. The preload attribute allows the author to provide a hint to the browser about what he/she thinks will lead to the best user experience. This attribute may be ignored in some instances.


1 Answers

Right now you are only pre-loading the resource, but you are not using it in any way afterwards.

You still need a “normal” <link rel="styesheet" href="core.css"> to actually embed this stylesheet into the document and get it applied.

like image 104
CBroe Avatar answered Oct 19 '22 20:10

CBroe