Como aumentar la velocidad de mi página web

Os presentamos 4 herramientas y 11 consejos para aumentar la velocidad de tu página web. Google y otros motores de búsqueda dan cada vez mas importancia a la velocidad de carga de las páginas web. Es por ello, que para tener un buen posicionamiento de tu web, un factor que vas a tener que tener muy en cuenta va a ser la velocidad de carga de tu web. Para ello, hay dos factores muy importantes, uno que va a depender de tu servidor y otro de la manera en como hayas programado tu web.

Velocidad web aumentar

El cuanto al primero, en cuanto al servidor, te recomiendo que contrates un servidor bueno. Si aún no tienes contratado ningún servidor, te recomiendo que busques por foros opiniones del servidor que vas a contratar. No todos los servidores son los mismo y te aseguro que muchos servidores que parecen bueno, pueden llegar a darte un buen dolor de cabeza.

Si el servidor ya lo tienes contratado, si la web ya te funciona tan rápida como tu deseas, entonces ya está bien. Pero si web que cuando entras al servidor no te funciona tan rápido como tu querrías, te recomiendo que le hagas un par de análisis para ver si es el servidor el que no funciona correctamente.

El segundo factor es la programación. Aquí te sugerimos algunos consejos que pueden venirte muy bien para aumentar de velocidad.

Otros artículos que te pueden interesar:

Herramientas para comprobar la velocidad de tu web

Load impact

Load-impact

Load impact es una aplicación online que sirve para poner a prueba tu servidor y tu web. Lo que hace es entrar a tu web desde distintos servidores y hacer peticiones de hasta 50 usuarios. De manera que te hace una simulación como si 50 usuarios estuvieran recorriendo tu web. El programa te va a responder con un gráfico indicando la velocidad de carga de tu web. Si ves que a medida que van subiendo la cantidad de usuarios, la velocidad de disminuye demasiado, es muy probable que tu servidor sea lento. Esta es una herramienta totalmente gratuita.

Gtmetrix

gtmetrix

Gtmetrix es una herramienta que sirve para analizar tu web. Aquí vas a encontrar varios parámetros, la mayoría de ellos dan hincapié a la manera en como has programado tu web. Pero hay uno que hace algo de hincapié a la velocidad de carga de tu servidor. Si vas a gtmetrix y pones tu web, una vez esté analizada, debes de ir al apartado “Waterfall”. Aquí verás un montón de lineas horizontales. La primera suele responder al servidor que tienes. Si tienes un buen servidor, la velocidad de carga debería de estar por debajo de los 800 o 900ms. Pero este parámetro, no es del todo cierto que sea únicamente responsable tu servidor, pueden influir otros parámetros como el caché de tu web, o la programación que le hayas hecho. Pero está muy influenciado por el servidor.

PageSpeed Insights

page-speed-insight

Esta es una herramienta de google rápida y muy sencilla de utilizar. De una sencillez extraordinaria y de una gran utilidad y muy fácil de manejar. El sistema te indica las opciones que has de mejorar tanto para dispositivos móviles como para ordenadores. Se basa básicamente en 5 puntos. Eliminar Javascript que bloquea la visualización, utilización caché del navegador, minificar html javascript y CSS, y habilitar compresión. También puntúa la visualización de tu web en los diferentes dispositivos.

Pagespeed Score y YSlow Score superiores al 80%

Para que google no te penalice por tener una web lenta, tendrás que tener un “Pagespeed Score” superior o igual al 80% que aparecen en Gtmetrix y en Pagespeed insights . A continuación te sugerimos algunos consejos que te pueden ayudar.

Como optimizar la velocidad de tu página web

1. Gestor de contenidos

Si tu página web es la típica que usa un sistema de gestor de contenidos tipo wordpress, joomla, drupal, magento, etc., es muy probable que tu web vaya mas lenta de lo normal. Los gestores de contenidos si tienen una debilidad esa es la velocidad de carga. Son herramientas que utilizan muchos recursos porque están diseñadas con muchas opciones, no solo las que vas a utilizar tu, sino con las que vana a utilizar muchos usuarios. A pesar de eso, la velocidad de carga la puedes aumentar muchísimo con la compresión de imágenes, minificando códigos CSS y Javascript, y las que te pongo a continuación.

