Los mejores métodos para ganar velocidad en tu página Web

En este artículo detallaremos técnicas y mejoras para conseguir una mayor velocidad en la carga de nuestra página web, ya que este punto es fundamental para tener un sitio de éxito.

Es una obviedad decir que a nadie le gusta las webs lentas por eso haremos todo lo posible para que la web se cargue a la mayor velocidad posible.

Este aspecto es muy importante por dos sencillas razones en concreto:

  • El usuario está más contento y tiene más posibilidades que vuelva a entrar a nuestro sitio web.
  • A Google le gustan las páginas rápidas.

Después de esta breve introducción vamos a pasar a la práctica, antes que nada decir que el proceso en algunas partes puede ser diferente dependiendo si estamos trabajando sobre un CMS como WordPress o por el contrario si no usamos ninguna plataforma detrás de nuestro sitio web.

Antes que nada pienso que para tener una página web eficiente se debe hacer correctamente las cosas desde la planificación, por eso muchas veces el paso de desarrollar una plantilla o elegir una buena plantilla desde un principio puede después ahorrarnos un buen tiempo.

Ir al manual de consejos para elegir una plantilla

A continuación os dejo dos enlaces a dos de las mejores páginas que examinan las características de tu página web, esto lo deberemos hacer para tener un primer estudio de los resultados obtenidos y ver los puntos fuertes y débiles nuestro sitio.

 El próximo enlace mide realmente bien la velocidad y carga de tu página web.

Una vez vistas las estadísticas de nuestro sitio procederé a explicar algunos pasos, algunos muy recomendados y otros opcionales e iremos viendo como poco a poco va mejorando la velocidad.

Pasos recomendados para ganar velocidad en tu página web:

1) Activar gzip

Su función es enviar los archivos CSS, Javascript, HTML, etc. de forma comprimida del servidor a tu navegador, así cuando se cargue tu página web se hará de forma más rápida.

Esta función se debe activar sobre nuestro archivo .htaccess, se accede a este archivo por conexión FTP a nuestro servidor y estará alojado en la carpeta raíz de la instalación de nuestra web (si no está existe, crearlo).

Una vez dentro de este archivo se debe copiar el siguiente código dentro de él, este código lo que hace es permitir y avisar a nuestro hosting que queremos recibir las páginas comprimidas (algunos hostings no ofrecen esta funcionalidad, pero por suerte la mayoría si).

# BEGIN GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
# END GZIP

«En el caso que usemos WordPress y tengamos puesto el plugin de WordPress W3 Total Cache (plugin totalmente recomendado que nos ofrece esta funcionalidad y muchas otras que veremos poco a poco) marcamos la pestaña «Browser Cache» y activamos la siguiente opción:

opcion gzip w3x total cache

2) Minificar y unificar archivos


<

A) Una forma de ganar velocidad en la carga es minificar los archivos JavaScript y CSS, y cuando digo minificar me refiero a eliminar tabulaciones, espacios innecesarios, comentarios en nuestro código, etc.

En resumen reducir el tamaño del código lo mejor posible, no os preocupéis ya hay herramientas que hacen este trabajo.
Si usamos el plugin WordPress W3 Total Cache sencillamente buscamos en la pestaña «minify» y activamos las opciones de la siguiente imagen:

Opciones minificar archivos

B)

Hay que tener en cuenta que cuantos más plugins, widgets, funcionalidades como slides se pongan en la web, mas lenta irá porque eso implica que habrán más archivos CSS, PHP, Javascript y HTML, lo cual como he dicho en el punto anterior se podría estructurar de una manera más correcta y minificarlos o unificarlos pero en muchos casos los plugins se actualizan o se eliminan, se puede quitar una aplicación para poner otra y al final acaba siendo peor el remedio que la enfermedad, por lo tanto mi consejo es que las cosas externas no las unifiquemos si vemos que se pueden cambiar a lo largo del tiempo y que se incluya en la página web una cantidad de funcionalidades externas moderada sin abusar.

 4) Optimizar el tamaño de las imágenes

Algunas veces subimos imágenes a nuestra página web sin fijarnos realmente que tamaño tienen y cuando nos damos cuenta la velocidad de nuestro sitio a disminuido considerablemente.

Yo principalmente señalaría dos aspectos en este asunto muy relevantes.

A) Intentar subir las imágenes en formato JPG e intentar evitar el formato PNG cuando sea posible, ya que las imágenes JPG pesan menos que las PNG.

b) Antes de subir una imagen, hay que optimizarla para reducirle su tamaño, esto se consigue entre otras cosas bajar la calidad de la imagen.

Un programa muy simple y funcional es RIOT, este programa es un editor de imagen donde su principal característica para nuestro propósito es variar la calidad de la imagen para conseguir así una reducción de su tamaño.

panel central riot

Un plugin muy interesante para WordPress que optimiza las imágenes que se alojan directamente en tu servidor se llama Smush It, la ventaja de este plugin es que si tienes alojadas 500 imágenes en tu servidor puedes usar una función de este plugin para que se optimicen todas automáticamente y así evitar ir una a una.

El plugin también cada vez que subes una imagen con WordPress automáticamente la optimiza.

El problema es que estamos trabajando con un plugin externo, si la empresa que lo ha desarrollado en este caso Yahoo tiene problemas este servicio puede funcional mal.

Yo llevo trabajando un tiempo con este plugin y la verdad es que realiza una labor muy buena, ahora bien también lo he visto alguna vez dejar de funcionar por problemas internos de Yahoo, si algo no funciona bien a la hora de subir imágenes en tu página web antes que nada desconecta el plugin por si es eso.

  • Puedes descargarlo aquí

5) Parámetros Expires y Cache-Control

Esto se define todo sobre el archivo .htaccess.

Lo que se quiere conseguir con esto es reducir las peticiones HTTP, en otra palabras cuando un usuario entra por primera vez en una página web se baja todos los archivos de dicha página pero si tenemos bien configurados estos parámetros cuando se meta por segunda vez muchos elementos se habrán guardado en la cache del navegador lo que quiere decir que para que cargue toda la página web de nuevo tendrá por lo tanto que bajarse menos elementos.

El problema que puede traer esto es que si tu como administrador realizas ciertos cambios sobre la página web y un usuario exterior accede por segunda vez por ejemplo a tu página web, quizás como tenga ciertos elementos en su cache del navegador no verá el cambio automáticamente.

  • WP Super Cache, puedes descargarlo aquí
  • W3 Total Cache, puedes descargarlo aquí
  • Iván Martínez

    Ingeniero Informático apasionado por el mundo del desarrollo WEB. Me gusta caminar por este mundo lleno de tecnologías y día a día aprender cosas nuevas como el doctor Frankenstein ¡dadme cosas para experimentar!

    Deja una respuesta

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