LOADING

10 consejos para mejorar la velocidad de carga de tu web

Consejos para mejorar la velocidad de carga

Como ya dije en otro post sobre SEO On Page, la velocidad de carga es importantísima para el posicionamiento web y la experiencia del usuario. Nos hemos vuelto muy impacientes y no aceptamos esperar más de 5 segundos a que se cargue el contenido de una página. Optimizar el rendimiento web ya no es una opción, sino una necesidad.

En realidad tiene mucho sentido. Al fin y al cabo, Google tiene que velar por la experiencia de sus usuarios. Y no solo cuando navegamos por las SERPs, sino también cuando hacemos clic en uno de los resultados. Por eso, es lógico que tenga en cuenta el rendimiento de una web para determinar su posición en los resultados de búsqueda.

¿Cómo medir la velocidad de carga?

Antes de entrar en los pormenores de cómo mejorar la velocidad de carga, es conveniente que averigues qué aspectos son los que hay que mejorar. Para realizar un test de carga puedes usar cualquiera de las herramientas que tienes a tu disposición. A continuación te detallo cuáles son las que yo uso normalmente y cómo funcionan.

Una muy buena herramienta que uso desde hace mucho tiempo es Gtmetrix, porque combina los resultados del PageSpeed y de YSlow. Me gusta utilizarla porque da muchos datos sobre el proceso de carga y algunos consejos para mejorar los tiempos. Verás que la interfaz es muy sencilla y los resultados son fáciles de interpretar. En la pestaña Waterfall tienes un gráfico que te muestra los tiempos objeto por objeto.

Otra excelente opción es Pingdom Website Speed Test. Además de recomendaciones, esta herramienta te da información sobre el número de peticiones, códigos de respuesta y tamaño de archivos.

Por último, te recomiendo PageSpeed Insights de Google, ya que es la que te va a dar la mejor pista de lo que tiene cuenta el buscador. Esta herramienta se basa en los resultados de Lighthouse y su puntuación va de 0 a 100; cuanto más alta, mejor rendimiento.

Además, este test es como un ranking de WPO, así que no te agobies si tu web no consigue una excelente puntuación. Para alcanzar más de un 95 tendrías que tener un diseño web muy optimizado e invertir mucho en el hosting. Un 90 es más que suficiente para la mayoría de sitios web.

¿Cómo reducir el tiempo de carga?

Ya vamos con la parte interesante. Hay muchos factores de los que podemos rascar algún milisegundo de velocidad. Algunos son fáciles de implementar directamente en tu sitio web o instalando algún plugin. Otros requieren de conocimientos más técnicos y lo más probable es que necesites un experto.

Pero antes que nada, una aclaración. En este post voy a centrarme en plugins para WordPress, aunque los consejos son igualmente válidos para cualquier sitio web. La diferencia es que tendrás que buscar plugins específicos para tu CMS.

Básicamente podemos distinguir 3 tipos de factores sobre los que puedes actuar para reducir el tiempo de carga de tu sitio web:

  • Imágenes. El número, tamaño y resolución de las imágenes que tengas en tu sitio web puede ralentizar mucho la carga. Esto es relativamente fácil de solucionar, ya que puedes mejorar la velocidad instalando un plugin en tu WordPress.
  • Hosting. La configuración del servidor, la distancia entre servidor y cliente, si tiene habilitada la compresión gzip son factores que influyen en el tiempo de carga. Para solucionar esto tendrás que contratar un buen hosting o un CDN.
  • Codificación. El código en el que está construida tu web también determina su rendimiento. Aunque a priori es el aspecto más técnico, tú mismo puedes optimizar muchas cosas con ayuda de algún plugin.

Comprimir las imágenes

La calidad y el tamaño de las imágenes es uno de los factores que más influyen en el tiempo de carga. Para que veas a lo que me refiero, te dejo una captura de Pingdom. Puedes observar que, a pesar de estar ya optimizadas, las imágenes suponen casi el 75% del peso de mi sitio web.

Imagina si no tuviera mis imágenes optimizadas: cada página podría llegar a tener un tamaño de más de 5 MB. No me sirve de nada tener una imagen de 5000 píxeles en alta resolución cuando en la página se cargará a unos 1000 píxeles. Elegir un tamaño acorde con la visualización de cada imagen es un primer paso para acelerar la velocidad de carga.

