Assíncrono de carregamento do Typekit ::será que vale a pena, ou melhor não usá-lo?

Question

Tentando chegar o tempo de carregamento de página para baixo.

Eu segui o terceiro exemplo descrito aqui a forma assíncrona de carga o TypeKit javascript.

Para fazer isso funcionar você precisa adicionar um .wf-loading #some-element {visibility: hidden;} para cada elemento que utiliza o tipo de letra, e depois de 1) ele carrega ou 2) após um período de tempo (1 segundo), a fonte torna-se visível.

A coisa é, o CSS eu estou trabalhando com o tipo de letra atribuída a cerca de 200 elementos, o que é de 200 elementos de .wf-loading{ } (nota:Eu não escrever este CSS).

Sinto que isso iria diminuir o tempo de carregamento mais do que apenas deixar que ele carregue regularmente, DOM atravessando-se que a quantidade de coisas.Se este for o caso, eu vou apenas machado de Typekit completamente e ir com um tipo de letra normal.

Há ferramentas que pode utilizar para executar testes de desempenho com esse tipo de coisa?Ou alguém já testou essas coisas?

Answer 1

Você não está na verdade, a modificar mais do que um único elemento DOM (raiz ) com esta abordagem.Isto significa que os nossos navegadores modernos, vai depender de sua super rápido CSS motores, então o número de elementos envolvidos terão nenhum efeito perceptível sobre o carregamento da página.

Como medida de carregamento da página e a cintilação, a latência de rede é geralmente uma ordem de magnitude pior do que a manipulação do DOM.Sempre haverá alguma cintilação na primeira (unprimed) de carregamento da página, enquanto que o navegador aguarda a fonte para download.Apenas certifique-se de que o tipo de letra a ser armazenado em cache para reutilização, e tente manter o tamanho do arquivo tão pequeno quanto possível.

Eu fui por este caminho há alguns anos atrás com Cufon.No final, eu escolhi o caminho mais simples com um desempenho aceitável e parou ali.É fácil ficar preso na otimização de página é carregada, mas provavelmente há mais promissoras áreas de melhoria – características, bugs, refatoração, etc.

Answer 2

O problema é que, como eles mencionam no blog, raras vezes (mas ele definitivamente não acontecer, certamente mais do que uma vez para mim) quando o Typekit CDN falhar completamente e os usuários só ver uma página em branco.Isto é, quando você vai desejar que você tinha usado carregamento assíncrono.