Firefox not loading page elements, no errors or warning on console
I'm very disappointed with Firefox, my website is simply not working, no errors or warnings at the console, just doesn't work... take a look at https://www.dentistinkaty.com, it works perfectly in other browsers like Edge, Chrome or Opera, just not working on Firefox... the browser reports to load all objects buy my page looks, well... no style, no pictures... what's going on? I'm building my page according to standards, this makes no sense...
All Replies (12)
Website under construction... We will finish soon, thank you for your understanding.
I get the same when using Win IE. But if I use Win Edge, I get the missing elements.
Yes, because at this point I just have the navbar complete and the carousel, nothing more than that... the problem is when I load the website using firefox 68.0.2 (64-bit) (up to date, according to them), I see only what I post on the first message screenshot.
I tried several things and at the end, I noticed firefox is not loading any of my CSS files... I was using the following:
<link rel="preload" as="style" onload="this.rel='stylesheet'" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="preload" as="style" onload="this.rel='stylesheet'" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> <link rel="preload" as="style" onload="this.rel='stylesheet'" href="/estilo.min.css" asp-append-version="true" />
For some reason, firefox did not like the rel="preload" or at least does not understand correctly what we are trying to do...
WHAT I DID: to avoid this, I did load my stylesheets using javascript, on the document ready event, and it seems to work but I don't know if google speed insights will like this approach...
WHAT I REGRET FROM FIREFOX: They promote the preload practice on their MDN website but they do not wish to comply with their own documentation, and even worse, they do not show any errors on the console... if you do not support a feature, it should at least show an error saying "Firefox does not support this or that" but just show that everything is working fine well... makes me feel that I have to investigate on my own, removing parts from my website trying to find the solution... could this be the compression? could this be the minifying process?
Hi Guillermo, unfortunately rel="preload" is not available in Firefox at the moment. This is indicated in the compatibility tables at the bottom of the articles:
Since you are placing your link tags at the end of the content, and you want them to be applied immediately as soon as they are retrieved, there isn't a reason to use preload on your page. I'm sure there are other use cases where it would be relevant, but for now, it would be simplest and have the broadest compatibility to use rel="stylesheet" for those link tags.
If you personally want to test out how well preload works in Firefox, you can toggle a preference, but this isn't something you could rely on users to do:
(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button promising to be careful or accepting the risk.
(2) In the search box above the list, type or paste prelo and pause while the list is filtered
(3) Double-click the network.preload preference to switch the value from false to true
It's a shame that we as developers can't agree on a single standard... for example, I did what google told me to do avoid the "rendering blocking", by mere casualty I decided to test my website using Firefox, now I discover that I must find another solution (which by the way, was not provided by Firefox, I mean, if they don't support the feature, according to them what would be the way to achieve that?)... so I found another possible solution... construct the a new element and add it to the DOM using the jquery onready event... now google says he doesn't like that... what am I supposed to do now?
I don't understand the problem. What are the consequences of placing normal link tags at the end of the body? Are you going to lose PageRank?
Exactly... what is the problem with that? but they don't think that way (google)... if we do it like that, they still penalize the webpage on their tester... (https://developers.google.com/speed/pagespeed/insights/), this is why (they say) we have the rel="preload"...
The truth is: no matter what we do, we can't satisfy anybody... the ideal thing would be to make Google and Mozilla agree on a single standard, because think about this... no matter what we do, they will not change their requirement of the rel="preload", and will punish the website calling it "render blocker"... firefox on the other side says "we do no support that" and nothing we do can change that but, what do we resolve with these requirements and statements?
For me, if firefox find the rel="preload", and it don't know what to do with that, it should change that and load the content as usual but... what I don't accept is that firefox does not show any console errors, or a message saying "hello, we don't support that!"... the only thing it does is NOT load any of the CSS... the solution to the "not supported" is so ugly...
Don't take it personal, I know you are not the owner of Firefox, just saying my thoughts...
Modified by Guillermo
maybe try a clean reinstall of firefox? hope that helps!
what you are experiencing is maybe the website having a problem or extension is causing it or there is a virus possibly... or try to check if plug ins causing a problem ..... possibilities it is possible.
or the internet.
Hi Guillermo, I hear your frustration.
When I check one of my short pages on https://developers.google.com/speed/pagespeed/insights/ it tells me I could save 0.18 seconds if I inline the critical CSS instead of using the external file:
However, the page scores 100 points, so this doesn't really seem necessary in that case. How much difference do you think it would make for your page?
Meanwhile, until it is eventually supported as intended, perhaps it would be better for Firefox to just load the spreadsheet stylesheet when encountering <link rel="preload" as="style"> to minimize breakage? I posted a question about that in one of the preload-related bugs:
Modified by jscher2000 - Support Volunteer
Thank you for posting this on Bugzilla... I did not know if I had to do that. I like the elegant way you did describe the problem.
Following up with you, I see a different result when running Speed Insights test from google, please check the following screenshot.
Thank you for your patience!
Hi Guillermo, your file probably is much larger than mine. Try using the two tag method:
(1) Early in the <head> section, use a preload tag
<link rel="preload" as="style" href="/estilo.min.css" asp-append-version="true" />
That should trigger non-blocking background retrieval (except in Firefox).
(2) At the end of the body, use a regular link tag
<link rel="stylesheet" href="/estilo.min.css" asp-append-version="true" />
That should apply the style sheet to your page.