CÓMO PUEDO ACELERAR MI WEB UN 25%

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 acelerar la carga de una web.

Hoy quiero presentarte – 2 plugin para WordPress – 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 carga 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 carga 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 estas.

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í:

fichero javascript


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.

Esto es lo que 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 –  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

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.

javascript sincrono

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 webcargue más rápido

carga asincrona javascript

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. 

Dependiendo del THEME 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.

page speed tienda online

.

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 Google Plus, Pinterest, 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. 
  • Videos embebidos en las páginas.
  • Audio embebido en la página web.

Un ejemplo…

javascript 3

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 – .

javascript 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:

mensaje javascript

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 relaizado diveros TEST de velocidad y carga.

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

#1. Plugin WP Deferred JavaScripts

wp plugin javascript 1

.

Aquí puedes descargar este Plugin WP

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. – Nada de configuraciones.

Un plugin que está actualizado a wordpress 4.6.1 desde hace 2 meses,  y es compatible por ejemplo con otros como – Autoptimize .

Funcionamiento:

Carga asíncrona de los comandos Javascript consiguiendo una mejora de la carga de la web de hasta un 25% en muchos casos.

Mi experiencia con este plugin ha sido una mejora de:

  • Blog ginesmayol.com

velocidad carga JS 1

  • Blog revista online : specialmagazine.es –

test asincrono carga web

  • Tienda online con Woocommerce

test velocidad tienda online 2

#2. Plugin asíncrono JavaScript

plugin wp javascript asincrono

Plugín que elimina el Javascript de la parte superior de la página web ofreciendo una carga más rápida.

Plugin WP completamente actualizado a WordPress 4.6.1

Aquí puedes descargar el plugin Asyncrono Javascript 

Un plugin que tiene configuración , auque verás que tambien es 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:

plugin javascript web

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.

Personalmente, al final me he decantado por dejar instalado el pugin Plugin WP Deferred JavaScripts durante unas semanas y seguir testeando la velocidad de carga de la web.

Son dos plugins muy interesantes para mejorar este punto conflictivo que tienen muchas páginas web con la 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 dos 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 

.

optimizacion web javascript


Qué puedes hacer para acelerar la velocidad de carga web 

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

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:


Si te ha gustado el articulo, puedes suscribirte al mi Blog sobre SEO aqui:

suscribir blog seo gines


Ginés Mayol – Consultor SEO en Murcia y de Marketing Local

Compartir:

7 comentarios en “CÓMO PUEDO ACELERAR MI WEB UN 25%

  1. 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!

  2. 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.

Deja un comentario

shares