Una guía para principiantes sobre el rendimiento de sitios web

En el tiempo que te lleva leer esta oración, los visitantes de tu sitio web ya han abandonado tu sitio y han elegido el de tu competidor en su lugar.

Así de largo es el tiempo que se tarda en perderlos para siempre.

Si alguna vez has tenido que esperar a que se cargue una página web, sabes lo frustrante que puede ser.

Los sitios web hoy en día son complejos y a menudo están llenos de imágenes, videos y scripts. Esto significa que requieren más tiempo para descargarse que las simples páginas HTML de los buenos viejos 90 y principios de 2000.
Pero incluso peor es el hecho de que muchos de estos sitios modernos también están mal diseñados. Están llenos de características, pero sufren de un rendimiento lento porque no entienden cómo las personas los utilizan.

No hay excusa para un rendimiento de sitio web inferior en este punto. No si tu sitio está bien gestionado por alguien que se preocupa por lo que sus visitantes experimentan cada día.
Si necesitas ayuda para mejorar el rendimiento de tu sitio web, sigue estos consejos a continuación.
Pero primero, unas cuantas preguntas importantes…

1) ¿Qué es el rendimiento del sitio web?

El rendimiento del sitio web es la velocidad a la que tu sitio web se carga en el navegador de un visitante. También incluye cuán receptivo es tu sitio y cuán fácil es navegar por él.

2) ¿Por qué importa el rendimiento del sitio web?

Un sitio web que carga lentamente frustrará tanto a los visitantes como a Google. Esto llevará a una disminución en tus posiciones en Google para tus palabras clave objetivo.

También es importante porque los usuarios de hoy se han vuelto impacientes con los sitios que cargan lentamente. Si ven que el tuyo carga demasiado lento, lo abandonarán y encontrarán otro con mejor rendimiento en menos tiempo.

Hay 3 áreas clave donde el rendimiento del sitio web importa:

• Experiencia del Usuario

• SEO

• Tasa de Conversión

2.1) Experiencia del Usuario: El rendimiento del sitio web impactará tu percepción de marca

Las investigaciones han demostrado que un sitio web lento puede hacer que los visitantes abandonen tu sitio sin ver una sola página. Google ha descubierto que un retraso de un segundo en el tiempo de carga del sitio web puede disminuir las conversiones hasta en un 20%.

Y si el sitio no carga en absoluto, no se quedarán.
También es importante recordar que tus visitantes no siempre están en conexiones de internet de alta velocidad como tú.

Una encuesta reciente de Speedtest encontró que la velocidad promedio de descarga móvil a nivel mundial es de 56.74 Mbps. Si bien eso puede sonar realmente rápido, ten en cuenta que es un promedio.

Muchos países en desarrollo aún tienen infraestructuras de internet subdesarrolladas. Un estudio reciente de IDB encontró que solo el 33% de las escuelas en América Latina tienen un ancho de banda de internet suficiente, menos de la mitad de los reportados en promedio en los países de la OCDE (68%).

Incluso hay una gran brecha en los servicios de internet de alta velocidad entre áreas urbanas y rurales en los Estados Unidos. A partir de 2016, el 39% de la población de EE. UU. no tenía acceso a servicios de internet de alta velocidad.

Esto significa que muchas personas en el mundo aún están utilizando velocidades de internet lentas. Si vives en una de estas áreas o esperas visitantes de ellas, hacer que tu sitio web cargue más rápido será aún más crucial.

2.2) SEO: La velocidad de carga del sitio web impacta directamente en los rankings de Google

El rendimiento web es un factor clave en SEO, ya que determina la velocidad y el rendimiento de tu sitio.
Google utiliza la velocidad de la página como un factor de clasificación así que si tu sitio tarda demasiado en cargar, puedes ver cómo tus posiciones sufren una caída drástica.

Es aún más importante para sitios móviles, que requieren una optimización adicional para mejorar las velocidades de carga.
Los sitios web lentos son olvidados por la competencia. Así de simple.

Aun si tu sitio web está diseñado de manera hermosa, tiene un gran contenido y ofrece productos y servicios de calidad, los tiempos de carga lentos eventualmente afectarán tus posiciones.

2.3) Tasa de Conversión: El rendimiento del sitio web te hará (o te costará) dinero

