Percebi que recentemente muitos sites demoram a exibir seu texto. Normalmente, o plano de fundo, as imagens e assim por diante serão carregados, mas nenhum texto. Depois de algum tempo o texto começa a aparecer aqui e ali (nem sempre tudo ao mesmo tempo).
Basicamente funciona ao contrário de antes, quando o texto era exibido primeiro, depois as imagens e o resto era carregado depois. Que nova tecnologia está criando esse problema? Qualquer ideia?
Observe que estou em uma conexão lenta, o que provavelmente acentua o problema.
Veja abaixo um exemplo - tudo está carregado, mas leva mais alguns segundos antes que o texto seja finalmente exibido:
Responder1
Uma razão é que os web designers hoje em dia gostam de usar fontes da web (geralmente emWOFFformato), por exemplo, atravésFontes da Web do Google.
Anteriormente, as únicas fontes que podiam ser exibidas em um site eram aquelas que o usuário havia instalado localmente. Como, por exemplo, os usuários de Mac e Windows não tinham necessariamente as mesmas fontes, os designers instintivamente sempre definiam regras como
font-family: Arial, Helvetica, sans-serif;
onde, se a primeira fonte não fosse encontrada no sistema, o navegador procuraria a segunda e, por último, uma fonte substituta "sans-serif".
Agora, pode-se fornecer um URL de fonte como uma regra CSS para fazer com que o navegador baixe uma fonte, como tal:
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700);
e, em seguida, carregue a fonte para um elemento específico, por exemplo:
font-family: 'Droid Serif',sans-serif;
É muito popular poder usar fontes personalizadas, mas também leva ao problema de nenhum texto ser exibido até que o recurso seja carregado pelo navegador, o que inclui o tempo de download, o tempo de carregamento da fonte e o tempo de renderização. Espero que este seja o artefato que você está experimentando.
Por exemplo: um dos meus jornais nacionais,Dagens Nyheter, usam fontes da web para seus títulos, mas não para seus leads, portanto, quando o site é carregado, geralmente vejo os leads primeiro e, meio segundo depois, todos os espaços em branco acima são preenchidos com títulos (isso é verdade no Chrome e no Opera, em pelo menos. Não tentei outros).
(Além disso, os designers espalham JavaScript em todos os lugares hoje em dia, então talvez alguém esteja tentando fazer algo inteligente com o texto, e é por isso que ele está atrasado. Isso seria muito específico do site: a tendência geral de o texto ser atrasado nestes vezes é o problema das fontes da web descrito acima, acredito.)
Adição
Esta resposta foi muito votada, embora eu não tenha entrado em muitos detalhes, ou talvezporquedisto. Houve muitos comentários no tópico de perguntas, então tentarei expandir um pouco (muitos comentários parecem ter desaparecido pouco tempo depois que o tópico foi protegido - algum moderador provavelmente os limpou manualmente). Além disso, leia as outras respostas neste tópico, pois todas elas se expandem à sua maneira.
O fenômeno é aparentemente conhecido como “flash de conteúdo sem estilo” em geral, e “flash de texto sem estilo” em particular. Procurar por "FOUC" e "FOUT" fornece mais informações.
eu posso recomendarPostagem do web designer Paul Irish sobre FOUT em conexão com fontes da web.
O que se pode notar é que diferentes navegadores lidam com isso de maneira diferente. Escrevi acima que testei o Opera e o Chrome, que se comportaram de maneira semelhante. Todos os baseados em WebKit (Chrome, Safari, etc.) optam por evitar FOUT pornãorenderização de texto de fonte da web com uma fonte substituta durante o período de carregamento da fonte da web.Ainda quea fonte da web está armazenada em cache, hávaiser um atraso de renderização. Há muitos comentários neste tópico de perguntas dizendo o contrário e que é totalmente errado que as fontes em cache se comportem assim, mas, por exemplo, no link acima:
Em que casos você receberá um FOUT
- Vai:Baixando e exibindo um ttf/otf/woff remoto
- Vai:Exibindo um ttf/otf/woff em cache
- Vai:Baixando e exibindo um data-uri ttf/otf/woff
- Vai:Exibindo um data-uri em cache ttf/otf/woff
- Não vou:Exibindo uma fonte que já está instalada e nomeada em sua pilha de fontes tradicional
- Não vou:Exibindo uma fonte instalada e nomeada usando o local local()
Como o Chrome espera até que o risco FOUT desapareça antes de renderizar, isso causa um atraso. Ao qualextensãoo efeito é visível (especialmente ao carregar do cache) parece depender, entre outras coisas, da quantidade de texto que precisa ser renderizada e talvez de outros fatores, mas o cache não remove completamente o efeito.
Irish também tem algumas atualizações sobre o comportamento do navegador em 14/04/2011 na parte inferior da postagem:
- Raposa de fogo(a partir de FFb11 e FF4 Final)não tem mais FOUT!Uau!http://bugzil.la/499292Basicamente, o texto fica invisível por 3 segundos e depois traz de volta a fonte substituta. A webfont provavelmente será carregada nesses três segundos… espero…
- O IE9 suporta WOFF, TTF e OTF (embora exijaum pouco de incorporação definir coisa– principalmente discutível se você usar WOFF).NO ENTANTO!!! IE9 tem um FOUT.:(
- Webkit temum patch esperando para pousarpara mostrar o texto substituto após 0,5 segundos. Portanto, o mesmo comportamento do FF, mas 0,5s em vez de 3s.
- Adição: Piscar temum bug registrado para isso também, mas parece que não foi alcançado um consenso final sobre o que fazer com ele - atualmente a mesma implementação do WebKit.
Se esta fosse uma pergunta destinada a designers, poderíamos procurar maneiras de evitar esses tipos de problemas, comowebfontloader, mas isso seria outra questão. O link Paul Irish dá mais detalhes sobre este assunto.
Responder2
A razão para isso é que o texto que você ainda não consegue ler está sendo renderizado comuma fonte da webque ainda está a caminho do seu navegador.
Além disso, como seu navegador é o Google Chrome, que usa WebKit para renderizar a página,foi decidido por eles(WebKit) que é melhor você não ver nenhum texto até que a fonte da web seja baixada. Se, no entanto, você é um desenvolvedor que prefere que o texto seja legível em uma fonte de sistema substituta adequada, você pode usar algo comoCarregador WebFont do GooglePara alcançar isto.
Responder3
Hávárias causasde sites sendo"lento para exibir seu texto". A lentidão emportatilapps.comé causado pelo downloadWOFFfontes. No entanto, o que você descreve como"o texto começa a aparecer aqui e ali"é mais frequentemente causado porAJAX.
Um site é composto de muitas partes. Como essas peças são baixadas e montadas é uma questãoescolha de designsob o controle doweb designer. A lentidão é causada pela forma como o desenvolvedor escolhe montar os seguintes blocos de construção:
- Página HTML inicial
- CSS
- JS
- Imagens
- Fontes WOFF
- Solicitações AJAX
- Manipulação de DOM
Tradicionalmente sites:
Tradicionalmente, era comum os desenvolvedores colocarem o conteúdo do texto nopágina HTML iniciale exibi-loassim que estivesse disponível. O HTML faria referência a vários recursos que seriam então baixados. O navegador entãoredesenhar progressivamentea tela para incluir os estilos e imagens à medida que estiverem disponíveis. AJAX e WOFF não estavam disponíveis.
Sites WOFF:
As fontes WOFF permitem que um site use fontes que normalmente não estão disponíveis para o navegador,baixando fontes com o site. Alguns desenvolvedores instruem o navegador a não exibir o conteúdo do texto até que todas as fontes WOFF tenham sido baixadas. Na minha experiência, essa abordagem ainda não ganhou uso muito amplo.
Sites AJAX:
Alguns desenvolvedores optam por não incluir o conteúdo de texto na página HTML inicial. Em vez disso, eles optam por baixar o conteúdo de texto usando AJAX. Isto acontecedepois que a página básica foi carregada. Na minha experiência, este método ganhou muitoadoção mais amplado que as fontes WOFF e é na maioria das vezes a causa da lentidão que você descreve.
Determinando a causa
Determinar a causa de um site específico requer análise usando ferramentas comoBug de fogoouFerramentas para desenvolvedores do Chrome. Ou alternativamente, você pode abrir o site usandoInternet Explorer 8, que suporta AJAX, mas não WOFF. Se o site ainda estiver lento, o problema é AJAX e não WOFF.
Responder4
Como outros observaram, as fontes personalizadas provavelmente estão contribuindo para o atraso.
Para fornecer um pouco mais de experiência, o navegador está fazendo aproximadamente o seguinte antes de poder renderizar o conteúdo da página na tela:
- buscar HTML (várias viagens de ida e volta para DNS, TCP, solicitação/resposta)
- comece a analisar HTML, descubra recursos externos, como CSS e JS externos. Observe que o CSS bloqueia o layout e o JS bloqueia a análise. Assim, recursos externos como CSS e JS carregados no início do documento (por exemplo, no cabeçalho) diminuem o tempo que uma página leva para exibir o conteúdo na tela.
- buscar CSS e JS externos (várias viagens de ida e volta: DNS e TCP se esses recursos estiverem em um domínio diferente, como CDN, bem como um RTT para a solicitação/resposta)
- assim que o CSS e JS externos terminarem de carregar, analise/execute JS, analise/aplicar estilos
- se o CSS fizer referência a fontes personalizadas, essas fontes agora também terão que ser baixadas, resultando em atrasos adicionais para renderizar qualquer parte da página que dependa das fontes personalizadas
Embora não se trate especificamente dos atrasos causados por fontes personalizadas, escrevi recentemente uma postagem no blog que fornece informações adicionais sobre as causas dos atrasos na renderização. Ele dá algumas sugestões para minimizar o tempo de pintura inicial de suas páginas. Esperamos que isso seja útil para leitores interessados em fazer com que suas páginas exibam conteúdo com mais rapidez, incluindo aquelas páginas que desejam usar fontes personalizadas:http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-under-one-second/