When I write the following code, the rendering is before the script is executed，However, preloaded fonts are added. rendering is performed after the script is executed. Why？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="preload" href="http://localhost:3000/index.woff" crossorigin as="font"> --> // This causes rendering to lag
<style>
.demo {
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="demo"></div>
<script src="./index.js"> </script>
</body>
</html>
Link types: preload
The preload value of the element's rel attribute lets you declare fetch requests in the HTML's , specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page's render, improving performance.
The basics
You most commonly use to load a CSS file to style your page with:
<link rel="stylesheet" href="styles/main.css">
Copy to Clipboard
Here however, we will use a rel value of preload, which turns into a preloader for any resource we want. You will also need to specify:
The path to the resource in the href attribute.
The type of resource in the as attribute.
A simple example might look like this (see our JS and CSS example source, and also live):
https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload
Related
My understanding
So my understanding is, if you have a website with the following source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
<script src="script-head.js"></script>
</head>
<body>
<img width="400" src="image.jpg" />
<script src="script-closing.js"></script>
</body>
</html>
...the browser will queue the assets to be loaded in the following order (the order they appear in the page source):
style.css
script-head.js
image.jpg
script-closing.js
I have tested this simple HTML page in Chrome Dev Tools Network tab and the assets do load in that order.
All makes sense to me. So far so good.
The confusion
But in practice, I'm working on optimising the Largest Contentful Paint score of a website (if at all relevant, though I don't know how/why if we are just talking about page load, it's a Shopify website...). So I need to load the largest image on the screen quickly. And the loading isn't happening as I expect.
If we take this site as an example (this is not actually the site I am working on, but it seems to be happening on all the "larger" sites I've assessed. This one is Shopify too): https://www.luxyhair.com/
It has images (eg. //cdn.shopify.com/s/files/1/0066/0052/files/Homepage-Hero_1x1_Cool-Dark-Brown-Balayage_800x.jpg?v=1632412052) that are queued in the Network tab after JS scripts that are below it in the page source (eg. //cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.js?v=18003517125669543370).
I'm not sure why this is happening.
<!doctype html>
<html lang="en">
<head>
....
<link href="//cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.css?v=10166822434284191108" rel="stylesheet" type="text/css" media="all" />
....
</head>
<body class="theme-index">
....
<img class="one-whole" src="//cdn.shopify.com/s/files/1/0066/0052/files/Homepage-Hero_1x1_Cool-Dark-Brown-Balayage_800x.jpg?v=1632412052" alt="" />
....
<script src="//cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.js?v=18003517125669543370" type="text/javascript"></script>
....
</body>
</html>
My fundamental confusion here is why the browser is queuing assets not in the order they are listed in the HTML source.
How I can get an image to load before a bunch of JS scripts that are in the footer that aren't as important? I know about <link rel="preload"> but I can't use that as the image is defined in a page section that's not available for me to capture until after the <head> of the page (because of how Shopify's section templating engine works). I've tried inserting a <link rel="preload"> into the with an inline script, but as expected that hasn't worked. I have also tried adding importance="high" on the img tag. That also hasn't worked.
Following instructions from Mozilla.org I created this very simple example for CSS preloading but it just doesn't work.
Current Behavior: The Background is white
Expected Behavior: The Background should be red, and a weird message is displayed in the console.
cssPreloadTest3.html:
<html>
<head>
<meta charset="utf-8">
<title>CSS preload example</title>
<link rel="preload" href="cssPreloadTest2.css" as="style">
</head>
<body>
<h1>bouncing balls</h1>
</body>
</html>
cssPreloadTest2.css:
body {
background: red;
}
The weird message in the console says:
The resource at “https://..../cssPreloadTest2.css” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.
Of course if you change the <link> to a standard css import like this it works fine:
<link rel="stylesheet" href="cssPreloadTest2.css">
¿How can I make this work?
Basically, preload means that the browser has to download a resource before it's gonna use by the browser for some purpose. When you preload CSS, it means that the browser will start downloading your resource ASAP and apply it when it found a suitable command for that for example when it finds <link> tag for the stylesheet it will apply it instantly and hence first contentful paint will be improved.
There is also a concept here. If you download your CSS as a non-critical resource then you don't need to include <link> tag.
Syntax:-
<link rel="preload" href="/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="/style.css">
</noscript>
But this thing is suitable only for deferring non-critical CSS. But for critical CSS you can include an internal stylesheet i.e. in <style>...</style> tags.
Read more about it here - https://web.dev/defer-non-critical-css/
Preload <links> are not meant to replace the standard <link rel="stylesheet">, they just tell the browser to preload the assets. So you you still have to include the styles in any of the normal ways (either <link rel="stylesheet"> or #include).
They should probably clarify that in the Mozilla website...
I'm following the tutorial on the w3school for HTML and I'm stuck at the external linking part where you can include in your HTML page the CSS file you with the stylesheet defined by you with the <link> tag.
I have tried:
adding in the correct way the arguments rel, href, type, or media
clearing the cache from the browser, maybe it saved some old code but it was not the case
creating another .css file to try and code different style solutions
index.html
<!DOCTYPE html>
<html lang="it">
<head>
<style>
<link rel="stylesheet" href="whiteonblack.css" type="text/css" media="screen">
</style>
</head>
<body>
...
</body>
</html>
whiteonblack.css
body {
background-color: black;
color: white;
}
The body background should be completely black (I hate bright websites, even if this is for testing and with awful and old yet working (but not so much) HTML) and the general text to be white. Also some love from the community for DIY students :).
It defaults to the reverse, white bg and black text. God the hate.
The link tag belongs in the head tag directly. Do not nest it in a style tag; that's meant for actual CSS.
<head>
<link rel="stylesheet" href="whiteonblack.css" type="text/css" media="screen">
</head>
Remove the style tag. Use below CSS code.
<head>
<link rel="stylesheet" href="whiteonblack.css" type="text/css" media="screen">
</head>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Basics</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>JavaScript Basics</h1>
</div>
</body>
</html>
h1{
color: green;
}
Here are both my HTML and CSS. I am using the ATOM text editor on my Mac. Whenever I preview HTML it shows JavaScript Basics in the default black color,not in green from my css.
Try this one dude!
`<link href='style.css' rel='stylesheet' type='text/css'>
The problem is a caching issue. CSS can be a little strange with caching, and while the classic combination CTRL + F5 works for images, it doesn't work for CSS. The better solution to dealing with caching in CSS is to hold down SHIFT while clicking on the refresh symbol.
Obviously, you can include a backslash in the filepath for the CSS reference, or append a version number, such as: <link rel="stylesheet" type="text/css" href="style.css?v2 />.
This version number doesn't 'mean' anything inherently, but can be useful for denoting updates to the CSS, and importantly will be considered a different file by the browser (forcing it to re-load the CSS).
If you have access to a back-end language like PHP, you can also force the browser to refresh the CSS automatically every time the page is loaded with PHP, by appending a timestamp within the link to the CSS file, with something like:
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
Keep in mind that CSS can be 'costly', so once you have finished development, you probably want to allow visitors to cache by removing the timestamp in a production environment :)
Hope this helps! :)
When I embed a piece of html code, it seems that it won't be effected by the linked css file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>worldmapper BETA</title>
<link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<embed type="text/html" src="test.html">
</body>
</html>
Correct. <embed> acts like <iframe> (just not so well defined, so you should use <iframe> instead).
You are loading a separate document in a sub-window.
For the CSS to apply, you need to link the CSS to that document.
Consider using a template system which you apply either server side or at build time instead. Then your single web page will consist of a single HTML document.