4 Claves para optimizar la velocidad de una web

Cómo aumentar la velocidad de un sitio web en producción. Claves para el éxito.

Cliente servidor Programación Herramientas de programación

Si estás leyendo este artículo es por que estás convencido de conseguir un sitio web más rápido, y conoces al menos algunas de las ventajas de lograr resultados en este campo.

Vamos a ver primero las principales ventajas de lograr una buena optimización de un sitio web.

En segundo lugar iré al grano y te dejo claves de rápida aplicación para lograr resultados significativos. Algunas de ellas, en el mejor de los casos para reducir los tiempos de carga a la mitad o incluso más.

A continuación voy a dejarte algunas claves de fácil aplicación que pueden mejorar la velocidad de tu sitio hasta lograr una carga en la mitad de tiempo.

Exactamente AQUÍ ENCONTRARÁS…

  • Por qué los tiempos de carga son importantes.
  • Cómo conocer la velocidad de carga de tu sitio.
  • Qué hacer, es decir, medidas para mejorar tus tiempos de carga.

¿Por qué los tiempos de carga son importantes?

Los tiempos de carga de tus páginas, y hablo en plural ya que cada página puede posicionarse individualmente, son esenciales para lograr:

  1. Mejor posicionamiento en buscadores.
  2. Mejor experiencia de usuario para el cliente.
  3. Mayor número de conversiones con tu sitio web.

Peleando cada décima de segundo de carga, estarás superando a tus competidores como si se tratará de una carrera y, aunque el contenido sigue siendo el plato fuerte de un sitio, ante la duda google siempre le dará un empujón en los resultados de búsqueda a aquel que ofreza una mejor experiencia de usuario.

 

Medir la velocidad de carga de tu sitio web

A pesar de que muchas veces, con una simple ojeada se puede apreciar la velocidad de respuesta de un sitio, debemos intentar conocer cual es la velocidad de carga en segundos de una página de nuestro sitio.

Comentarte que siempre debes tener en cuenta, que no por conocer la velocidad de carga de una página concreta, esta velocidad va a ser la misma para el resto de tu sitio. Las velocidades de carga al igual que el posicionamiento son independientes, con lo cual deberemos intentar mejorar la velocidad general del sitio y luego especificamente de páginas con mayor importancia.

Dicho esto, veamos que herramientas podemos utilizar para medir la velocidad y optimización de las páginas de nuestro sitio.

PageSpeed la herramienta de Google

Podemos decir que esta herramienta es la referencia, no la mejor pero sí la que está directamente contralada por Google, entre sus resultados encontramos una puntuación relativa a optimización del sitio (no la velocidad). Actualmente, con la última actualización de google, vemos los tiempos de carga reales de los navegadores de los usuarios, es decir, con las limitaciones de sus conexiones a internet.

Tools.pingdom.com

Esta herramienta a parte de tener la mejor interfaz y la más sencilla de utilizar, muestra resultados detallados, y es una buena referencia para saber el nivel de optimización de nuestro sitio y cómo mejorarlo.

La herramienta permite indicar desde que servidor queremos hacer la prueba. Este detalle diferencial es importantísimo a la hora de realizar las mediciones. Asegurate de elegir el servidor más cercado al servidor que utilizas para alojar tu web.

Esta página además aporta detalles técnicos de peso de ficheros, etc. Para que se puedan tomar medidas y soluciones. El informe está en inglés, pero no hace falta un gran conocimiento de esta lengua para interpretar sus resultados. 

¿Cómo mejorar la velocidad de carga?

Aquí está el centro del meollo, ahora que ya sabes si tu sitio es rápido, aceptable o, desgraciadamente es muy lento, te preguntarás cómo aumentar la velocidad de carga.

Para realizar los cambios en su mayoría necesitarás conocimientos técnicos de desarrollo web, aunque a continuación te comentaré las 4 claves que se pueden hacer con conocimientos básicos sobre desarrollo web.

A grandes rasgos, podrás mejorar la rapidez de tu sitio atacando a los siguientes problemas:

  • Reduciendo el peso de las imagenes.
  • Comprimiendo los ficheros css y html que se mandan al usuario.
  • Indicando la fecha de caducidad de tus ficheros.
  • Aplicando un sistema de caché a tu sitio web.

Optimizando el peso de las imagenes

Aproximadamente la mitad del peso de una página son imagenes, más hoy en día con el enfoque visual de los sitios y la calidad de estas. Si por el contrario la mayor parte del peso de tu web recae en librerías javascript o hojas de estilo css seguramente tienes un problema más gordo entre manos más tedioso de solucionar (que requiere de un desarrollador web).

