Última actualización 7 octubre 2018

En esta ocasión te voy a hablar de las 4 claves que tienes que conocer para conseguir una web ultra rápida.

Te puedo decir que son determinantes y que siempre las tengo en mente a la hora de acelerar los WordPress de las personas con las que colaboro y/o clientes.

Confío, si no lo haces ya, que tu también las tengas en cuenta de ahora en adelante tras leer este artículo.

Pero antes de seguir avanzando te explico a lo que me refiero con una una web ultra rápida.

Con una web ultra rápida me refiero a una web que con facilidad su tiempo de carga está alrededor del segundo o en cifras inferiores.

Este valor lo obtengo empleando Pingdom Tools seleccionando la localización más cercana al proveedor de hosting donde esté alojada la web.

Si por ejemplo estoy probando una web que tengo alojada en FastComet en el CPD de Amsterdam, pues empleo la localización de Londres o de Frankfurt.

El dominio para pruebas www.controlatuwp.com lo tengo alojado en FastComet.

Resultados Pingdom Tools web ultra rápida

El sitio de Sergio, www.malagaware.com también lo tiene alojado en FastComet -al menos en la fecha que publico este este articulo y del test velocidad inferior-.

Resultados Pingdom Tools web ultra rápida

Nota. Recientemente han cambiado la herramienta Pingdom Tools y han añadido nuevas localizaciones.

Dicho todo esto, te adelanto que soy plenamente consciente de que existen numerosos recursos, herramientas, artículos e información por Internet para aprender por tu cuenta a conseguir una web ultra rápida.

Así que, ¿qué te puedo aportar yo diferente a lo que hay ahí fuera?

Sencillamente que te lo voy a contar a mi manera y en base a mi experiencia tras conseguir una y otra vez resultados muy positivos con diferentes proveedores, servicios online y un conjunto de herramientas bien meditado.

También he analizado numerosos sitios creados con WordPress, me he leído algún que otro libro a lo que le sumo constantes experiencias con muchas herramientas.

Así que nada, ¡vamos allá!

Las 4 claves para conseguir una web ultra rápida son las siguientes

  1. El hosting que empleas, es decir, aquel que has decidido tú para tu sitio. Para bien o para mal es una decisión tuya.
  2. El cariño que le dedicas a tus imágenes, es decir, lo bien o mal que las comprimes o lo bien o mal que elijes las herramientas que empleas para tal fin. El no uso de herramientas también habla de cariño que le dedicas a este punto y de tu conocimiento del terreno. En este artículo encontrarás soluciones.
  3. La cache de contenidos estáticos. Los contenidos estáticos de tu sitio web son aquellos que no cambian con frecuencia. Dentro de este tipo de archivos se encuentran los archivos CSS, los archivos Javascript y las imágenes. Como controles el comportamiento de la cache suma en tu propósito de conseguir una web ultra rápida. Aquí entra en juego el plugin de cache que emplees para tu WordPress y la configuración que le apliques.
  4. El empleo de un CDN, es decir, el empleo de una red de distribución de contenidos. Este punto es el menos relevante y hasta puedes omitir su uso. El empleo de un CDN aumenta la complejidad de tu instalación y puede darte algún que otro dolor de cabeza.

Y ya está, no tiene más.

A partir de aquí podemos hilar fino en cada uno de los puntos analizando cada caso particularmente, pero las claves son esas.

Nadie quiere una web lenta por lo que si tu quieres te ayudo personalmente a conseguir una web ultra rápida en un tiempo razonable y a un precio asequible.

Te sigo contando.

El hosting

El hosting es el factor clave más determinante de los 4 que te he mencionado. Tiene un impacto directo a la hora de conseguir una web ultra rápida.

La decisión de emplear un hosting un otro puede provocar sencillamente que tu sitio tarde más o menos tiempo en cargar. No tiene más.

El hosting. Primera clave para conseguir una web ultra rápida

