Cómo puedo acelerar mi web un 25% y gustar más a Google

Existen varias formas de acelerar la velocidad de un página web de forma fácil y sin meternos a tocar código.

Hoy en día plataformas como WordPress donde se desarrollan gran cantidad de blogs y tiendas online , es fácil optimizar y mejorar la velocidad de carga de una web.

Aunque wordpress ha mejorado internamente y la versión de PHP 7.0 a PHP 7.4 ayuda también a mantener un sitio web rápido, necesitamos hacer algo más si deseamos obtener una buena puntuación de Google y que no nos “machaque” con este tipo de mensajes.

Hoy quiero presentarte 3 plugin para WordPress que mejoran la carga que he descubierto recientemente y que he probado en varias de mis web y funciona realmente bien.

No necesitas saber nada de código.

---

Acelerar la velocidad de wordpress con Themes Premium

Este THEME que estoy utilizando en ginesmayol.com , tiene cosas que me gustan y cosas que no.

Por ejemplo:

• Me gusta cómo carga de rápido las páginas y categorías.
• No me gusta cómo carga de lento las entradas del blog.

---

¿Por qué me cargan tan lento los artículos del blog?

Por los Javascript;

Y, ¿qué es un Javascript?

También llamado JS, el Javascript es un lenguaje de programación que actualmente se utiliza mucho para enviar y recibir información del servidor.

Y aquí es donde viene el conflicto en muchas webs afectando considerablemente a la velocidad de carga de ellas.

Esos dichosos fragmentos de código que hacen que las páginas sean más lentas, son también necesarios pero podemos modificarlos para que mejore la carga de la web.

Un fichero Javascript  es algo así:

---

Veamos qué ocurre al cargar una web:

1. Cuando un navegador carga una página web, comienza a recibir el código HTML.
2. Al cargar un sitio web se encuentra un código javascript en su HTML.
3. Este JS se está procesa de forma síncrona (lo normal)
4. A medida que lo va recibiendo, lo lee y lo procesa.
5. Cuando llega al Javascript, el navegador  detiene  la lectura (hay una espera).
6. El navegador descarga el fichero javascript y lo ejecuta.
7. Una vez concluido este proceso, continuará la carga de la página web.

Como podemos entender fácilmente, cuando una página web se está descargando y encuentra un código Javascript se detiene hasta que lo ejecuta por completo.

Qué hace que una web sea más lenta

Para entender un poquito mejor el trabajo del Javascript debes conocer que existen actualmente 2 formas de cragar estos ficheros:

• Carga síncrona
• Carga asíncrona.

Sin entrar al detalle, y sólo para entenderlo bien, voy a poner 2 imágenes de secuencias síncronas y asíncronas de ficheros javascript (JS) y el trabajo que estos realizan, con el fin de entender dónde está el problema.

Cómo se produce el retardo a la hora de cargar el código

#1. Carga síncrona de Javascript

Una llamada de ficheros Javascript “síncrona” quiere decir que todos los datos que se solicitan al servidor van en serie. Y hasta que no termina de descargarse el fichero JS, la web sigue esperando.

#2. Carga Asíncrona de Javascript 

Una llamada de ficheros JS asíncrona , quiere decir que los datos y llamadas al servidor se pueden realizar de forma paralela.

Por lo que, se evita que los datos tengan que esperar, siendo una forma más efectiva de trabajar.

Con ello conseguimos mayor eficiencia y que la web cargue más rápido

De esta forma tan visual, podemos deducir que nos interesa hacer que los Scripts de nuestra web se carguen de forma Asíncrona , para  conseguir un mayor rendimiento y velocidad de carga.

Para desarrolladores web existen plataformas donde poder profundizar más sobre este tema de los JS, como es:

• api.JQuery

---

Ejemplo de cómo se cargan los fragmentos Javascript

Imagina que tienes 10 fragmentos Javascript dentro de cada una de tus páginas…

Cada vez que el servidor encuentre un JS síncrono deberá esperar a que se ejecute completamente y después seguir con la descarga de la web.

Hasta que se complete toda la lectura de esa página.

Lo cual retrasa el tiempo de carga y empeora la experiencia de usuario. 

Google implementa una nueva herramienta para medir la experiencia de usuario: Web Vitals

Google acaba de lanzar una nueva herramienta para webmasters con el fin de proporcionar información a los expertos sobre como afecta la velocidad de carga de una web a la experiencia de usuario.

Esta nueva herramienta podría ser un guiño de factor SEO de nuevo para que los webmasters pongan su esfuerzo en optimizar sus páginas web.

Web Vitals viene con 3 parámetros a medir:

1. (LCP) : mide el rendimiento de carga
2. (FID) : mide la interactividad
3. (CLS) : mide la estabilidad visual

Estos nuevos parámetros conocidos como los Core Web Vitals de medición de Google son un nuevo recordatorio a los webmasters de que la velocidad con que se carga completamente una página web es importante para ellos y que puede afectar bastante al posicionamiento orgánico de una web. (A partir del 2021)

Dependiendo del THEME o plantilla que utilices, y su estructura de código HTML límpio, este tiempo será mayor o menor.

Igualmente, si en vez de ser un Blog, es una tienda online creada en WordPress, (o Prestashop) las peticiones al servidor suelen ser mayores que en los Blogs.

Un ejemplo de tienda online con Woocommerce que ha mostrado un excelente rendimiento después de instalar el plugin que te voy a enseñar y el número de peticiones que realiza al servidor, es la siguiente.

.

Conclusión: los ficheros Javascript ralentizan las páginas webs.

Aunque , como hemos visto, también son necesarios.

---

• Leer: Plantilla de trabajo SEO para planificar y analizar toda mi web

---

Dónde encontramos Javascript en una página web

Normalmente los JS se utilizan en:

• Animaciones de las páginas web (sliders, imagenes con movimiento, efectos en las imágenes, etc)
• Redes Sociales embebidas (plugins de RRSS en las cabeceras de las webs, etc)
• Los widgets laterales de las Redes Sociales como, Pínterest, Facebook, Twitter, etc.
• Widget de formularios de contacto .
• Widget de productos relacionados en una Tienda Online.
• Botones de comprar, añadir al carrito, valoraciones, etc en un Ecommerce.
• Widgets de post o productos relacionados. 
• Vídeos embebidos en las páginas (vídeos de youtube).
• Audio embebido en la página web.

Un ejemplo…

Como vemos hay unos cuantos ficheros Javascript que son los que ralentizan la carga de las entradas de la web.

Esto no ocurre en las páginas y categorías de mi web, ya que no tengo widgets laterales ni animaciones.

Y realmente, ésta plantilla carga muy rápido si la dejas – limpia de animaciones – .

Ahora puedes entender por qué a muchos expertos SEO no nos gustan las animaciones, sliders y demás “florituras” que sin embargo a los diseñadores web si les gusta.

Al final hay que buscar un equilibrio entre diseño y efectividad para que una web – atraiga .

---

Síntomas de que tu web puede necesitar una mejora de los Javascript

Los síntomas más comunes que se ven a la hora de cargar una página web con muchos Javascripts son:

• La web comienza a cargarse y van apareciendo las imágenes y texto muy poco a poco.
• La web se queda “atascada” a la mitad de carga o al final.
• La web comienza bien la descarga pero al final se “atasca” y se ralentiza 2- 3 seg. más de lo normal.

Este último punto es el que te he comentado arriba que le pasa a mi web con los artículos del blog.

Este es el mensaje que verifica los puntos que hay que corregir de los fragmentos Javascript según la herramienta:

• Page Speed developers

Esto es lo que queremos corregir – los JS

---

Solución a una web lenta

Plugin para corregir la velocidad de carga de una web

He estado comprobando varios plugins de wordpress para solucionar este tema de la carga síncrona.

También he probado varias alternativas en 5 de mis webs y realizado diversos TEST de velocidad y carga.

Las herramientas que he utilizado para realizar los TEST de velocidad son:

• Page Speed Developer de Google
• GTmetrix
• Pingdom Website Speed Test

#1. Plugin WordPress Assets manager

Este Plugin para aplazar los Javascript funciona bastante bien, según las pruebas que he realizado.

Es muy sencillo y simple.

Sólo debes instalar y activar. La configuración es muy sencilla:

Un plugin que está actualizado a la versión de wordpress 4.8 o superior.

Funcionamiento:

• Disminuye el número de solicitudes HTTP cargadas (importante para una carga más rápida).
• Reduce el código HTML de la página real (eso es aún mejor si la compresión GZIP está habilitada).
• Hace que el código fuente sea más fácil de escanear en caso de que sea un desarrollador y quiera buscar algo.
• Eliminar posibles conflictos entre complementos / tema (por ejemplo, 2 archivos JavaScript que se cargan desde diferentes complementos e interfieren uno con otro).

Mi experiencia con este plugin ha sido una mejora de:

• Blog ginesmayol.com

• Blog revista online : esmagazine.es

• Tienda online con Woocommerce

#2. Plugin asíncrono JavaScript

Este plugin te ayuda a eliminar el Javascript que bloquea el procesamiento en el contenido de la mitad superior de la página.

Plugin WP completamente actualizado a WordPress 5.6

Un plugin que tiene una configuración sencilla.

Sólo debes elegir qué archivos Javascript deseas que se carguen como asíncronos

Lo bueno de su configuración es precisamente, el poder elegir entre los diferentes archivos a renderizar.

Es compatible con el anterior, incluso con WP Super caché.

Mi experiencia con este plugin ha sido dispersa.

He realizado diversas pruebas :

• Instalando el plugin sólo.
• Conjugándo este plugin con el anterior.

Y el resultado ha sido una mejora de:

Realizado el TEST de carga en todas las páginas como en el plugin anterior, la mejora en cuanto a rendimiento no ha sido tan significativa.

Sin embargo, lo recomiendo porque cada web es diferente y tal vez en la tuya , puedas tener un rendimiento mayor.

De todos los plugins que he probado sobre Javascript este es el más actualizado, por lo que es un indicativo de que los desarrolladores están trabajando en él.

#3. Asset CleanUp: Page Speed Booster

Este plugin te permite:

• Disminuye la cantidad de solicitudes HTTP cargadas y elimina los recursos de bloqueo de procesamiento (importante para una carga de página más rápida) al descargar CSS / JS inútiles.
• Precarga archivos CSS / JS, fuentes locales y fuentes de Google
• Minifica archivos CSS (incluido el código en línea dentro de las etiquetas STYLE)
• Minifica archivos JavaScript (incluido el código en línea dentro de las etiquetas SCRIPT)
• Combina los archivos CSS y JavaScript cargados restantes.
• Aplaza archivos JavaScript combinados aplicando el atributo «aplazar» a las etiquetas SCRIPT.
• Reduce el código HTML de la página real.
• Elimina posibles conflictos entre complementos / tema.
• Mejora el puntaje de rendimiento en PageSpeed.

Personalmente, al final me he decantado por dejar instalado el pugin Asset CleanUp: Page Speed Booster durante unas semanas y seguir testeando la velocidad de carga de la web.

Son tres plugins muy interesantes para mejorar este punto conflictivo que tienen muchas páginas web con la velocidad de carga, sobre todo en versión móvil.

Además para dueños de webs y tiendas online – no desarrolladores – y que desean soluciones rápidas y efectivas , estos plugins son una excelente opción..

Este es el resultado después de instalar el plugin primero comentado y realizado el TEST en GTmetrix de una de las entradas del blog: ginesmayol.com 

