ProHoster > Blog > Administración > Precarga, captura previa e outras etiquetas

Precarga, captura previa e outras etiquetas

Ten moitas formas de mellorar o rendemento web. Un deles é a carga previa de contido que será necesario máis adiante. Pre-procesamento CSS, pre-renderizado de páxina completa ou resolución de nomes de dominio. Facemos todo con antelación e despois mostramos o resultado ao instante. Parece xenial.

O que é aínda máis xenial é que se implementa de forma moi sinxela. Cinco etiquetas dálle ao navegador un comando para realizar accións preliminares:

<link rel="prefetch" href="/gl/style.css" as="style" />
<link rel="preload" href="/gl/style.css" as="style" />

<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />

<link rel="prerender" href="https://example.com/about.html" />


Imos explicar brevemente o que fan e cando usalos.

Ir a: precarga · prefixo · preconectar · dns-prefetch · renderización previa

precarga

<link rel= "preload"> indica ao navegador que cargue e cache un recurso (como un script ou unha folla de estilo) o antes posible. Isto é útil cando se necesita un recurso uns segundos despois de que se cargue a páxina e queres acelerar o proceso.

O navegador non fai nada co recurso despois da carga. Non se executan scripts, non se aplican follas de estilo. O recurso simplemente almacénase na memoria caché e ponse inmediatamente dispoñible cando o solicite.

sintaxe

<link rel="preload" href="/gl/style.css" as="style" />

href apunta ao recurso que quere descargar.

as pode ser calquera cousa que se poida descargar no navegador:

  • style para follas de estilo,
  • script para guións,
  • font para fontes,
  • fetch para recursos cargados usando fetch() ou XMLHttpRequest,
  • ver a lista completa en MDN.

É importante especificar o atributo as – isto axuda ao navegador a priorizar e programar as descargas correctamente.

Cando usar

Use a carga previa cando o recurso sexa necesario nun futuro moi próximo. Por exemplo:

  • Tipos de letra non estándar dun ficheiro externo: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    Por defecto comic-sans.woff2 comezará a cargarse só despois de descargar e analizar index.css. Para evitar esperar tanto tempo, podes descargar o tipo de letra antes usando <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Se separas os teus estilos segundo o enfoque CSS crítico en dúas partes, crítica (para renderización inmediata) e non crítica: 
    <style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

    Con este enfoque, os estilos non críticos só comezarán a cargarse cando se execute JavaScript, o que pode ocorrer uns segundos despois da renderización. En lugar de esperar, use JS <link rel= "preload">para comezar a descargar antes:

    <style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/gl/app/non-critical.css" as="style" />

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

Non abuses da precarga. Se cargas todo seguido, o sitio non se acelerará por arte de magia; pola contra, impedirá que o navegador planifique correctamente o seu traballo.

Non se debe confundir coa captación previa. Non usar <link rel= "preload">, se non precisa o recurso inmediatamente despois de cargar a páxina. Se o necesitas máis tarde, por exemplo para a páxina seguinte, úsao <link rel= "prefetch">.

Detalles

Esta é unha etiqueta obrigatoria para ser executado polo navegador (se o admite), a diferenza de todas as outras etiquetas relacionados coa precarga. O navegador debe descargar o recurso especificado en <link rel="preload">. Noutros casos pode ignorar a precarga, por exemplo se se está a executar nunha conexión lenta.

Prioridades. Os navegadores adoitan asignar diferentes prioridades a diferentes recursos (estilos, guións, fontes, etc.) para cargar primeiro os recursos máis importantes. Neste caso, o navegador determina a prioridade por atributo as. Para o navegador Chrome podes mirar táboa de prioridades completa.

Precarga, captura previa e outras etiquetas

prefixo

<link rel= "prefetch"> pídelle ao navegador que descargue e cache un recurso (como un guión ou unha folla de estilo) en segundo plano. A carga prodúcese con baixa prioridade polo que non interfire con recursos máis importantes. Isto é útil se o recurso é necesario na páxina seguinte e queres almacenalo na caché con antelación.

Tamén aquí o navegador non fai nada co recurso despois da carga. Non se executan scripts, non se aplican follas de estilo. O recurso simplemente almacénase na memoria caché e ponse inmediatamente dispoñible cando o solicite.

sintaxe

<link rel="prefetch" href="/gl/style.css" as="style" />

href apunta ao recurso que quere descargar.

as pode ser calquera cousa que se poida descargar no navegador:

  • style para follas de estilo,
  • script para guións,
  • font para fontes,
  • fetch para recursos cargados usando fetch() ou XMLHttpRequest,
  • ver a lista completa en MDN.

É importante especificar o atributo as - isto axuda ao navegador a priorizar e programar as descargas correctamente.

Cando usar

Para cargar recursos doutras páxinas, se necesitas un recurso doutra páxina e queres precargalo para despois acelerar a representación desa páxina. Por exemplo:

  • Tes unha tenda en liña e o 40% dos usuarios abandona a páxina de inicio para a páxina do produto. Use <link rel= "prefetch">, cargando ficheiros CSS e JS para renderizar páxinas de produtos.
  • Tes unha aplicación de páxina única e páxinas diferentes cargan paquetes diferentes. Cando un usuario visita unha páxina, pódense cargar previamente os paquetes de todas as páxinas coas que enlaza.

