Cómo aumentar la velocidad de tu sitio web

Este contenido forma parte de una guía completa para crear tu sitio o página web. Puedes acceder a la guía con este y otros puntos importantes aquí: Guía: Cómo crear un Sitio web desde Cero.

En el tema anterior, revisamos Plugins Importantes para tu sitio web, ahora pasaremos al siguiente tema: Cómo aumentar la velocidad de tu sitio web.

Esta guía cuenta con varios artículos que te enseñarán todo lo que necesitas saber para crear un sitio web. Si quieres ver los siguientes pasos o si ya completaste alguno de ellos puedes visitar los otros pasos de esta guía:

• Cómo Construir un sitio web desde cero
• Cómo elegir un nombre de dominio web
• Cómo elegir un Hosting
• Cómo instalar tu web usando wordpress
• Cómo diseñar un sitio web atractivo
• Plugins Importantes para tu sitio web
• Cómo Aumentar la Velocidad de Carga del Sitio Web
• Estrategias para posicionar tu Sitio web
• Usando redes sociales para expandir tu marca

Ya sea, si estas trabajando en tu propio sitio web o Blog, o bien en un proyecto para un cliente, responder a ¿Cómo mejorar la velocidad de carga de mi sitio web? es sin duda una de las preguntas más difíciles.

Si no cuentas aún con un sitio web te invito a revisar ¿Cómo crear un sitio web?

Todos hemos cerrado la pestaña del navegador en más de una oportunidad, luego de esperar más de 5-7 segundos en la carga de un sitio web. Sobre todo, si lo estamos tratando de ver en nuestro Smartphone o Tablet. Nuestras expectativas estan centradas en buscar que la conexión sea tanto o más rápida que el resultado que nos entregó Google.

Si este es tu caso, sigue leyendo este artículo ya que te entregaré un resumen de como se mide la velocidad de carga de un sitio web y que herramientas puedes utilizar para aumentar la velocidad de carga de tu página web.

Nota: Las herramientas que te voy a mostrar las podrás utilizar solo si tu sitio web utiliza WordPress. ¿Sabes si tu sitio web esta construido en WordPress? Revísalo acá.

Intentaré ser lo más acotado posible y buscaré entregarte el mayor valor para que puedas mejorar la velocidad de carga de tu sitio web. Es por esto, que responderé en este artículo dos preguntas:

• ¿Cómo medir la velocidad de carga actual de mi sitio web?
• ¿Que herramientas pueden mejorar la velocidad de carga de mi sitio web?

Manos a la obra

Quiero que abras los siguientes enlaces e ingreses la dirección de tu sitio web, estas son las web que utilizo constantemente para ver el funcionamiento y la velocidad de carga de mi sitio web.

• GTmetrix
• Pingdom
• Google Page Speed Insights

Los ordené en base a la importancia que le doy a cada uno de los resultados, me gusta y tengo más confianza en GTmetrix por sobre los otros, sin embargo al final del día termino considerando a los tres.

¿Cómo funciona GTmetrix?

Ingresamos al sitio web y deberíamos encontrarnos con lo siguiente: GTmetrix

La idea es ingresar la dirección de nuestro sitio web. Intenta utilizar la dirección completa incluyendo el HTTP o HTTPS (así evitas el redireccionamiento de WordPress y ganas algunos segundos de carga) mi sitio web sería por ejemplo https://www.robguldenaar.com.

Al llegar a la página de resultados, lo primero que verás será la calificación de tu sitio web, respecto a la suma de todos los criterios utilizados para medir la velocidad de carga.

También verás el tiempo que GTmetrix se demoró en cargar por completo tu sitio web, el peso y las llamadas que tuvo que realizar.

Lo más importante es el diagnostico que te entrega más abajo, en la pestaña de «PageSpeed», donde podrás ver en detalle las calificaciones individuales de cada sección en conjunto con las recomendaciones de mejora.

Deja esta pestaña abierta en tu navegador. Luego de que termines la lectura de este artículo y hayas realizado los cambios en tu WordPress, abre otra pestaña y vuelve a analizar tu sitio web, así podrás ver el antes y el después.

¿Cómo funciona Pingdom?

Muy similar al anterior, al ingresar deberías ver un sitio web como este: Pingdom

Ingresa la URL de tu sitio web, nuevamente no olvides el HTTP o HTTPS para evitar redireccionamientos de WordPress.

Selecciona la localidad más cercana a tu servicio de hosting (el servidor donde tienes alojado tu sitio web).

En los resultados nuevamente verás una calificación, el tamaño del sitio, el tiempo de carga y las llamadas, además de la tabla con los resultados y las descripciones de como mejorar cada uno de ellos.

Lo que me gusta mucho de Pingdom es el detalle de la parte inferior de los resultados, donde analiza los porcentajes en la carga respecto a la cantidad de Script, Imágenes, CSS, Fuentes y HTML.

Déjala abierta así puedes comparar luego de aplicar correcciones.

¿Cómo funciona Google Page Speed Insights?

Sin dudas es el medido que más depresión te entregará, Google es muy bueno para resaltar los puntos de mejora y suele ponerte en una posición por debajo de los otros dos analizadores web. Al entrar al sitio, deberías ver algo similar a esto: Google Page Speed Insights.

Los resultados nuevamente te darán una calificación en puntáje y detalles de tiempos de carga en conjunto con recomendaciones.

Google realiza el análisis basado en la versión móvil del sitio web, por lo tanto es una buena comparativa y te desafía a adaptar lo máximo posible la experiencia del usuario en un navegador de PC a la de un Tablet o Smartphone.