Otra forma de ganar velocidad es comprimir las imágenes. Además de las dimensiones, también conviene reducir la resolución para quitarle peso a las imágenes. La primera opción es instalar un plugin de optimización de imágenes que las comprime automáticamente cuando las subes. Para mí, los mejores plugins para optimizar imágenes son Smush.it e Imagify.

Yo personalmente prefiero la segunda opción: comprimir las imágenes antes de subirlas a la web. Lleva algo de tiempo pero me ahorro tener que instalar un plugin (y sobrecargar mi sitio). Para ello te recomiendo TinyPng. Tiene un buen ratio de compresión y te permite subir varias imágenes para comprimir a la vez.

Eliminar plugins innecesarios

En WordPress y otros CMS hay infinidad de plugins para multitud de tareas. Sin duda muchos de ellos son muy útiles, pero otros no lo son tanto. Los plugins son programas que tiene que ejecutar tu servidor. Cuantos más plugins tenga su sitio, más trabajo tendrá que hacer cuando se cargue la web.

Para resolver este problema tienes que decidir qué plugins necesitas realmente. Si no lo usas desde hace tiempo, es mejor eliminarlo de tu sitio. Siempre puedes volver a instalarlo cuando te haga falta. Presta especial atención a los plugins desactualizados. Si no reciben actualizaciones frecuentes, sería mejor buscar otro más reciente que haga las mismas funciones.

También es importante analizar el rendimiento de los plugins instalados. Para saber si un plugin es eficiente puedes usar el P3 (Plugin Performance Profiler) que te muestra el impacto de cada plugin en el tiempo de carga de tu sitio.

Gestiona la caché de forma adecuada

La caché guarda datos de tu sitio web para que el servidor no tenga que interpretar el código cada vez que recibe una petición del usuario. Además de la caché del servidor, el navegador tiene su propia caché para no tener que enviar peticiones al servidor cada vez que se accede al sitio web.

La correcta gestión de las cachés acelera mucho los tiempos de carga al almacenar temporalmente las páginas con contenido estático. Si quieres saber cómo mejorar la caché de tu web, te recomiendo echar un vistazo a este post de Álvaro Fontela sobre los mejores plugins de caché para WordPress.

Contratar un buen alojamiento web

Muchas veces escogemos un hosting basándonos en su precio únicamente. Esto es una de las peores decisiones que puedes tomar. Al principio creerás que la opción más barata es suficiente, pero una vez que tu web empiece a recibir más tráfico, el servidor dejará de responder y empeorará la experiencia de tus usuarios.

Contrata un hosting que cuente con los recursos que tu web vaya a necesitar. Aparte del precio, es importante que tengas en cuenta el ancho de banda de la conexión, así como la rapidez con la que el servidor responde ante picos de tráfico. Asegúrate de que te garantiza mínimo un 99% de uptime (tiempo que el servidor está activo).

También debes fijarte en su soporte técnico. Muchas empresas de hosting ofrecen servidores rápidos a un buen precio, pero se desentienden cuando hay problemas técnicos.

Retrasar la carga de imágenes o vídeos

Vuelvo otra vez al tema de las imágenes porque se trata de uno de los recursos más pesados de una web. Imagina una típica página de inicio, con un montón de imágenes y animaciones que atraigan la atención del visitante. Todas esas imágenes tienen que cargarse y suelen ser un factor que puede retrasar y mucho la carga de tu sitio.

Sin embargo, cuando llegas a una página, hay mucho contenido que todavía no puedes ver porque se encuentra en la parte inferior. Retrasar la carga de estos recursos al momento exacto en que aparecen en la pantalla del usuario es una forma sencilla y muy efectiva de reducir el tiempo de carga.

Esto lo puedes arreglar mediante algún plugin de carga perezosa (lazy load), lo que significa que sólo se cargan las imágenes visibles en la pantalla. La mayoría de plugins de optimización de imágenes incluyen la carga perezosa, pero puedes usar uno exclusivo como Lazy Load de WP Rocket.

Reducir el código de tu sitio web

Como te decía antes, las webs están hechas con código. Cuanto más elaborado sea tu sitio, más compleja es la codificación. Y a más código, más trabajo tiene que hacer el servidor para cargar la web. Una forma de evitarlo es eliminar el código irrelevante o innecesario.

Muchas veces, cuando elegimos un tema para nuestro sitio, queremos que sea muy bonito con muchas animaciones y efectos visuales impactantes. Pero algunas de las funcionalidades que vienen incluidas no las vamos a usar. Así hay muchas partes del código web que no son necesarias y podrían eliminarse para aligerar mucho su peso.