La velocidad de carga del sitio web tiene una fuerte correlación directa con las tasas de conversión y ventas.
Observa la diferencia que milisegundos reales pueden hacer en la tasa de conversión de tu sitio. (Según Cloudflare)

Aquí está lo crucial: Es al menos 5 veces más caro adquirir un nuevo cliente en comparación con retener a tu cliente existente. Esta es la razón por la que en realidad es mucho más rentable mantener a tus clientes existentes que encontrar nuevos.

Así que, con los costos de adquisición de nuevos clientes siendo tan altos, es en tu mejor interés asegurarte de que tu sitio se cargue lo suficientemente rápido. Porque una vez que se van, será mucho más difícil recuperarlos.

3) Cómo probar el rendimiento de tu sitio web

Ahora que hemos establecido por qué es importante probar el rendimiento de tu sitio web, veamos cómo podemos hacerlo.

3.1) Herramientas de rendimiento del sitio web

Hay muchas herramientas diferentes de prueba de velocidad de sitios que puedes usar para probar el rendimiento de tu sitio.
Todas estas herramientas hacen esencialmente lo mismo, pero tienen algunas variaciones en los estándares de prueba y facilidad de uso.

GT Metrix

GT Metrix es una herramienta de prueba de velocidad de sitios web gratuita que te ayudará a entender dónde se encuentra tu sitio en términos de velocidad y capacidad de respuesta.

La prueba toma menos de un minuto en completarse, y mide el tiempo de carga de una sola página de tu sitio web. Una a la vez.

También te dice cómo se desempeña tu sitio en dispositivos móviles, incluyendo iPhone y Android. Y puedes probar desde múltiples servidores ubicados alrededor del mundo.

Aunque muchas de las mejores funciones están bloqueadas detrás de la versión pro de la herramienta, aún puedes obtener un montón de información valiosa y práctica de la versión gratuita de GT Metrix.

Mi característica favorita es el gráfico de cascada, que desglosa cada archivo que se carga en tu sitio web para que puedas identificar el problema exacto. Por supuesto, esto no es exclusivo de GT Metrix. Simplemente me gusta la interfaz visual.

GT Metrix es mi elección personal para la mejor herramienta de prueba de velocidad de sitios web. Es la herramienta que usaré a lo largo de esta guía de optimización de sitios web.

Google PageSpeed Insights

Google PageSpeed Insights es una herramienta de prueba de velocidad de sitios web que te ayuda a identificar soluciones rápidas para mejorar tu sitio. Te dice dónde necesitas reducir la cantidad de HTML, scripts e incluso imágenes en cada página.

La interfaz puede ser un poco abrumadora para los nuevos desarrolladores web, aunque Google ha hecho algunos buenos avances en simplificarla en los últimos años.

Pingdom

Pingdom proporciona una herramienta de velocidad de sitios web que ofrece información sobre tiempo de carga, confiabilidad, tiempo de actividad, amigabilidad móvil y otras métricas clave. También proporciona recomendaciones sobre cómo solucionar cualquier problema que encuentres.

Es parte de un conjunto mucho más grande de herramientas de monitoreo de rendimiento para sitios web. Incluso puedes instalar la herramienta de monitoreo de Pingdom directamente en tu sitio de WordPress para ayudarte a medir el rendimiento desde el panel de WordPress.

Y sí, hay una extensión de Pingdom en forma de un marcador.

3.2) Métricas de rendimiento del sitio web

Las métricas de rendimiento del sitio web se utilizan para medir el tiempo de carga de las páginas web. Por lo general, se informan como el número promedio de segundos que toma para que una página se renderice.

Core Web Vitals

Las métricas de rendimiento del sitio web más importantes, según Google, son lo que ellos llaman los Core Web Vitals. Estos web vitals evolucionarán con el tiempo, pero, al momento de escribir esto, estos son los objetivos en los que debes enfocarte:

• LCP (Long Contentful Paint)

• FID (First Input Delay)

• CLS (Cumulative Layout Shift)

LCP (Long Contentful Paint)

LCP es una métrica de rendimiento de contenido que evalúa la experiencia de carga percibida por los usuarios.
En su forma más simple, LCP determina cuánto tiempo tarda el "elemento de contenido" más grande en tu página (como una imagen principal, texto de encabezado, etc.) en aparecer en la ventana de visualización de un visitante.

FID (First Input Delay)

