¡Hola! En este post intento dar una visión global de todo lo relacionado con la velocidad de carga de una página web. Son consejos que van, desde lo más sencillo como instalar un plugin de caching, hasta contratar un hosting administrado.

He dividido el post en dos partes. Puedes ver la siguiente en este enlace, y, si lo prefieres, descargarte la versión completa en mi Guía para que tu página cargue como un cohete.

Bueno, entramos en materia. Todos nos hemos sentido frustrados ante una página que tarda en cargar. Incluso la hemos abandonado, no sin cierto enfado. Y es que cuando alguien entra en nuestra página desea algo. Y ese deseo debe ser satisfecho lo antes posible.

“¿Es mi página rápida?”

Si te estás preguntando si tu página es rápida… es que seguramente no lo sea. No te preocupes, a continuación te explico unas cuantas cosas para conseguir que tu página cargue rápido.

Pero a lo que vamos, ¿es mi página rápida? ¿qué se considera rápido?

Hoy en día, una página es rápida cuando carga en 2 segundos o menos. Si nuestra página carga en 8 segundos, tenemos una página lenta, anticuada y por mucho que nos pese, poco efectiva y rentable.


Y es que el 25% de los usuarios abandona la página tras 4 segundos. Eso se traduce en menos conversión, menos páginas vistas y una reducción de la satisfacción del usuario.

En el caso de tiendas online, los datos son aún más descorazonadores. El 70% de los carritos de la compra son abandonados y el 46% lo deja por la lentitud de la página.

Y si navegamos con el móvil, aún somos más impacientes: 2 segundos es lo que esperan que cargue una página el 47% de los usuarios.

Por si fuera poco, Google incluye la velocidad de carga también en su algoritmo. Así que si nuestra página es lenta, afectará negativamente a nuestro SEO.

La velocidad de WordPress

WordPress es una herramienta increíble para hacer páginas web, se adapta a todos los niveles de usuario y, tanto si somos expertos, como novatos en crear webs, existen infinidad de plantilllas y plugins que nos hacen la vida más fácil. Pero precisamente por esa flexibilidad, WordPress puede llegar a ser una herramienta lenta.

Afortunadamente hay unas cuantas cosas que podemos hacer para que nuestro WordPress cargue como un cohete. Te lo explico a continuación.


Elegir un buen hosting

Elegir un buen hosting es fundamental, pues afecta a todo lo que hagamos más adelante. Son los cimientos de nuestra web. Si estás empezando a crear tu web ¡no empieces por el diseño! Ten en cuenta contratar un buen hosting.

¿Pero en qué me baso para elegir un hosting?

Sencillamente, no mires sólo el precio. Lo barato sale caro. Un buen hosting es aquél que ofrece rapidez, seguridad y buena atención al cliente. El servicio de atención es un factor importante. Que tengamos disponibilidad de contacto las 24 horas los 365 días del año, y que el contacto pueda ser también telefónico son valores añadidos a tener en cuenta.

Si tenemos entre manos un proyecto complejo, una web que prevé  alto tráfico o exige mucho rendimiento al servidor, quizá sea tu opción un servidor administrado. Son generalmente algo más caros, pero ofrecen una serie de ventajas.


¿Qué es un servidor administrado?

Un servidor administrado es una máquina física, propiedad del proveedor del servicio, en la que podemos escoger la configuración (memoria, CPU). Ofrecen servicios como configuración, instalación de software y hardware, mantenimiento, soporte, parches, monitorización del estado…

¿Qué beneficios aporta un servidor administrado?

  • Seguridad: realizan análisis de vulnerabilidad, detección de intrusos y copias de seguridad.
  • Privacidad: Estos servicios se proporcionan a un único cliente. Es decir, es como si tuviéramos la exclusiva de la máquina que contratamos.
  • Velocidad: debido a que el hardware es más potente.
  • Mejor SEO: si el alojamiento está ubicado en el mismo país que la página, pues tiene la misma IP.

¿Cuándo contratar un servidor administrado?

Un servidor administrado no es una opción para el usuario medio, pero sí en lo siguientes casos:

  • Si tienes una web de alto tráfico
  • Si tienes una tienda online, ya que necesitan mayor rendimiento, velocidad y seguridad en los servidores.
  • En el caso de páginas dedicadas a inversiones o transacciones de dinero, ya que proporcionan privacidad.
  • Si vas a realizar proyectos web complejos
  • Si eres un desarrollador que gestiona varios proyectos de alto tráfico.

Elegir una buena plantilla

La plantilla que elijamos también define de entrada la velocidad de nuestra página. Muchas veces nos cegamos con la cantidad de opciones y características que aporta, pero a menudo no utilizaremos la mayoría de ellas y, además, ralentizarán la carga

