En mayo de 2015, se anunció que la especificación para HTTP2 se había finalizado y publicado. Ofertas HTTP2 ventajas de rendimiento significativas a cualquier sitio web, por lo que dado que la mayoría de los sitios web funcionan con WordPress, era solo cuestión de tiempo antes de que necesitáramos saber cómo configurarlo y qué es HTTP2.
Así que aquí estamos con una guía completa y / o tutorial de lo que es HTTP2, por qué debería habilitar HTTP2 en su sitio web, cuáles son las ventajas y, finalmente, cómo hacerlo realmente.
Así que comencemos con las primeras cosas.
¿Qué es HTTP2?
HTTP2 es la última versión de HTTP (Protocolo de transferencia de hipertexto) que se ha optimizado para que su sitio web se cargue mucho más rápido, sin ningún esfuerzo adicional por su parte. Una vez que configure HTTP2, no es necesario realizar optimizaciones como la minificación, la combinación y otros trucos que solíamos realizar antes; estos están integrados en el protocolo mismo.
(A CollectiveRay, nos gusta hacer nuestros sitios web hermosos ¡y rápido!)
Antes de pasar a HTTP2, echemos un vistazo a HTTP y por qué era necesaria una nueva versión de HTTP.
¿Qué es HTTP?
El Protocolo de transferencia de hipertexto (también conocido como HTTP) es simplemente una forma en que su navegador se comunica con el servidor web del sitio web que está visitando.
Hay muchas formas en las que dos (o más) máquinas se comunican a través de Internet. HTTP es el que se utiliza para navegar por sitios web. Con el auge de sitios como YouTube y Twitch que transportan una gran cantidad de tráfico a través de HTTP, este protocolo sigue siendo uno de los que transporta la mayor cantidad de tráfico. Definitivamente es el que es más "visible" ya que está involucrado en toda la navegación del sitio web.
Después de todo, ¿cuántas veces escribe https: // todos los días?
Sin entrar en demasiados detalles, el navegador del visitante utiliza el protocolo HTTP para solicitar todo el contenido de un sitio web.
La conversación es algo como esto:
Navegador: Hola servidor en www.collectiveray.com - ¿me pueden dar el contenido de este sitio web?
Mesero: Hola navegador, este es el contenido HTML de www.collectiveray.com
xmlns: og="https://ogp.me/ns#" xmlns: fb="https://www.facebook.com/2008/fbml" lang="es-es" dir="ltr" clase='com_content ver artículo itemid-388 j35 mm-hover'>
...
Navegador: Genial, ahora veo que también necesito el contenido de estos archivos js: collectiveray. Js, jquery.min.js, jquery-ui.min.js ... y también el contenido de estos archivos: styles.css, jquery.min.css, ... Además, por favor envíeme las siguientes imágenes: favicon.ico, logo.jpg, encabezado-blog.jpg, anuncio1.jpg...
Mesero:
- Aquí están los contenidos del archivo. collectiveray. Js
- Y aquí está el contenido del archivo. jquery.min.js
- Y aqui esta jquery-ui.min.js
- ...
- y aqui esta la imagen pie de página-icono.jpg ...
Real y verdaderamente, el servidor y el navegador están jugando tenis digital con los datos del sitio web que está visitando.
Cada uno de ida y vuelta desde el servidor envía una pequeña parte del sitio web. Esto sigue sucediendo hasta que todo el contenido se envía desde el servidor del sitio al navegador.
Otra muy buena analogía que se ha utilizado para describir HTTP1 es la de un camarero que busca bebidas en el bar y solo obtiene una bebida cada vez que visita el bar.
Por supuesto, este método de obtener una "cosa" a la vez no es terriblemente eficiente, y aquí es donde comienzan los problemas con HTTP ...
La web ha crecido más rápido que las capacidades de HTTP.
HTTP ha existido durante mucho tiempo. Cuando se pensó y se creó, Internet era un lugar muy diferente.
El ancho de banda se midió en bits, no en decenas de megabits. En consecuencia, para ser utilizables, los sitios web se crearon principalmente con texto e hipervínculos. Las imágenes eran escasas y espaciadas.
Avance rápido a los tiempos modernos.
Los sitios web, los temas y todo tipo de funcionalidades han hecho que los sitios web sean cada vez más pesados en términos de recursos. Su sitio web promedio contiene cientos de archivos e imágenes diferentes.
Los sitios web que necesitan utilizar cientos de recursos están a la orden del día.
Por ejemplo, si planea crear un sitio de membresía de WordPress, utilice esta guía escrita por CollectiveRay, necesitará temas de membresía, complementos y muchos otros recursos, todos los cuales necesitan varios recursos para poder funcionar correctamente.
Para complicar las cosas, cada sitio solicita información de varios servidores diferentes para todo tipo de scripts de terceros (por ejemplo, scripts de Google Analytics, botones para compartir de Facebook, Google Ads o AdSense, marketing por correo electrónico y todo tipo de otras plataformas).
La cantidad de veces que un navegador necesita recuperar archivos del servidor del sitio web sigue creciendo y creciendo.
Esto no es un problema en sí mismo, aunque el número cada vez mayor de archivos significa que el tamaño de los datos que se descargan sigue creciendo y creciendo.
Esto significa que la gran cantidad de datos que se descargarán aumentará cada vez más. Esto hace que la carga de sitios sea más lenta en general.
Para empeorar las cosas, crear una conexión entre el navegador y el servidor es una operación técnicamente costosa y lleva tiempo. A medida que aumenta la cantidad de recursos diferentes requeridos en un sitio web, también lo hace el tiempo que lleva cargar un sitio.
Esto se debe a que al utilizar HTTP versión 1, cada vez que se necesita un nuevo archivo, se debe crear una nueva (costosa) conexión.
Esto significa que los sitios que querían cargar rápidamente tuvieron que pasar por un ejercicio de optimización completo.
Cómo hacer que un sitio web sea más rápido (versión anterior a HTTP2)
Como puede verse a través de nuestro ejemplo simple, HTTP v1 tenía una serie de limitaciones dado el estado actual de la web, lo que hacía que los sitios web se volvieran lentos. Ahora, probablemente haya visto cientos de artículos que le muestran cómo hacer su Sitio web de WordPress más rápido.
También tenemos un artículo de este tipo porque, como WordPress desarrolladores, siempre estamos persiguiendo la necesidad de velocidad, y solo estamos felices cuando alcanzamos una calificación de velocidad A.
Por cierto, presentamos muchos artículos diferentes para aquellos que quieran aprender sobre WordPress, consulte la sección de tutoriales en Collectiveray.
Lo que hacen la mayoría de estos artículos que buscan acelerar WordPress es encontrar una manera de evitar las limitaciones de HTTP1. Realizan soluciones para garantizar que los sitios no se ralenticen con todas estas conexiones.
Es por eso que había una necesidad tan urgente de HTTP2, no solo para WordPress, sino para todos los demás sitios web que existen. Había que hacer algo para solucionar los problemas inherentes de HTTP1 (tanto en el navegador como en el servidor web).
Entonces, ¿cuáles fueron las soluciones / métodos alternativos para hacer que un sitio web con HTTP v1 sea más rápido? Normalmente nos referimos a ellos como La disminución , Reutilizar, Reciclar. Para obtener más información sobre eso, le sugerimos que lea nuestro artículo sobre cómo hacer que los sitios web sean más rápidos.
- Cree un sitio ligero que utilice un cantidad mínima de archivos JS, CSS y de imagen
- Reducir el número de solicitudes para diferentes archivos CSS y archivos JS combinando tantos de estos archivos como sea posible (reduciendo las solicitudes mediante la combinación de archivos)
- Reducir el número de solicitudes de imágenes en creando una imagen que los combina todos en uno y usando sprites CSS
- Elimina los complementos adicionales (para reducir la cantidad de imágenes, archivos CSS y archivos JS que agregan al sitio)
- Comprimir los datos requeridos para que sea de menor tamaño (y, por lo tanto, más rápido de transportar) (por ejemplo, normalmente habilitar la compresión GZIP de WordPress para reducir el tamaño de los datos que deben transferirse)
- Aproveche el almacenamiento en caché del navegador en WordPress usando un complemento, de modo que si un usuario vuelve a visitar su sitio web en un período corto de tiempo, no volverá a descargar los mismos archivos
- Otras acciones...
En esencia, queríamos reducir la cantidad de solicitudes separadas entre el servidor y el navegador. También queríamos reducir el tamaño de estas solicitudes.
Entonces, ¿cómo HTTP / 2 mejora todo esto?
Ingrese HTTP / 2
HTTP / 2 se escribió con la intención de solucionar estos problemas inherentes. Uno de los objetivos principales de HTTP2 es
Disminuya la latencia para mejorar la velocidad de carga de la página en los navegadores web. (Fuente: WikiPedia)
e introduce las siguientes mejoras
- es binario, en lugar de textual
- está completamente multiplexado, en lugar de ordenado y bloqueado
- puede, por lo tanto, usar una conexión para el paralelismo
- utiliza la compresión del encabezado para reducir los gastos generales
- permite a los servidores "enviar" respuestas de forma proactiva a las memorias caché de los clientes
¿Esperar lo? No se preocupe, intentemos explicar esto un poco en términos más simples.
- Binario en lugar de textual: esto es algo que hace que la transferencia y el análisis de los datos sean mucho más eficientes. La transferencia de datos binarios también es mucho menos propensa a errores. Los datos textuales están destinados al consumo humano. Los datos binarios están diseñados para el consumo de máquinas, por lo que el uso de binarios para transferir datos es inherentemente más rápido.
- Totalmente multiplexado: de nuevo, en pocas palabras, con HTTP el problema era que cada conexión era propensa a bloquear las conexiones que deben suceder después de ella. Imagínese en la cola para participar en su partido deportivo favorito, pero en lugar de tener varios puntos de entrada, solo tenía 1 torniquete. Puedes imaginar que las cosas pueden ponerse muy, muy lentas. La multiplexación permite transferir varios archivos y solicitudes al mismo tiempo. En el ejemplo del partido de fútbol, en lugar de que una persona entre a la vez, tenemos 10 puertas, con 10 torniquetes que entran juntas.
- Utilice una conexión para el paralelismo: como mencionamos antes, cuando una conexión es costosa de crear si sigue creando y cerrándola para cada recurso que necesita, va a crear un problema de sobrecarga grave. La multiplexación permite reutilizar la misma conexión una y otra vez. Imagine la conexión como una tubería a través de la cual los datos siguen fluyendo hasta que no tiene más datos. Además, tenga en cuenta que para cualquier sitio web, normalmente tendrá el navegador hablando con varios servidores web para varios scripts y recursos de terceros (scripts para compartir en Facebook, Twitter, Google Analytics, redes publicitarias, etc.) Teniendo una conexión para cada uno de estos es más eficiente.
- Compresión de encabezado es también otra forma eficaz de eliminar varios de los gastos generales asociados con tener que recuperar varios recursos diferentes del mismo servidor web o de varios. Una vez más, por lo general, en lugar de tener que realizar varios viajes de ida y vuelta, un viaje suele ser suficiente.
- Permite a los servidores impulsar recursos de forma proactiva: esta es una forma en que el servidor, en lugar de esperar a que el navegador del cliente solicite los diferentes recursos como en nuestro primer ejemplo, enviará de manera proactiva los recursos que el navegador eventualmente necesitará o solicitará. Esto se denomina inserción de servidor HTTP / 2.
Si tuviéramos que volver a la analogía del camarero que traía una bebida a la vez, la mayor ventaja es que ahora el camarero está usando una bandeja de bebidas para tomar todas las bebidas juntas. Y también están tomando bebidas del bar que probablemente necesitarán cuando estén en el restaurante.
¿Qué es SPDY? (también conocido como Speedy)
Antes de que HTTP2 realmente naciera, alguien más había intentado solucionar los problemas con HTTP. Este era un proyecto de investigación de un par de ingenieros de Google, que habían intentado solucionar algunos de los problemas de HTTP1.1.
Los objetivos de SPDY eran
- Permitir la multiplexación para permitir solicitudes simultáneas, resolviendo así los problemas de latencia creados por tener múltiples conexiones
- Priorizar recursos como los recursos más importantes de un sitio que se envían primero
- Comprima los encabezados HTTP para mejorar la eficiencia como se discutió anteriormente
- Implemente el empuje del servidor como se discutió anteriormente también
En un blog inicial publicado por los ingenieros que escribieron el protocolo, se afirmó que hacer que la web sea 2 veces más rápida. Aunque tanto los principales navegadores como los principales servidores web admitían SPDY, hubo poca adopción real.
Sin embargo, su investigación fue fundamental para el eventual lanzamiento de HTTP2, ya que el primer borrador de HTTP2 usaba SPDY como base de trabajo.
¿Qué debo hacer para habilitar HTTP / 2?
Antes de habilitar HTTP2, necesita saber qué implicaciones hay en su sitio.
¿Qué navegadores admiten HTTP / 2?
En el momento de redactar este documento, la mayoría de los navegadores de cliente más populares son totalmente compatibles con HTTP / 2. FireFox, Chrome y los navegadores basados en Blink (es decir, Opera y Yandex) admiten HTTP2. Microsoft Edge también es compatible con HTTP2, mientras que Apple también lo admite en Safari. Estadísticas de sitios como Puedo usar? muestran que la distribución global de soporte actual es superior al 95%.
Si el navegador no es compatible con HTTP2 y el sitio web es compatible con HTTP2, habrá un elegante respaldo a HTTP1, por lo que no habrá ningún problema para ningún visitante si habilita HTTP / 2. Solo puede haber beneficios.
Qué servidores admiten HTTP / 2
Apache, Nginx, LiteSpeed, IIS y las implementaciones de servidor más populares son compatibles con HTTP / 2; puede verificar si su servidor web favorito o el servidor web que utiliza tiene soporte para http2 aquí.
Sin embargo, si puede utilizar HTTP2 en realidad depende de si su empresa de alojamiento lo ha activado. Por lo tanto, deberá confirmar la disponibilidad real de HTTP / 2 con su empresa de alojamiento. La siguiente imagen es una lista de servidores que admiten http / 2.
En pocas palabras, si su sitio web es compatible actualmente con HTTP / 2 depende completamente de su empresa de alojamiento o del servidor donde aloja su sitio web. Usamos InMotion hosting (y aquí está nuestro Revisión de alojamiento de InMotion y esencialmente cómo nuestro VPS tarifas), que han sido totalmente compatibles con HTTP2 durante varios años.
Sin embargo, también usamos StackPath para servir nuestros recursos, que también es compatible con HTTP / 2.
La mayoría de las empresas de alojamiento admiten HTTP2 en sus servidores, por lo que esto no debería ser una preocupación.
Puedes usar esta herramienta de KeyCDN para determinar si su sitio tiene actualmente soporte para HTTP / 2. Esta prueba HTTP / 2 puede indicarle si necesita realizar acciones adicionales o no.
Su sitio web debe ser seguro para habilitar HTTP2
Actualmente, todos los navegadores solo admiten HTTP2 cifrado.
Esto significa que para que su sitio sea compatible con HTTP / 2, necesitará que su sitio se sirva a través de una conexión segura (TLS / SSL). Hemos repasado esto con bastante profundidad en nuestro artículo sobre configurar un certificado seguro de WordPress en su servidor.
Para recapitular aunque
- Los sitios seguros obtienen un impulso de señal de clasificación SEO
- Protegen los datos que se transfieren desde y hacia el sitio (especialmente importante para contraseñas, datos de tarjetas de crédito y otros datos confidenciales)
- Existe un fuerte movimiento hacia sitios web totalmente seguros, y si no implementa la seguridad en su sitio, es probable que su sitio web se quede atrás.
Deberá adquirir un certificado seguro a través de su empresa de servicios de alojamiento. Empresas de hosting como InMotion le permite usar un certificado compartido, aunque si desea usarlo con su dominio, es muy recomendable que compre su propio certificado.
necesitas ayuda con tu sitio web?
Contrate a un experto en sitios web examinado por tan solo $ 65. Regístrese hoy para comenzar a chatear gratis.
Chatea con un expertoOtros sitios como WordPress.com (a diferencia de WordPress.org) - leer acerca de la diferencia aquí - proporcionar certificados seguros ya.
La instalación del certificado es algo que normalmente realiza su servidor de alojamiento. Es algo único, por lo que no tiene que preocuparse.
Una vez hecho esto, simplemente deberá realizar una redirección permanente 301 a través de su archivo .htaccess.
Una vez más, hosts como InMotion hosting puede manejar todo esto por usted, si no está dispuesto a hacer este tipo de ajustes técnicos usted mismo (que tiene un poco de riesgo de tiempo de inactividad si no se hace correctamente).
¿Hay algún complemento que pueda usar para HTTP2?
Mencionamos que uno de los beneficios de usar HTTP2 es la capacidad de realizar un envío al servidor de elementos que serán necesarios para el navegador. Esto, por supuesto, es algo que debe hacerse a nivel de CMS, por lo que necesita el soporte de WordPress o su CMS favorito.
Si bien esto aún no es compatible en el nivel principal, puede modificar sus temas o complementos para que implementen la capacidad de enviar un
Link:<...> rel="prefetch"
encabezado para cada script y estilo en cola a medida que WordPress los envía al código fuente de la página.
Si está buscando hacer que su sitio sea más rápido en general, habilitando la captación previa y otros comandos para hacer que su sitio sea rápido, le recomendamos encarecidamente WP Rocket - un complemento premium que aumenta significativamente la velocidad de su sitio. Si desea un complemento gratuito, puede usar este vídeo .
Echa un vistazo a WP Rocket para hacer tu sitio más rápido
En realidad, esto está aprovechando una ventaja real adicional de las funciones habilitadas por HTTP / 2.
Recomendación final
Así que estás aquí porque querías hacer tu sitio más rápido poniendo HTTP2 en su lugar, ¿verdad?
Esto es sólo uno de tantos formas de hacer que su sitio web sea más rápido. Además de esta tecnología, necesitará realizar un montón de otras optimizaciones si desea que su sitio web sea más rápido, como
- Implementar un complemento de almacenamiento en caché de páginas
- Habilite el almacenamiento en caché a nivel de PHP como OpCache
- Optimice las imágenes para el rendimiento
- Habilite una CDN (gratuita o de otro tipo)
- Habilitar el almacenamiento en caché del navegador y la compresión gzip
- Optimizar las fuentes de Google
- Habilitar la captación previa de DNS
- Habilitar la carga diferida de imágenes
- Habilitar la minificación y la concatenación
- etc etc
Suena como un montón de trabajo, ¿verdad? ¡Es!
At CollectiveRay, a veces gastamos varios dias trabajando para impulsar nuestro sitio web solo unas fracciones de segundo más rápido. Esto se debe a que nuestro sitio web se ejecuta en Joomla, por lo que no tenemos muchos de los complementos que están disponibles para otras opciones populares de CMS como WordPress.
Por ejemplo, para nuestros clientes, siempre instalamos WP Rocket. En los sitios web donde lo instalamos, siempre conseguimos que se carguen en menos de 3 segundos, siendo los resultados típicos que el sitio web se carga en menos de 1 segundo.
La belleza de esto, sin embargo, es que no tenemos que realizar ninguno de los trabajos manuales que solíamos tener que hacer antes, por lo que ahorrar horas de tiempo y frustración, y para empezar, obtenemos excelentes resultados.
Echa un vistazo a WP Rocket para hacer que tu sitio sea rápido
Preguntas frecuentes
¿Debería usar HTTP2?
Sí, debe habilitar y usar HTTP2 en su sitio web si puede. HTTP2 hará que su sitio web sea más rápido y no hay absolutamente ningún inconveniente en comparación con la versión 1 de HTTP. Incluso si un cliente está usando un navegador antiguo que no es compatible con HTTP2, existe una elegante alternativa a HTTP.
¿Cuál es la diferencia entre HTTP y HTTP2?
Hay una serie de diferencias y mejoras entre HTTP y HTTP2. HTTP2 es binario, en lugar de textual, lo que lo hace intrínsecamente más rápido. Está completamente multiplexado, en lugar de ordenado y bloqueado, por lo que se pueden utilizar varias conexiones simultáneamente. Utiliza la compresión de encabezado para reducir la sobrecarga y permite a los servidores "enviar" respuestas de manera proactiva a las cachés de los clientes. Todas estas mejoras hacen que HTTP2 sea mucho más rápido que HTTP.
¿HTTP2 requiere SSL?
Sí, HTTP2 solo se admite en modo cifrado, por lo que su sitio web también debe implementar certificados SSL / TLS seguros para poder hacer uso de HTTP2.
¿Los navegadores son compatibles con HTTP2?
Más del 95% de los navegadores de sitios web que se utilizan actualmente son compatibles con HTTP2. Incluso si el navegador no es compatible con HTTP2, habrá una elegante alternativa a HTTP.
Conclusión: hagamos que la web sea más rápida con HTTP2
At CollectiveRay, siempre hemos estado obsesionados con hacer que nuestros sitios web sean rápidos. HTTP2 es una evolución y una revolución al mismo tiempo, y realmente esperamos que este artículo lo ayude a avanzar hacia la configuración de WordPress HTTP2.
Deje un comentario a continuación y díganos qué más le gustaría saber.
¿Necesita ayuda para hacer las cosas? ¡Prueba estos conciertos asequibles mejor calificados en Fiverr!
Haga clic aquí para encontrar expertos en optimización de velocidad de WordPress.
Haga clic aquí para crear un sitio web completo de WordPress.
Por favor, deja un eficiente Comente con sus pensamientos, luego comparta esto en su (s) grupo (s) de Facebook que lo encontrarán útil y cosechemos los beneficios juntos. ¡Gracias por compartir y ser amable!
Divulgación: Esta página puede contener enlaces a sitios externos para productos que amamos y recomendamos de todo corazón. Si compra productos que le sugerimos, es posible que ganemos una tarifa de referencia. Tales tarifas no influyen en nuestras recomendaciones y no aceptamos pagos por reseñas positivas.
y muchos más ...