# Pré-carregamento de recursos com HTML5 > Pré-carregamento de recursos com HTML5 (preload/prefetch). Otimize drasticamente performance antecipando download de assets críticos. Acelere seu site! URL: https://dpw.dev/html/pre-carregamento-de-recursos-com-html5/ Publicado em: 2012-11-12 Categoria: html Tags: performance Autor: Tárcio Zemel 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! > Artigo baseado em [HTML5 Link Prefetching](http://davidwalsh.name/html5-prefetch). 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](/tag/performance/), 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](https://developer.mozilla.org/en/link_prefetching_faq): > 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: - 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**. --- Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR). Guia para agentes: https://dpw.dev/llms.txt Índice completo: https://dpw.dev/sitemap-index.xml Feed: https://dpw.dev/rss.xml