El retraso en la primera entrada (FID) es la medida del tiempo entre cuando un usuario inicia una entrada (pasar el cursor sobre un enlace web, hacer clic en un elemento o escribir texto) y cuando el sitio web responde a esa entrada.

A medida que un sitio web se vuelve más interactivo, el FID se convierte en una de las métricas críticas de rendimiento del sitio web porque afecta cuán rápido los visitantes pueden completar tareas como "comprar" o "registrarse."

CLS (Cumulative Layout Shift)

CLS mide la estabilidad visual de un sitio web durante una carga de página. En otras palabras, CLS mide el movimiento inesperado de los componentes web mientras se genera la página.

La puntuación agregada de todos los cambios de diseño en tu sitio se cuantifica como un todo. Google Web Vitals incluye CLS como "estabilidad de la página."

Otros Web Vitals

Aparte de los Core Web Vitals, hay algunas métricas de prueba de velocidad de sitios más que querrás optimizar.

Mientras que no están técnicamente incluidas en el "núcleo", estas métricas secundarias de web vitals definitivamente impactarán los web vitals centrales.

TTFB (Time to First Byte)

TTFB significa tiempo hasta el primer byte. Es el tiempo entre presionar enter en tu teclado y recibir el primer fragmento de datos de la página.

TTFB es particularmente importante en dispositivos móviles con una conexión de internet de baja calidad.

FCP (First Contentful Paint)

La métrica FCP mide el tiempo desde que comienza a cargarse la página hasta que se renderiza cualquier parte del contenido de la página en la pantalla.

TBT (Total Blocking Time)

TBT es el tiempo total que toma a un sitio web responder a la entrada de un visitante. Más específicamente, TBT mide la cantidad de tiempo que se pasa bloqueado por scripts y códigos específicos.

Tiempo total de carga de la página

El tiempo de carga es el número promedio de segundos que toma para que una página en particular se renderice completamente.

Esto puede ser desde 1-2 segundos para sitios rápidos hasta 15-20 segundos para sitios lentos.

Si tu sitio web es aún más lento que eso, entonces realmente no tienes un sitio web. Tienes un espacio de estacionamiento digital con tu nombre en él.

3.3) Métricas de experiencia del usuario del sitio web

Hay una serie de métricas que puedes usar para medir la experiencia del usuario de tu sitio web. Las métricas más importantes son la tasa de rebote, el tiempo en la página y la tasa de conversión.

Estas no deben confundirse con métricas de rendimiento de contenido como TTFB, LCP y CLS. Esas métricas muestran cuánto tiempo tarda en cargarse el contenido. Las métricas de experiencia del usuario miden cuánto tiempo se interactúa con una pieza de contenido individual durante un marco de tiempo dado.

Tasa de rebote

La tasa de rebote de un sitio web es el porcentaje de visitantes que abandonan tu sitio después de ver solo una página. Se calcula dividiendo el número de visitas de una sola página por el número total de visitas a tu sitio web.
Por ejemplo, si tienes 1,000 visitas totales y 800 de ellas son visitas de una sola página, eso significa que tienes una tasa de rebote del 80%.

Y tu promedio de velocidad de página tiene un gran efecto en la tasa de rebote del sitio web.
Una cosa importante a tener en cuenta sobre las tasas de rebote de los sitios web es que, aunque pueden ser útiles para Google Analytics, no cuentan toda la historia para medir el compromiso del usuario porque no cuantifican el compromiso con las páginas individuales o las sesiones.

Duración de la sesión

La duración de la sesión es la cantidad de tiempo que un usuario pasa en una sesión particular.

Esta métrica se puede usar para averiguar cuán productivamente los visitantes están gastando su tiempo en tu sitio, así como cuán efectivamente están interactuando con él.

Si la métrica de “tiempo en la página” para cada visitante es demasiado corta, podría significar que necesitas crear un sitio más atractivo. Esto se debe a que visitas más cortas podrían indicar que tus visitantes no pudieron encontrar lo que estaban buscando y se fueron rápidamente.

El tiempo promedio que alguien pasa en una página web varía dependiendo del tipo de contenido. Pero las investigaciones muestran que el promedio está disminuyendo en toda la internet.

Si tus duraciones de sesión están por debajo del promedio o las personas están rebotando demasiado, entonces necesitas investigar más y averiguar por qué.

Tasa de conversión

Una conversión es la finalización exitosa de una acción que quieres que tus visitantes del sitio web realicen, como comprar algo o inscribirse en tu lista de correo electrónico.

