Otimizando (reduzindo) solicitações de fontes da Web


8

Atualmente, minha página inicial usa 5 fontes da web - eu gostaria que fosse 6 devido ao suporte irregular ao Helvetica Neue. Uma das fontes são os ícones 'FontAwesome', as outras 4 são usadas apenas para uma ou duas palavras (ou seja, eu tenho um cabeçalho que diz "Otimização" escrito em letras que parecem um computador antigo).

Duas dessas fontes estão disponíveis no Google e solicito apenas as letras necessárias (e isso funciona muito bem). No entanto, os outros 2 são do openfontlibrary.org e estão disponíveis apenas em um único formato. O que não é grande coisa (de qualquer maneira, vou precisar deles com segurança para que as cópias locais sejam melhores), uma rápida com o gerador de fontes fontquirrel.com @ font e eu os tenho em vários formatos e o CSS para inicializar.

E então eu testo o tempo de carregamento da minha página ... ugh. Suponho que seria possível agrupar minhas cópias locais. Alguém tem experiência nessa área?

Respostas:


3

O uso de fontes da web não padrão tem um impacto significativo no desempenho nos tempos de carregamento da página em comparação com o uso de fontes do sistema padrão da web seguras. Este é o caso, independentemente de você estar usando JavaScript ou @ font-face .

Deve-se sempre analisar cuidadosamente se devem ser usadas fontes da Web não padrão.

Algumas perguntas a serem feitas ao considerar o uso de fontes da web não padrão:

  • Você os está usando apenas para mostrar que pode e sabe como?
  • O servidor tem o objetivo de executar um design melhor e proporcionar uma melhor experiência ao usuário?
  • O método usado para implementar as fontes é compatível com vários navegadores?
  • Uma imagem poderia ser suficiente, especialmente se forem apenas algumas palavras em uma única página ou apenas algumas páginas?
  • A fonte é diferente o suficiente das fontes seguras da Web para que valha a pena usar?
  • Se a fonte for usada como texto do corpo, é de fácil leitura ou foi projetada para cabeçalhos?

Certifique-se de pelo menos entender os fundamentos da tipografia e como isso afeta o seu design, e use isso para sua vantagem.


Obrigado pela resposta detalhada, mas vou admitir um pouco de frustração com as respostas até agora. Sei que isso está afetando o tempo de carregamento; Eu sei sobre tipografia e fontes seguras para a web. Sei que poderia usar uma imagem (ou sprites de imagem) e texto alternativo. No entanto, esses são os últimos recursos para mim. Eu poderia usar uma pilha de fontes muito segura, mas isso anula o propósito de ter fontes da Web (e até substitutos requerem uma conexão HTTP). Então você entra em SEO, questões de acessibilidade de ajuste de tamanho de fonte, traduções, configurações para deficientes visuais etc. Se razoável , eu prefiro otimizar minhas fontes da web.
Adam-asdf

Se você tivesse lido o primeiro artigo ao qual vinculei, teria encontrado informações sobre maneiras de melhorar o tempo de carregamento da página ao usar fontes da Web não padrão.
tacotuesday

Desculpe, fiquei impressionado com o número de links, vou fazer isso agora.
Adam-asdf

Você estava certo, desculpe pela minha impaciência (na verdade, é o segundo link que ele fornece). Detalhes auto-hospedagem, TypeKit, Google, fonte-esquilo (de alguma forma, eu senti falta de pensar em experimentar a opção avançada do gerador @ font-face), e até mesmo uma análise de diferentes métodos em diferentes navegadores. Para aqueles que se deparam com isso no caminho, ele respondeu a todas as minhas perguntas.
Adam-asdf

Obrigado por me informar que era o segundo link. Eu os misturei no post. Está consertado agora, então é o primeiro link. Você também pode procurar no Cufon e no sIFR, se ainda não o tiver. Além disso, grande parte da minha resposta foi destinada a futuros leitores, para que eles pensem um pouco antes de seguir a multidão no que diz respeito ao uso de fontes da web.
tacotuesday

6

os outros 4 são usados ​​apenas para uma palavra ou duas