.

---

Otras excelentes opciones

1. plugin de caché a nivel de página

Podemos también usar un plugin para cachear las páginas de la web, lo cual ya está muy extendido dentro de la comunidad de WordPress.

Personalmente me están funcionando muy bien en distintos tipos de webs los siguientes plugins de caché:

• Wp Rocket (Precio 39$ )
• Wp fastest caché (este es el que estoy utilizando actualmente) (Gratis )
• Comet caché ( Gratis)

2. Caché a nivel de servidor

Esta es otra buena opción para conseguir que la web cargue mucho más rápido. Con este sistema puedes llegar a tener una velocidad de carga de menos de 1 seg.

Este sistema cachea todo el contenido de la web en la memoria RAM del servidor, por lo que no se tiene que acceder a las bases de datos del disco que suelen tardar más tiempo en responder.

Por ejemplo, la empresa de hosting webempresa ha desarrollado su propio sistema de caché en el servidor, pero hay otras empresas de hosting que también lo hacen.

La empresa de hosting Siteground ha desarrollado otro sistema de cacheado web similar llamado SuperCacher que utiliza 3 niveles de caché y al parecer también funciona muy bien.

3. Implementar AMP para los artículos del blog o productos

También hay una solución rápida y muy eficaz para mejorar la velocidad de carga de una web sin tener que tocar el theme de la web o el servidor. La solución puede ser el AMP.

El sistema AMP dará un mayor rendimiento a la página web y verás como la herramienta Page Speed Insights te dará una mejor puntuación cuando lo instales.

Aquí tienes una prueba en vídeo de ejemplo y verás como mejora la puntuación de una página con utilizando AMP a no utilizarlo:

.

#4. Bases de datos sobrecargadas

Uno de los problemas de WordPress es que su base de datos está sobrecargada con múltiples revisiones de publicaciones, complementos desactivados, borradores guardados y otros.

Los trackbacks y pingbacks no tienen ningún uso práctico en WordPress. Asegúrate de desactivar ambos porque obstruyen tu base de datos y aumentan el número de solicitudes.

La limpieza de la base de datos es algo que debemos tener en cuenta para que la web obtenga una buena salud.

#5. Los chatbots pueden ralentizar la web

Los chatbots son excelentes para poder interactuar con los usuarios o tener un servicio al cliente mejor, pero también pueden llegar a ralentizar una web si no se cargan de forma asíncrona.

Qué puedes hacer para acelerar la velocidad de tu tienda online 

Si tienes una tienda online y te preocupa la velocidad de tu web, te puedo sugerir dar un paso más : VPS.

Contratar un servidor virtual (VPS) es una excelente opción para alojar una tienda online. Este servicio es el punto intermedio entre un hosting compartido y un servidor dedicado.

Por otro lado, la elección de contratar un VPS es una opción más segura que las opciones de alojamiento compartido tradicionales.

Otra posible causa para decantarse por un servidor virtual o incluso por un servidor dedicado es si tienes una web multisite en varios idiomas y deseas el máximo rendimiento para tus visitantes desde cualquier pais.

Hace sólo un par de días comentaba con una empresa de Hosting este tema que afecta especialmente a tiendas online y según su experiencia me comentaron esto:

Las tiendas online a partir de 1.000 productos es conveniente que trabajen con servidores dedicados, ya que son muchas las peticiones al servidor que realiza una tienda online por cada visita. Los hosting – normales – se quedan cortos.

Como vemos un PLUS para acelerar la carga de una web es tener un VPS dedicado.

Da igual que sea una tienda online montada en Prestashop que en Woocommerce.

Esto te lo comento sólo como anécdota.

Al final debes ser capaz de sacar tus propias conclusiones.

Te puede interesar conocer:

• Cómo se hace SEO moderno

---

Te puede interesar:

• SEO para tiendas online nuevas
• Qué opina Google sobre tener una buena puntuación en Page Speed

---