Normalmente, os criativos HTML5 são anúncios criados com HTML, CSS e JavaScript. Esses criativos oferecem muitas opções de compactação de arquivos. Várias das dicas abaixo podem ser implementadas em menos de 15 minutos.
Tópicos deste artigo
Usar o Google Web Designer
O Google Web Designer é um aplicativo da Web para o desenvolvimento de HTML5 que se integra perfeitamente ao Studio e à Biblioteca de recursos. O Google Web Designer também conta com compactação integrada de imagens e código, além de ser compatível com fontes da Web do Google, SVG, animação em CSS e muito mais.
Começar a usar o Google Web Designer
Verificar o tamanho do arquivo
Antes de reduzir o tamanho do arquivo, revise seu tamanho de arquivo atual e consulte os seguintes termos e diretrizes.
O tamanho do arquivo bruto em comparação com o do arquivo compactado
Para revisar o tamanho do arquivo bruto, faça o seguinte:
- No Studio, verifique o Tamanho total do arquivo na etapa Gerenciar arquivos do fluxo de trabalho do criativo do Studio.
- No Google Web Designer, clique em Publicar > Publicar localmente para visualizar "Tamanho total (bruto)" na caixa de diálogo de publicação. Você também pode ver o tamanho atual do arquivo no painel Validador de anúncios.
O Google Web Designer compacta os criativos com o software gratuito gzip. Se você não usa o Google Web Designer, faça o download de uma cópia gratuita do gzip, compacte os criativos em seu espaço de trabalho local e inspecione o tamanho do arquivo.
Linha de base do tamanho de arquivo
Antes de gerar o criativo, é essencial entender as especificações de veiculação de anúncios de seu editor. No entanto, muitos editores seguem a recomendação do IAB de carregamento inicial de 200 KB (compactado) do criativo e 300 ou 500 KB para o tamanho total do criativo. O carregamento inicial refere-se ao tamanho total do arquivo compactado com todos os recursos do criativo entregues ao navegador para a exibição inicial do anúncio. Ele inclui todos os arquivos: imagens, HTML, CSS e JavaScript.
Tamanho do arquivo Enabler
O Enabler precisa ser incluído nos criativos do Studio, mas os navegadores da Web mantêm uma cópia em cache, porque o mesmo script é carregado para cada criativo do Studio. O tamanho do script do Enabler é 25 KB (compactado) e 75 KB (bruto).
Consulte as diretrizes do IAB e do Studio para ver mais detalhes:
- Diretrizes do IAB para HTML5 (no formato PDF, consulte as páginas 4 e 6)
- Diretrizes para criativos do Studio
Sobre as intervenções pesadas de anúncios do Chrome
- Se o criativo tiver muitas imagens, vídeos, animações ou objetos 3D, siga as diretrizes do Chrome para testá-lo e garantir que ele não seja descarregado.
- Use a demonstração de intervenção pesada de anúncios do Chrome para testar seu criativo e ver se ele será bloqueado.
Carregamento discreto e especificações do editor
O carregamento discreto atrasa o carregamento de recursos adicionais do criativo (como imagens e vídeo) até que a página do editor seja carregada. Ele é diferente do carregamento inicial, que se refere ao tamanho total do arquivo compactado com todos os recursos do criativo entregues ao navegador para a exibição inicial do anúncio. Alguns editores exigem o carregamento discreto. No entanto, mesmo que ele não seja obrigatório, é recomendável incluí-lo. Saiba como configurar o carregamento discreto
Analise as especificações de Rich Media em HTML5 do editor. Os editores podem calcular o tamanho do arquivo com base no formato gzip compactado ou contabilizar o tamanho do arquivo bruto. As especificações individuais de alguns editores podem diferir das especificações do IAB dependendo da veiculação, do tipo de anúncio etc. Alguns editores podem estar mais dispostos a se comprometerem com especificações desenvolvidas. Além disso, observe os limites de tempo de reprodução de vídeos ou animações.
Reduzir o tamanho da imagem
Antes de tentar reduzir o tamanho de uma imagem, primeiro considere se a imagem é mesmo necessária. Alguns elementos da imagem podem ser substituídos por estilos CSS. Confira abaixo algumas sugestões e recursos para reduzir o número de imagens no seu criativo e otimizar as imagens necessárias.
Uso de CSS para criar gradientes ou cores sólidasImagens GIF, JPG e PNG baseiam-se em pixels ("rastreio") e têm tamanhos maiores. SVGs são gráficos ponto a ponto ("vetor") e podem reduzir significativamente o tamanho do arquivo.
Saiba mais sobre SVG
Tutorial de SVG da W3School (em inglês)
Como usar SVGs (em inglês)
Compactação de SVGs (em inglês)
Fontes de ícones são fontes regulares que podem ser usadas da mesma forma que as fontes padrão. Geralmente baseiam-se em vetores, o que reduz o tamanho do arquivo. Se você usa os mesmos ícones repetidamente, crie sua própria fonte de ícones.
Recursos para fonte de ícones
Icomoon Icon Font Creator (em inglês)
Ícones CSS NounProject (em inglês)
Ícones CSS FontAwesome (em inglês)
A Folha de sprite é uma imagem única em blocos que é carregada uma vez. Com CSS, apenas blocos individuais da imagem como um todo são exibidos. Usar uma Folha de sprite reduz o número de solicitações HTTP. Quanto menos solicitações HTTP, mais rápido o criativo é carregado. Um ponto importante é encontrar a compactação adequada para sua Folha de sprite.
Recursos da Folha de sprite
Visão geral dos sprites de imagem CSS da W3School (em inglês)
Gerador de folhas de sprite on-line Stitches (em inglês)
Se as imagens de pixels forem necessárias, comprima-as o máximo possível procurando preservar a qualidade. Você provavelmente conhece a opção "Save For Web" do Photoshop, mas existem outras ferramentas on-line que oferecem compactação avançada.
Compactadores de imagem gratuitos
TinyPNG (em inglês)
TinyJPG (em inglês)
Animar com CSS
Em vez de JavaScript, considere usar animações CSS3 para transições e transformações. As transformações de CSS usam a GPU (unidade de processamento gráfico) no lugar da CPU (unidade central de processamento) para a renderizar animações, o que melhora o desempenho e reduz o tamanho do arquivo JavaScript.
Para mais animações complexas (incluindo animações de partículas), considere o uso das bibliotecas de animação em JavaScript do GreenSock (GSAP). O GreenSock simplifica os aspectos mais complexos da animação CSS, como ajustar o tempo de múltiplas animações e animar de forma independente as propriedades de transformação.
Não utilize bibliotecas JavaScript ou frameworks que usam o método setInterval do JavaScript para animações. Não use o método setInterval ao codificar manualmente. setInterval usa muitos recursos do navegador, afeta o desempenho e exige ainda mais códigos. Se as animações em JavaScript forem obrigatórias, considere o uso do método requestAnimationFrame, que é desenvolvido especificamente para animações.
Aprenda a otimizar o desempenho de animação
Uso de requestAnimationFrame (em inglês)
Animações CSS vs JavaScript
Antes de fazer upload de seus arquivos CSS para o Studio, reduza seu CSS com um Redutor de CSS.
Reduzir o tamanho do arquivo JavaScript
Veja algumas dicas para reduzir o tamanho do arquivo JavaScript:
Não usar jQueryEm vez de fazer o upload de bibliotecas JavaScript com seu criativo, substitua as referências a elas por URLs hospedados pelo Studio. As bibliotecas são hospedadas no domínio do anúncio ativo.
O Studio trabalha com o IAB para que esses recursos sejam compartilhados e armazenados em cache por muitos criativos. Assim, eles podem ser excluídos do carregamento inicial do seu anúncio.
Economize tempo e codificação decidindo quais navegadores e dispositivos a campanha segmentará. Não adicione código para navegadores ou dispositivos não compatíveis. Isso também poupará tempo durante o teste.
Recursos de compatibilidade com navegadoresCompatibilidade com navegadores e dispositivos para o Studio
Posso usar: compatibilidade atualizada do navegador com as propriedades JS e CSS
Combinar e compactar JavaScript
Se você tiver vários arquivos JavaScript, combine-os em um só. Use ferramentas para a remoção de comentários e espaços em branco excedentes do JavaScript.
- Mantenha uma cópia descompactada para atualizações futuras.
- O Studio exige que os arquivos JavaScript tenham uma extensão
.js, não.min.js. - Se você reduzir seus arquivos JavaScript, não será possível adicionar o rastreamento facilmente. Adicione o rastreamento primeiro e, em seguida, reduza o arquivo JavaScript.
Otimizar fontes
Se você usar uma fonte que não seja padrão da Web, considere o uso do Google Fonts (em inglês), uma grande biblioteca de fontes gratuitas. Para reduzir o tamanho do arquivo, solicite apenas os caracteres necessários, e não toda a fonte.
No entanto, também é importante considerar que apenas URLs absolutos são armazenados em cache por um navegador. Embora http://fonts.googleapis.com/css?family=Philosopher&text=Hello tenha o menor tamanho para um criativo específico, ela ainda será vista como uma solicitação diferente de http://fonts.googleapis.com/css?family=Philosopher&subset=latin, que já pode estar armazenada em cache no histórico do navegador. Aproveite o armazenamento em cache sempre que possível para acelerar o carregamento dos criativos.
Saiba mais sobre fontes da Web
Otimização de solicitações de fonte com o Google Web Fonts
Subconjunto de fontes para Typekit e fontes da Web de auto-hospedadas (em inglês)