Blog sobre WordPress
No Result
View All Result
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce
Cadastrar e-mail
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce
No Result
View All Result
Blog sobre WordPress
No Result
View All Result

Início » Desenvolvimento WordPress » A introdução do Resource Hints no WordPress 4.6

A introdução do Resource Hints no WordPress 4.6

Leandro Vieira by Leandro Vieira
7 anos ago
Reading Time: 2 min
2
resource hints
Compartilhe no FacebookCompartilhe no LinkedIn

O W3C tem uma específica recente, ainda em draft, focada em Resource Hints e o WordPress 4.6 já a adotou. Eu, sinceramente, gosto muito dos avanços de vanguarda da plataforma em suas atualizações para garantir o uso das tecnologias mais recentes e que agregam significativo valor para seus usuários. E através dos Resource Hints teremos de performance.

Conteúdo relacionado

Como criar Web Stories no WordPress

Como criar blocos reutilizáveis no Gutenberg

Como habilitar recursos ocultos do Gutenberg no tema WordPress

O que o WordPress 4.6 introduziu para a melhoria de performance?

Click To Tweet

Sobre a utilidade e uso dos Resource Hints

A especificação do Resource Hints definirá a relação da tag HTML <link> quando seu atributo rel conter os valores dns-prefetch, preconnect, prefetch ou prerender. Esses valores de atributo informará ao agente de usuário, um navegador de internet, por exemplo, qual decisão de processo tomar com a URL informada no atributo href da tag <link>.

Se você não entendeu nada, imagine o seguinte cenário. Você tem arquivos estáticos externos ao seu domínio. Por exemplo arquivos de CSS hospedado em alguma CDN, ou não, e fontes hospedadas no Google Fontes. Se esse arquivo CSS for inserido através da função wp_enqueue_style o WordPress 4.6 detectará essas referências externas e fará uso da tag <link> com o atributo rel contendo o valor dns-prefetch no cabeçalho da página resultando em um código assim:

<link rel='dns-prefetch' href='//fonts.googleapis.com'>
<link rel='dns-prefetch' href='//domino-externo.com'>

Com essa marcação HTML no cabeçalho da página o agente de usuário vai iniciar e antecipar o processo de resolução de DNS em background e assim aprimorar a performance uma vez que alguns segundos são consumidos nesse processo.

Ilustração de exemplo de prefetching
Crédito da imagem https://www.keycdn.com/

Função do WordPress para o Resource Hints

O WordPress 4.6 introduziu a função wp_resource_hints() através da qual será possível adicionar domínios personalizados para a conexão em background. Tenha cuidado para não utilizar o recurso demasiadamente para não compreender a performance ao contrário de melhora-la.

Até o momento o Codex ainda não tem uma documentação sobre a função. Mas você pode consultar seu código, parâmetros e retornos através do arquivo wp-includes/general-template.php a partir da linha 2800.

Abaixo reproduzo o código do Pascal Birchler postado no Make WordPress Core.

function makewp_example_resource_hints( $hints, $relation_type ) {
 if ( 'dns-prefetch' === $relation_type ) {
 $hints[] = '//make.wordpress.org';
 } else if ( 'prerender' === $relation_type ) {
 $hints[] = 'https://make.wordpress.org/great-again';
 }
 return $hints;
}
add_filter( 'wp_resource_hints', 'makewp_example_resource_hints', 10, 2 );

Já posso usar o Resource Hints: dns-prefetch

Abaixo uma imagem ilustrativa do suporte dos navegadores de internet ao recurso de dns-prefetch.

Resource Hints: dns-prefetch
http://caniuse.com/#search=dns-prefetch

 

Tags: dnsdns-prefetchpreconnectprefetchprefetchingprerenderWordPress 4.6
Share8Share1SendShare
Previous Post

Introdução da nova classe WP_Post_Type

Next Post

WordPress Release Overview 4.6, uma série de conteúdos inéditos.

Leandro Vieira

Leandro Vieira

Uma das grandes referências de WordPress no Brasil, entusiasta e evangelista da plataforma. Fundador e CEO da Apiki, empresa especializada no desenvolvimento web com WordPress.

Related Posts

Anatomia do Gutenberg, o editor do WordPress
Desenvolvimento WordPress

Anatomia do Gutenberg, o editor do WordPress

13 de janeiro de 2021
As vantagens do editor Gutenberg para WordPress
Desenvolvimento WordPress

As vantagens do editor Gutenberg para WordPress

19 de agosto de 2020
Metodologia BPM para melhoria de processos dentro da empresa
Desenvolvimento WordPress

Metodologia BPM para melhoria de processos dentro da empresa

15 de janeiro de 2021
Scrum e PMBOK - aliados na gestão de projetos
Desenvolvimento WordPress

PMBOK e Scrum: grandes aliados na gestão de projetos

15 de janeiro de 2021
Next Post
Apiki lança série de artigos sobre as novidades do WordPress 4.5

WordPress Release Overview 4.6, uma série de conteúdos inéditos.

wp 4.6

WP 4.6, tudo sobre a versão do WordPress.

Comments 2

  1. Mário Valney says:
    7 anos ago

    Muito interessante. Valeu pela explicação!

    Responder
  2. Pingback: Atributos para Resource Hints - Apiki Blog

Deixe um comentário Cancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Receba no seu e-mail uma série de conteúdos sobre Infra para WordPress.

  • Este campo é para fins de validação e não deve ser alterado.

Facebook LinkedIn Instagram Twitter Youtube Github RSS

Sobre a Apiki

Empresa especializada em WordPress com três unidades de negócios.

  1. Design e Desenvolvimento;
  2. Infra e Hospedagem;
  3. Suporte e manutenção.

Em resumo, só fazemos uma coisa em WordPress: tudo.

Páginas do Apiki.com

  • Apiki.com
  • Sobre a Apiki
  • Hospedagem
  • Desenvolvimento
  • UX & UI para WordPress
  • Growth em WordPress
  • Suporte
  • Atendimento

Páginas do Blog

  • Sobre
  • Newsletter
  • Desenvolvimento WordPress
  • Segurança para WordPress
  • WordPress Mobile
  • Infra para WordPress
  • WordPress SEO
  • WordPress Performance
  • E-commerce

© 2020 Apiki - Empresa especializada em WordPress.

No Result
View All Result
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce

© 2020 Apiki - Empresa especializada em WordPress.