Si queremos una página sencilla, optemos por un tema sencillo, como Twenty Fifteen, que es gratuito y muy ligero y al que le podremos agregar opciones más adelante. Mejor añadir, que tener que ir quitando cosas que no necesitamos después.

Para mi primer portfolio utilicé una plantilla muy sencilla, llamada Shapely a la que únicamente le añadí el Visual Composer para editar las páginas. Y era realmente rápida.

Igual en tu caso quieres tener una plantilla más potente. Pues bien, como ya hemos visto, debemos elegirla teniendo en cuenta la velocidad de carga. Colorlib.com publica una lista de 20 plantillas más rápidas. Nombra: Jevelin, Gillion, Divi, Soledad, entre otras.

Esta lista está elaborada siguiendo dos tests de velocidad.

  1. El que ofrece Google Page Speed Insights, que mide el rendimiento de la página en ordenador y dispositivos móviles. Ofrece una puntuación de 0 a 100. Si obtienes un 85 o más en la puntuación, tu página es buena. También ofrece un informe muy útil. En el apartado “Oportunidades” nos da consejos para mejorar el rendimiento.
  2. El que ofrece Pingdom Tools. Examina todas las partes de la web: tamaños de archivo, tiempos de carga, html, css, javascript y otros archivos linkados. También da una puntuación de 0 a 100. Cuanto más alta, mejor.

Puedes testear las demos de estas plantillas o de la que tengas en mente para hacerte una idea.


Aligerar la home

La home debería mostrar, con un diseño limpio y bien enfocado, nuestro contenido más relevante. Por eso deberíamos mantenerlo casi minimalista (lo sé, a veces es difícil conseguirlo).

¿Qué debemos hacer o no hacer? Pues no abusar de las imágenes, que sea un contenido enfocado, claro y sencillo. No queremos despistar al usuario, queremos que haga algo. Y también queremos que cargue rápido, que el usuario se lleve una buena impresión y no abandone frustrado nuestra página.  

En un primer vistazo debería mostrar:

  1. Tu propuesta de valor : qué es lo que te hace diferente a la competencia. El mío por ejemplo es que hago páginas web en WordPress para empresas tecnológicas. Me he especializado en ello y es como me diferencio de, por ejemplo, alguien que haga webs para emprendedores.
  2. Tu llamada a la acción:  call to action en inglés, o lo que es lo mismo, qué es lo que quieres conseguir de tus visitas. Por ejemplo, descargar un ebook gratuito, que se suscriban a tu lista, etc
  3. A continuación, mostraremos un resumen de los contenidos que cons más importantes. Nuestros productos estrella, los posts mejor valorados… En el caso de blogs, deberíamos mostrar menos posts por página.

Optimizar imágenes

Los archivos de imagen suponen el 62% de los contenidos web. Hacen nuestras páginas más atractivas, pero son archivos pesados, consumen mucho ancho de banda y retardan la carga de nuestras páginas.

Para solucionarlo puede ser buena idea optimizar las imágenes.

  1. Si dispones de herramientas como Photoshop u otro editor de imágenes, debes tener en cuenta que el formato final de imagen que utilices en tu web sea JPG o PNG con un ratio de 72 pixeles por pulgada o dpi.
  2. Puedes utilizar servicios web gratuitos como Smush o TinyJPG para subir tus imágenes y obtener la versión minimizada. Google también ofrece una herramienta, Lighthouse.
  3. Y si lo prefieres, Wp SmushIt, que es un plugin que optimiza las imágenes a medida que las subes a tu biblioteca de medios de WordPress.

Minimizar CSS y Javascript

Los plugins de caching y los de optimización de imagen también ofrecen opciones de minimización para archivos.

Hay opciones más “radicales” que son minimizar los archivos CSS y Javascript. Existen herramientas online para hacerlo, como CSSminifier y JavascriptMinifier. Digo radicales porque una vez minimizados, los archivos son casi imposibles de leer y de modificar.

Como diseñador y desarrollador web encuentro más útil minimizar los plugins Javascript que utilicemos, por ejemplo. Una vez finalizada la web, ponemos todos esos plugins en un archivo al que podemos llamar plugins.js y minimizarlo. Así conseguimos dos cosas: un archivo más ligero y que unifica en una única llamada al servidor todo lo relacionado con plugins Javascript.

Hay plugins de caching que también te dan la opción de minimizar y combinar los archivos CSS y Javascript, como WP Rocket. Es de pago, pero automatiza muchas de las cosas que hemos hablado y de las que hablaré también en el siguiente post.

Hasta aquí la primera entrega de este post, que he decidido dividir en dos. Puedes ver la continuación en este enlace.

Y si lo prefieres, te puedes descargar mi Guía para que tu página cargue como un cohete en versión pdf.

Si quieres que hable de algún tema concreto sobre diseño y desarrollo web o  si quieres ampliar la información, deja tu comentario.

¡Un saludo y gracias por leerme! ¡Sin ti esto no sería posible!