Demo Github
Para que nuestra web sea mas accesible a los buscadores, una característica indispensable que estos motores de búsqueda nos piden es que nuestra web cargue más rápido, cuando una web esta cargada de muchos plugins para darle ciertas interacciones como una galería de fotos y videos, plugin para validar formularios, para redes sociales, para dejar un comentario con nuestra red social favorita, etc. Sea el plugin que usemos al instalarlo en nuestra web esta se hace más pesada y por ende menos accesible a los buscadores para que nos posicionen rápidamente. En este tutorial aprenderemos a como correr un plugin de jQuery asincrónicamente.
Lo que voy hacer es retrasar la carga de un plugin que estoy usando en mi proyecto, para ello usare el método jQuery.getScript() de jQuery el cual nos va hacer una petición ajax al servidor que hará que la descarga del plugin se lleve a cabo en segundo plano para que no afecte el rendimiento y la velocidad de la carga del contenido de nuestra web que se cargará paralelamente al mismo tiempo que el plugin jQuery.
El Plugin Fancybox
Por ejemplo si decido usar la librería Fancybox para mostrar fotos y videos en mi web, en mi HTML llamaré a este plugin:
|
1 2 3 4 |
<!-- Plugin Fancybox --> <script type="text/javascript" src="js/jquery.fancybox-3.5.7.min.js"></script> |
Con ello ya tengo instalado el plugin, ello de por si ya supone un carga extra a mi servidor y por ende va mas lento.
Aplicamos el método getScript
Bien ahora vamos a dar solución y cargaré mi plugin Fancybox de manera asíncrona, para ello voy a usar el método getScript() de jQuery en donde colocare la ruta en donde se encuentra alojado mi plugin y jQuery hará el llamado del plugin de manera asíncrona
|
1 2 3 4 5 6 7 8 |
<!-- Carga del plugin Fancybox con el método getScript de jQuery --> <script type="text/javascript"> $(document).ready(function(){ $.getScript("js/jquery.fancybox-3.5.7.min.js"); }); </script> |
El método anterior es una forma abreviada equivalente al método Ajax de jQuery
|
1 2 3 4 5 6 7 |
$.ajax({ url: url, dataType: "script", success: success }); |
Con esto podemos optimizar la carga de un sitio web, va haber proyectos en donde van a tener que usar mas plugins y seria ideal que apliquen este método que jQuery nos brinda para mejorar el SEO y google los posicione más rápido, recordemos que cuando una web carga rápida y no tiene mucha carga de plugins es mas rápida y accesible a los robots que pasan a revisar nuestra web y posicionarla.
Nota(s)
- En futuras versiones de jQuery el método abreviado getScript() puede ser modificado, eliminado o continuar, esto no depende de nosotros si no de los desarrolladores que dan soporte a jQuery.
No olvides seguirnos en nuestras redes sociales y suscribirte a nuestra canal de Youtube para que recibas más tutoriales como este que te van ayudar mucho en tu desarrollo profesional.