Um dos grandes motes do desenvolvimento web moderno é primar pela rapidez do site e sua performance, garantindo um bom conteúdo e uma boa experiência para as pessoas que visitam os sites/sistemas/softwares desenvolvidos. Certamente uma técnica para pré-carregamento de recursos nativa seria de grande ajuda. A boa notícia é que esta técnica já existe!
Um esforço partilhado por ambos, navegadores e desenvolvedores, é tornar a experiência de navegação na web mais rápida. Existem muitas maneiras para se tentar conseguir isso, muitas delas já explicadas aqui no blog, mas existe uma nova técnica, introduzida pelo Firefox, que vai ao encontro da velocidade na web: pré-carregamento de recursos com HTML5.
Mas o que, exatamente, seria o pré-carregamento com HTML5? Segundo as FAQ da Mozilla sobre o assunto:
Prefetching link (pré-carregamento de link) é um mecanismo de navegador que utiliza o tempo ocioso do navegador para baixar (ou pré-carregar) documentos que o usuário pode visitar num futuro próximo. […] depois que o navegador termina de carregar a página, ele começa, silenciosamente, a pré-carregar documentos especificados e os armazena em cache. Quando o usuário visita um desses documentos pré-carregados, ele pode ser servida rapidamente através do cache do navegador.
Em outras palavras, o browser carrega recursos designados (páginas, imagens, etc) que o usuário provavelmente irá visitar depois da página atual. É é muito fácil de implementar!
Tag para “prefetch” em HTML5
Apesar do que consta no FAQ da Mozilla, é possível carregar não somente links, mas outros recursos usando a técnica de pré-carregamento:
|
1 2 3 4 5 6 7 8 |
<!-- Página completa --> <link rel="prefetch" href="http://dev.desenvolvimentoparaweb.com/miscelanea/livro-web-design-responsivo/"> <!-- Somente uma imagem --> <link rel="prefetch" href="http://dev.desenvolvimentoparaweb.com/wp-content/themes/dpw2012/img/logo.png"> <!-- Uma folha de estilos --> <link rel="prefetch alternate stylesheet" title="Estilo alternativo" href="another-style.css"> |
Como pôde ser visto, o prefetching no HTML5 é feito através da tag link, especificando “prefetch” como o rel e o href o caminho do recurso a ser pré-carregado.
Pré-carregamento de recursos em HTTPS também é suportado.
Quando pré-carregar conteúdo
Na verdade, quando usar o recurso de pré-carregamento de recursos vai depender da estratégia e necessidades de cada projeto, mas aqui estão algumas ideias:
- Quando existe uma série de páginas correlatas, carregar as próximas 2 ou 3 páginas e as 2 ou 3 páginas anteriores (assumindo que elas não são enormes)
- Carregar imagens que serão utilizadas na maioria das páginas em todo o site.
- Carregar a próxima página de resultados de pesquisa do site.
Notas finais
Algumas notas importantes sobre o prefetching no HTML5 são:
- Pré-carregamento funciona através de domínios, inclusive com uso de cookies
- As estatísticas/métricas do site podem não ficar tão fiéis já que, tecnicamente, determinado(s) recurso(s) pode(m) não ter(em) sido visitado(s)
- O Firefox é único browser que, atualmente, suporta o pré-carregamento (e o faz desde 2003)
Portanto, conhecer este recurso certamente é válido para qualquer desenvolvedor web; entretanto, não é porque ele existe que deve ser usado sem critérios. Se a estratégia de seu site for compatível com a técnica e boa parte dos visitantes usar o Firefox, certamente será uma boa se valer do pré-carregamento de conteúdos com HTML5.