É probable que esta etiqueta se poida usar con seguridade en calquera medida.. Os navegadores adoitan programar a captura previa coa prioridade máis baixa, polo que non molesta a ninguén. Só ten en conta que consome tráfico de usuarios, o que pode custar cartos.

Non para solicitudes urxentes. Non usar <link rel= "prefetch">, cando o recurso é necesario nuns segundos. Neste caso, use <link rel= "preload">.

Detalles

Etiqueta opcional. O navegador non está obrigado a seguir esta instrución; pode ignorala, por exemplo, nunha conexión lenta.

Prioridade en Chrome. En Chrome <link rel= "prefetch"> xeralmente executado coa prioridade mínima (ver táboa de prioridades completa), é dicir, despois de cargar todo o demais.

preconectar

<link rel= "preconnect"> pídelle ao navegador que se conecte ao dominio con antelación cando queiras acelerar a configuración da conexión no futuro.

O navegador debe establecer unha conexión se recupera algún recurso dun novo dominio de terceiros. Por exemplo, se carga fontes de Google, fontes React desde un CDN ou solicita unha resposta JSON dun servidor de API.

Establecer unha nova conexión leva normalmente uns centos de milisegundos. Faise unha vez, pero aínda leva tempo. Se estableceu unha conexión con antelación, aforrará tempo e descargará recursos deste dominio máis rápido.

sintaxe

<link rel= "preconnect" href="https://api.my-app.com" />

