• Categoría de la entrada:blog / News
  • Última modificación de la entrada:septiembre 6, 2022

JavaScript es un lenguaje de programación utilizado principalmente por los navegadores web para crear una experiencia dinámica para el usuario. La mayoría de las aplicaciones que hacen que Internet sea indispensable para la vida moderna están codificadas bajo esta plataforma. ¿Deseas conocer los trucos esenciales que recomienda Google Search Central (GSC) para optimizar JavaScript? Entonces sigue leyendo.

¿Cómo optimizar JavaScript según GSC?

Muchos desarrolladores conocen la importancia de optimizar JavaScript. De forma que hacerlo se convierte en una tarea permanente. Para ellos, un código optimizado es la combinación de lógicas programadas inteligentemente y pequeños trucos que logran un mejor rendimiento, mayor velocidad y un ahorro de tiempo. Conscientes de esto, Alan Kent y su equipo de e-commerce en Google entregan una serie de pasos que puedes aplicar en tu web:

LA DISTRIBUCIÓN DE CONTENIDOS EN EL MUNDO ACTUAL

1. Evita la proliferación de archivos para optimizar JavaScript

Como era de esperarse, desde Google se recomienda el uso de herramientas como PageSpeed Insights para detectar problemas. Estas buscarán mantener bajas las solicitudes de recuento de paquetes de datos; así como reducir los tamaños de transferencia de estos. Al respecto, se plantean dos estrategias:

  1. Por un lado, la compilación de archivos más pequeños para obtener un archivo único que pueda ser descargado.
  2. Por el otro, admitir HTTP/2 en una web. Esto suele mejorar sustancialmente el rendimiento, sin usar la técnica de unir archivos.

2. Limita las búsquedas de DNS

Un servidor DNS generalmente se refiere a un servidor de computadora. En él se encuentran alojados toda la base de datos de direcciones IP públicas y sus nombres de host asociados. A partir de ellos se deriva una problemática que se da al momento de la conexión con una página. En consecuencia, se ejecutan una variedad extrema de búsquedas de DNS para los datos reportados en registros de JavaScript de referencia. Algo que ocasiona que se ralentice la primera carga de un sitio web.

En este apartado se recomienda crear una copia con las secuencias de comandos con referencia externa a tu propio sitio web. De esta manera, lograrás optimizar JavaScript y reducir la cantidad de búsquedas de DNS.

3. Erradica JavaScript ineficiente

PageSpeed ​​Insights está capacitado para detectar comportamientos anómalos, permitiendo a su vez optimizar JavaScript. Por ejemplo, revela los scripts que gastan CPU en exceso, al tiempo que corre el código JavaScript. También detecta los archivos que bloquean el renderizado de la página.

Para mejorar esta parte, deberás pensar en una asesoría experta que te permita reescribir el código. Así podrás producir tus propias versiones reducidas de componentes con base en este lenguaje.

4. Elimina JavaScript no utilizado

Cuando reutilizas el código en varios sitios, corres el riesgo de incluir JavaScript que no es necesario. En este apartado, Kent menciona cómo PageSpeed permite detectar JavaScript que no se ejecutó durante la carga de la página. Para mejorar en este aspecto, Google recomienda una técnica llamada “la sacudida del árbol”. A través de ella, se puede identificar JavaScript que no es llamado y que de seguro se puede eliminar.

5. Comprime archivos JavaScript

Este suele ser uno de los salvavidas más utilizados al momento de optimizar JavaScript. Es cierto: descomprimir el contenido del archivo requerirá más tiempo de CPU. Sin embargo, Google afirma que la compresión aporta beneficios a largo plazo. Si se configura correctamente, la mayoría de los sistemas de administración de contenido tendrán soporte incorporado para comprimir descargas.

6. Establece duraciones de caché para el código JavaScript

El éxito en este proceso radica en asegurar que tus archivos JavaScript tengan encabezados de tiempo de caducidad de caché. Como resultado, esto ahorrará la sobrecarga a los navegadores que determinan si los archivos JavaScript en tu caché están desactualizados. Algo que eventualmente mejora la productividad. Empleando PageSpeed e ingresando al menú titulado “Publica elementos estáticos con una política de caché eficaz”, podrás mejorar el tiempo de carga.

10 HERRAMIENTAS DE MARKETING DE CONTENIDOS

¿De qué otras maneras puedes optimizar JavaScript?

Una prueba dura te dará una idea clara de cuánto depende tu sitio web de JavaScript. Puedes verificarlo deshabilitándolo en tu navegador y viendo qué tan diferente se ve.

Ahora que eres consciente de su importancia, puedes ensayar una estrategia de carga de elementos por orden. Primero, es importante que todos los elementos en la sección <head> estén precargados, antes de que el visitante vea algo en el navegador. Luego, todos los elementos subsiguientes deberán ser ordenados para cargarse de manera lógica.

Cualquier JavaScript dentro de la sección <head> puede ralentizar la representación de tu página. Así que revisa si es estrictamente necesario contar con ellos en ese lugar. Finalmente, como descubrirás, existen numerosas tecnologías y técnicas para ayudarte a optimizar JavaScript. No es obligatorio usarlas todo el tiempo porque los casos y condiciones variarán. Sin embargo, al hacerlo verás excelentes resultados en el corto y mediano plazo.

¿Qué tan útil fue esta publicación?

¡Haz click en una estrella para puntuarla!

Puntuación media 5 / 5. Recuento de votos: 1

No hay votos hasta ahora! Sé el primero en calificar esta publicación.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Cerrar menú
account android arrow-alt-circle-down arrow-alt-circle-left arrow-alt-circle-right arrow-alt-circle-up arrow-down arrow-left arrow-right arrow-up author bars behance blogger buffer caret-down caret-left caret-right caret-square-down caret-square-left caret-square-right caret-square-up caret-up cart-menu-1 cart-menu-2 cart-menu-3 cart-menu-4 categories chevron-down chevron-left chevron-right chevron-up clock close comments cookies copyright coupon-discount date-modified date-published discord double-arrows-down double-arrows-left double-arrows-right double-arrows-up dribbble envelope-open envelope eye facebook fax flickr foursquare github gmail google-drive grid-view hashtag hollow-ring homepage instagram ios level-down-alt level-up-alt line link linkedin list-view login logout long-arrow-alt-down long-arrow-alt-left long-arrow-alt-right long-arrow-alt-up medium messenger mobile-menu mobile phone pinterest place qq quote-left quote-right quotes reading-time-hourglass reading-time-stopwatch reddit rss scroll-to-top search shazam shopping-bag shopping-cart side-panel-opening-2-left side-panel-opening-2-right side-panel-opening-left side-panel-opening-right skype slack small-arrow-down small-arrow-left small-arrow-right small-arrow-up sms snapchat soundcloud spinner spotify stackoverflow sync telegram tiktok times-circle tinder trello tripadvisor tumblr twitch twitter viber vimeo vine vkontakte website wechat whatsapp windows wishlist xing yelp youtube zoom