Cómo acelerar el sitio web con la etiqueta

"Previendo"Los navegadores son el futuro de la navegación por Internet de alta velocidad., trayéndonos los recursos que queremos Incluso antes de que sepamos que los queremos. Los navegadores de hoy ya hacer algunos predicciones de vez en cuando para acelerar la recuperación y la representación de documentos. Para llevar esto al siguiente paso, nos fijamos en los desarrolladores web..

Los desarrolladores tienen un muy buena idea de cómo se navegan sus sitios web, y cual los recursos se solicitan con mayor frecuencia y por lo tanto, pueden predecir algunas operaciones futuras que los navegadores deberían hacer para los sitios. Todo lo que se necesita ahora es que los desarrolladores encuentren una manera de transmitir estos predicciones a los navegadores y darles un buen uso. Aquí es donde entran algunos "enlaces HTML" especiales.

Un Actualizador en Solicitudes HTTP

Antes de echar un vistazo a estos enlaces, es hora de actualizar nuestra memoria sobre cómo se realiza una operación típica de búsqueda de archivos solicitada por HTTP. Digamos que alguien llamado Joe quiere visitar un sitio web.

Esto es lo que sucede a continuación:

1. Joe escribe la dirección humanamente recuperable del sitio web en la barra de direcciones de un navegador y presiona "Enter".
2. Una vez que recibió esa dirección, el navegador solicita a un servidor DNS (cortesía de ISP) la dirección IP de la dirección dada por Joe.
3. El servidor DNS obliga.
4. Ahora que el navegador conoce la dirección IP, envía un mensaje (en el dialecto TCP) al servidor del sitio web, solicitando una conexión..
5. Si el servidor está activo y en buen estado, envía una respuesta que reconoce la solicitud del navegador y éste responde y reconoce el mensaje del servidor. (Nota: Sí, esta es una versión extremadamente diluida de un protocolo de enlace TCP entre un cliente y un servidor.)
6. Cuando terminan los apretones de manos, se establece una conexión entre los dos.
7. Ahora, el navegador cambia su estilo de dialecto a HTTP y solicita al servidor el sitio web.
8. El servidor, sabiendo que la página de inicio del sitio web devuelve eso, lo recibe el navegador y se lo muestra a Joe, que está esperando con mucha paciencia frente a la computadora..

Una solicitud HTTP típica pasa por todos que (y más) para obtener un documento a través de Internet. Así que si alguno de estos procesos se puede poner en marcha cuando sea posible, podemos Reducir el tiempo que tenemos para esperar la entrega de los recursos que queremos..

Relaciones de enlace HTML

W3C especifica 4 relaciones de enlace HTML (rel para la relación) nombrado dns-prefetch, preconectarse, búsqueda previa, y Prerender. Juntos son llamados (por W3C) los "Sugerencias de recursos". Ahora, ya veremos que pueden hacer y donde pueden ser utilizados.

1. DNS Prefetch

En DNS prefetch, el resolución de nombres de dominio (también conocido como obtener la dirección IP correspondiente del servidor DNS) se realiza antes de tiempo.

Digamos que hay una página de referencia en un sitio web con muchos enlaces de referencia a su sitio hermano. Cuando un usuario visita la página de referencia, hay un probabilidad alta que el usuario navegará al sitio hermano. Entonces, un búsqueda de DNS temprana para el sitio asociado puede reducir el tiempo que lleva abrir el sitio (mejorando así la experiencia del usuario).

Esta reducción de la latencia a través de la recuperación previa de DNS Se puede hacer agregando este código a la página de referencia..

Cuando un navegador procesa este código en la página de referencia, agregará la búsqueda de DNS del sitio hermano a sus colas de tareas, y cuando esté libre de otras tareas de alta prioridad en la cola, comenzará la resolución de DNS del sitio hermano.