Si no estás obteniendo conversiones, lo más probable es que las personas estén rebotando demasiado. 🦘

Puedes mejorar la tasa de conversión aumentando la velocidad de la página, reduciendo el número de pasos necesarios para completar una acción deseada, mejorando la claridad de tu sitio web y más.

4) Cómo mejorar el rendimiento de tu sitio web

Esta es la única guía que alguna vez necesitarás para acelerar tu sitio web. (Creo. Espero…)

4.1) Reduce el tamaño de tu página eliminando “la sobrecarga de código”

Hay muchas razones por las que debes reducir el tamaño de tu página web:

• Reducir el tiempo de carga del sitio web

• Aumentar el rendimiento del sitio web

• Maximizar el compromiso del sitio web

• Mejorar la experiencia del usuario

• Eliminar la sobrecarga de código

La sobrecarga de código es un término utilizado para describir la cantidad de código que se necesita para hacer que un sitio web funcione. Simplificar tu código puede ayudar a reducir el tiempo de carga y también puede facilitarte mantener tu sitio.

La sobrecarga de código puede ser muy dañina porque ocupa más espacio, ralentiza tu sitio web y puede incluso causar errores o vulnerabilidades de seguridad.

Piénsate conduciendo al trabajo por la mañana. Ahora imagina todos los diferentes caminos que puedes tomar para llegar allí.

Todos te llevan de un lugar a otro. De casa al trabajo. Pero qué caminos elijas determinará cuánto tiempo te llevará llegar allí.

Piénsate esta ilustración cada vez que alguien intenta visitar tu sitio web.

Hay muchas maneras en que los desarrolladores web pueden reducir la sobrecarga de código:

• Usa imágenes sabiamente

• Almacena videos externamente

• Elimina comentarios

• Reduce las solicitudes HTTP

• No uses fuentes web externas

• Elimina plugins innecesarios

Veamos cómo hacer cada uno de estos, uno por uno.

Usa imágenes sabiamente

No hay un número exacto de imágenes que debas incluir en tus páginas y publicaciones. Cada vez que subas una imagen, pregúntate una simple pregunta:

“¿Cómo beneficia esta imagen a mi visitante?”

Si no puedes responder a esa pregunta, no uses la imagen.

Almacena videos externamente

Los videos pueden ocupar mucho espacio y a menudo no hay garantía de que la persona que está viendo tu video tenga el ancho de banda para transmitirlo.

En lugar de almacenar videos directamente en tu sitio web, que estará utilizando el almacenamiento y ancho de banda del servidor de tu proveedor de web, casi siempre es mejor almacenarlo externamente y embeberlo en la página.

Sube tu video a YouTube o Vimeo y coloca el código de inserción HTML en tu página. Todos los principales constructores de sitios web facilitan hacer esto.

Elimina comentarios

Los comentarios son una manera muy útil de fomentar una discusión sana en el inter- LOL JK son más tóxicos que envolver tus labios alrededor de un tubo de escape de un coche y tomar una respiración profunda.

Si bien se ha demostrado que los comentarios proporcionan algún beneficio de SEO, (yo mismo lo he visto con mi publicación sobre cancelar Netflix), normalmente no vale la pena la pérdida en la velocidad de la página web.

Como se puede ver en la historia de MightyBytes, permitir comentarios en tus publicaciones de blog ralentiza los tiempos de carga del sitio web.

Y cuanto más comentarios haya, peor se pone.

Puedo atestiguar personalmente la eliminación de comentarios de sitios web para mejorar la velocidad de la página. Desafortunadamente, no hice una comparación de los datos cuando hice el cambio… Así que tendrá que permanecer anecdótico.

La conclusión es esta: Los comentarios ralentizan los tiempos de carga de la página. Generan llamadas adicionales a la base de datos que pueden resultar en un aumento de hasta el 50% en el tiempo de carga del servidor.

Generalmente es mejor simplemente eliminar los comentarios de tus blogs y seguir adelante.

Reducir la cantidad de solicitudes HTTP

Las solicitudes HTTP harán que tu sitio cargue más lentamente.

Las integraciones innecesarias son la fuente más común de demasiadas solicitudes HTTP.

Pueden definirse como innecesarias porque ocupan más espacio en la página y ralentizan los tiempos de carga mientras proporcionan muy poco valor al usuario.

