Lighthouse de Google ahora recomienda alternativas de biblioteca de JavaScript

Publicado: 2021-01-06

Usando la noción de un faro como metáfora, Google Lighthouse aleja a los desarrolladores de las rocas al arrojar luz sobre los problemas que descubre en una base de activo por activo. Con comentarios específicos sobre mejoras de rendimiento y seguridad, los informes incluyen referencias a medios que podrían usar el cambio de tamaño con compresión, políticas de caché nuevas o diferentes y archivos vinculados que contienen bloques de CSS y/o JavaScript sin usar.

Sin embargo, hasta septiembre, Google no estaba llamando a las bibliotecas de JavaScript.

Y ahora, las advertencias se graduaron para aparecer en Page Speed ​​Insights.

Una palabra sobre JavaScript

En el mundo de JavaScript de código abierto, los desarrolladores se apoyan en los desarrolladores que los precedieron, especialmente aquellos que resolvieron algo que, de otro modo, tendría que ser resuelto por un nuevo autor de la biblioteca. El sistema de empaquetado de JavaScript predominante NPM (Node Package Manager) facilita la inclusión de bibliotecas preexistentes en su proyecto. En el punto de partida, un proyecto de JavaScript dado es siempre la punta de un iceberg hecho de mucho más JavaScript debajo, generalmente almacenado por NPM en el directorio .node_modules .

Es lógico que los proyectos, especialmente aquellos creados con un marco sofisticado, solo utilicen un pequeño porcentaje del código disponible, en gran parte a través de numerosas dependencias de biblioteca. Es por eso que existe un proceso de optimización conocido como "sacudida del árbol" para agrupar solo lo que un proyecto determinado utiliza activamente tanto como sea posible. La sacudida de árboles no siempre funciona bien con bibliotecas más antiguas debido a los objetivos cambiantes de mantenerse al día con la sintaxis moderna y los patrones de codificación.

Acerca de los marcos

Los marcos facilitan la vida de los desarrolladores al eliminar la complejidad de tomar decisiones sobre su biblioteca, configurar paquetes y escribir scripts para automatizar los procesos de optimización para la producción. Con una receta de "inicio rápido" que se encuentra en la mayoría de la documentación, los desarrolladores pueden comenzar a ejecutar secuencias de comandos de interpretación de línea de comandos preescritas que vienen como parte de la mayoría de los marcos empaquetados. Un ejemplo de esto es la aplicación Create React, que crea un código de aplicación React en blanco listo para que lo desarrolle más en una aplicación web.

$ npx crear-reaccionar-aplicación mi-aplicación

Ejecutar el comando anterior crea un directorio "mi aplicación" y genera todo el árbol de directorios de la aplicación React en él, completo con todos los archivos necesarios y las dependencias de la biblioteca. La optimización de su paquete de producción, que puede contener código de varias bibliotecas de Javascript, es quizás la razón más importante por la que los paquetes de marco modernos tienen herramientas y pasos que eliminan los bloques de código no utilizados y minimizan la salida para la producción.

Cuando elige usar un marco, acepta, quizás sin conocer todos los detalles, las decisiones difíciles de arquitectura, configuración y dependencias de la biblioteca de ese marco. Aquí está la guía para optimizar React para la producción de los creadores de la popular biblioteca frontend utilizada actualmente por muchos proyectos y marcos como NextJS.

Es muy común que un puñado de bibliotecas más antiguas (muy útiles en su día) hayan encontrado su camino en los paquetes de proyectos como dependencias. Los sitios web, las bibliotecas y los marcos creados antes de los hitos de JavaScript muestran su antigüedad cuando se usa código obsoleto, ya que JavaScript progresa fundamentalmente a un ritmo tan vertiginoso. Lighthouse ahora sirve como un faro para advertirle cuando su proyecto incluye código antiguo o vulnerable.

MomentoJS

Una biblioteca notable, MomentJS (con 12 millones de descargas por semana a partir de septiembre de 2020), es la primera que Lighthouse señala que tiene algunas opciones mejores. La lógica de Google aquí es irrefutable y bastante conocida. En respuesta, la propia página de inicio y la documentación de Moment ahora reflejan los consejos proporcionados en los informes de Lighthouse. El momento es una característica congelada, con solo actualizaciones de estabilidad planificadas.

