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:
- Cuando un navegador carga una página web, comienza a recibir el código HTML.
- Al cargar un sitio web se encuentra un código javascript en su HTML.
- Este JS se está procesa de forma síncrona (lo normal)
- A medida que lo va recibiendo, lo lee y lo procesa.
- Cuando llega al Javascript, el navegador detiene la lectura (hay una espera).
- El navegador descarga el fichero javascript y lo ejecuta.
- 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:
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:
- (LCP) : mide el rendimiento de carga
- (FID) : mide la interactividad
- (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.
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:
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:
Te puede interesar:
Acerca del autor
SEO Mánager en ginesmayol.com . Ayudo a empresas y marcas a posicionarse en Google. Presidente de la Asociación de MKT Digital de la Región de Murcia. Creo estrategias de Adquisición de tráfico para empresas y marcas nuevas. Hago deporte a diario y me gusta todo lo relacionado con el medio ambiente y el estilo de vida sencillo y saludable.
Muy interesante, solo te falto un video con las configuraciones y te daría un 10 de 10
Precisamente ahora tengo un problema con la velocidad, todo estaba bien en el PageSpeed Insights hace un par de meses y de repente no para de caer y sin haber hecho ningún cambio que lo justifique.
Estoy probando de todo con diferentes plugins y nada.
No consigo solucionarlo. Alguna idea?
Hola Carlos,
posiblemente probaría primero con el plugin de caché Rocket y si no mejora lo suficiente me iría a montar un CDN.
Hola,Normalmente no escribo en blogs a las 3 de la mañana….me ha gustado lo que haz dicho de los diseñadores y la pobre gente que deja sus webs a 100% en sus manos .Me quito el sombrero a todos los programadores pero me pregunto para que se hace una web si no se puede ver ni en la página 10.Hasta he analizado webs de marketers profesionales que tienen sus webs tan pobres de optimización que no me entra en la cabeza como Google les lanza a las primeras Serps. Creo que lo único que les salva son los contenidos auténticos y las redes sociales, google maps también… Y nosotros somos la otra extremidad – sobre optimización!
Probablemente lleves razón Yanko. Ninguno de los extremos es bueno. Gracias por pasarte por aquí. Un placer!
Si.. la tengo algo descuidada y sin CDN, pero puedes ver http://semsacional.es
Bastante ligera… con un theme muy bueno que todavía tengo sin exprimir… pero últimamente los clientes me tienen sin vida…
He usado comet caché, aunque wprocket también rinde muy bien.
Me has pillado!
SOIL no lo conocía.
¿podrías darme algun dato de optimización real que hayas conseguido con ellos?
Soy muy de trastear:
Complete Analytics Optimization Suite (CAOS)
Scriptless Social Sharing de Robin Cornett
SOIL: https://roots.io/plugins/soil/
a ver si ahora te pillo y alguno de estos te parece una novedad 🙂
los estoy usando los tres y van bastante finos.
Gracias por tu aportación Roberto.
Conocía el plugin Gonzales pero no lo he probado en ninguna web aun.
Seguro que lo probaré. Tiene muy buena pinta.
Te dejo una perla… https://tomasz-dobrzynski.com/wordpress-gonzales
Es el primer plugin que meto para optimizar, ya que lo que no se necesite, tanto de css como de js, se puede eliminar con Gonzales.
No hay nada más optimo que cargarse de un plumazo lo que no se usa en un post o página.