Entonces, cuando un usuario finalmente hace clic en uno de los enlaces que lo llevan al sitio hermano, es posible que la resolución de DNS de ese sitio ya se haya completado, y el navegador puede comenzar de inmediato a establecer la conexión TCP cliente-servidor con el sitio hermano. servidor, haciendo que la página se cargue más rápido.

Esta función está disponible en casi todos los navegadores modernos, excepto Safari a partir de marzo de 2016.

2. Preconectarse

Preconnect está un paso más allá de la búsqueda previa de DNS, establece una conexión con el servidor al que puede enviarse una solicitud más adelante..

W3C enumera un caso de uso ideal para preconectarse: redirige. Los desarrolladores usan redirecciones por varias razones.

En este caso, la siguiente solicitud de un navegador (sitio redirigido) es 100% predecible, y puede estar preconectado a, a reducir la latencia de navegación.

Imagina que hay una página de sitio intermediario que redirige a "xyzsite", el siguiente enlace HTML hará que el navegador se conecte previamente con el servidor xyzsite, cuando llegue a esa página intermedia..

A partir de marzo de 2016, está disponible en Chrome, Opera y Firefox..

3. Prefetch

Con búsqueda previa, para un recurso, el navegador comienza a implementar la resolución DNS del nombre de dominio del recurso, entonces Realiza una conexión TCP con el servidor del recurso., realiza la solicitud HTTP, y finalmente busca y almacena el recurso prefabricado en el caché del navegador.

Si está seguro de qué recursos se necesitarán más adelante, ese es el recurso que se debe obtener previamente; en eso reside la trampa. La captación previa toma conjeturas, y si adivina incorrectamente, en realidad podría reducir la velocidad en lugar de acelerar su sitio..

Para libros, galerías o portafolios en línea, si es más probable que el usuario navegue a la página siguiente, obtenga los recursos como: imagenes, Puede acelerar las cosas significativamente. Aquí está el código para hacer eso.

Prefetch es compatible con Chrome, Firefox y Opera.

4. Prerender

Solo para páginas HTML se puede hacer una presentación previa. Una página HTML prerendida es sin conexión, y se pinta en la pantalla cuando el usuario realmente lo necesita. Representación Cuesta un mayor trabajo computacional y recursos de memoria.; Además, para poder representar una página, el navegador puede necesitar recursos adicionales (como imágenes agregadas a la página), lo que llevará a más solicitudes consiguientes por navegador.

Asi que, Prerender tiene que ser utilizado con precaución, y no abusado. Agregar el siguiente código presentará de antemano la página "Acerca de".

Prerender ya está disponible en Chrome, IE y Opera a partir de marzo de 2016.

Algunas cosas a tener en cuenta

(1) Ninguna de las sugerencias de recursos mencionadas anteriormente garantiza la ejecución y la finalización de las diferentes etapas de solicitud para las que se realizó porque cuando el navegador ya está ocupado procesando las solicitudes necesarias para las operaciones de la página actual en la que se encuentra el usuario, realiza estas optimizaciones. puede dificultar las tareas actuales del usuario.

Entonces, todo es en cola y ejecutados cuando el navegador se siente lo suficientemente libre para hacerlo.

Estas sugerencias de recursos no necesariamente tienen que estar presentes en la página, incluso antes de la carga de la página. Ellos pueden ser añadido más tarde por JavaScript, y las sugerencias de recursos harán su trabajo como de costumbre..

(2) W3C especifica una Atributo de enlace HTML llamado probabilidad de pista, pr (con un valor de 0 a 1) para estas sugerencias de recursos, que pueden usarse para proporcionar la probabilidad de solicitudes que se realizarán en el futuro. Aún no he visto este atributo implementado por ningún navegador. A modo de ejemplo, el siguiente código indica que hay un 80% de probabilidad de que xyzsite se solicite en el futuro y un 30% para la página sobre.

También podemos agregar el atributo de origen cruzado opcional a las sugerencias de recursos para informar al navegador de la credencial CORS de la solicitud vinculada..