Los peores delincuentes son las integraciones incorporadas que vienen con algunos temas o plugins. Estas integraciones funcionan bien para las personas que las desean, pero no se pueden desactivar ni eliminar si no las quieres Y estas integraciones ocupan mucho espacio y ralentizan los tiempos de carga de la página.

Aquí está lo que parece cuando un sitio web tiene demasiadas solicitudes HTTP:

Solo de un vistazo rápido a las URL de cada solicitud, podemos ver solicitudes HTTP de:

• Google Analytics

• Google Maps

• Google Fonts

• Facebook

• Hotjar

• Tawk

• Twik

• Hey Oliver

• Liveleads

• Yandex

• Polyfill

• Visual Website Optimizer

• X.AI

• YourWebsite

YIKES. 🤮

No es de sorprender que esta página web tarde 9.6 segundos en cargar.

Y la peor parte es, casi todas son trucos de marketing innecesarios que realmente hacen que la experiencia del usuario del sitio web sea peor.

No uses fuentes web externas

Uno de los principales culpables en ralentizar las velocidades de carga del sitio web son las fuentes web.

Empresas como Adobe, Google y Typekit alojan miles de fuentes para la web. Los constructores de sitios web integran sus API para incluir estas fuentes en un sencillo menú desplegable de opciones. Como uno de mis plugins de construcción de páginas favoritos, Elementor.

Las fuentes web aumentarán el número de solicitudes HTTP que hace tu sitio web porque tiene que cargar varios archivos diferentes desde fuentes externas solo para mostrar texto.

Esto puede ser una gran carga para los tiempos de carga de la página. También es realmente frustrante para las personas que intentan leer tu sitio.

Para empeorar las cosas, muchas fuentes web solo están disponibles en formatos específicos como .eot o .ttf a las que no todos pueden acceder.

Lo que pasa es que… las fuentes son geniales. Y no hay nada de malo en querer hacer que tu marca se sienta única y destacarse entre la multitud.

Entonces, ¿qué deberías hacer?

Si ya estás acelerando tu sitio web utilizando muchas de las estrategias mencionadas aquí, probablemente puedas permitirte divertirte un poco con algunas fuentes.

Pero si estás obsesionado con los tiempos de carga increíblemente rápidos, como yo, entonces simplemente usa algunas de las fuentes del sistema comunes en tu diseño. Las fuentes del sistema son las fuentes que vienen preinstaladas en tu dispositivo.

Claro, no son tan bonitas. Pero la mejora en la experiencia del usuario compensa eso, en mi opinión. ¡Las he utilizado aquí mismo en mi propio sitio web!

Elimina plugins innecesarios

Es mejor mantener los plugins al mínimo.

Solo instala plugins que sean absolutamente necesarios para la funcionalidad de tu sitio y que no resten valor a la experiencia del usuario de tu sitio.

Desafortunadamente, los diseñadores web perezosos a menudo instalarán un plugin para resolver cada pequeño problema que se les presente. Incluso cuando gran parte de la funcionalidad que proporciona un plugin puede lograrse usando HTML y CSS simples.

En uno de mis estudios de caso de diseño web más locos, reconstruí un sitio web que tenía más de 32 plugins obstruyendo su sitio y lo reduje a 12.

Aquí está el antes y después del rediseño de su sitio web:

El resultado fue un sitio web mucho más rápido que cargaba como un sueño. El cliente no podría estar más feliz. (Oh sí, también lo hice por menos dinero 😉)

4.2) Optimiza tus imágenes

Las imágenes que no están optimizadas pueden ser extremadamente problemáticas para el rendimiento del sitio web. Aquí hay algunos consejos rápidos para optimizar imágenes para tu sitio web:

Elige el mejor formato de imagen

Qué formato de imagen es mejor para el rendimiento de tu sitio web depende de para qué estás usando la imagen.

• JPEG es mejor para fotos con grandes cantidades de color y alto contraste. JPEG reduce el tamaño del archivo pero introduce algo de pérdida de datos.

• PNG es mejor para imágenes dibujadas o texto, ya que no introduce compresión en objetos dibujados.

• GIF es bueno para secuencias animadas cortas porque el formato de archivo solo admite 256 colores.

• WEBP es un formato en ascenso, y empezará a verse más a menudo, pero aún no es del todo común. No me preocuparía por ello por ahora.

• SVG es tu mejor opción para gráficos vectoriales e íconos si eres un diseñador avanzado. Se escala hacia arriba y hacia abajo sin perder nitidez y calidad, y el tamaño del archivo es mucho más pequeño que el de los PNG.

Establece las dimensiones correctas de la imagen

Encontrar imágenes gratis de alta calidad para tu sitio web puede ser un gran dolor.

Por eso muchos nuevos diseñadores web y blogueros cometen el error de descargar imágenes en su mayor tamaño y luego subirlas a su sitio sin hacer ninguna optimización de imagen.

Ejemplo: Digamos que quiero descargar esta linda imagen de mono de Unsplash.

Si la descargo en su tamaño y dimensiones originales, vendrá en un impresionante 4928 x 3264. (ancho y alto) Cualquier cosa superior a 1280 x 720 (también conocido como 720p) se considera de alta definición.

Si quiero una calidad aún más alta para asegurarme de que me vea bien en pantallas de mayor resolución, puedo hacer 1920 x 1080 (también conocido como 1080p) o 3840 x 2160 (también conocido como 4K).

Pero no planeo mostrar esta imagen de mono en toda la pantalla. Solo quiero mostrarla en mi publicación de blog. Y como sé que el ancho del contenido de mi publicación de blog es de aproximadamente 1000px, sé que el ancho de mi imagen no necesita ser nada más que eso.

Cualquier cosa más de 1000 es simplemente espacio desperdiciado y recursos. Pero me gusta dejar un poco de margen, por si decido usar la imagen en un contexto más amplio en el futuro.

Así que ahora usaría un editor de fotos simple (prefiero Photoshop) para redimensionar la imagen de 4928 x 3264 a 1280 x 848.

Esto hará que sea mucho más fácil para tu sitio web redimensionar automáticamente la imagen para que sea receptiva en todos los dispositivos. La cantidad de trabajo de código se ha reducido.

Pero todavía hay un paso crítico más que debes tomar antes de que la imagen esté lista para ser subida a tu sitio.

Comprime cada imagen

Es importante que las imágenes se compriman antes de subirlas a tu sitio web.

Esta es la forma más fácil y simple de acelerar la velocidad de carga de tu sitio web.

¿Ves todas esas fotos de stock hermosas y elegantes de las que acabamos de hablar? Son enormes.

Hay varias maneras de comprimir y optimizar tus imágenes, pero aquí tienes el método simple que utilizo:

Usando Photoshop para reducir el tamaño de las imágenes

Dependiendo de la versión de Photoshop que estés usando, esto podría verse un poco diferente. Estoy suscrito a la versión Creative Cloud de Photoshop por $10/mes, así que se actualiza constantemente de forma gratuita.

Supongamos que ya hemos redimensionado las dimensiones de la imagen. Ahora es hora de comprimir el tamaño.

Ve a Archivo > Exportar > Guardar para Web

Nuevamente, el flujo de esto puede ser un poco diferente para tu versión de Photoshop. Pero debería estar en la misma área general.

Elige tus opciones de compresión de imagen

Ahora, elige tus opciones.

La mayoría de tus imágenes se pueden guardar en el formato JPEG LOW. Si necesitas tener un fondo transparente, asegúrate de seleccionar PNG-8.

La calidad se establece en una escala de 1-100. Generalmente nunca supero 5-10. Notarás que el 90% de la calidad se preserva de todos modos. Y vale la pena perder ese 10% por los drásticos ahorros en el tamaño del archivo.

Luego, haz clic en Guardar.

Nombra tu nueva imagen y haz clic en Guardar

Manténlo simple y relevante para que sea fácil de buscar más tarde.

¡Disfruta de tus resultados!

¿Ves eso??

La imagen original llegó a un impresionante 3.8 MB.

¿La nueva versión, comprimida y totalmente optimizada? 60 KB!

ASÍ es como se hace, amigo.

Como dije, comprimir tus imágenes es la #1 manera de acelerar rápidamente el rendimiento de tu sitio web.

4.3) Usa caché

NOTA: Hay muchas formas diferentes de caché y puede volverse bastante complicado rápidamente. Pero esta es una guía para principiantes, así que esto será un repaso muy básico de algunas estrategias de caché útiles.

La caché permite a un sitio web recuperar recursos de un caché local para que no tenga que utilizar recursos de su servidor.