href indica o nome de dominio para o que quere determinar o enderezo IP. Pódese especificar cun prefixo (https://domain.com) ou sen el (//domain.com).

Cando usar

Use para dominios que serán necesarios en breve para descargar un estilo, guión ou imaxe importante desde alí, pero aínda non coñeces o URL do recurso. Por exemplo:

  • A túa aplicación está aloxada my-app.com e fai solicitudes AJAX a api.my-app.com: Non coñece as consultas específicas de antemán porque se fan de forma dinámica desde JS. Aquí é bastante apropiado usar unha etiqueta para conectarse previamente ao dominio.
  • A túa aplicación está aloxada my-app.com e usa Google Fonts. Descárganse en dous pasos: primeiro, o ficheiro CSS descárgase do dominio fonts.googleapis.com, entón este ficheiro solicita fontes con fonts.gstatic.com. Non podes saber de que fontes específicas son os ficheiros fonts.gstatic.com necesitará ata que cargue o ficheiro CSS, polo que só podemos facer unha conexión preliminar previamente.

Usa esta etiqueta para acelerar un pouco algún guión ou estilo de terceiros debido a conexión preestablecida.

Non abusar. Establecer e manter unha conexión é unha operación cara tanto para o cliente como para o servidor. Use esta etiqueta para un máximo de 4-6 dominios.

Detalles

Etiqueta opcional. O navegador non está obrigado a seguir esta instrución e pode ignorala, por exemplo, se xa se estableceron moitas conexións ou nalgún outro caso.

Que inclúe o proceso de conexión?. Para conectarse a cada sitio, o navegador debe facer o seguinte:

  • Resolución DNS. Buscar o enderezo IP do servidor (216.58.215.78) para o nome de dominio especificado (google.com).
  • Apretón de mans TCP. Intercambie paquetes (cliente → servidor → cliente) para iniciar unha conexión TCP co servidor.
  • Axuste de man TLS (só sitios HTTPS). Dúas roldas de intercambio de paquetes (cliente → servidor → cliente → servidor → cliente) para iniciar unha sesión TLS segura.

Nota: HTTP/3 mellorará e acelerará o mecanismo de apretón de mans, pero aínda está moi lonxe.

dns-prefetch

<link rel= "dns-prefetch"> pídelle ao navegador que realice a resolución DNS para o dominio con antelación se se conectará a el en breve e quere acelerar a conexión inicial.

O navegador debe determinar o enderezo IP do dominio se recuperará algún recurso dun novo dominio de terceiros. Por exemplo, cargando fontes Google, fontes React desde un CDN ou solicitando unha resposta JSON dun servidor de API.

Para cada novo dominio, a resolución do rexistro DNS adoita tardar entre 20 e 120 ms. Isto só afecta á carga do primeiro recurso dun determinado dominio, pero aínda así introduce un atraso. Se realizamos a resolución DNS con antelación, aforraremos tempo e cargaremos o recurso máis rápido.

sintaxe

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href indica o nome de dominio para o que desexa configurar o enderezo IP. Pódese especificar cun prefixo (https://domain.com) ou sen el (//domain.com).

Cando usar

Use para dominios que serán necesarios en breve para descargar desde alí recursos que o navegador non coñece de antemán. Por exemplo:

  • A túa aplicación está aloxada my-app.com e fai solicitudes AJAX a api.my-app.com: Non coñece as consultas específicas de antemán porque se fan de forma dinámica desde JS. Aquí é bastante apropiado usar unha etiqueta para conectarse previamente ao dominio.
  • A túa aplicación está aloxada my-app.com, e usa Google Fonts. Descárganse en dous pasos: primeiro, o ficheiro CSS descárgase do dominio fonts.googleapis.com, entón este ficheiro solicita fontes con fonts.gstatic.com. Non podes saber de que fontes específicas son os ficheiros fonts.gstatic.com precisarao ata que cargues o ficheiro CSS, polo que só podemos establecer unha conexión preliminar previamente.

Usa esta etiqueta para acelerar un pouco algún guión ou estilo de terceiros debido a conexión preestablecida.

Teña en conta características similares a <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Normalmente non ten sentido usalos xuntos para un dominio: <link rel= "preconnect"> xa inclúe <link rel= "dns-prefetch"/> e moito máis. Isto pódese xustificar en dous casos:

  • Queres admitir navegadores máis antigos?. <link rel= "dns-prefetch" /> apoiado por desde IE10 e Safari 5. <link rel= "preconnect"> foi compatible durante un tempo en Chrome e Firefox, pero só se engadiu a Safari na versión 11.1 e aínda non é compatible con IE/Edge. Se precisa admitir estes navegadores, use <link rel= "dns-prefetch" /> como opción de copia de seguridade para <link rel= "preconnect">.
  • Queres acelerar as conexións a máis de 4-6 dominios. Etiquetar <link rel= "preconnect"> Non se recomenda usar con máis de 4-6 dominios, xa que establecer e manter unha conexión é unha operación cara. <link rel= "dns-prefetch" /> consume menos recursos, polo que úsao se é necesario.

Detalles

Etiqueta opcional. O navegador non está obrigado a seguir esta instrución, polo que é posible que non realice resolución DNS, por exemplo, se hai moitas etiquetas deste tipo na páxina ou nalgún outro caso.

Que é o DNS. Cada servidor en Internet ten un enderezo IP único, que se parece 216.58.215.78. O nome do sitio adoita introducirse na barra de enderezos do navegador (por exemplo, google.com), e os servidores DNS (Domain Name System) coinciden co enderezo IP do servidor (216.58.215.78).

Para determinar un enderezo IP, o navegador debe consultar o servidor DNS. Leva entre 20 e 120 ms ao conectarse a un novo dominio de terceiros.

O DNS está almacenado en caché, aínda que non é moi fiable. Algúns sistemas operativos e navegadores almacenan en caché as consultas DNS: isto aforrará tempo nas consultas repetidas, pero non se pode confiar na memoria caché. En Linux normalmente non funciona en absoluto. Chrome ten unha caché DNS, pero só dura un minuto. Windows almacena en caché as respostas DNS durante cinco días.

renderización previa

<link rel= "prerender"> pídelle ao navegador que descargue o URL e que o amose nunha pestana invisible. Cando o usuario fai clic na ligazón, a páxina debería mostrarse inmediatamente. Isto é útil se estás seguro de que o usuario visitará unha determinada páxina e queres acelerar a súa visualización.

A pesar (ou por mor da) da excepcional eficacia desta etiqueta, en 2019 <link rel= "prerender"> mal compatible nos navegadores principais. Ver máis detalles. abaixo.

sintaxe

<link rel="prerender" href="https://my-app.com/pricing" />

href apunta ao URL que quere comezar a renderizar en segundo plano.

Cando usar

Cando estea realmente seguro de que o usuario irá a unha determinada páxina. Se tes un "túnel" polo que o 70% dos visitantes da páxina A van á páxina B, entón <link rel= "prerender"> na páxina A axudará a mostrar a páxina B moi rapidamente.

Non abusar. A renderización previa é moi cara en termos de ancho de banda e memoria. Non usar <link rel= "prerender"> por máis dunha páxina.

Detalles

Etiqueta opcional. O navegador non está obrigado a seguir esta instrución e pode ignorala, por exemplo, nunha conexión lenta ou cando non hai suficiente memoria libre.

Para gardar memoria Chrome non realiza a renderización completaE só precarga NoState. Isto significa que Chrome carga a páxina e todos os seus recursos, pero non renderiza nin executa JavaScript.

Firefox e Safari non admiten esta etiqueta en absoluto. Isto non infrinxe a especificación, xa que os navegadores non están obrigados a seguir esta instrución; pero aínda triste. Error de implementación Firefox leva sete anos aberto. Hai informes de que Safari tampouco admite esta etiqueta.

Resumo

Uso:

  • <link rel= "preload"> - cando necesites un recurso nuns segundos
  • <link rel= "prefetch"> - cando necesites o recurso da páxina seguinte
  • <link rel= "preconnect"> - cando sabes que necesitarás un recurso en breve, pero aínda non coñeces o seu URL completo
  • <link rel= "dns-prefetch"> - do mesmo xeito, cando sabes que necesitarás un recurso en breve, pero aínda non coñeces o seu URL completo (para navegadores máis antigos)
  • <link rel= "prerender"> — cando estás seguro de que os usuarios irán a unha determinada páxina e queres acelerar a súa visualización

Fonte: www.habr.com

Engadir un comentario