Post Top Ad

Your Ad Spot

martes, 21 de abril de 2020

Explorando las diferencias entre HTTP Preload vs HTTP / 2 Push

HTTP Preload y la función HTTP / 2 "Server Push" son métodos que pueden usarse para mejorar la eficiencia de carga de su aplicación web. Aunque existen similitudes entre Push y Preload, son dos características distintas y cada una cumple su propio propósito. En este artículo, repasaremos las similitudes y diferencias entre HTTP Preload vs HTTP / 2 Push y discutiremos cuándo tiene sentido usar cada uno.

¿Qué es HTTP / 2 Push?# #

HTTP / 2 Push permite a los desarrolladores web definir activos específicos que deben enviarse al cliente junto con el documento HTML . Tradicionalmente, el cliente que solicita recursos del servidor inicialmente recibe el archivo HTML y lo analiza para determinar qué activos necesita solicitar a continuación. Luego, se realizan más solicitudes al servidor.
Sin embargo, con HTTP / 2 Push habilitado, el servidor puede enviar proactivamente activos que se sabe que son necesarios antes de que el cliente incluso comience a analizar el archivo HTML. Por ejemplo, si tenemos un sitio web con un index.htmlarchivo y un style.cssarchivo, el navegador tradicionalmente primero solicitaría index.htmly, una vez recibido / analizado, luego haría otra solicitud para el style.cssarchivo. Sin embargo, como sabemos que el cliente va a solicitar el archivo style.css de todos modos, podemos decirle al servidor que lo envíe style.cssal cliente al mismo tiempo que envía el index.htmlarchivo.
Esto lo convierte en un proceso de entrega de activos más optimizado. Dicho esto, algunos pueden pensar: "¡Genial! Entonces le diré al servidor que envíe todos mis activos al cliente con el archivo HTML ". Sin embargo, existen ciertas advertencias sobre el uso de HTTP / 2 Push y el uso en realidad puede degradar el rendimiento.

¿Qué es la precarga HTTP?# #

HTTP Preload es otro método que los desarrolladores web pueden usar para enviar de manera proactiva ciertos activos al cliente antes de requerir que el cliente solicite cada activo secuencialmente. Sin embargo, la directiva Preload funciona de manera diferente a HTTP / 2 Push. Con la directiva Preload puede decirle al navegador que solicite ciertos activos de alta prioridad, que de otra forma se descubrirán tarde , una vez que se haya analizado el archivo HTML.
Considere el siguiente ejemplo: un navegador realiza una solicitud de index.htmlEl navegador recibe el archivo y, al analizarlo, descubre que deberá solicitarlo style.cssy dentro de ese archivo CSS font.ttfse hace referencia a un archivo. En lugar de solicitar style.cssy de forma font.ttfsecuencial, la precarga le permite enviar una solicitud al servidor para ambos style.cssfont.ttfal mismo tiempo. Dado que font.ttfes un activo que será necesario en el futuro cercano, precargarlo sería una forma eficiente de solicitarlo.

Similitudes vs diferencias#

HTTP Preload y HTTP / 2 Push son similares en el sentido de que ambos son mecanismos que proporcionan de forma preventiva al navegador los activos necesarios antes de que el navegador sepa que incluso son necesarios. Sin embargo, existen algunas diferencias importantes entre Preload y Push. Por ejemplo:
  • La sintaxis varía ligeramente entre Preload y Push. Puede usar la directiva Preload para iniciar un envío, sin embargo, esto depende de las capacidades de su servidor / CDN. Si desea precargar explícitamente un activo y no empujarlo, puede usarlo nopushasí:
    Link: rel=preload; </app/script.js>;  as=script; nopush
  • Puede enviar activos tan pronto como el servidor reciba la solicitud inicial del navegador. Sin embargo, solo puede precargar una vez que el navegador haya recibido y analizado el archivo HTML.
  • Puede precargar activos de dominios de terceros, mientras que solo puede insertar activos de sus propios dominios.
  • La compatibilidad del navegador para Preload aún no es perfecta. Firefox, IE y Edge son todos navegadores que no admiten o solo admiten parcialmente el mecanismo de precarga. Sin embargo, Push tiene más soporte ya que es una función HTTP / 2 que ahora es la última versión del protocolo HTTP para Internet. Vea las estadísticas actuales de soporte del navegador para Preload aquí y para Push aquí .
  • La precarga le permite definir mejor la priorización con el asatributo, mientras que la responsabilidad de la priorización con Push se comparte entre el cliente y el servidor.
