Cómo acelerar el tiempo de carga de tu web: Tips 2019

Cómo acelerar el tiempo de carga de tu web: Tips 2019

Hay un montón de factores que pueden ralentizar tu página web. Ya te ayudamos a medir la velocidad de carga de tu web, incluso te explicamos por qué es importante. Ahora te vamos a dar algunos tips de como acelerar el tiempo de carga de tu web.

Cómo acelerar el tiempo de carga de tu web

1. Minimiza las solicitudes HTTP

Según Yahoo, el 80% del tiempo de carga de una web se gasta en descargar las distintas partes de una página, como imágenes, hojas de estilo y scripts.

Se realiza una solicitud HTTP para cada uno de estos elementos, por lo que mientras más elementos contenga más demorará tu página en cargar. El primer para resolver cómo acelerar el tiempo de carga de tu web es descubriendo cuántas realiza, para tener un punto de referencia.

Si navegas con Google Chrome, puedes emplear las herramientas del desarrollador para ver cuántas solicitudes hace tu página. pincha con el botón derecho sobre la página que quieres analizar y selecciona “inspeccionar”. Luego, elige la pestaña “red” (network). Si no visualizas la pestaña, puedes necesitar expandir la herramienta arrastrando el borde izquierdo hacia la izquierda.

Cómo acelerar el tiempo de carga de tu web
Herramientas del desarrollador de Google Chrome

La columna “nombre” muestra todos los archivos en la página, además puedes revisar el tamaño y tempo de carga de cada uno. En la esquina inferior izquierda también puedes ver el total de solicitudes de tu página.

Reducir este número de solicitudes acelerará tu web, para ello, elimina aquellas que sean muy lentas o innecesarias. Puede que no veas una diferencia inmediata, pero sumado a otros tips verás la diferencia

2. Minimiza y combina archivos

Ahora que ya sabes cuántas solicitudes hace tu página, puedes ponerte a trabajar para reducir ese número. El mejor lugar para comenzar es con tus archivos HTML, CSS y JavaScript. Estos elementos son esenciales porque determinan la apariencia de tu sitio.

Puedes reducir el número de archivos si los combinas o minimizas. De esta manera el peso total de tus elementos será menor y cargará más rápido. Esto es especialmente importante si utilizas una plantilla. Por supuesto, ellas facilitan mucho el trabajo, pero a veces su código es un poco desordenado y ralentiza tu web.

Minimizar un archivo significa quitar formato innecesario, espacios en blanco y código. Ya que cada pieza del código suma tamaño, es importante que quites los espacios extra, las líneas de quiebre y las sangrías.

Combinar archivos es tal cual como suena. Puedes agrupar todos tus elementos CSS y JavaScript en uno solo.

Existen mcuhas hetrramientas para hacer esta tarea y, si usas WordPress, puedes instalar plugins como WP Rocket. Si ya lo tienes debes ir a la pestaña “archivos estáticos” y marcar aquellos que quieres optimizar.

Cómo acelerar el tiempo de carga de tu web
Plugin WP Rocket de WordPress

En esta acción puedes incluir archivos HTML, CSS, y JavaScript files, como también fuentes de Google. Recuerda guardar los cambios al finalizar y recargar tu página para volver a medir el peso de tus elementos con las herramientas del desarrollador de Chrome.

3. Utiliza carga asíncrona para archivos CSS y JavaScript.

Una manera de cómo acelerar el tiempo de carga de tu web es optimizar la forma en que se descargan. Los archivos CSS y JavaScriptxisten dos tipos asíncrona y síncrona. Si tus scripts se cargan de forma síncrona aparecerán en tu página uno a la vez. En cambio, de manera asíncrona, algunos cargarán de forma simultánea.

Utilizando la misma pestaña de “archivos estáticos” del plugin WP Rocket, revisa las opciones junto a “Render-blocking CSS/JS.”

Cómo acelerar el tiempo de carga de tu web
Activar carga asíncrona de archivos en WordPress

Marca las casillas como aparecen en la imagen de arriba y guarda los cambios, luego prueba refrescar tu página para asegurar de que todo carga correctamente.

4. Aplazar la carga de JavaScript

Aplazar un archivo significa prevenir que descargue antes que el resto de los elementos haya cargado. Atrasando la carga de los archivos pesados, como los JavaScripts, aseguras que el resto del contenido no se demore en cargar.

Si tu sitio es WordPress, con WP Rocket puedes habilitar la carga diferida de JavaScript. Sólo activa la casilla “cargar archivos JS diferidos” y listo. Si es HTML, puedes tener que llamar un archivo JavaScript externo antes de la etiqueta </body>, lo que se ve más o menos así:

Cómo acelerar el tiempo de carga de tu web
Aplazar la carga de archivos JavaScript en HTML

5. Minimiza el tiempo antes del primer byte

Una excelente manera de cómo acelerar el tiempo de carga de tu web es logrando que comience a descargar más rápido.

El tiempo antes del primer byte (Time to first byte), o TTFB,es la cantidad de tiempo que le toma a un navegador descargar el primer byte de información desde el servidor. Google recomienda que sea menor a 200 ms.

A diferencia de la mayoría de factores de performance front-end en los que los dueños se enfocan, este es un problema de servidor. Cuando un usuario visita tu sitio, su servidor envía una solicitud HTTP al servidor que lo aloja.

Hay tres pasos que deben ocurrir entre ésta y el primer byte:

  1. Búsqueda de DNS
  2. Procesamiento del servidor
  3. Respuesta

Puedes chequear cuánto demora este proceso utilizando las herramientas para el desarrollador de Chrome o una herramienta externa. Si utilizas el primero, es importante recordar que puede estar influido por la velocidad de tu conexión a Internet. Mientras más lenta, más demorará en obtener una respuesta del servidor.

Para acceder a esta información en las herramientas del desarrollador pincha la pestaña “red” y ubica el cursor sobre el primer item de la columna “cascada” (“Waterfall”).

Cómo acelerar el tiempo de carga de tu web
Revisar tiempo de carga del primer byte en Google Chrome

También puedes emplear otras herramientas como WebPageTest:

Cómo acelerar el tiempo de carga de tu web
WebPageTest

Si tu tiempo de carga del primer byte (TTFB) es menor a 200ms, estás en buena forma. Si no, puede haber varias razones de fondo. En general, la mayoría delas causas son por problemas de red, creación de contenido dinámico, configuración del servidor web y tráfico.

De estos factores sólo tienes control sobre dos: la creación de contenido dinámico y la configuración del servidor. A diferencia de las páginas estáticas, el servidor necesita “construir” un archivo dinámico antes de responder.

Si tu sitio es un WordPress, es muy probable que tus páginas sean dinámicas. Puedes reducir el tiempo que toma “construir” el contenido habilitando el almacenamiento de caché.

Ahora ya tienes una idea de cómo acelerar el tiempo de carga de tu web, pero estos son sólo algunos tips sencillos para que comiences a interesarte en el tema. Cuéntanos si esta información te resultó útil y, tal vez, podríamos conseguir más de estos tips para ti.

Recuerda que siempre puedes contratar los servicios de Diseño Web de La Paradoja y dejar todo este trabajo en nuestras manos expertas.

Deja una respuesta

Su dirección de correo electrónico no será publicada.