Si no quieres directamente borrar esa parte del código porque, aunque ahora no te haga falta esa funcionalidad, más adelante crees que vas a usarla, puedes simplemente comentar los bloques de código que no estés usando y minificarlo para que no se sirva cuando alguien visita tu sitio web.

Minificar archivos CSS y JavaScript

Los diseñadores web usamos una estructura en el código que nos resulta más fácil de entender, con espacios en blanco, saltos de línea y comentarios. Pero los ordenadores y servidores no interpretan esa parte, así que podemos simplificar mucho los archivos CSS y JS para reducir su tamaño. Esto se conoce como minificar (o minify) y puede mejorar la velocidad de carga.

Minificar el código a mano resulta una tarea muy difícil. Por suerte, existen plugins que lo hacen de forma automática. W3 Total Cache es un plugin muy completo que te permite gestionar varios aspectos, entre ellos, la minificación de archivos. Pero si quieres un plugin sencillo para no perderte con tanto ajuste, te recomiendo Autoptimize.

Sin embargo, has de tener en cuenta que la minificación es un proceso complicado que no siempre va a dar resultado. El problema es que, cuando existen dependencias entre los archivos, la minificación suele fallar. Esto se da en themes complejos o en sitios web con muchos plugins instalados (cada plugin puede cargar varios archivos CSS o JS).

Habilitar la carga asíncrona

Al visitar una web, el navegador tiene que descargar una importante cantidad de archivos: HTML, CSS, JS, imágenes… Cuando estos archivos se van descargando de uno en uno (lo que se conoce como carga síncrona), la velocidad de carga se vuelve muy lenta. Una forma gráfica de verlo es mediante el gráfico de cascada o waterfall (por ejemplo, en Gtmetrix).

Carga asíncrona

Algunos archivos, sobretodo CSS y JS, permiten descargarse simultáneamente (carga asíncrona) y ahorrar bastante tiempo. La carga asíncrona es una técnica WPO bastante sencilla y efectiva, aunque a veces las dependencias entre estos archivos pueden impedirla. Para habilitar la carga asíncrona puedes utilizar plugins como Async Javascript.

Evitar redirecciones excesivas

Las redirecciones sirven para conducir a tus usuarios de una URL a otra. Un caso muy típico son las redirecciones 301, que se hacen cuando se cambia la URL de una página. Este tipo de redirecciones son necesarias para evitar penalizaciones a nivel de SEO.

El problema es que cuando se produce una redirección, el usuario tiene que esperar a que la página se cargue dos veces. Por eso no es conveniente usar demasiados redireccionamientos, ya que estás duplicando el tiempo de carga de tu web. Algunos plugins pueden fallar y causar un bucle de redirecciones, bloqueando incluso el acceso a tu sitio web. Revisa la configuración para evitar problemas.

Utilizar una red de entrega de contenido (CDN)

Cuando tu sitio web tiene visitas de todo el mundo, la velocidad de carga se vuelve un problema serio. Mientras los usuarios más cercanos a tu servidor recibirán el contenido enseguida, los más alejados tendrán que esperar más. Esto se soluciona fácilmente con una red de entrega de contenido o CDN, por sus siglas en inglés.

Un CDN (Content Delivery Network) es una red de servidores distribuidos por diferentes ubicaciones geográficas para servir el contenido de tu web a los visitantes de distintas partes del mundo. Dependiendo de la ubicación de los usuarios, el contenido se envía desde el nodo más cercano y no desde tu servidor principal, por lo que se reduce mucho el tiempo de espera.

Resumiendo…

Es importante que tengas en cuenta que en cuestión de rendimiento web la perfección es inalcanzable, así que no te obsesiones con ello. Mi recomendación es que realices varios tests y compares los resultados con varias herramientas.

Ahora ya conoces los factores clave que influyen en la velocidad de carga de tu sitio web. Así que no tienes excusa para ponerte manos a la obra y mejorarlo. Y como siempre, si tienes cualquier duda o sugerencia, déjamela en los comentarios. 🙂

Social Shares

Related Articles

0 0 voto
Valora este post
Suscribirse
Notify of
guest
0 Comentarios
Inline Feedbacks
Ver todos los comentarios

Este sitio utiliza cookies para mejorar la experiencia del usuario. Si continuas utilizando este sitio, aceptas el uso de cookies. más información

Los ajustes de cookies de esta web están configurados para «permitir cookies» y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en «Aceptar» estarás dando tu consentimiento a esto.

Cerrar