5 maneras de mejorar la velocidad de la página de su sitio web usando HTTP / 2
Anuncio
HyperText Transfer Protocol versión 2, o HTTP / 2, es el último estándar de HTTP. Las actualizaciones del protocolo mejorarán la velocidad, la eficiencia y la seguridad del tráfico web. Sin embargo, la transición no es automática.
Este artículo tiene como objetivo darle una idea de lo que HTTP / 2 significa para usted y cómo configurar su sitio web o servidor para aprovechar las nuevas funciones.
Qué significa HTTP / 2 para usted
Para los usuarios normales, los cambios de HTTP / 1.1 a HTTP / 2 serán bastante invisibles.
Todos los navegadores requerirán un certificado válido de Seguridad de la capa de transporte (TLS) para servir sitios web a través de HTTP / 2. Entonces, más allá de la carga más rápida de la página, también habrá un aumento en la seguridad del sitio web.
Para los diseñadores y propietarios web, HTTP / 2 puede mejorar la velocidad de carga de su sitio en todos los dispositivos.
Todos los navegadores modernos ya admiten el nuevo estándar de protocolo (aunque estos navegadores móviles no admiten HTTP / 2). Sin embargo, en los casos en que el navegador o el servidor no sean compatibles con HTTP / 2, el estándar HTTP / 1.1 se utilizará automáticamente.
¿Cómo afectará HTTP / 2 al diseño del sitio web?
Los cambios introducidos en HTTP / 2 afectarán la forma en que optimizamos los sitios web y los servidores para lograr eficiencia y velocidad.
Las nuevas características introducidas en HTTP / 2 nos permitirán ignorar muchas de las soluciones alternativas y técnicas de optimización de HTTP / 1. Esto incluye ya no incluir secuencias de comandos en HTML o combinar archivos para reducir las solicitudes del servidor. El fragmentación de dominios ya no es útil.
En algunos casos, estas soluciones incluso afectarán negativamente la velocidad de su página si se sirve HTTP / 2.
La mayoría del tráfico de Internet se basa en dispositivos móviles, por lo tanto, tenga en cuenta las velocidades de Internet móvil y mantenga sus archivos multimedia pequeños y optimizados para estos dispositivos. También debe continuar minimizando su JavaScript (JS), HTML y CSS.
Si no está seguro de por qué debería minimizar sus archivos, un buen comienzo sería nuestro artículo sobre cómo y por qué minimizar su JavaScript. Compresores JavaScript: cómo y por qué minimizar su JS Compresores JavaScript: cómo y por qué minimizar su JS La minimización de su JavaScript es una forma de acelerar los tiempos de respuesta del sitio web, y afortunadamente para usted, es un proceso fácil. Hoy te mostraré todo lo que necesitas saber. Lee mas
Conceptos HTTP que debe saber
En caso de que no esté familiarizado con los términos mencionados en este artículo, aquí hay una introducción rápida
Inlining Script es agregar JavaScript directamente en un documento HTML con la etiqueta. En HTML / 1.1, esto elimina los archivos JavaScript pequeños y reducirá las solicitudes del servidor y cargará los scripts más rápido.
Reducir la cantidad de archivos ya no es un problema tan grande para la velocidad de la página en HTTP / 2 gracias a la multiplexación, la priorización de flujo y la inserción de servidor .
La multiplexación es una nueva característica en HTML / 2 que permite múltiples flujos de datos a través de una única conexión de Protocolo de Control de Transmisión (TCP).
Data Streams es un término HTML / 2 utilizado para flujos de datos bidireccionales. Podemos priorizar cada flujo gracias a su identificador único, que nos ayudará a optimizar la entrega de datos.
La priorización de secuencias es otra característica nueva en HTML / 2. Esto nos da la capacidad de decirle a un servidor que asigne recursos y ancho de banda a los flujos de datos priorizados. Asegurando así la entrega óptima de contenido de alta prioridad a los clientes.
Domain Sharding es el acto de dividir los recursos del sitio web en múltiples sitios o dominios para evitar la limitación de descarga simultánea en HTML / 1.1.
En HTML / 2, Multiplexing y Server Push realizarán descargas simultáneas más rápido y más eficiente que Domain Sharding . De hecho, actualmente no hay soporte para usar estas funciones en múltiples dominios.
Server Push permitirá que un servidor envíe múltiples respuestas para una sola solicitud de cliente. En resumen, el servidor puede hacer suposiciones sobre qué archivos necesita un navegador para cargar una página, sin que el navegador lo solicite específicamente.
Ahora nos centraremos en algunos de los cambios que los propietarios de sitios web deben hacer para optimizar los sitios web para HTTP / 2. Para una visión más profunda de estos conceptos, lea nuestro artículo anterior: “¿Qué es HTTP / 2 y cómo afecta el futuro de Internet? ¿Qué es HTTP / 2 y cómo afecta el futuro de Internet? ¿Qué es HTTP / 2 y cómo afecta el futuro de Internet? Internet se volverá más eficiente gracias a la llegada de HTTP / 2. Pero, ¿qué es y cómo mejora en HTTP? Lee mas ".
5 cambios en el sitio web para realizar la optimización HTTP / 2
Los principales cambios que debe tener en cuenta como propietario de un sitio web están relacionados con la forma de manejar los recursos del sitio web. Específicamente en lo que respecta a cómo el servidor de su sitio web se comunicará con un navegador y cómo se entregan los archivos.
A continuación se detallan los cambios más comunes que debe considerar para optimizar su sitio web de HTTP / 2.
1. No combine su CSS o JavaScript
Ya no debe concatenar ni combinar los recursos de su sitio web. En HTTP / 1.1, esto reducirá la cantidad de solicitudes HTTP y los archivos necesarios para descargar para mostrar su sitio web.
Cada solicitud HTTP agregará latencia, por lo que en HTTP / 1.1 descargar un solo archivo suele ser más eficiente que descargar varios archivos. Menos archivos también ayudan a superar el límite de descargas simultáneas en HTTP / 1.1.
Como HTTP / 2 permite múltiples descargas sin múltiples solicitudes de servidor, la cantidad de archivos es menos importante cuando se optimiza la velocidad. En combinación con el almacenamiento en caché, los archivos específicos son mejores en HTTP / 2.
En efecto, los archivos más específicos le permiten servir la mayor parte de su sitio web desde su red de entrega de contenido (CDN) y la memoria caché del navegador del usuario. También significa que el navegador no tendrá que descargar y analizar un solo archivo grande de su servidor cuando realice pequeños ajustes en su sitio web.
2. No alinee scripts en HTML
Incrustar archivos CSS y JS en su documento HTML mejorará la velocidad de carga de su página en HTTP / 1.1. Al igual que con la combinación de archivos, reducirá los números de archivo y las solicitudes del servidor.
Al incluir scripts en HTML cuando se usa HTTP / 2, se reducirá la optimización de la velocidad de la página del almacenamiento en caché, al eliminar la capacidad de un navegador para almacenar en caché los activos individualmente.
También interrumpirá cualquier mejora de la Priorización de Stream, ya que todos los scripts y contenidos incrustados tendrán el mismo nivel de prioridad que su contenido HTML.
En lugar de incluir activos para reducir las solicitudes HTTP, aproveche la multiplexación y la inserción del servidor. Esto permitirá a los navegadores descargar más recursos con menos solicitudes y mejorar la velocidad de carga de su página.
En resumen, mantenga sus recursos separados y pequeños cuando sea posible.
3. Deje de usar CSS Image Sprites
Los Sprites de imagen son imágenes compuestas de muchas imágenes más pequeñas (como la de arriba). CSS luego especifica qué secciones de la imagen mostrar.
Como con la mayoría de las soluciones HTTP / 1.1, usamos sprites de imágenes en parte para reducir las solicitudes del servidor. En HTTP / 2, puede usar imágenes separadas de forma segura sin afectar negativamente la velocidad de carga de su página.
Los archivos más pequeños se descargarán más rápido y de manera más eficiente gracias a la multiplexación y el empuje del servidor.
4. No utilice el fragmentación de dominio
El fragmentación de dominio se utiliza para sortear las limitaciones de descarga simultánea en HTTP / 1. Esta limitación suele estar entre cuatro y ocho por dominio y la establecen los navegadores en parte para reducir los ataques DDOS.
Fragmentar su sitio web en cuatro dominios, por ejemplo, en teoría puede servir recursos en un cuarto del tiempo en HTTP / 1.1.
El fragmentación del dominio ya no es necesario gracias a la multiplexación de HTTP / 2.
Tenga en cuenta que los navegadores no pueden aprovechar la multiplexación y las descargas paralelas en varios dominios en HTTP / 2. Sharding también romperá la priorización de flujo de HTTP / 2, reduciendo aún más los beneficios de usar HTTP / 2.
5. Aproveche Server Push
Posiblemente, la mejora más significativa de HTTP / 2 es el empuje del servidor.
En HTTP / 1.1, cuando solicita ver una página, el servidor enviará primero el documento HTML. Su navegador comenzará a analizar esto y solicitará por separado CSS, JS y los archivos multimedia mencionados en el documento.
En HTTP / 2, la inserción del servidor permite que un servidor envíe los recursos necesarios a un navegador sin una solicitud por separado para ellos. Esto incluye archivos CSS y JavaScript, así como medios, y reducirá las solicitudes HTTP y acelerará la carga de la página.
Smashing Magazine tiene una gran guía completa sobre el empuje del servidor HTTP / 2 con información sobre cómo funciona y cómo habilitarlo.
Cómo configurar su servidor para HTTP / 2
La mayoría de las implementaciones de servidores ya admiten HTTP / 2. Sin embargo, si está utilizando un host compartido, deberá verificar con el administrador del servidor si han activado HTTP / 2. Si tiene curiosidad, GitHub tiene una lista de implementaciones de servidor que admiten HTTP / 2.
Los servidores Nginx tienen soporte nativo para HTTP / 2, mientras que es posible que deba configurar los servidores Apache para habilitar el soporte HTTP / 2.
Si su sitio web está habilitado para HTTPS, (un requisito de HTTP / 2) puede verificar si su sitio web se entrega con HTTP / 2 en http2.pro. Dicho esto, si usa Cloudflare como su CDN, cualquier contenido de sus servidores se servirá a través de HTTP / 2 sin que tenga que hacer ningún cambio.
Los hosts específicos de WordPress a veces limitarán los cambios de configuración que puede realizar, especialmente en sus servicios de nivel inferior. Dicho esto, recomendamos Bluehost para sus sitios de WordPress. Bluehost ofrece SSL y CDN gratuitos, y servirá sus sitios web a través de HTTP / 2.
HTTP / 2 es solo el primer paso
HTTP / 2 es una gran mejora con respecto al estándar anterior, y ahora debería tener una idea de los beneficios que puede obtener al implementarlo.
Los sitios web habilitados se cargarán más rápido y serán más seguros, lo que también aumentará su clasificación de búsqueda. HTTP / 3 ya está en camino, y la configuración de su sitio web para HTTP / 2 hará que su salto a HTTP / 3 sea mucho más fácil.
Más allá de configurar su sitio web para HTTP / 2, también debe considerar estas formas de hacer que su sitio web se cargue más rápido 7 formas de hacer que su sitio web o blog se cargue más rápido para los visitantes 7 maneras de hacer que su sitio web o blog se cargue más rápido para los visitantes Los mejores consejos para acelerar su sitio y asegurarse de que sus visitantes se queden. Lee mas .
Explore más sobre: HTTP / 2, Desarrollo Web.