Y si no estás abierto a cambiar de hosting puede ser que no consigas mejores resultados por más que toques aquí y allá en la configuración de tu WordPress, por más plugins de cache que instales, por más que te enfrasques en reducir el tamaño de tus imágenes o en emplear el mejor de los CDN.

Es así.

Otra cosa que tienes que saber

Como norma general intenta alojar tu web en el lugar más cercano al lugar donde estén la mayoría de tus visitas, tus posibles clientes o clientes.

Con esto te quiero decir que intentes que tu proveedor de hosting tenga físicamente los servidores en la región donde estén tus clientes o cuanto más próxima mejor.

No siempre lo podrás conseguir.

¿Por qué has de tratar de contratar un servicio de hosting próximo al lugar físico donde se encuentran la mayoría de tus clientes?

Por que las distancias importan cuando hablamos de tiempos de carga. Es un tema meramente físico.

A veces, el detalle de la distancia lo puedes tener menos en cuanta si tienes otras ventajas significativas que te benefician. En tal caso, podrías justificar el tener el hosting un poquito más lejos.

Por ejemplo, un precio mucho más atractivo en un proveedor de hosting con una oferta de valor equivalente.

¿En qué hosting tomaría la decisión de alojar mi web?

En aquel que te ofrezca como poco esto que te digo.

  1. Que sus planes de hosting estén configurados con servidores que monten discos sólidos o SSD.
  2. Que en sus planes de hosting tengas la posibilidad de configurar al gusto las distintas versiones de php, entre otras, la versión 7.0 y sucesivas.
  3. Que en sus planes de hosting tengas la posibilidad de configurar los certificados de Let´s encrypt para habilitar la capa SSL.
  4. Tener la posibilidad de habilitar el protocolo http2.
  5. Que la configuración que se realice en los servidores no impida obtener un valor A en los siguientes 3 indicadores de rendimiento de webpagetest.org
    1. First Byte Time
    2. Keep-alive Enabled
    3. Compress transfer

Indicadores webpagetest First Byte Time y Keep-alive Enabled con valor F

Respecto al punto 5 anterior, a veces sucede que el proveedor te confirma tus sospechas y te facilita argumentos para tomar una decisión.

No es posible configurar http2 ni keep Alive en la cuenta de hosting que tienes contratada

Si un proveedor te confirma que no se puede habilitar http2 y tampoco se puede activar la opción Keep-Alive pues tienes suficientes argumentos para cambiarte o suscribirte a un plan que si lo soporte.

Y en conjunto, estas serían las serían claves para inclinar mi decisión a favor de uno u otro proveedor aparte del precio claro,  que es importante en la ecuación.

Ten en cuenta que esto te lo planteo desde el punto de vista de conseguir una web ultra rápida, por tanto, no entro a valorar aspectos como el soporte, la atención al cliente, etc.

¿Qué proveedores de hosting conoces que ofrezcan lo que propones?

En estos momentos y hasta que no encuentre/pruebe algo mejor te dejo esta selección de tres proveedores de hosting compartido:

  • FastComet. Tiene el mejor equilibrio precio/prestaciones de todos los proveedores que he probado. El “inconveniente” es que la atención es en inglés.
  • SiteGround. tiene una oferta global muy completa y goza de una excelente reputación. El “inconveniente” es que es muy caro a partir de segundo año y más aún tras la subida de precios en Junio de 2018. El primer año tiene un descuento muy atractivo del 60% sobre el precio regular que pagas a partir del segundo año.
    • Puedes empezar en SiteGround y mudarte a FastComet antes de finalizar el año. Se tarda muy poco en ello y apenas es trastorno.
  • Hostinger. De Hostinger puedo destacarte que es tremendamente económico, de hecho está posicionado en las búsquedas de Google por hosting WordPress barato. Mis pruebas de rendimiento han sido satisfactorias pero es cierto que este proveedor no goza de buena reputación.
    • Puedes empezar en este proveedor con una inversión mínima y si por el camino ves que la cosa se tuerce, te cambias FastComet, SiteGround u otro. No hay más.

Si quieres algo más potente te puedo recomendar UpCloud, Clouding.io, Vultr o Contabo.com pero ya no estamos hablando de hosting compartido.