Las imagenes de un sitio se pueden optimizar o bien utilizando software para este cometido como puede ser photoshop o incluso el paint para ajustar la resolución, o mediante la configuración del CMS que estés utilizando. Wordpress por ejemplo permite la configuración de la resolución de las imagenes grandes del sitio como las miniaturas.

Como estrategia te recomiendo que averigues el tamaño máximo posible que pueden tomar tus imagenes en tu sitio web y en base a ello configurar tu sitio. Para hacer esto puedes usar un monitor con mucha resolución, siendo la medida media de los usuarios de un sitio las de una pantalla full hd.

 Por último, un truco sencillo para reducir drásticamente el peso de tus imagenes es guardando tus imagenes "para web" en photoshop.

Habilitar la compresión de archivos

Si has pasado los test anteriores sobre tu sitio te aparecerá un apartado de Compresión, e aquí un problema fácil de solucionar.

La compresión de archivos puede reducir el tamaño de los archivos que recibe el visitante de tu sitio web, logrando que hojas de estilo y el contenido HTML se reduzcan hasta en un 70%.

Esta función la realiza el servidor web que utilices, y suele estar disponible en prácticamente todos los hosting decentes. Asegurate de que tienes habilitada la compresión y revisa este apartado. Buena parte de este trabajo lo puedes hacer en el fichero .htaccess si tu CMS no tiene una opción para ello. En Joomla, por ejemplo, encontrarás una opción que habilita la compresión con tan solo un click.

Habilitar la caché de navegador con htaccess.

Con la caché del navegador me refiero a la caché del cliente, es una tarea independiente a tu sitio, pero que, sin la debida configuración en el fichero .htaccess, esta no se activará.

Si la caché del navegador de tus visitantes no se activa esto redunda en que el usuario descargue toda la página cada vez que cambia de página en tu sitio, a pesar de que muchos ficheros sean los mismos en todas las páginas.

Para habilitar la caché del navegador lo que haremos realmente será especificar una caducidad para los ficheros de nuestro sitio web. A continuación te dejo un snippet rápido que configura la caducidad de los ficheros de tu sitio ( imagenes, hojas de estilo, scripts, etc) para al 1 mes:

<IfModule mod_expires.c>
	<filesmatch "\.(jpg|JPG|gif|GIF|png|PNG|css|js|php)$">
		ExpiresActive on
		ExpiresDefault "access plus 30 day"
	</filesmatch>
</IfModule>

La caché o 'caching' de un sitio web

La medida problamente más potente de optimización de un sitio. Esta es una medida relativamente sencilla de solucionar. 

La caché forma parte del trabajo de tu sitio web en la programación por parte del servidor o desarrollo backend. Habilitada, esta función ahorrará mucho tiempo de respuesta por parte de tu servidor.

Felizmente para este problema existen muchas soluciones desarrolladas, todas ellas funcionando bien, unas mejores que otras. Para habilitar la caché en tu sitio necesitarás de un plugin o módulo para tu CMS o en caso de ser un desarrollo a medida necesitarás una librería para este cometido.

Si utilizas Wordpress te recomiendo WP Super Cache ya que tiene muchos tutoriales por internet y da buenos resultados. Si por el contrario prefieres probar algo de pago que ofrece soporte y muy buenos resultados te recomiendo el plugin de caché Borlabs Cache.

Si por el contrario eres un programador y tienes un sitio a medida te recomiendo PHP Fast Cache que es una librería fantástica y muy fácil de implementar. Yo mismo la utilizo en este sitio.

Conclusiones de cómo accelerar la velocidad de tu sitio

La velocidad de carga o respuesta de un sitio web es importantisima, no solo afecta a la corta paciencia de los visitantes, sino que le está diciendo a Google y demás buscadores lo que te preocupas por la calidad de tu página web.

Además, como has visto, algunas de las medidas para mejorar esto son relativamente sencillas, y gracias a los avances de los CMS y contenido disponible en internet, podemos lograr resultados en apenas unas horas.

Como punto y final, comentarte que si quieres llevar un nivel más allá la velocidad de tu sitio y comerte a la competencia, contactes con desarrolladores profesionales y hagas una inversión en este aspecto, a la larga cosecharás los resultados en SEO y experiencia de usuario. Es muy problable que hasta tus lectores/clientes elijan tu sitio sobre la competencia si este está depurado y permite una navegación ágil en cualquier dispositivo.

Sobre el autor

Javier Gómez Redactor en Srcodigofuente.es

Javier Gómez

Ingeniero técnico en informática de gestión. Desarrollador web freelance y profesor de desarrollo web a partes iguales. Testarudo autodidacta, creativo, perfeccionista y alma libre.

Cargando comentarios

Utilizamos "cookies" para información estadística. Si continúas navegando aceptas su uso.