Velocidad de página: conseguir que tu web cargue en menos de 2 segundos [5 pasos]

¿Quieres que tu página web cargue rápido?

La velocidad de tu carga de página es un factor clave en tu posicionamiento SEO, pero más importantemente de cara a tu público y su experiencia en tu web, si tarda mucho más de 2-3 segundos en cargar la página, la realidad es que ya estás perdiendo a posibles clientes.

Varios clientes ya me han pedido que les mejore la velocidad de sus páginas, y creo que en algunos casos lo podrían realizar ellos sin mi ayuda, por lo que en este post os voy a explicar unos factores importantes en la velocidad de página, y algunos pasos que podéis tomar para aplicarlo a tu WordPress.

¿Prefieres que yo te lo haga?

Intento dejar claro los pasos para que cualquiera los pueda realizar. Esto dicho, reconozco que necesitas un mínimo conocimiento de WordPress para conseguirlo.
Si quieres que yo te haga este trabajo, no dudes en ponerte en contacto conmigo.

¿Por qué me importa que vaya rápido mi web?

¿Me das un ejemplo de una web que has 'optimizado'?

En el caso de que yo tenga la suerte de crear la web desde cero, puedo conseguir una carga de página de mucho menos de 2 segundos. 

Si el cliente ya tiene desplegada su página, es probable que la plantilla (y los plugins/complementos) que ha usado pese algo más de la cuenta, por lo que intento que se cargue en entre 2-3 segundos, y si conseguimos que sea en menos de 2, mejor. 

Goldcrest Furniture
Goldcrest Furniture
Informe de Velocidad
Read More
Cuando me enseñó Jack la web por primera vez, lo que más me impactó fue su rapidez.

¿Cuáles son los factores clave?

Aunque los factores de velocidad de carga son muchos, hay unos 5 factores que contribuyen muchísimo mas. 

Para este post quiero que estos pasos los pueda seguir cualquier dueño de negocio o similar que  tenga conocimientos básicos de WordPress y quiera optimizar su web, sin tener que tocar código (ni mucho menos).

Así que nombro los factores más importantes que probablemente podáis seguir, y a continuación explicaré cómo realizar cada paso:

  • Usar un CDN gratis (en lugar de alquilar un servidor costoso en condiciones)
  • Reducir las peticiones a archivos, ya sean externos a tu servidor (por ejemplo tu código de Google Analytics, fuentes y pixeles de Facebook) o internos (de promedio una de tus páginas pide información a unas 89 fuentes!)
  • Comprimir el código (sabías que un espacio blanco en tu código al final se trata de datos/más peso?)
  • Aprovechar la caché que tienen tus navegantes en sus navegadores
  • Redimensionar tus imágenes y comprimirlas, para que no pesen más que tu página en si!

Antes de empezar ejecuta un reporte en GT Metrix para comparar el antes y después

Usar un CDN (Red de Distribución de Contenidos)

Mi sensación es que esta es la recomendación más importante en esta página. 

Sobre todo porque el 99% de vosotros habréis contratado un hosting con una de las empresas grandes como GoDaddy o BanaHosting que a) típicamente ofrecen un servicio poco consistente (me refiero a velocidad de respuesta desde el servidor), y b) habrás contratado recursos ‘compartidos’ entre tu web y otras muchas, de varias partes del mundo.

Por lo tanto, aunque puntualmente te corre rápido, en otros momentos, debido a la demanda de otras webs compartiendo tus recursos, puede que la primera respuesta de tu servidor tarde hasta dos o tres segundos antes de pintar absolutamente nada, lo cual es perder muchísimo tiempo.

El tiempo promedio de carga de una página es de 6,8 segundos!

Total que, vamos a usar lo que se llama una red de distribución de contenidos, de alta calidad, para que tu web se sirva desde allí en lugar de tu hosting.

¿Qué es un CDN?

Una red de distribución de contenidos es una plataforma que se posiciona entre tu querido navegante en su portátil o móvil, y tu web. 

Esta plataforma suele estar a) más cerca en distancia a tu navegante (por lo que sirve más rápido), y b) de mayor calidad (en tiempo de respuesta de servidor).

En este caso vamos a usar Cloudflare porque no solo es uno de los líderes en el mercado, sino también ofrece una opción gratuita la cual nos funciona perfectamente.

En su home puedes hacer ‘sign up’. Cuando entres te pedirá que le des el nombre de tu página. Mételo para que automáticamente vaya a recoger toda la información necesaria de tu hosting actual.

Asegúrate de seleccionar el plan ‘gratis’:

En la siguiente página verás que Cloudflare te ha cogido todos tus ‘records’ o registros en español. Después de comprobarlos, le puedes dar a continuar:

El último paso es hacer el cambio verdadero desde tu hosting. 

Lo que necesitas hacer es cambiar tus ‘nameservers’ a los de Cloudflare. Cloudflare te dará los suyos en la siguiente página a continuación:

Cuando entras en tu panel de hosting (por ejemplo en GoDaddy o donde tengas tu hosting), debes buscar la opción de ‘administrar DNS’:

Según tu hosting, normalmente aquí te sale la opción de cambiar tus nameservers a los que te ha dado Cloudflare, como en el ejemplo siguiente:

Ahora te puedes volver a Cloudflare y pedirle que te ‘verifique’ el cambio, para que se realice mucho más rápido que en el plazo normal de hasta 24 horas. 

Y voilá! Ya has realizado el cambio más importante para tu velocidad. De hecho, en el caso de Teachifyapp.com con este único cambio conseguimos rebajar la velocidad de carga desde unos 9 segundos hasta alrededor de 4/5 segundos.

Reducir las peticiones a archivos y comprimir tu código

Cualquier página de tu web consiste en muchas ‘partes’ distintas, que tu navegador recopila para crear la página final.

El promedio de partes para una página web son 89, la mayor parte siendo archivos que viven en tu hosting, y algunas son de fuentes externas, como cuando usas Google Analytics, tipografías específicas, un chatbot, o un pixel de Facebook para conocer a tu audiencia.

En particular las que viven fuera de tu hosting tardan significativamente más en devolver la información, por lo que una parte de esta tarea se trata de o rebajar nuestras necesidades externas, o bien cargarlas en nuestro servidor de forma que no tengamos que ir a buscar información fuera.

La otra parte se trata de ‘compilar’ (unificar) todos los archivos internos en un único archivo, para que solo se haga una única petición a un archivo más grande, por tanto reduciendo el tiempo de carga. 

Peticiones externas

Me es imposible saber todas las peticiones externas que tu web está haciendo, por lo que os voy a proponer una solución a dos peticiones externas típicas: Google Analytics y tus fuentes web.

Google Analytics

Para Google Analytics vamos a usar el plugin CAOS Analytics. Este plugin nos permite cargar el código de Analytics de forma local (en tu hosting), y para mantenerlo actualizado, el plugin en el fondo se actualizará contra Google Analytics una vez al día, y no a la hora de cargar tu página.

Una vez activado el plugin, ve a la sección de ‘settings’, y verás una serie de opciones:

Las configuraciones importantes respecto a la velocidad:

  1.  En el primer campo metes tu código de tracking de Google Analytics.
  2.  En el campo de ‘position of tracking-code’ normalmente se pondrá en el header para asegurar que recoja toda la información.

Yo soy muy fan de usar un ‘adjusted bounce-rate’ en las configuraciones avanzadas a la derecha. Esto es para que Google no etiquete a los usuarios que han estado en tu página durante más del tiempo que pongas (la suelo dejar en unos 20 segundos) como si hubieran salido de tu página ‘sin interactuar’ en Google Analytics. 

Esto lo hago porque muchos de mis clientes son empresas locales que pueden tener información como su correo, dirección o teléfono en la primera pantalla, por lo que es posible que satisfagamos a nuestros clientes de un vistazo, a pesar de no haber interactuado con la página más allá.

Guarda tus configuraciones y ya está, ya tienes cargado tu código de Analytics de forma local.

 Tus Tipografías

Para tus fuentes usaremos un plugin por el mismo autor llamado CAOS for Webfonts.

Una vez lo tengas activado y estés en la pantalla de configuración, procederemos a teclear todas las fuentes que usamos en nuestra web:

Ten cuidado de teclear los nombres de todas las fuentes que tenemos, antes de darle a ‘Generar stylesheet’.

¡Ya tenemos cargadas todas nuestras fuentes en nuestro hosting, y ya no las pediremos fuera!

Peticiones internas

Para unificar nuestros archivos y a la vez comprimir el código (es decir quitarle cualquier carácter innecesario, como son los espacios blancos por ejemplo), vamos a usar el plugin de Autoptimize.

En las configuraciones, primero activa las tres opciones principales y guarda los cambios (como aquí):

Luego pincha arriba a la derecha en ‘show advanced settings’. Una vez estén abiertas, configura las secciones de Javascript y CSS como en las siguientes imágenes:

En la segunda pestaña aplica las siguientes configuraciones.

  1. Google Fonts: Si configuraste CAOS for Webfonts antes, vamos a decirle a tu web que no pida las fuentes a Google, de forma externa.
  2. Remove Emojis: Por el mismo motivo vamos a quitar la carga de emojis de tu web para que no haya peticiones externas.
  3. Remove query strings from static resources: esta opción realmente no afectará el tiempo de carga, pero hará que tu resultado en GT Metrix salga mejor…!

Aprovechar la caché

La caché es uno de nuestros amigos favoritos en el mundo de velocidad de página. 

La idea es que el navegador del navegante cuando entre en tu web por primera vez, guarde todos los datos que pueda, de forma que cuando vuelva a esa página después, no tenga que ir hasta tu hosting para recoger la misma información, sino la carga desde el propio navegador en tiempo récord. 

Para ello usaremos uno de dos plugins. Si tienes un hosting con IP dedicado, es decir solo para tu web, y sabes lo que estás haciendo (el plugin es muy avanzado) recomiendo el uso de W3 Total Cache.

Al contrario, si tu hosting es un hosting ‘compartido’ entre otras muchas webs (lo normal para la mayoría de la gente), o si eres nuevo en todo esto, recomiendo el uso de WP Fastest Cache

El motivo porqué, aparte de ser más sencillo para los principiantes,  es que W3 Total Cache necesita muchos recursos de tu hosting, y si tienes un servidor compartido, puede que le cueste demasiado.

Configurar WP Fastest Cache

Al entrar en las configuraciones parecerá un poco confuso, pero no te preocupes, te pongo a continuación las configuraciones que recomiendo:

  1. Cache System
  2. Preload
    • Homepage
    • Categories
    • Posts
    • Pages
  3. New Post
  4. Update Post
  5. Gzip
  6. Browser Caching
  7. Disable Emojis

Por último, pasa a la pestaña de ‘CDN’, y vas a seguir los pasos para vincularlo con Cloudflare. Para ello necesitas tu correo de login con Cloudflare, y también una ‘API Key’, la cual se encuentra en la pestaña de ‘Overview’, en el menú derecha abajo del todo:

Sigue los pasos y vuelve a tus configuraciones en WP Fastest Cache para introducirla allí.

¡Éxito!

Redimensionar tus imágenes

Como vimos antes, tu página consiste en muchas diferentes partes, de varios tipos (CSS, Javascript, Imágenes, HTML, etc).

En una web sin imágenes optimizadas, las imágenes pueden constituir más del 80% del peso de la página.

Si se trata de una foto sacada con un iPhone, o cámara de alta calidad, una única imagen puede tener unas dimensiones de hasta 5000px*3000px, pesando un impresionante 2-4Mb.

Visto que la página web promedia pesa alrededor de 3,15Mb, y nosotros queremos que quede en menos de 1Mb para conseguir una carga rápida. Necesitaremos dejar nuestras imágenes en menos de 100Kb, particularmente si tu página tiene muchas.

Para combatir esto, necesitamos hacer tres cosas a cada imagen:

  1.  Reducir los pixeles por pulgada: tu cámara saca en 300PPP, sin embargo la pantalla de tu ordenador solo puede mostrar como mucho 72PPP.
  2. Redimensionarlas: si el espacio en tu pantalla se trata de 300px*300px, porque dejar la imagen en 2048px*1024px, cuando al final no se mostrará toda esa ‘información’ adicional.
  3. Comprimirlas: Es posible comprimir tus imágenes aún mas, para que el archivo sea más pequeño, sin perder la calidad de la imagen.

Para reducir pixeles y redimensionar fotos

En el video arriba he usado Photoshop, pero hay muchas herramientas gratuitas online para hacerlo mismo, por ejemplo con Photopea.

Para comprimir tus imágenes

En mi caso uso una herramienta local para Apple que se llama ImageOptim, combinada con el plugin Smush.

Para una opción gratuita online, puedes probar ‘Image Compressor‘.

¡Tu web está optimizada para la velocidad!

Repito de nuevo que estos pasos son la versión sencilla para que (espero) cualquier dueño de negocio local que haya hecho su propia web o maneje un poco WordPress, pueda conseguir que su web vuele.

En este punto, ¡vuelve a GT Metrix, a ver en qué ha quedado tu carga de página!

Una nota sobre tu plantilla, y sus plugins

Las plantillas y los plugins son lo bueno y lo malo de WordPress. 

Por un lado le permiten a cualquier crear su propia web, y añadir la funcionalidad que desea.

Por otro, las muchas opciones y facilidad en la configuración que permiten, conlleva que el programador de la plantilla las codifique todas en su plantilla, las cuales se cargan todas en tu web a pesar de no usarse. 

Por tanto usarás de verdad seguramente no más del 25/30% del código cargado en cualquier página de tu web. Ese código adicional pesa muchísimo y ralentiza tu web!

He pasado horas y días buscando la mejor infraestructura para poder hacer lo que necesite en cuanto a diseño por un lado y tracking y marketing por otro, y os recomiendo usar las siguientes opciones:

Plantilla

GeneratePress – Una plantilla super ligera, con código optimizado y la posibilidad de integrar con otras muchas plataformas y page builders.

Page Builder

Elementor – Para el principiante tiene muchas puestas en página precargadas, por lo que no necesitas ser diseñador web, y incluso está bien para los que tienen más soltura, pues puedes conseguir literalmente lo que quieras respecto a diseño.

¿Prefieres que yo te lo haga?

Intento dejar claro los pasos para que cualquiera los pueda realizar. Esto dicho, reconozco que necesitas un mínimo conocimiento de WordPress para conseguirlo.
Si quieres que yo te haga este trabajo, no dudes en ponerte en contacto conmigo.

Mis Servicios