There is only one place in my page that links to this css file:
<link rel="stylesheet" href="http://domain.com/css/23beac5f7ba9d3e94ba463892e86b2ff.0.1.css">
However, when viewing the network tab in Firefox's inspector, it is counting two requests for this file (which exists), and also counting the size of the css file twice in the total size of all files requested.
The request at the end in this screenshot loads last, and takes a while longer than the rest of the requests to appear. The only thing I notice different about the two is that the last one under "Cause" has a "JS" symbol next to where it says "stylesheet". I do not know what that means or why it's there.
Any suggestions as to what might be causing my css file to load twice like this?
An easy way to inspect a specific web element in Firefox is to simply right-click on that particular element and select the Inspect Element option. It will directly open Developer tools including the editor, Console, Sources, and other tools as shown below.
To view user-agent styles (i.e., browser-default CSS rules), enable “Inspector > Show Browser Styles” under the developer tool settings panel.
Replace broken CSS files with those ones that return 200 HTTP status codes or remove them. What else should be considered to fix the problem: Try to clear your browser's cache. If the page returns 5xx errors, the problem may be on the server: it's not handling the traffic because it's too slow or misconfigured.
Might be this bug : https://bugzilla.mozilla.org/show_bug.cgi?id=1306892
If you opened the Inspector or Style Editor before opening the Network Monitor, it triggers additional requests to CSS files that unfortunately show up in your requests list.
To verify this:
Devtools should open on the Net Monitor tab directly and you should not see any duplicate request.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With