Autor: Kadu Oliveira
-
Imagens em Tela Retina com Compressive Images
Compressive images é a técnica de gerar um JPG grande, com o dobro da resolução original, porém com uma qualidade bem baixa. Incluímos essa imagem na página declarando a metade do seu tamanho. Boa solução para servir telas retina.
-
Performance de imagens – acelerando o tempo de carregamento do seu site
Atualmente a maioria dos sites contém uma grande quantidade de imagens. Essas imagens, quase sempre, são responsáveis pela maior parte das requisições, chegando de 50% a 65% da carga total de uma página.
-
Técnicas e ferramentas para melhorar a performance de sites
Um bom desempenho no requisito velocidade é o primeiro passo para atrair visitas e melhorar a experiência do usuário. Pessoas detestam esperar, principalmente na Internet. Os buscadores como o Google usam o fator velocidade de carregamento nos rankings de busca. Entregar um site lento e pesado para seus usuários é um dos Crimes de usabilidade…
-
Font Local Storage, Implementando em segundos
Já pensou em poder armazenar suas fontes no navegador do usuário? LocalFont é uma ferramenta online que converte sua família de fontes no formato .woff .woff2 e .ttf para ser armazenada no navegador usando Local Storage do HTML5. A ferramenta gera o código CSS e o JS necessário para fazer o armazenamento da fonte (localStorage).…
-
Paginação e SEO
Quando temos muito conteúdo em uma mesma página é comum usarmos paginação. Onde o usuário tem que clicar num link para ir para a próxima página ou voltar para página anterior. Mas agora, como o Google trata a paginação? Informar sua paginação aos mecanismos de busca é algo simples de resolver. Podemos indicar sobre a…
-
Ativando Breadcrumbs no WordPress
Ative os Breadcrumb no WordPress e crie uma navegação mais elegante, complementando a usabilidade do seu site. Além disso, Breadcrumbs servem para os mecanismos de busca entenderem melhor a estrutura do site, já que eles aparecem nos resultados de busca do Google. Breadcrumbs é uma opção nativa do plugin wordpress seo yoast, é necessário apenas…
-
Centralizar na vertical com três linhas de CSS
Aprenda como alinhar qualquer elemento HTML na vertical com apenas três linhas de CSS. A técnica consiste em usar a propriedade CSS transform, que normalmente é usada para girar elementos. Além dela utilizamos também a função translateY. Dessa forma centralizamos qualquer elemento na vertical, mesmo sem sabermos a altura do elemento. Recomendo que leia também…
-
Forçar estado de elementos no navegador
Você já tentou inspecionar um elemento no seu estado hover? Se alguma vez você fez isso deve ter passado um certo apuro, já que quando você move o mouse para o Dev Tools, o elemento perde o estado de hover e você não consegue mais inspecionar aquele elemento que aparece só no estado hover. Saiba…
-
Convertendo um layout fixo para fluído
Se todos usuários acessassem nossos sites com navegadores cujas janelas fossem todas do mesmo tamanho seria um mundo praticamente perfeito e o desenvolvedor poderia ter um controle perfeito do seu layout. Mas sabemos que nossa realidade é bem diferente, Tempos atrás até dava para o desenvolvedor “enganar” e criar sites com um tamanho padrão como…
-
Dica para indexar páginas em minutos no Google
Após publicar um post no seu blog ou criar uma página nova no seu site você pode aguardar que essa página seja indexada. Em algum momento o Google vai indexar essa URL, porém temos menos controle de quando isso vai acontecer. Em vez disso podemos pedir para o Google indexar nossa página. Vou mostrar uma…