X
Thinta lapha ukuze uye kuveshini yamakhalekhukhwini kusayithi.

Isithangami Sabeseki

Firefox not loading page elements, no errors or warning on console

Kuphostiwe

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...

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...
Ama-screenshot ananyekiwe
Isicaphuno

Eminye Imininingwane Yohlelo

Isisebenziso

  • I-ejenti Engumsebenzisi: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0

Eminye Imininingwane

FredMcD
  • Top 10 Contributor
4223 izisombululo 58930 izimpendulo
Kuphostiwe

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.

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.
Ingabe lokhu kube usizo kuwena? 0
Isicaphuno

Umnikazi wombuzo

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?

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?
Ingabe lokhu kube usizo kuwena?
Isicaphuno
jscher2000
  • Top 10 Contributor
8634 izisombululo 70618 izimpendulo
Kuphostiwe

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

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: * https://developer.mozilla.org/docs/Web/HTML/Preloading_content#Browser_compatibility * https://developer.mozilla.org/docs/Web/HTML/Element/link#Browser_compatibility 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
Ingabe lokhu kube usizo kuwena?
Isicaphuno

Umnikazi wombuzo

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?

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?
Ingabe lokhu kube usizo kuwena?
Isicaphuno
jscher2000
  • Top 10 Contributor
8634 izisombululo 70618 izimpendulo
Kuphostiwe

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?

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?
Ingabe lokhu kube usizo kuwena?
Isicaphuno

Umnikazi wombuzo

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...

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...

Okulungisiwe ngu Guillermo

Ingabe lokhu kube usizo kuwena?
Isicaphuno
jaeyoung kim 0 izisombululo 28 izimpendulo
Kuphostiwe

maybe try a clean reinstall of firefox? hope that helps!

maybe try a clean reinstall of firefox? hope that helps!
Ingabe lokhu kube usizo kuwena? 0
Isicaphuno
jaeyoung kim 0 izisombululo 28 izimpendulo
Kuphostiwe

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.

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.
Ingabe lokhu kube usizo kuwena? 0
Isicaphuno
jaeyoung kim 0 izisombululo 28 izimpendulo
Kuphostiwe

or the internet.

or the internet.
Ingabe lokhu kube usizo kuwena? 0
Isicaphuno
jscher2000
  • Top 10 Contributor
8634 izisombululo 70618 izimpendulo
Kuphostiwe

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:

https://bugzilla.mozilla.org/show_bug.cgi?id=1394778#c73

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: <img src="https://user-media-prod-cdn.itsre-sumo.mozilla.net/uploads/images/2019-08-21-16-25-14-42d466.png" width="500"> 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 <s>spreadsheet</s> <u>stylesheet</u> when encountering &lt;link rel="preload" as="style"> to minimize breakage? I posted a question about that in one of the preload-related bugs: https://bugzilla.mozilla.org/show_bug.cgi?id=1394778#c73

Okulungisiwe ngu jscher2000

Ingabe lokhu kube usizo kuwena?
Isicaphuno

Umnikazi wombuzo

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!

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!
Ingabe lokhu kube usizo kuwena?
Isicaphuno
jscher2000
  • Top 10 Contributor
8634 izisombululo 70618 izimpendulo
Kuphostiwe

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.

Hi Guillermo, your file probably is much larger than mine. Try using the two tag method: (1) Early in the &lt;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.
Ingabe lokhu kube usizo kuwena?
Isicaphuno
Buza umbuzo

Kufanele ulogele ukungena ku-akhawunti yakho ukuze uphendule amaphosti. Uyacelwauqale umbuzo omusha, uma ungekabi nayo i-akhawunti namanje.