2. Optimizar las imágenes

Si tu web está cargada de imágenes y a la vez te va lenta, vas a tener que comprimirlas. Usa la herramienta GTMETRIX que te he indicado antes. En el apartado PAGESPEED hay varias apartados que debes de comprar y que debes procurar que estén al 100%. El primero es el “Combine images using CSS sprites”. Este apartado te indica que puedes combinar los códigos CSS con las imágenes. Si lo haces tu web irá mas deprisa. Luego verás el apartado “Optimize images”. Este apartado te indica si las imágenes que tu tienes están comprimidas o no. En caso de que no lo estén esta misma web te las comprime. Habrás de clicar a “Optimize images” y verás las imágenes que no están comprimidas y te devuelve un archivo con la imagen comprimida. Habrás de cogerla y ponerla en tu servidor. Te lo enseño en la imagen siguiente.

Optimizar-imagenes

Si lo que tienes es la típica página o blog donde los usuarios son los que suben las fotos a tu web, si usas wordpress podrás usar algún plugin tipo WP Smush.it. Este plugin te deja comprimir las imágenes a la vez que el usuario las está cargando.

3. Caché del navegador del usuario

El código que te pongo a continuación especificará que las imágenes de la página que visita el usuario sean descargadas en su ordenador. La próxima vez que el usuario vuelva a acceder a tu web, serán los archivos del propio usuario las que se usen, y tu servidor no tendrá que volverlas a descargar. El número 3600 indica la cantidad de segundos que el usuario tendrá las imágenes en el caché de su navegador. Con este código podrás observar como el “Pagespeed Score” como el “Leverage browser caching” aumentan en el GTmetrix. Esta opción está muy valorada por google y los motores de búsqueda. Para activar este código solo tienes que copiar el siguiente código en el archivo Apache .htaccess

<ifmodule mod_expires.c>
  ExpiresActive On
  ExpiresDefault A3600
  <filesmatch ".(jpg|JPG|gif|GIF|png|css|ico|js)$">
  ExpiresDefault "access plus 1 week"
  </filesmatch>
  </ifmodule>

4. Anula las Etag

El siguiente código anula las Etag, evitando la comprobación por parte de los navegadores. Deberás copiar el siguiente código en tu archivo .htaccess.  de tu servidor.

<ifModule mod_headers.c>
Header unset ETag
</ifModule>
FileETag None

5. Aprovecha las conexiones abiertas

Para aprovechar las conexiones que tiene abierta tu ordenador, copia el siguiente código en el archivo .htaccess de tu web.

<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>

6. Habilita la compresión gzip de los códigos CSS y Javascript

El siguiente código lo que hace es habilitar la compresión gzip para los códigos CSS y JavaScript, de manera que el usuario pueda recibir dichos códigos comprimidos en Gzip. Copia el siguiente código en el archivo .htaccess.

<IfModule mod_headers.c>
<FilesMatch "\.(js|css|xml|gz)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>

7. Utiliza un caché

El caché es un sistema de almacenamiento de tu web en formato html. Una web está creada con varios códigos, entre ellos está html, php, etc. Cuando un usuario se introduce en tu web, muchas veces el servidor donde está alojada tu web tiene que crear la página en html con el código php. Una vez el código php a transformado el código en una página html, el servidor la envía al usuario y este la puede ver en su ordenador. Si tu web es muy lenta, lo que podemos hacer es crear un sistema de caché. Este sistema de caché lo que hará será crear las páginas html mucho antes de que el usuario acceda a tu web y las dejará almacenadas en tu servidor de manera que cuando un usuario acceda, el servidor no tendrá que crear el archivo html, porque ya está creado. Únicamente tendrá que enviarlo. Estos caches o bien lo puedes hacer tu manualmente, creas la página html y la dejas almacenada en tu servidor o bien te creas un programa específico que te lo genere. Si usas wordpress, habrás de buscarte un plugin tipo “Wp super cache” o uno mas complicado tipo “W3 total cache”.

