The rel=preload attribute for the stylesheet is not properly rendering the styles after being downloaded

Exploring the use of rel=preload for the first time, specifically for a few stylesheets. Check out the code snippet below:

<link rel="preload" href="css/styles.css" as="style">
<link rel="preload" href="//allyoucan.cloud/cdn/icofont/1.0.0beta/css/icofont.css" crossorigin="anonymous" as="style">

Testing in Chrome 61 reveals that the stylesheets are downloaded as expected but not applied, accompanied by a console message indicating that a preloaded resource is not being utilized.

If I switch from using rel=preload to simply rel=stylesheet, everything functions flawlessly.

Am I overlooking something here?

cssgoogle-chromepreload

Answer №1

How do you feel about trying out this method:

<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">

Source:

Answer №2

To optimize performance, it is recommended to have 2 lines for each CSS file - one with rel=stylesheet and one with rel=preload. Preload simply fetches the CSS without applying it immediately.

However, the performance improvement may not be significant as one line is processed just before the other.

A more effective approach is to inline the CSS content that is visible above the fold, as detailed here, and then use JavaScript to add in the remaining CSS file on page load as explained here.

Answer №3

Is it possible to specify multiple values for the rel attribute? You can achieve this without having to write 2 lines per stylesheet by using the following code snippet:

<link rel="preload stylesheet" href="/css/styles.css" as="style" type="text/css" crossorigin="anonymous">

You can confirm this by running a Lighthouse test. In my browser, I observed no chained requests as the stylesheet was preloaded and properly applied, leading to the result shown here:

https://i.sstatic.net/RAS7Y.png

Answer №4

The solution provided is accurate, although it may lack clarity for some readers. In the case of one file, it actually requires two lines of code:

<link rel="preload" href="css/styles.css" as="style"> 
<link rel="stylesheet" href="css/styles.css">

This method is particularly beneficial when dealing with css background images, as it can enhance loading speed.

A similar approach can be applied to links for Google fonts:

<link rel='preconnect' href='https://fonts.googleapis.com'> 

<link href='https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@300&family=Source+Sans+Pro:wght@300;400;600&display=swap' rel='stylesheet'>

It also proves useful for optimizing web fonts. For more information, refer to the Mozilla Docs

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize the :not() and :hover selectors in Less when styling with CSS

Some of my elements have a specific class called .option, while others also have an additional class named .selected. I want to add some style definition for the :hover state on the .option elements, but only for those without the .selected class. I' ...

cssless

Having trouble adding your own styling to bootstrap-4 using a custom CSS file?

Here is the code I used to connect my two stylesheets, with the custom css file being linked second as per what I believe is the correct way to do it. <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href=" ...

htmlcssflaskbootstrap-4styling

Circular center button in the footer UI

Struggling with aligning a button in the footer perfectly? I have two icons on each side and while the UI is almost there, something seems off with the center icon's padding and shadow. I'm currently working with material-ui. Take a look at the i ...

htmlcssreactjsangularjsmaterial-ui

Issue with child div exceeding 100% height within CSS Flexbox causing inconsistency in Firefox and Chrome browsers

I am facing a challenge trying to make a div resize to match its parent's height using flexbox. This issue seems to occur only in Chrome (48), as it displays correctly in Firefox (44). You can view the example on Fiddle: https://jsfiddle.net/jvilla/k ...

htmlcssflexbox

Utilizing Bresenham's line drawing algorithm for showcasing box contours

I am seeking a similar behavior to what is demonstrated on , but with some modifications to the boxes: div { display: inline-block; width: 100px; height: 100px; border: 1px solid black; cursor: pointer; } div.selected, div:hover { backgroun ...

javascripthtmlcss

What is the best way to achieve CSS rounded corners while keeping the border lines sharp?

Currently, I am utilizing the border-radius property to make the corners of a div rounded. In addition, there is a border line at the bottom of the div. Here is an example: <div style="border-radius: .5em; border-bottom: 1px solid black">Content< ...

htmlcssborder

Is there a way to fill the remaining height of the parent with the middle item when sandwiched between two others using CSS?

I am facing a design challenge with a parent container that has 3 children arranged vertically. The top and bottom children are wide (600x200), while the middle child is tall (200x600). The parent container itself is much smaller (100x200) as I want to ens ...

htmlcss

Is it possible to execute a PHP script within a .css file and ensure it functions correctly?

Recently, I've been making some changes to the .css file in order to get my PHP codes to work. However, when I insert them as usual, they appear as regular text. I'm curious to find out if it's possible to execute a PHP file within a .css fi ...

phpcss

Is it unnecessary to use both "width: inherit" and "float: none

When learning about responsive design, one pattern that is frequently seen is: @media screen and (max-width: 480px){ .class1{ width: inherit; float: none; } .class2{ width: inherit; float: none; } f ...

htmlcssresponsive-design

Media queries in CSS appear to be dysfunctional when used on Microsoft Edge

@media (min-width: 992px) and (max-width: 1140px) { .mr-1024-none { margin-right: 0px !important; } .mt-1024 { margin-top: 1rem !important; } .d-1024-none { display: none !important; } } Utilizing the ...

javascriptcss

Error: Unable to Locate CSS File for Wordpress Elementor

Currently in the process of transferring a WordPress website that utilizes Elementor. Successfully migrated both the code and database over. However, upon inspecting the page, I encountered a 404 error indicating that a css file associated with Elementor c ...

csswordpresselementor

Transform a hexadecimal string into a hexadecimal color representation within SCSS

I have a plethora of colors stored in JSON format. I am utilizing rootbeer with gulp to convert them into Sass maps for processing by SCSS: { "blue": "33A2FF" } into $colors: ( "blue": "33A2FF" ); I am able to use ...

cssjsonsasscolorslibsass

Issue in Opera with the $(window).load(function(){}); script

In order to display the body's main div height correctly after all content (images) have loaded, I utilized a combination of jQuery and CSS. //The CSS used is as follows body {display: none;} /* Function to calculate div block height */ function re ...

jqueryhtmlcssopera

The opacity behavior of jQuery seems to behave strangely on IE10

Within my project, the left side of the content is contained within a div called ".container", and there's a preloader located in an element with the ID "#preloader." Across all major browsers, the functionality works smoothly as intended - when all ...

jquerycss

How come an image with position:absolute doesn't have a height? Even though I can clearly see its height in the browser

I'm perplexed as to why a div with display:block won't position itself below another div with the same style. Here's my code: .container{ display: block; position: relative; } .container img{ width: 100%; position: absolute; t ...

htmlcssposition

Develop a persistent overlay with HTML and CSS

I've been working on a project (HTML and CSS page) that features a navbar at the top of the page, a main container below the navbar, and a menu on the left side. The menu is initially hidden, but when I move my mouse to the left edge of the window, i ...

htmlcssoverlaysticky

When the content div is clicked within the overlay div, the popup will also close

I want to design a pop-up that features a container with a black background and some opacity, where the content of the popup is placed inside. Here's what I have in mind: <button (click)="showPopup = !showPopup">Open popup</button& ...

htmlcssangularjs

Evaluating a Secure Website using Selenium in C#

I'm currently developing a website that requires user authentication for the majority of its content. While some parts of the site are accessible prior to logging in, the rest is securely locked behind authentication. Testing the non-authenticated fe ...

c#google-chromeinternet-explorerselenium-webdrivermozilla

Utilizing CSS3 to implement multiple backgrounds across various selectors

My goal is to set backgrounds in two different CSS classes, ideally utilizing CSS3's multiple background feature. I aim to achieve this with minimal markup and ensure it is universally applicable. For example: CSS .button { display: block; } . ...

htmlcss

Having trouble initiating Chrome browser with Selenium 4.0.0 and ChromeDriver in conjunction with Java 16.0.1

Ever since upgrading Selenium to 4.0.0, I've been encountering issues with opening Chrome and Firefox browsers. Here are the specifics: Chrome : Version 96 Chrome driver : Updated to support version 96. Downloaded from this link Selenium : 4.0.0 ...

seleniumgoogle-chromeselenium-chromedriverjava-16selenium4