La caché es beneficiosa porque permite que el navegador o dispositivo use contenido que ya ha sido almacenado en lugar de cargarlo fresco cada vez.

Esto acelera considerablemente el tiempo de carga de la página para los usuarios que acceden a tu sitio. También reduce la carga en tu ancho de banda, lo que permitirá que tu sitio aloje más visitantes sin arriesgarse a congestión.

Una de las formas más poderosas de optimizar las velocidades de carga del sitio web es utilizando caché. Hay muchos tipos diferentes de caché disponibles según tus necesidades.

Caché HTTP

La caché HTTP te permite minimizar el número de solicitudes que el navegador de un usuario hace a tu servidor utilizando encabezados HTTP para almacenar recursos enviados desde el servidor.

Esto se considera generalmente como una de las formas más poderosas de optimizar el rendimiento de tu sitio web porque puede reducir el uso de ancho de banda hasta en un 80%.

Caché de página

La caché de página es otro tipo de caché, donde solo se almacenan recursos específicos en lugar de todos los recursos.

Al almacenar el HTML de una página web, los visitantes pueden cargar esa página sin conectarse a tu servidor y volver a descargar todos los componentes de tu sitio web para esa página.

Caché del navegador

La caché del navegador se refiere a la caché que ocurre en el navegador del usuario.

Esto permite que recursos como imágenes, archivos de video y CSS/Javascript se almacenen en el disco duro local para que cuando los usuarios regresen a tu sitio web, puedan cargar las páginas más rápido.

Caché del servidor

La caché del servidor es un tipo de caché que ocurre en el servidor donde está alojado tu sitio web.
Esto servirá archivos estáticos a tus visitantes para que puedan cargar tu sitio web más rápido.

4.4) Elimina o difiere la CSS y Javascript que bloquea el renderizado

Si tu sitio web no es muy grande, diferir la carga de CSS y JavaScript puede ser una forma muy efectiva de optimizar el rendimiento.

Diferir scripts significa reorganizar el orden en que se cargan los scripts en una página web.

A menudo esto se puede lograr fácilmente colocando scripts en el pie de página de tu sitio.

Los scripts que se difieren solo cargarán si es necesario, lo que reduce el peso inicial de la página requerido para la carga.

También puedes utilizar un plugin para diferir scripts. Esto te permite cargar scripts cuando sea necesario sin retrasar el tiempo de carga de otros aspectos de tu sitio web.

Cómo encontrar y eliminar CSS y Javascript que bloquean el renderizado

IMPORTANTE: Si no sabes lo que estás haciendo aquí, puedes romper fácilmente algunas funciones y contenido de tu sitio web. Asegúrate de probar la eliminación o el diferido de archivos Javascript uno por uno, para que puedas deshacer el cambio fácilmente si tu sitio web se rompe.

Navega a la pestaña "Estructura" en tu informe de GT Metrix y haz clic en "Reducir Javascript no utilizado"

Esto te mostrará qué archivos Javascript GT Metrix cree que son innecesarios o se pueden diferir para cargar más tarde.

Elimina o difiere cada archivo uno a la vez, luego prueba tu sitio web

Si estás usando WordPress, este proceso es mucho más fácil. Puedes usar un plugin de caché popular como WP Rocket o Hummingbird para diferir archivos Javascript.

Si no estás usando WordPress, las cosas pueden volverse desordenadas rápidamente. Hay varias formas de diferir Javascript pero todas implicarán codificación. Esto es solo para desarrolladores avanzados.

Si no quieres meterte en esa parte, te recomiendo que simplemente elimines tantos de los plugins y scripts conflictivos que están usando Javascript. Mucho más simple.

4.5) Elige un servidor más cerca de tus visitantes

Elegir un servidor cerca de la ubicación geográfica del visitante es importante para el rendimiento del sitio web.

Cuanto más cerca esté tu servidor web de tus visitantes, más rápido se pueden entregar los datos a ellos.
También es crítico para el SEO local, ya que Google priorizará los sitios web con mejores experiencias de usuario. Y la velocidad de carga = mejor experiencia de usuario.

La única manera real de saber dónde está ubicado un servidor es preguntarle al proveedor de web antes de registrarte con ellos. Hay otros métodos, pero son mucho más avanzados. Ni siquiera sé cómo hacerlo.