¿Cómo puedo saber si mi actual hosting está “matando” mis tiempos de carga?

Conociendo el valor de tres indicadores de webpagetest:

Detalle de los indicadores de webpagetest: First Byte Time, Keep-alive Enabled, Compress Transfer.

  • First Byte Time. Si tienes un valor distinto de A o B tu hosting puede ser el problema.
  • Keep-alive Enable. Si obtienes un valor distinto de A tienes un problema con tu hosting.
  • Compress transfer. Lo mismo, si obtienes un valor distinto de A tienes un problema con tu hosting.

Tomando diferentes medidas a lo largo del día, el conjunto de estos tres indicadores te da pistas suficientes como para determinar si tu hosting está afectando a los tiempos de carga de tu sitio web.

La compresión de las imágenes

El cariño que les des a tus imágenes en tu sitio web importa. Y con dar cariño me refiero a que tienes que comprimirlas todas.

La compresión de imágenes. Segundo factor relevante para conseguir una web ultra ràpida

“El objetivo de la compresión de imagen es reducir los datos redundantes e irrelevantes de la imagen con la menor pérdida posible​ para permitir su almacenamiento o transmisión de forma eficiente.” Wikipedia. Yo no lo hubiese explicado mejor.

Y en esto consiste la segunda clave para conseguir una web ultra rápida, la compresión de las imágenes de tu sitio.

La segunda en relevancia.

De nada te sirve tener el mejor hosting si como norma adjuntas en tu último artículo una imagen que has tomado directamente desde tu móvil de última generación con las opciones de calidad a tope.

Subir imágenes a tu sitio que no están tuneadas para la web impacta directamente en el tiempo de carga y por tanto en conseguir una web ultra rápida.

Tienes que aprender a comprimir las imágenes para que pesen lo mínimo posible sin perder calidad (el peso de las imágenes se mide en kilobytes y megabytes) y además han de tener la resolución adecuada allá donde quieras mostrarlas (con resolución me refiero a las dimensiones de ancho x alto).

Te lo pongo fácil, recuerda que:

  • Cuanto más peso tengan tus imágenes mayor es el tiempo de carga.
  • Cuanto más grande sea la resolución mayor es el tiempo de carga.

¿Cómo tunear las imágenes?

Para personalizar, tunear, optimizar o comprimir las imágenes para la web has de apoyarte en herramientas.

Nota. En el contexto que nos movemos cualquiera de los verbos que empleo es apropiado.

Entre ellas te destaco las que puedes instalar en tu ordenador y las que puedes instalar en tu WordPress.

Herramientas para tu ordenador

Te enumero tres:

  • Gimp. Es un completo editor de imágenes para tu equipo. Tiene una curva de aprendizaje importante y es gratuito. Te la recomiendo pero no tanto como las tres que te menciono a continuación.
  • Picpick. Es una herramienta de diseño todo en uno francamente útil. Yo la empleo a diario desde hace más de 6 años.
  • RIOT. Es una herramienta diseñada para comprimir imágenes. Es muy potente y permite compresión por lotes. Muy útil.
  • Microsoft Picture Image Manager. Es una herramienta descatalogada de Microsoft pero que la considero francamente útil para una edición básica de imágenes. Microsoft no la potencia pero te permite descargar y emplear gratuitamente. Pruébala te gustará. Yo es otra herramienta que uso a diario.
El combo compuesto por Picpick, RIOT y Microsoft Picture Image Manager en tu ordenador es más suficiente para la mayoría de los casos.

Herramientas para WordPress

Te enumero cinco herramientas para que conozcas diferentes opciones pero solo es necesario emplear una de ellas en tu WordPress.

  • Optimizador.io. Herramientas desarrollada por Webempresa que te facilita la labor de comprimir tus imágenes en el momento que las subes al repositorio de medios de tu WordPress. Para emplearla has de instalarte un plugin en tu WordPress y sincronizarlo con el servicio de Webempresa mediante una API que puedes conseguir en su web.
  • ShortPixel. Herramienta pensada para comprimir las imágenes en el momento que las subes al repositorio de medios de tu WordPress. Al estilo de optimizador.io pero con un mayor conjunto de posibilidades. A raíz de una oferta en AppSumo trabajo con esta herramienta a diario. Te hablaré de ella próximamente.
  • ewww image optimizer. Otra herramienta pensada para comprimir imágenes. Muy potente. Igualmente está pensada para comprimir las imagenes en el momento de subirlas al repositorio de medios de WordPress. Dispones de un plugin.
  • TinyPNG. Servicio online para comprimir imágenes. Muy potente. Dispone de plugin para WordPress.
  • Swift Performance ProLa última herramienta que conozco que en su versión comercial dispone de un motor de compresión de imágenes.  Aún estoy probándola. De momento me quedo con shortpixel.

Todas estas herramientas las empleo en distintos proyectos en función de la mezcla de herramientas y proveedores.

Ten en cuenta que en ocasiones se da el caso de que se producen incompatibilidades con los plugins por eso es conveniente conocer varias opciones que combinadas entre si no te den problemas.

¿Cómo puedo saber si mis imágenes están bien comprimidas?

Mediante el indicador “Compress images” de webpagetest.org tienes la certeza de que estás tuneando correctamente tus imágenes.

Si este indicador te devuelve un valor “A” entonces vas por buen camino.

La cache de contenidos estáticos

La siguiente clave para conseguir una web ultra rápida es el uso de la cache de contenidos.

Es la tercera clave y la tercera en relevancia y no debes prescindir de ella.

Esto sencillamente se traduce en que tienes que emplear un plugin de cache para tu WordPress. Estos plugins serán tus aliados en este cometido.

Te hablo en plural porque existen muchos pero tu solo tienes que emplear uno.

¿Qué es la caché?

Te invito a que consultes directamente en la wikipedia lo que es la caché.

Aquí te dejo un fragmento: “En informática, una caché es un componente de hardware o software que almacena datos para que las solicitudes futuras de esos datos se puedan atender con mayor rapidez.”

Pues bien, quédate con la idea de que la caché es una tecnología que te permite acceder más rápido a los datos que quieres consultar. En este caso, páginas web.

Quédate con esta otra idea también. Como eres tu el que quiere entregar el contenido que produces más rápido a las personas que visitan tu sitio, vengan de Google o de otras fuentes de tráfico, pues eres tu el que tiene que emplear la cache en tu beneficio.

Por tanto, te tiene que quedar muy claro que has de emplear la cache.

Hasta aquí bien, ¿no?

Pues como te decía al principio tienes que emplear un plugin de cache.

¿Cuál?

Un poco más abajo te lo cuento.

¿Qué es el contenido estático?

Los contenidos estáticos son las partes de tu web que no cambian con frecuencia: las imágenes, los archivos css y los archivos js o javascript.

Tu puedes configurar estos archivos para que se almacenen en la caché del navegador de tus visitantes para que así, cuando vuelvan a visitar tu web u otra página de tu sitio que utilice los mismos archivos puedan emplear los archivos guardados en la caché del navegador y no tengan que solicitarlos de nuevo al servidor.

En el servidor también se cachean este tipo de contenidos para que puedas entregarlos más rápido a tus visitas.

Si aplicas esta técnica las visitas y las visitas repetidas pueden reducir notablemente el tiempo de carga de tu sitio y en muchos casos se consigue hasta un 80% de mejora.

Pues hay que aprovecharlo.

¿Qué plugins puedes emplear?

Los plugins de cache que te destaco y que te recomiendo son tres:

Existen unos cuantos más pero yo te destaco e invito a emplear cualquiera de estos tres.

Eso sí, como primera opción, hoy me decanto por versión comercial de Swift Performance Lite que es Swift Performance Pro.

Nota. He preparado un tutorial a fondo sobre las opciones de configuración de Swift Performance

El empleo de un CDN

La última clave para conseguir una web ultra rápida es el empleo de un CDN.