Isso é uma afirmação literal?
Se sim, por que você está se preocupando em incorporar essas fontes, subconjuntos ou não? Você nem deveria estar otimizando neste caso, apenas removendo . Faça imagens do texto que você precisa e use sua técnica favorita de substituição de texto. Você está adicionando solicitações HTTP e tempo de download ao seu site com apenas algumas palavras .


Isso me ocorreu, eu sinto que se eu disser que posso codificar com CSS3 algumas fontes da Web e um design responsivo por meio de consultas de mídia provavelmente é sábio.
Adam-asdf

Percebi que você tem muito respeito nesta comunidade (e aparentemente experiência prática). O que estou olhando? Sei que solicitações de http (s) são demoradas, mas me dê algo para tomar uma decisão informada ... estamos falando de 2 segundos ou 2 microssegundos? Sou prático, mas tendo formação em design, sou esteticamente orientado. Me dê uma maneira de tomar uma decisão informada, por favor.
Adam-asdf

11
@Su 'está totalmente correto. Cada site é diferente no que diz respeito a HTTPR, tudo depende realmente da rota entre o cliente e o servidor. Alguém que usa conexão discada (estática) ou via satélite experimentará tempos de carregamento mais longos do que alguém em DSL ou T1. Uma boa estética é incrivelmente importante, mas uma boa estrutura e otimização são igualmente importantes. Minimizar a margem dos tempos de carregamento é uma prática comum, limitando assim o número de HTTPRequests ao seu site. Criar uma imagem das palavras diminuirá o tempo de carregamento e seus usuários não saberão nada. Veja também os Sprites CSS.
Christopher

@Christopher Estou feliz que você tenha mencionado sprites, acho que você poderia dizer que estou procurando uma maneira de criar uma versão personalizada e disponível localmente de sprites em webfonts.
Adam-asdf

@ user1332729 Fácil, faça o que Su 'sugeriu (crie imagens das palavras) e aplique os princípios do CSS Sprite. Bang, há o mais otimizado possível, sem passar pelos formatos de imagem. O que você quer dizer com disponibilidade local? Para você ou seu cliente?
Christopher

2

Para acompanhar, acabei usando as opções avançadas do gerador @ font-face para subconjunto de minhas fontes, portanto, carreguei apenas os caracteres necessários.

Uma das opções era codificar Base64 as fontes (o que me permitiu incorporá-las no meu arquivo CSS). Se a memória servir, o Base64 codifica .woffa .ttffonte e.

Embora eu goste de oferecer suporte ao maior número de usuários possível, decidi que não valia a pena abrandar os usuários de navegadores modernos com dados extras, provavelmente redundantes, então usei o Modernizr (que usa yep / nope.js) para carregue assincronamente um CSSarquivo separado com referências a todos os formatos de fonte, de acordo com a sintaxe reforçada da fonte à prova de balas .

Eu andei de um lado para o outro entre Base64 que codifica a .wofffonte e inclui o restante das declarações de fonte no CSSarquivo primário ou inclui apenas a Base64 codificada .woffno primário CSSe depois inclui os outros formatos em um CSSarquivo que eu carreguei de forma assíncrona Modernizr.load.

Eu prefiro tempos de carregamento rápidos do que estéticos, portanto o FOUC não era uma grande preocupação, mas observarei que a maioria dos navegadores 'piscou' nas fontes quando elas carregaram (que era depois que as fontes codificadas pela Base64 no CSScarregamento) eram assíncronas.

No lado positivo, uma vez que as fontes foram carregadas e armazenadas em cache (cabeçalhos de longa duração definidos no servidor), o 'piscar' foi eliminado e eu pude carregar conjuntos estendidos de fontes para que os usuários que falassem outros idiomas (e usassem o O widget de tradução do Google incluído) ainda veria o texto estilizado.

Como esse era o meu próprio site, pude experimentar, mas o fiz principalmente para "mostrar", sou mais conservador com os sites dos clientes.

Outra técnica que eu implementei foi colocar todas as .svgfontes em um único arquivo e identificar cada uma com seu próprio ID, em vez de ter cada uma em um arquivo separado, como o gerador @ font-face produz.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.