Mantén abierta esta pestaña para comparar luego de aplicar los ajustes que te mencionaré a continuación.

¿Cuáles son los estándares de carga de un sitio web?

Para comparar los resultados obtenidos en el paso anterior, según estadísticas de HubSpot, un sitio web con HTML optimizado, debería tener una velocidad de carga «Excelente» por debajo de los 1,5 segundos.

También, considera que los sitios y paginas web con velocidad de carga entre los 1.5 y los 5 segundos serían «la media», pero podrían presentar algunos errores o factores que hacen que la web cargue lentamente y no a una velocidad ideal, (para mi, hay mucha diferencia entre un sitio que carga a 1,5 segundos versus otro que se demora 5, pero bueno).

De todas maneras, tal como lo viste en tus resultados previos, las velocidades de carga de un sitio web dependerán de varios factores.

¿Cómo carga un sitio web?

La velocidad de carga de tu sitio web dependerá entre otros de estos 4 principales factores:

• El tamaño de los datos de tu sitio web
  (texto, imágenes, complementos, codigo).
• El tiempo de demora que el «buffer» de tu navegador requiera al cargar el sitio web. (Comúnmente conocido como el caché que puede almacenar tu navegador en base al sitio web)
• Características del servicio de hosting donde tienes alojado tu sitio web (principalmente su ubicación y versiones de plataforma utilizadas).
• La forma en que tu servidor procesa las llamadas hacia tu sitio web (codigos PHP, la base de datos SQL, entre otros).

Mejoremos la velocidad de carga de tu sitio web

Lo primero que haremos será optimizar las imágenes de tu sitio web y algunas recomendaciones para cuando subas nuevas imágenes.

Advertencia: Antes de realizar cualquier cambio en tu sitio web, realiza un respaldo de seguridad, si no sabes como hacerlo te recomiendo instalar el plugin «All-in-One WP Migration» y exportar tu sitio web como archivo.

Optimizar las imágenes de tu sitio web

Smush: Optimizador de Imagenes para WordPress

Abre tu panel de administración en WordPress, y selecciona en la pestaña de plugins «Instalar nuevo plugin»

Busca e instala el Plugin «Smush«, desarrolado por WPMUDEV.

Una vez instalado, dirígete a la sección del plugin, y realiza un rastreo y optimización de las imágenes. Te dejo también la configuración que recomiendo:

• Reducción automática: Activado
• Metadatos: Activado
• Redimensionado de imagen: Desactivado (la puedes activar si tienes clara tus dimensiones máximas)
• Detecta y muestra imágenes de tamaño incorrecto: Activado

Lo maravilloso de este Plugin es que trabajará en adelante mejorando cada una de las imagen que subas al servidor.

Adobe Photoshop: Guardar imágenes para web

Cada vez que tengas que subir una imagen al sitio web, trata de pasarla primero por esta función de photoshop para que tenga la mejor calidad pero el menor tamaño posible.

Una vez en photoshop con la imagen que deseas subir a tu web, presiona la tecla CTRL + ALT + SHIFT + S. o bien dirígete a:

Recuerda que los formatos JPEG suelen ser más livianos que los PNG, limita el uso de PNG lo que más puedas.

Bien, ahora tienes un plugin que mejorará tus imágenes constantemente y además las subirás desde un principio con el peso y dimensiones ideales para tu sitio web.

Sigamos mejorando la velocidad de carga de tu sitio web con otros plugins.

Mejorando el Cache de tu sitio web

WP Fastest Cache: Mejora la carga de datos

Ahora instalaremos un plugin que te permitirá acelerar la carga de datos relacionados a tu sitio web.

En la pestaña de plugins, nuevamente deberás ingresara a «añadir nuevo» y buscarás: WP Fastest Cache de Emre Vona.

Todos los plugins que hemos instalado tienen versiones pagadas, eres libre de poder adquirirlas para desbloquear mayores acciones y mejoras que puedan estar disponible. En lo particular, he estado utilizando las versiones gratuitas por mucho tiempo sin ningún problema, los cambios han sido bastante notorios cada vez que los he instalado.

Ahora toca el momento final, ingresa nuevamente a las páginas para medir la velocidad de carga de tu sitio web y realiza tus propias comparaciones.

Conclusión

¿Mejoró la velocidad de carga? ¿Cuantos segundos pudiste reducir con estas nuevas configuraciones? ¿Me ayudarías compartiendo esta publicación en tus redes?

Si pude aportar en la mejora de tu sitio web te invito a subscribirte para descubrir todos mis secretos por correo electrónico y recibir otros consejos de marketing y ventas.

Sigue explorando esta guía

Felicitaciones, ya deberías tener un sitio web que carga más rápido que un rayo. el siguiente tema por revisar será: Estrategias para posicionar tu Sitio web

El tema previamente revisado fue: Plugins Importantes para tu sitio web

Recuerda, estas son toda las secciones disponibles en mi guía para aprender Cómo crear un sitio web desde cero:

• Cómo Construir un sitio web desde cero (Artículo Principal)
• Cómo elegir un nombre de dominio web
• Cómo elegir un Hosting
• Cómo instalar tu web usando WordPress
• Cómo diseñar un sitio web atractivo
• Plugins Importantes para tu sitio web
• Cómo Aumentar la Velocidad de Carga de tu Sitio Web
• Estrategias para posicionar tu Sitio web
• Usando redes sociales para expandir tu marca

¿Te ha quedado alguna duda? Escribe en los comentarios y estaré feliz de responderla.