Para explicar mejor las diferencias entre Preload y Push, a continuación hay un diagrama simple de Nginx que muestra la diferencia entre cargar secuencialmente y precargar vs recursos de empuje.
preload vs push

¿Cuándo usar Preload vs Push?# #

Hay ciertas situaciones en las que Preload funciona mejor que Push y viceversa. Ni la precarga ni la inserción deben usarse como una forma de acelerar la entrega de todos sus activos a la vez. En su lugar, debe determinar cuáles son sus recursos de alta prioridad e ir desde allí.
Aquí hay un par de casos de uso sobre cuándo usar Push :
  • En lugar de incluir elementos en su HTML (como CSS o JavaScript pequeños), sepárelos en sus propios archivos y, en su lugar, empújelos al navegador. Esto le permite aprovechar mejor el almacenamiento en caché del navegador .
  • Push también es excelente para utilizar el tiempo de reflexión de una manera más eficiente. Como un servidor genera el archivo HTML de un sitio web, el navegador no puede realizar más solicitudes, ya que debe esperar hasta que se reciba el archivo HTML antes de saber qué solicitar a continuación. Sin embargo, dependiendo del tiempo de reflexión de su servidor, puede usarlo para su ventaja al enviar los recursos necesarios al navegador junto con el archivo HTML, una vez generado.
Aquí hay un par de casos de uso sobre cuándo usar Preload :
  • Cargando CSS crítico que se descubre tarde
  • Carga de imágenes de la mitad superior de la página referenciadas dentro de un archivo CSS
  • Cargando referencias de fuentes dentro de un archivo CSS

Uso de Preload y HTTP / 2 Push con KeyCDN#

Tanto Preload como Push hacen uso de la directiva Preload (por extraño que parezca). Por lo tanto, dado que KeyCDN admite HTTP / 2 Push, si establece un Linkencabezado con la directiva Preload, KeyCDN empujará ese activo:
add_header Link "</style.css>; as=style; rel=preload";
Sin embargo, como se mencionó anteriormente, si no desea impulsar un activo, puede establecer el nopushatributo. Además, si la implementación de HTTP / 2 no acepta activos enviados, el cliente considerará esto como un activo precargado regular.
El uso adecuado de los recursos con KeyCDN puede mejorar significativamente el tiempo de carga de su página web. Para medir esto, creamos una página de demostración y medimos la diferencia de velocidad entre una página sin activos empujados y la misma página con 2 activos empujados. La diferencia resultó en una disminución del 12.5% en el tiempo de espera. Para obtener más información sobre cómo KeyCDN admite HTTP / 2 push y la prueba de velocidad que realizamos, consulte nuestro KeyCDN lanza la publicación de soporte HTTP / 2 push .

Resumen#

HTTP Preload y HTTP / 2 Push son mecanismos útiles en su propia consideración. Aunque la diferencia y la funcionalidad entre ambos aún no es 100% clara para todos los servidores / servidores proxy, funcionan de diferentes maneras. La clave para usar cualquiera es implementar un cambio y luego probar la diferencia en la velocidad de la página. Es fácil dejarse llevar e intentar precargar o empujar todo, aunque, como ya se mencionó, eso puede hacer más daño que bien. Tómelo con calma y experimente con Preload y Push en su propia aplicación.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas