Podcast del Programa ExpacioWeb en OndaCero OndaCero Episodio 65: Una cita con el Club de Alto Rendimiento Empresarial de Córdoba
Córdoba 957 614 637 Madrid 910 052 375 Málaga 951 204 115 Barcelona 933 941 014

Cómo conseguir que tu web sea más rápida

Cómo conseguir que tu web sea más rápida - ExpacioWebEl tiempo es el recurso más escaso en nuestras vidas. Siempre vamos con prisas porque hay cosas que hacer. Lo queremos todo lo antes posible, sin esperar y en tiempo record. Con las páginas webs ha pasado algo parecido. Cuánto más tarda en cargar una página web, menos visitas obtendrá el site. Esto es un hecho y siento decirte que tienes que aceptarlo.

Tras detectar esta tendencia y, como respuesta expresa a la misma, nació el concepto del Web Performance Optimization u Optimización de Rendimiento Web (más conocido por las siglas WPO). El WPO hace referencia a una serie de técnicas destinadas a mejorar la velocidad de carga de una página web logrando una mejor experiencia al usuario.

A su vez, la velocidad de carga es uno de los principales factores que contempla Google al posicionar una web debido al Crawl Budget (o presupuesto de rastreo). Pero, ¿qué es eso del Crawl Budget?

¿Qué es el Crawl Bugdet?

Aunque parezca una locura, los recursos de Google no son infinitos (no son Disney que parece dispuesta a dominar el mundo XD). Por este motivo, Google asigna a sus robots un tiempo determinado para rastrear cada sitio web en función a la autoridad, accesibilidad, calidad y velocidad de cada sitio y, dependiendo de estos factores, Google determinará más o menos tiempo a dicho proceso. De ahí la importancia de la velocidad de carga de una web.

 

¿Cómo optimizar la velocidad de una web?

Para mejorar la velocidad de una página, es necesario acometer una serie de aspectos a implementar o decidir y que mejor encajen con el proyecto. Estos son los principales.

Servidor

Como si de un buen vino se tratase, hay que tener claro dónde quieres sembrar las uvas. El primer paso es elegir correctamente el servidor que alojará la web. De igual forma, hay que revisar las características de la página eligiendo un servidor acorde donde alojarla. Lo primero es lo primero, ¿dedicado o compartido? Un servidor dedicado ofrece mejor resultado que uno compartido.

No obstante, según las visitas que esperas para la página web puede resultar un poco como matar moscas a cañonazos y un buen servidor compartido puede dar un buen resultado.

En cuestión de hardware debes revisar el disco duro que aportado (espacio, formato SSD y otros), la tasa de transferencia que asignada, la RAM del mismo, etcétera.

En términos de software se recomienda hacer especial hincapié en 2 puntos:

La versión de PHP

Siempre es recomendable trabajar sobre las últimas versiones estables de PHP debido a que proporciona más seguridad y velocidad. No obstante, si nuestro proyecto no lo permite deberemos utilizar la última versión posible.

Apache o NGinx

Es recomendable NGinx. Su uso nos da una mayor velocidad que Apache, aunque lo más extendido es éste último y puede darnos el suficiente rendimiento como para optimizar una web.

Optimización de recursos

Lógicamente cuánto menos pese la web más rápido cargará. Por este motivo, es clave que los recursos estén lo más optimizados posibles. A saber:

  • Todas las imágenes subidas a la web deben comprimirse para que no ocupen demasiado espacio.
  • Todo el código de nuestra web debe optimizarse. Aquí menos es más.
  • La carga de recursos debe ser correcta, es decir, no incluir archivos CSS ni JavaScript donde no son usados.
  • Evitar en la medida de lo posible los recursos externos a nuestra web.

Tras aplicar estas recomendaciones podremos enfocar nuestros esfuerzos en el siguiente punto a considerar.

Caché de página

Es imperativo que una web tenga una caché de página adicional a la caché que proporcione el propio servidor (OPCache). Sirve más rápido todos los recursos de nuestra web. Normalmente esta caché depende mucho desde si utilizas un CMS (como por ejemplo WP, Magento, Prestashop) donde existen plugins que se encargar de esta funcionalidad, hasta si posees una aplicacion personalizada basada en algún frameworks (como Láravel, Symphony), donde elementos específicos suplen este cometido.

CDN

Por último, pero no por ello menos importante, está el Content Delivery Network o Red de Entrega de Contenidos, más conocido como CDN. Según Wikipedia, una red de entrega de contenidos:

…es una red superpuesta de computadoras que contienen copias de datos, colocados en varios puntos de una red con el fin de maximizar el ancho de banda para el acceso a los datos de clientes por la red

La propia definición lo explica pero, ¿qué nos reporta a nosotros implantar un CDN en nuestra web? La respuesta es sencilla: velocidad. Al tener repartida la web por toda esta red, la navegación es más rápida al acceder a la copia disponible más cercana a la ubicación del cliente.Existen varias opciones al contratar un CDN. Sin embargo, me centraré en dos:

  • Es un CDN con distintas opciones (una de ellas gratuita) que cumple bastante bien con las expectativas.
  • Es un CDN bastante competente que cuenta con diversos servidores en regiones de habla hispana.

Al considerar todas estas recomendaciones, el avance para conseguir una buena velocidad de carga para una página web será considerable pero, ¿cómo puedes medirla?

 

¿Dónde compruebo la velocidad de carga de una web?

Existen varios sites para medir la velocidad de una web. Personalmente  recomiendo tres por su utilidad y efectividad:

Con estas herramientas comprobarás todos los parámetros relacionados con la carga de nuestra web, destacando el Time to First Byte (o TTFB) que muestra el tiempo empleado por nuestro servidor para servir el primer byte de información.

 

Caso de éxito: ExpacioWeb

Toda esta información está muy bien pero es bastante teórica. Ha llegado el momento de meterse en faena analizando la página de ExpacioWeb (sí, ésta que estás viendo). Se trata de un  Wordpress en el que todas las imágenes subidas están optimizadas gracias a herramientas tales como TinyPNG o Compressor.io pero con una nota no muy alentadora en velocidad.

Cómo conseguir que tu web sea más rápida - ExpacioWeb

Cómo conseguir que tu web sea más rápida - ExpacioWeb

Más de 9 segundos en GTMetrix y una puntuación bastante baja en PageSpeed Insights, algo que parecía bastante difícil de remontar. No obstante, no estaban habilitadas la caché de página ni la caché de servidor. La compresión de los ficheros CSS y JavaScript tampoco era la mejor. ¡Había que ponerse las pilas!

Lo primero fue implementar una caché de página con el plugin WP Rocket que a su vez optimiza la carga de CSS y JavaScript. Este plugin aún siendo Premium es muy recomendable. Entre todas sus distintas opciones destaca que nos permite Lazy Load, una carga especial de imágenes para que aparezcan conforme se vaya haciendo scroll. Así como permitir la integración con cualquier CDN.

A su vez, habilité la caché de servidor así como el gzip junto a otras mejoras. Los resultados actuales hablan por sí solos:

Cómo conseguir que tu web sea más rápida - ExpacioWeb

Cómo conseguir que tu web sea más rápida - ExpacioWeb

La velocidad ha triplicado y la puntuación en PageSpeedInsights ha subido una barbaridad. Como ves,  un tiempo de carga muy elevado es de las peores cosas que puede sufrir una web porque pierdes visitas, posicionamiento, clientes y usabilidad. No dejes que tus usuarios malgasten su tiempo esperando por tu web. Cómo dijo Teofrasto:

El tiempo es la cosa más valiosa que una persona puede gastar.

Valora este post
¡Haz clic para puntuar esta entrada!
(Votos: 1 Promedio: 5)
Enrique

Enrique

Web developer con más de 10 años de experiencia, siempre investigando para mejorar y descubrir nuevas tecnologías.

Más artículos de Enrique

Deja un comentario

Cuéntanos cómo podemos ayudarte y nos pondremos en contacto contigo.