Si eliges alojamiento dedicado con una empresa como Cloudways, podrás elegir entre una variedad de proveedores de alojamiento en la nube que ofrecen servidores en todo el mundo.

Usa una CDN para visitantes internacionales

Una red de entrega de contenido, o CDN, es un grupo geográficamente distribuido de servidores que trabajan juntos para proporcionar una entrega más rápida del contenido del sitio web.

La mayoría de los proveedores de alojamiento de sitios web ofrecerán una CDN como parte de su paquete de sitio web. Usar una CDN permitirá que las páginas web se sirvan desde el centro de datos más cercano al visitante en lugar de desde el servidor de tu sitio web.

Esto puede reducir los tiempos de carga para los visitantes del sitio web hasta en un 50% y reduce los costos de ancho de banda. Cada visitante de tu sitio solo necesitará descargar los archivos que necesita desde el servidor que está más cerca de ellos.

La mayoría de las CDN son servicios premium con una amplia variedad de precios. Cloudflare ofrece una versión gratuita de su servicio CDN, pero se limita principalmente a beneficios de seguridad.

Si tienes muchos visitantes internacionales, particularmente si tienes un sitio web multilingüe, una CDN ayudará a que el contenido de tu sitio web cargue más rápido para ellos. Esto puede aumentar la cantidad de tráfico que recibes del extranjero.

Una CDN también eliminará la carga sobre tus propios servidores al alojar contenido en servidores internacionalmente. Esto significa que tu servidor tendrá menos trabajo que hacer y será menos propenso a fallar Debido a un uso excesivo.

4.6) Evita cadenas de redireccionamiento 301

Las Cadenas de Redireccionamiento son causadas cuando un redireccionamiento 301 envía a un visitante de una página a otra página de tu sitio, y luego otra... y otra.

Redirigir más de una vez causará retrasos innecesarios en la carga de la página.

La manera más simple de evitar este problema es mantener las redirecciones 301 al mínimo. Cuando las uses, asegúrate de que redirijan solo una vez.

4.7) Elige un sistema de gestión de contenido rápido

Un Sistema de Gestión de Contenido es una aplicación que te permite gestionar tu contenido. El CMS puede ser tan simple como un editor de texto o tan complejo como una plataforma como WordPress con widgets y plugins personalizados.

Un término más común y simple para CMS en el contexto del diseño web es creador de sitios web.

Así que, importa qué creador de sitios web uses.

¿Por qué? Porque no todos los creadores de sitios web están creados iguales cuando se trata de rendimiento de sitios web.

¡Otra razón para amar Weebly! Y aún más razones para evitar Wix como la plaga…

Si estás usando WordPress, asegúrate de elegir un plugin de construcción de páginas que sea lo más liviano posible.

Por suerte, la mayoría de los principales plugins de construcción de páginas han invertido masivamente en mejoras de rendimiento. En este momento no hay mucha diferencia discernible entre ellos.

4.8) Obtén un mejor alojamiento web

Si no estás obteniendo la velocidad que tu sitio web necesita para funcionar adecuadamente, puede ser hora de actualizar tu alojamiento web.

Un gran alojamiento web no es caro. Vale la pena la inversión si la alta velocidad de tu sitio convierte más visitantes en clientes.

Un sitio rápido significa un mejor ranking en la búsqueda de Google. También significa un mejor soporte para más dispositivos y navegadores.

Veo que demasiados propietarios de pequeñas empresas escatiman en el alojamiento web y sufren las consecuencias.
Tómate tu tiempo y haz tu investigación para elegir un alojamiento web que sea adecuado para ti.

5) Conclusión: ¡Mejora la velocidad de tu sitio web ya!

El rendimiento del sitio web es una parte crítica de la experiencia del usuario de tu sitio.

La velocidad de carga del sitio web puede impactar el éxito o el fracaso de un negocio en línea, así que vale la pena tener cuidado en cómo gestionas los recursos de tu sitio.

En esta guía de rendimiento del sitio web revisamos algunos consejos para asegurarnos de que tu sitio se cargue lo más rápido posible mientras mantenemos felices a los usuarios en todo momento.

Hemos destacado las consideraciones más importantes que debes tener en cuenta para optimizar tu sitio para la velocidad, junto con algunos consejos sobre cómo puedes mejorar el tiempo de carga sin sacrificar contenido o usabilidad.

¡Prueba estas sugerencias y házmelo saber cómo te va!