Testando Web Site - problema em carregar o CSS - Preload

Oi Fernando, parabens pelo 1s de render!!

O que ta acontecendo aqui é o seguinte: o Firefox e o Edge ainda nao suportam <link rel=preload> então por isso usamos a polyfill do loadCss. Só que está dando pau no uso do loadCss e aí ele nunca baixa os arquivos CSS.

A questão é que existem 2 arquivos: loadcss.js e cssrelpreload.js. E eles precisam ser carregados nessa ordem. O segundo arquivo depende do primeiro.

Olhando seu HTML, os dois scripts estão com async o que não garante a ordem de execução dos scripts. Em alguns casos é ate provavel que eles executem na ordem (sorte!) mas não é a regra. É capaz ate de vc estar vendo um comportamento intermitente na pagina.

Entao vc precisa executar esses 2 scripts na ordem. Possibilidades:

1) Troca async por defer (isso garante a ordem)

2) Junta os scripts na ordem certa no mesmo arquivo

3) Coloca eles inline ja que sao pequenos (prefiro esse, pra acelerar o download do CSS)

Muito Bom Sergio!!! :D

Pelos meus testes agora já esta funcionando...sem aquele BUG do não carregamento do css no Firefox e EDGE. Uhuuul

Fiquei na dúvida se tem como melhorar a ordem abaixo...

   <link inline rel="stylesheet" href="assets/css/reset.css">
    <link inline rel="stylesheet" href="assets/css/index.css">

    <noscript> 
      <!-- build:css assets/css/endocrinologista.min.css -->
      </noscript>
      <link rel="stylesheet" href="assets/css/endocrinologista.css">
      <noscript> 
      <!-- endbuild --> 
    </noscript>
    <!-- build:remove --><noscript><!-- endbuild -->
      <link rel="preload" href="assets/css/endocrinologista.min.css" as="style" onload="this.rel='stylesheet'">
    <!-- build:remove --></noscript><!-- endbuild -->

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

    <script type="text/javascript"> loadcss + preload    </script> *Retirei o código JS pra não poluir*

    <link rel="shortcut icon" href="assets/img/endocrinologista.svg">

O Start Render de 1s acontece quando coloco o teste perto do servidor do Google - GAE que o site esta hospedado . * vi essa dica sua num NerdCast sobre Perfomance.

Recebi um comunicado que este ano ainda, a Google vai colocar um servidor GAE aqui no Brasil, provavelmente SP, se tiver alguma informação sobre?

A ordem das coisas me parece essa mesma...

E o GAE acabou de lancar em SP, antes de ontem, dia 19! Ja ta funcionando!!

https://cloud.google.com/about/locations/saopaulo/

Sérgio, sem palavras aqui para agradecer! Já esta funcionando caraaaca :D Latência vai cair muuito. Esse fim de semana vou fazer testes.

Sou fã do seu trabalho, esperando por mais cursos seus sobre WEB.

Abraço

Ta funcionando o GAE - Brasil - SP :)

Só fiquei triste ao saber que não posso migrar um projeto de Região. Tive que criar um projeto novo para testar...

DSL 1.5Mbps https://www.webpagetest.org/result/170926_KD_b8a540a5cfd0eb0f695cf12f3890c766/

Mobile 3G - https://www.webpagetest.org/result/170926_4Z_794c4e5afbac575c200a3dd8d5719267/

Wow o site ta voando! Parabens

Gratidão pelas técnicas ensinadas nos cursos de Perfomance e Responsive Web - Sergio! :D