Ésta tiene menor relevancia que las otras tres pero es muy beneficiosa cuando tienes visitas y clientes repartidos por todo el mundo.

Ese es el contexto ideal para plantearte el uso de un CDN, tener visitas por todo el mundo y no solo de una región en particular.

Vale pero, ¿qué es un CDN?

Un CDN es una red de distribución de contenidos que te permite tener una copia de los archivos de tu sitio web repartidos en numerosos servidores alrededor del mundo de tal forma que, dependiendo de la localización de tus clientes/visitantes estos archivos se pueden entregar desde el servidor más cercano a su localización.

Esto reduce el tiempo de entrega de los contenidos a tus clientes/visitas lo que se traduce en un menor tiempo de carga.

En la imagen inferior tienes un dibujo representativo. Tu sitio web está alojado en el “original server” (color azul) y el contenido estático de éste es “copiado” a los distintos servidores del CDN (color verde).

Que es un CDN

Una vez está todo bien configurado sucede que los distintos portátiles desde donde consultan tu web son atendidos por el servidor del CDN más cercano a su localización geográfica. En parte se considera que un CDN es una especie de cache pero de red.

¿En qué medida se reduce el tiempo de carga con un CDN?

En la medida en que el servidor CDN está mas cerca físicamente del portátil/ordenador que solicita tu página.

¿Recuerdas que te decía que las distancias importan?

Pues aquí tienes un claro ejemplo.

¿Cuándo tiene sentido emplear un CDN?

Un CDN  tiene sentido cuando tienes muchas visitas y éstas están repartidas por todo el mundo. Y la clave es esa, repartidas por todo el mundo.

En caso contrario no veo necesario un CDN porque tendrías copias de tu web repartidas en servidores de todo el mundo en vano, aparte de que incrementas la complejidad de la instalación de tu WordPress.

Y ya está, un CDN no es ni más ni menos que eso.

En un futuro artículo te explicaré como puedes configurar KeyCDN en tu WordPress.

¿Qué pasa con todas las otras cosas que he leído en Internet que hay configurar para que WordPress vaya como un tiro?

Te hablo de cosas como:

  • Optimizar la base de datos.
  • Desactivar el cron.
  • Usar una plantilla ligera.
  • Minificar el CSS, el javascript.
  • Mezclar los archivos CSS y javascript.
  • Revisar plugins lentos.
  • Etc, etc.

Todas estas cosas se pueden revisar, tener en cuenta y en función de cada caso particular pueden impactar en el tiempo de carga, pero no necesariamente.

Me gustará que te quedes con la idea de que la claves para tener una web ultra rápida son las 4 que te he comentado:

  • Hosting.
  • Compresión de imágenes.
  • Cache.
  • CDN.

Conclusiones

Si tienes en cuenta estas 4 claves en tu proyecto web podrás conseguir un sitio ultra rápido que redundará a corto y medio plazo en mejores conversiones y en un mejor SEO, o lo que es lo mismo, en aparecer por delante de tu competencia en los resultados de búsqueda.

Al fin y al cabo todo esto de tener una web ultra rápida se traduce en más oportunidades para tu proyecto.

Si además de tener en cuenta estas 4 claves las potencias empleando herramientas, servicios y proveedores relevantes estarás a un solo paso de conseguir ese incremento de oportunidades.

Mira por ejemplo la web de Sergio, de Malagaware, tras dejarse guiar por alguna de mis recomendaciones tiene una web que carga por debajo del medio segundo.

¡Una pasada!

Estoy seguro que tarde o temprano esta mejora le redundará en un aumento de tráfico y posteriormente en un aumento de conversiones u oportunidades. Si no, al tiempo.

Por cierto, no es por nada pero he de reconocer que su web carga más rápido que la mía, jejejejeje. Tengo un reto encima de la mesa.

¡Ya estoy poniéndome las pilas!

@Sergio, me tomo la libertad de decirte abiertamente que te toca invitarme a una caña en cuanto tengamos la oportunidad de conocernos en persona. ¡A base de seguir mis consejos uno tras otro lo estás bordando! !Ole ahí!

