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:

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:

Notas finais

Algumas notas importantes sobre o prefetching no HTML5 são:

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.