{"id":68192,"date":"2024-05-07T07:47:21","date_gmt":"2024-05-07T10:47:21","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=68192&preview=true&preview_id=68192"},"modified":"2024-05-16T10:11:44","modified_gmt":"2024-05-16T13:11:44","slug":"carregamento-especulativo","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/carregamento-especulativo\/","title":{"rendered":"Como o Carregamento Especulativo Pode Aumentar a Velocidade da P\u00e1gina do seu Site WordPress"},"content":{"rendered":"

Atualmente as p\u00e1ginas na web est\u00e3o repletas de imagens, v\u00eddeos e elementos interativos que visam aprimorar a experi\u00eancia do usu\u00e1rio. No entanto, esses elementos podem tornar o tempo de carregamento de p\u00e1gina mais lento.<\/p>\n

Com o avan\u00e7o da tecnologia, um objetivo permanece constante: Desempenho<\/em>. Todos esperam que suas p\u00e1ginas web sejam carregadas numa velocidade rel\u00e2mpago<\/a>.<\/p>\n

Uma forma de acelerar o carregamento das p\u00e1ginas web \u00e9 pr\u00e9-renderizar ou pr\u00e9-carregar as p\u00e1ginas antes que o usu\u00e1rio navegue at\u00e9 elas.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Um breve hist\u00f3rico da pr\u00e9-renderiza\u00e7\u00e3o<\/h2>\n

Em 2011, a equipe do Chromium introduziu uma forma inicial de pr\u00e9-renderiza\u00e7\u00e3o<\/a> no navegador Chrome por meio da tag <link rel=\"prerender\" \u2026 ><\/code>.<\/p>\n

Isso permitiu que os desenvolvedores<\/a> indicassem aos navegadores<\/a> as p\u00e1ginas que um usu\u00e1rio poderia visitar em seguida. O navegador ent\u00e3o buscava e renderizava silenciosamente essas p\u00e1ginas em segundo plano, reduzindo drasticamente<\/em> o tempo de carregamento quando o usu\u00e1rio navegava para essas p\u00e1ginas.<\/p>\n

Apesar dos benef\u00edcios, essa implementa\u00e7\u00e3o inicial de pr\u00e9-renderiza\u00e7\u00e3o usava muitos recursos de largura de banda e CPU, e poderia levar a problemas de privacidade se o usu\u00e1rio n\u00e3o visitasse as p\u00e1ginas pr\u00e9-renderizadas. Al\u00e9m disso, voc\u00ea tinha que selecionar manualmente quais links seriam pr\u00e9-renderizados, o que nem sempre era eficaz ou vi\u00e1vel.<\/p>\n

Para resolver algumas dessas preocupa\u00e7\u00f5es, o Chrome preteriu a pr\u00e9-renderiza\u00e7\u00e3o que usava a sugest\u00e3o de link rel=prerender<\/code> em favor do m\u00e9todo NoState Prefetch<\/a>, que envolvia a busca de recursos para uma p\u00e1gina sem executar JavaScript ou outras a\u00e7\u00f5es potencialmente invasivas \u00e0 privacidade.<\/p>\n

O m\u00e9todo NoState Prefetch melhorou o carregamento de recursos, mas n\u00e3o conseguia fornecer um carregamento instant\u00e2neo de p\u00e1gina tal como a pr\u00e9-renderiza\u00e7\u00e3o completa.<\/p>\n

Apresentando a API Speculation Rules<\/h2>\n

A API Speculation Rules<\/a> (Regras de Especula\u00e7\u00e3o) \u00e9 uma nova API experimental definida por JSON que pr\u00e9-carrega especulativamente URLs antes de navegar at\u00e9 elas, o que resulta em tempos de renderiza\u00e7\u00e3o mais r\u00e1pidos e experi\u00eancias de usu\u00e1rio aprimoradas.<\/p>\n

A API permite que os desenvolvedores configurem regras com uma estrutura definida no formato JSON em script type=\"speculationrules\"<\/code> que o navegador pode usar para decidir quais URLs devem ser pr\u00e9-renderizadas.<\/p>\n

<script type=\"speculationrules\">\n{\n  \"prerender\": [\n    {\n      \"source\": \"list\",\n      \"urls\": [\"firstpage.html\", \"secondpage.html\"]\n    }\n  ]\n}\n<\/script><\/code><\/pre>\n
O mesmo se aplica \u00e0 pr\u00e9-carregamento, que frequentemente pode ser um bom primeiro passo no caminho para a pr\u00e9-renderiza\u00e7\u00e3o:<\/p>\n
<script type=\"speculationrules\">\n{\n  \"prefetch\": [\n    {\n      \"urls\": [\"firstpage.html\", \"secondpage.html\"]\n    }\n  ]\n}\n<\/script><\/code><\/pre>\n
Os snippets de c\u00f3digo acima mostram como a API Speculation Rules funcionou ao especificar uma lista de URLs para\u00a0pr\u00e9-carregar ou pr\u00e9-renderizar.<\/p>\n
Recentemente, o Google anunciou novos aprimoramentos na API Speculation Rules<\/a>, que agora oferece a op\u00e7\u00e3o de localiza\u00e7\u00e3o autom\u00e1tica de links usando regras de documentos<\/em>. Funciona usando a busca de URLs do documento com base em uma condi\u00e7\u00e3o where<\/code>.<\/p>\n
<script type=\"speculationrules\">\n{\n  \"prerender\": [\n    {\n      \"source\": \"document\",\n      \"where\": {\n        \"and\": [\n          {\n            \"href_matches\": \"\/*\"\n          },\n          {\n            \"not\": {\n              \"href_matches\": [\n                \"\/wp-login.php\",\n                \"\/wp-admin\/*\"\n              ]\n            }\n          }\n        ]\n      },\n      \"eagerness\": \"moderate\"\n    }\n  ]\n}\n<\/script><\/code><\/pre>\n
Nesse snippet de c\u00f3digo, todas as URLs da p\u00e1gina s\u00e3o consideradas para pr\u00e9-renderiza\u00e7\u00e3o, exceto aquelas que levam \u00e0s p\u00e1ginas de login<\/a> e administra\u00e7\u00e3o do WordPress. Voc\u00ea tamb\u00e9m especifica um n\u00edvel de eagerness<\/code> (ansiedade) \u2014 eager<\/code> (imediatamente), moderate<\/code> (ao passar o mouse por 200 ms) e conservative<\/code> (ao passar o mouse ou ao tocar na p\u00e1gina).<\/p>\n
Os seletores CSS<\/a> tamb\u00e9m podem ser usados como alternativa ou em conjunto com as correspond\u00eancias href<\/code> para localizar links na p\u00e1gina atual:<\/p>\n
<script type=\"speculationrules\">\n{\n  \"prerender\": [{\n    \"source\": \"document\",\n    \"where\": {\n      \"and\": [\n        { \"selector_matches\": \".prerender\" },\n        { \"not\": {\"selector_matches\": \".do-not-prerender\"}}\n      ]\n    },\n    \"eagerness\": \"moderate\"\n  }]\n}\n<\/script><\/code><\/pre>\n
Ao usar a API Speculation Rules, voc\u00ea pode inspecion\u00e1-la usando os servi\u00e7os em segundo plano Speculative loads <\/strong>na aba Application <\/strong>do Chrome, ao inspecionar a p\u00e1gina.<\/p>\n
\"Inspecione
Inspecione a API Speculation Rules com os servi\u00e7os em segundo plano Speculative loads na aba Application\u00a0do Chrome.<\/figcaption><\/figure>\n
H\u00e1 mais informa\u00e7\u00f5es sobre isso \u2014 vamos explor\u00e1-las na se\u00e7\u00e3o de depura\u00e7\u00e3o.<\/p>\n
Suporte do navegador<\/h3>\n
A API Speculation Rules \u00e9 compat\u00edvel<\/a> com navegadores modernos baseados no Chromium<\/a>, incluindo o Chrome e o Edge, a partir de vers\u00f5es espec\u00edficas.<\/p>\n
\"Suporte
Suporte do navegador para a API Speculation Rules (Fonte: Mozilla<\/a>).<\/figcaption><\/figure>\n
Isso garante que os usu\u00e1rios de navegadores compat\u00edveis possam se beneficiar de tempos de carregamento mais r\u00e1pidos, enquanto os usu\u00e1rios de outros navegadores n\u00e3o sofrer\u00e3o nenhum efeito negativo, pois a API \u00e9 uma ferramenta de aprimoramento progressivo.<\/p>\n
O plugin Speculative Loading do WordPress<\/h2>\n
Para aproveitar os benef\u00edcios da API Speculation Rules no WordPress, a equipe de desempenho do WordPress<\/a> (incluindo desenvolvedores do Google) publicou recentemente o plugin Speculative Loading<\/a>. Esse plugin permite o carregamento especulativo de URLs de frontend vinculadas na p\u00e1gina.<\/p>\n
At\u00e9 o momento o plugin teve baixa ado\u00e7\u00e3o, pois a API ainda est\u00e1 em sua fase inicial, mas recebeu algumas cr\u00edticas positivas.<\/p>\n
\"Coment\u00e1rios
Coment\u00e1rios da comunidade do WordPress sobre o plugin Speculative Loading.<\/figcaption><\/figure>\n
Por padr\u00e3o, o plugin \u00e9 configurado para pr\u00e9-renderizar URLs de frontend de WordPress quando o usu\u00e1rio passa o mouse sobre um link relevante. Isso pode ser personalizado por meio da se\u00e7\u00e3o Speculative Loading<\/strong> em Settings<\/strong> > Reading<\/strong>.<\/p>\n
\"Personalize
Personalize o plugin Speculative Loading nas configura\u00e7\u00f5es de administra\u00e7\u00e3o do WordPress.<\/figcaption><\/figure>\n
Isso significa que todas as URLs vinculadas na p\u00e1gina s\u00e3o pr\u00e9-renderizados com uma configura\u00e7\u00e3o eagerness<\/code> de moderate<\/code>, que normalmente \u00e9 acionada quando voc\u00ea passa o mouse sobre um link. Dessa forma, voc\u00ea n\u00e3o precisa fazer nada ap\u00f3s ativar o plugin; ele simplesmente funciona<\/em> automaticamente.<\/p>\n
Por exemplo, se voc\u00ea j\u00e1 instalou o plugin Speculative Loading<\/strong> em um site WordPress, use o Chrome DevTools<\/a> para inspecionar o site e clique na aba Elements<\/strong>. Ao rolar para baixo, voc\u00ea notar\u00e1 que um script type=\"speculationrules\"<\/code> j\u00e1 foi adicionado pra voc\u00ea com as v\u00e1rias regras de especula\u00e7\u00e3o (speculation rules).<\/p>\n
\"Inspecione
Inspecione o site do WordPress para ver que as regras de especula\u00e7\u00e3o s\u00e3o adicionadas automaticamente com o plugin Speculative Loading.<\/figcaption><\/figure>\n
Ele usa um Regex para especificar os links que devem ser pr\u00e9-renderizados, especifica os links que n\u00e3o devem ser pr\u00e9-renderizados e define a ansiedade (eagerness). As se\u00e7\u00f5es a seguir explicam essas regras em detalhes.<\/p>\n
Limites para evitar o uso excessivo<\/h3>\n
O Chrome tem limites para evitar o uso excessivo da API:<\/p>\n\n\n\n\n\n
Ansiedade (Eagerness)<\/strong><\/td>\nPr\u00e9-carregamento<\/strong><\/td>\nPr\u00e9-renderiza\u00e7\u00e3o<\/strong><\/td>\n<\/tr>\n
imediato\/ansioso<\/td>\n50<\/td>\n10<\/td>\n<\/tr>\n
moderado\/conservador<\/td>\n2 (FIFO)<\/td>\n2 (FIFO)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Eles evitam o uso excessivo por meio de v\u00e1rias configura\u00e7\u00f5es baseadas na urg\u00eancia e na intera\u00e7\u00e3o do usu\u00e1rio.<\/p>\n