Y tú querido lector, ¿qué y cómo lo haces para conseguir una web ultra rápida?

Me gustará leerte en los comentarios por lo que siéntete libre de contarme lo que gustes.

4 comentarios en “Las 4 claves para conseguir una web ultra rápida”

  1. Buen artículo Paul. Permíteme una pregunta: Además de un buen hosting y la compresión de imágenes, ¿cómo pueden cargar rápido las webs de comercio electrónico ya que, por su dinamismo, no les “sienta bien” un plugin de cache ni el CDN?

    Saludos
    Jesús

    1. Hola Jesús, a una página de comercio electrónico, imagino que te refieres a una página con Woocommerce se le puede instalar un plugin de caché y se le puede configurar un CDN.

      ¿Cuál es el problema? O al menos eso entiendo cuando te refieres a que no les “sienta bien”.

      Pues que tienes que hilar fino en la configuración ya que las páginas relativas al carrito de la compra no se pueden cachear alegremente.

      Por tanto, para mi las claves son las mismas, solo que, el esfuerzo en la configuración es mayor. Hay que saber que excluir y que no.

      La complejidad aumenta un poco cuando hablamos de una tienda de comercio electrónico por lo que es importante tener un conocimiento más profundo de cómo funciona la tecnología que empleas.

      No tiene más.

      Un abrazo.

  2. Buenas Paul, ya estoy aquí jeje
    Como siempre un artículo de calidad, sin maquillaje, explicando las cosas bien claras para que cada uno elija lo que mejor le convenga.

    Coincido con los puntos que comentas para la velocidad de carga.
    Un buen hosting, imágenes optimizadas, un buen sistema de cache y un CDN en caso de que tengas visitas internacionales.

    Lo demás ya es para rascar los milisegundos.

    Por si alguno/a se pregunta si FastComet es un buen hosting, quiero decir que antes estaba con SiteGround y al cambiarme mejoró la velocidad de carga de mi web.

    En cuanto al soporte, es verdad que está en inglés, pero te responden rápido para solventar cualquier duda o incidencia que puedas tener. Yo tuve que contactar con el soporte porque la lié con unos ajuste del servidor y me arreglaron el problema rápido.

    SiteGround está muy bien y lo recomiendo, pero el segundo año no te llega una factura, te llega una fractura jejeje

    Lo de la caña, cuenta con ello. Que ya me he pasado a varias herramientas que has recomendado.
    A ver si nos vemos en alguna WordCamp o si te pasas por Málaga.

    ¡Un abrazo!

    1. Hola Sergio,

      Coincido contigo en que el soporte de FastComet es rápido y te atienden rápido aunque como bien comentas y yo menciono está en inglés. No se si estos señores de FastComet aterrizaran en España tarde o temprano como hizo SiteGround hace tres años. Imagino que dependerá del volumen que suponga para su negocio los que hablamos en castellano. Ya veremos.

      Y coincido también contigo en que el segundo año es importe a pagar en SiteGround es muy importante. En ese nivel de precios yo si que me planteo otras soluciones, como un servidor VPS o sencillamente un proveedor de similares prestaciones pero más económico.

      Pilvia, FastComet, Swift Performance… seguiré seguiré divulgando buenas herramientas y servicios. Estoy detrás de una que resuelve un problema muy particular, pero se les ha ido la pinza un poco con el precio. A ver por donde respiran. Ya te contaré.

      Y nada más, tarde o temprano coincidiremos en un evento seguro y cerramos lo de la caña o lo que surja.

      ¡Un abrazo!

Dejar un comentario

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

Responsable » Paul Benítez Icatt
Finalidad » gestionar los comentarios.
Legitimación » tu consentimiento.
Destinatarios » los datos que me facilitas estarán ubicados en los servidores de SiteGround (proveedor de hosting de AdministrandoWP) dentro de la UE. Ver política de privacidad de SiteGround. (https://www.siteground.es/privacidad.htm).
Derechos » podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.