atributos-async-y-defer

En la optimización de la velocidad de carga de una web, los atributos Async y Defer de la etiqueta < script > tiene un papel decisivo.

Pero, ¿sabes cómo se comporta la carga de una página y la interpretación del html en función del atributo que se implemente en la web?

Nuestro compañero David Navarro comparte sus conclusiones en este vídeo que combina la teoría con ejemplos prácticos.

Async o Defer. Tic-tac, tic-tac…

 En menos de 4 minutos saldrás de dudas. ¿Estás listo?


[separator style_type=»double» top_margin=»» bottom_margin=»» sep_color=»#1e73be» border_size=»» icon=»fa-commenting-o» icon_circle=»» icon_circle_color=»#ffffff» width=»» alignment=»center» class=»» id=»»]

Una web que ofrece una respuesta lenta al usuario tiene un efecto tan negativo como declararte a tu pareja y comprobar cómo su respuesta se prolonga más de 7 segundos. Ups… Houston, ¡tenemos un problema!

En este cometido, existen aspectos importantes que ayudan a mejorar la velocidad de carga de una web o WPO, uno de los aspectos más determinantes del SEO en la actualidad, tal y como Álvaro Fontela declaró en esta entrevista.

Entre estos puntos de optimización está el análisis de la carga y ejecución del JavaScript. Para ello, contamos con 3 opciones:

  • Definir una etiqueta < script > sin ningún atributo, lo que conlleva a la ejecución del script antes de que se reanude la interpretación del html.
  • Utilizar el atributo <async>, en el que al tiempo que el navegador descarga el archivo script, interpreta el html de la página y, tan pronto finaliza la descarga, pausa la interpretación para ejecutar el script y, de inmediato, proseguir la interpretación.
  • Emplear el atributo <defer>, lo que conlleva al aplazamiento de la ejecución del script una vez que ha finalizado la interpretación del html. En este caso, la descarga del script se realiza de forma asincrónica – como con Async -, pero con la ejecución de los scripts en el orden en el que aparecen en el documento.

[content_boxes settings_lvl=»child» layout=»icon-with-title» columns=»1″ icon_align=»left» title_size=»25px» title_color=»#1e73be» body_color=»#110902″ backgroundcolor=»#e8e8e8″ icon_circle=»» icon_circle_radius=»» iconcolor=»» circlecolor=»» circlebordercolor=»» circlebordersize=»» outercirclebordercolor=»» outercirclebordersize=»» icon_size=»» icon_hover_type=»» hover_accent_color=»» link_type=»» link_area=»» linktarget=»» animation_delay=»» animation_type=»0″ animation_direction=»left» animation_speed=»0.1″ margin_top=»» margin_bottom=»» class=»» id=»»][content_box title=»¿Quieres verlo claro y cristalino? Estos son los contenidos que te esperan en este vídeo:» icon=»fa-hand-o-right» backgroundcolor=»#e8e8e8″ iconcolor=»#ffffff» circlecolor=»» circlebordercolor=»» circlebordersize=»» outercirclebordercolor=»» outercirclebordersize=»» iconrotate=»» iconspin=»no» image=»» image_width=»35″ image_height=»35″ link=»» linktext=»» linktarget=»_self» animation_type=»» animation_direction=»» animation_speed=»»]

  • Atributos Async y Defer
    • Sin atributo [ Segundo 0:34 ]
    • Atributo Async [ Segundo 01:02 ]
    • Atributo Defer [ Segundo 01:47 ]
  • Cómo aplicar los atributos Async y Defer a un script [ Minuto 02:06 ]

[/content_box][/content_boxes]

Porque cada detalle cuenta para hacer tu web más veloz y eficiente, sigue los consejos de David y aplícalos cuanto antes.

¿Te ha gustado el vídeo? ¿Quieres darnos tus propias conclusiones?

Esperamos tus comentarios sobre el vídeo, SEO Lover.