Otras bibliotecas que Google tiene bajo el microscopio son Lodash y posiblemente Underscore. Se han expresado sentimientos negativos legítimos sobre esto en toda la comunidad de desarrolladores, con más de un desarrollador llamándolo "tóxico" o "dañino" para la comunidad de código abierto. Las quejas tienen que ver con que Google “avergüenza” a las bibliotecas sin dar suficiente contexto y promover alternativas que pueden perjudicar el descubrimiento de alternativas de bibliotecas más pequeñas y menos conocidas.

Si bien todo eso es cierto, también es cierto que tienes que romper huevos para hacer una tortilla. El progreso a menudo perjudicará a algunas personas. Google se basa en una referencia de terceros (BundlePhobia) para recopilar listas de bibliotecas alternativas. Además, examinan las opciones en función de una "barra alta de equivalencia" y "facilidad de migración" según lo determine el equipo de Lighthouse.

Los autores de bibliotecas menos conocidos pueden participar enviando su biblioteca al servicio. Además, un desarrollador comentó que, dado que Google ahora recomienda bibliotecas oficialmente, deberían ayudar a financiar el código abierto mediante una donación al proyecto y un miembro del equipo en Twitter acordó comenzar a hacerlo a partir de 2021.

Lo que esto significa para TechSEO

Es cierto que los practicantes de TechSEO no tienen que ser desarrolladores para ser excelentes en su trabajo. También es cierto que cuanto más familiarizado esté con la lucha que atraviesan los desarrolladores, tal vez aprendiendo un poco sobre la codificación y al menos comprendiendo los detalles de Lighthouse de Google tanto como sea posible, mejor podrá comunicar problemas y soluciones prácticas a los desarrolladores. .

Reemplazar MomentJS al por mayor puede ser desde súper fácil hasta terriblemente complejo para el destinatario de la noticia que necesita reemplazar. A menos que usted mismo sea un desarrollador, o al menos haya intentado incursionar en un poco de desarrollo web utilizando bibliotecas y marcos de JavaScript modernos, será difícil para usted saber cuán doloroso puede ser cambiar una biblioteca como Moment por una alternativa más pequeña para un proyecto particular.

Tiene que ver con cuánto se ha integrado esa biblioteca en el código base. Es posible que los patrones de código deban reescribirse por completo en una aplicación. Cuanto más grande y más interconectado sea el código base de la aplicación, más difícil será lograr el reemplazo. No siempre es tan simple como decir "Simplemente use una de las bibliotecas alternativas que Google le dice que use en su lugar".

Uno de los pensamientos desalentadores que pueden ocurrir cuando el aprendizaje tiene que reemplazar el Momento proviene del hecho de que los Objetos en la biblioteca están escritos para ser mutables (cambiables). Mantener este patrón se considera necesario para la compatibilidad con versiones anteriores y esto realmente complica la sustitución de Moment con otra biblioteca. Es posible que sea necesario escribir bloques completos de código para que su aplicación se adapte al hecho de que los valores de variables asignados mediante Moment en algún lugar de una cadena de llamadas no se pueden contar como valores inmutables dentro de la base de código de su aplicación.

Un patrón moderno que se basa en objetos inmutables de una biblioteca más nueva es más estable. Para llegar allí, puede ser necesario reescribir mucho cada instancia en la que se usa Moment.

SEO para desarrolladores

La optimización de JavaScript para la producción como una tarea está en gran medida en la timonera de TechSEO trabajando en código, o proporcionando comentarios a un desarrollador que puede no estar familiarizado con SEO, ya que los desarrolladores deben comprender la optimización del rendimiento en primer lugar. No se puede suponer que los desarrolladores conocen BundlePhobia, Lighthouse o SEO.

Si llegaste hasta aquí y deseas saber más sobre programación para brindar un mejor servicio a tus clientes, estás de suerte. Este año, vamos a producir el Taller de SEO para desarrolladores como complemento opcional de la serie de conferencias SMX. La información presentada tendrá como objetivo guiar su viaje desde donde sea que se encuentre como profesional de TechSEO, hasta donde sea que nuestros caminos colectivos nos lleven a la codificación. Dado lo rápido que avanzan las cosas, ¡el cielo es el límite!