wp-super-cache

8. Minifica los archivos CSS y Javascript

El código CSS y Javascript es otro punto que vas a tener en cuenta si lo que quieres es aumentar la velocidad de carga de tu web. En la herramienta GTMETRIX, podrás ir a los apartados “Minify CSS” y “Minify JavaScript” y comprobar el porcentaje que te da es elevado. En caso de que sea bajo tendrás que minificarlo. La minificación de estos programas consiste en sacar todo aquello que ocupa memoria y que no sirve de nada como espacios en blanco, observaciones, etc. Si usas wordpress, podrás ponerte algún pluguin tipo “WP super minify”. Pero si quieres puedes hacerlo tu mismo con el GTmetrix. Esta herramienta te proporciona los archivos CSS y JavaScript minificados que podrás copiar y pegarlos en los archivos que están en tu servidor. Para ello ves a la linea “Minify CSS” y “Minify JavaScript” y clica encima. Se te abrirá un apartado donde aparecerá la frase “optimized version” en donde podrás ver el código minificado.

9. Utiliza un CDN

Un CDN o red de entrega de contenidos es una red paralela que contiene una copia de algunos de tus datos de tu página web, preferentemente de imágenes y códigos javascript entre otros para incrementar el ancho de banda. De esta manera si varios clientes acceden a tu web al mismo tiempo, parte de la información la suministrará el CDN. La mayoría de hostings disponen de este servicio gratuito siempre y cuando te limites a algunos requerimientos. Abre el panel de control de tu hosting y averigua como activarlo.

10. Simplicidad en el sistema de programación

Después de haber hecho los ajustes que te he indicado antes, si sabes de programación podrás apurar mas a la velocidad de carga de tu web. Primero de todo habrás de buscar donde se ralentiza, y luego habrás de proceder a su optimización. Usa la herramienta GTmetrix y ves al apartado Waterfall. Aquí verás la velocidad de carga de cada uno de los archivos que usa tu web. Los consejos a seguir son los siguientes:

1º. Intentar optimizar aquellos archivos que tienen un tiempo mas elevado.

2º. Modificar el orden de los archivos. Si un archivo tipo Javascript ves que tarda mucho en cargarse pero que no es realmente necesario usarlo al principio de todo, tendrás que modificar el código para que dicho archivo javaScript sea ejecutado al final y no al principio.

3º. Haz que los archivos se carguen progresivamente, no todos simultáneamente. Si por ejemplo tu web tiene 20 fotos, una abajo de la otra, no es necesario que se puedan ver todas a la vez, puedes hacer que primero se carguen únicamente las de arriba, que son las que el usuario va a ver primero de todo. Este tipo de cargado progresivo se puede aplicar a todos los archivos, CSS, JavaScript, imágenes, etc.

11. Elimina todo lo que no utilices

Si tu web tiene plugins que ya no utilizas, archivos antiguos que un día utilizaste pero que no los vas a usar mas, simplemente elimínalo. Evitarás sobrecargar tu web.

12. Cambia los plugins por código php

Los plugins de wordpress son muy fáciles de utilizar, pero pueden llegara ralentizar tu web. Si sabes algo de programación, puedes probar de ir eliminando los plugins que has instalado en tu wordpress e irlos sustituyendo por código hecho por ti. Puede que tardes un poco en generar el código, pero cuando lo consigas habrás hecho un código mas personalizado para tu web con los criterios mas específicos que tu desees y verás como la velocidad de tu web aumentará.

Con estos pequeños consejos verás como tu web tiene una velocidad de carga mucho mas elevada. Esto significará que tanto los motores de búsqueda como los propios usuarios estarán mas satisfechos.

Otros artículos que te pueden interesar:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *