Existe una técnica completamente incomparable que le permite mantener el rendimiento de un proyecto web bajo control. Consiste en introducir mecanismos en el proceso de desarrollo, cuyos resultados son claramente visibles. Estos mecanismos están diseñados para recordar siempre al programador la importancia del rendimiento. Hay algo en este contexto que realmente me gusta. Este es el encabezado HTTP Feature-Policy . Este título es una característica relativamente nueva que permite que un desarrollador active y desactive ciertas funciones del navegador mientras navega por su sitio. Por ejemplo, puede decirle al navegador que no debe permitir el uso de la API de geolocalización pasándole el siguiente encabezado:
Feature-Policy: geolocation 'none'
Existen Feature-Policymuchas ventajas al usar un encabezado en términos de seguridad y rendimiento. Pero ahora me gusta especialmente cómo Feature-Policypuede usarlo para hacer que los problemas de rendimiento del sitio web que generalmente son fáciles de pasar por alto sean más notorios. Esto se puede comparar con algo así como el "rendimiento de revestimiento". En particular, estamos hablando de identificar problemas con imágenes utilizadas en proyectos web.Política de imágenes de gran tamaño
Si la imagen se transmite al navegador en un formato compatible, se mostrará dicha imagen. Este es el comportamiento estándar del navegador. El navegador, que trata de ayudar a quienes están viendo la página, también escala automáticamente dichas imágenes. Por lo tanto, se ven bien incluso si están representados por grandes archivos gráficos. Como resultado, si usa imágenes que son más grandes que los tamaños que necesita la página, esto es, a primera vista, invisible.Política ( directiva )oversized-imagesle dice al navegador que no debe permitir el uso de imágenes cuyo tamaño exceda, en un número específico de veces, el tamaño de sus contenedores. La imagen, de acuerdo con la restricción estándar, no puede ser más de 2 veces el contenedor. Pero este valor, si es necesario, se puede redefinir.Por lo tanto, si el navegador recibe el siguiente encabezado, no le permitirá mostrar imágenes tomadas de ninguna fuente (esto se establece gracias none), cuyas dimensiones son más de 2 veces el tamaño de sus contenedores (en ancho o alto).Feature-Policy: oversized-images 'none';
Si necesita más flexibilidad, puede decirle al navegador que no debe mostrar imágenes que sean más de 3 veces más grandes que los contenedores:Feature-Policy: oversized-images *(3) 'none';
En cualquier caso, si la imagen no se ajusta a los límites especificados, se mostrará un código auxiliar en lugar de esta imagen, y se enviará un mensaje de error a la consola.Si el sitio utiliza la política de imágenes de gran tamaño, se cargarán imágenes de gran tamaño, pero se mostrará un trozo en su lugar y se mostrará un mensaje de error en la consolaImágenes sin optimizar
Otro problema común con los gráficos es el uso de imágenes no optimizadas. Muy a menudo puede encontrar imágenes que no se comprimieron adecuadamente. Su tamaño, sin embargo, se puede seleccionar correctamente. Entonces, a los archivos con fotos, al dispararlos y crearlos, se pueden agregar muchos metadatos innecesarios, que a menudo permanecen en los archivos y cuando se usan en los navegadores. Un ejemplo particularmente molesto de esto son las imágenes, cuyos metadatos contienen sus propias miniaturas para la vista previa. Muchas veces vi cómo la miniatura incrustada en la imagen (cuya presencia los diseñadores y desarrolladores ni siquiera sabían), "pesaba" más que la imagen misma.Entre otras cosas, aquí puede recuperar la compresión de imagen habitual, compatible con muchos formatos, que le permite lograr el equilibrio perfecto entre la calidad de la imagen y el tamaño del archivo.Las políticas de imágenes sin pérdida optimizadas y de imágenes sin pérdida no optimizadas le permiten al navegador saber que coincide con el tamaño del archivo y el tamaño de la imagen en píxeles.Feature-Policy: unoptimized-lossy-images 'none';
Feature-Policy: unoptimized-lossless-images 'none';
Si el número de bytes por píxel (Byte por píxel, BPP) es demasiado alto, el navegador mostrará un código auxiliar en lugar de la imagen y mostrará un mensaje de error en la consola.La aplicación de políticas no optimizadas * hace que se muestre un trozo en lugar de imágenes inapropiadas; al igual que con la política de imágenes de gran tamaño, elnivel recomendado de BPP para imágenes comprimidas con pérdida es 0.5 y 1 para imágenes comprimidas sin pérdida. Además, al analizar imágenes, se permite una ligera desviación de su tamaño total de estos niveles. Ahora, esta desviación para las imágenes comprimidas con pérdida es de 1 Kb, para las imágenes comprimidas sin pérdida: 10 Kb.Por ejemplo, supongamos que tenemos una imagen JPEG de 200x200 píxeles. JPEG es un formato de compresión de imagen con pérdida, lo que resulta en un nivel recomendado de BPP de 0.5. Al mismo tiempo, el tamaño total de la imagen puede superar el tamaño recomendado en solo 1 Kb. Para saber qué tamaño debe adaptarse una imagen similar a un navegador, debe multiplicar las dimensiones de los lados de la imagen en píxeles entre sí y por BPP, y luego agregar la desviación permitida a lo que sucede.(200 x 200 x .5) + 1024 = 21,024byte o 20.5KbSi la imagen se comprime sin pérdida, se permite una desviación del tamaño "ideal" de 10 Kb, mientras que el BPP de dicha imagen será 1. De lo contrario, los cálculos se verán exactamente iguales:(200 x 200 x 1) + 10,240 = 50,240byte o 49.1KbEs probable que el tamaño de la desviación permitida cambie en el futuro. De hecho, aunque Blink, por defecto, usa este indicador para imágenes comprimidas sin pérdida, igual a 10 Kb, ya se están realizando experimentos con una política unoptimized-lossless-images-strictque cambia este indicador, bajándolo al nivel de 1 Kb.Medios no especificados
Lo nuevo es lo viejo y olvidado.Durante mucho tiempo el uso de atributos de imagen height, y widthfue más o menos común. Sin estos atributos, el navegador no sabía cuánto espacio debería ocupar la imagen hasta el momento en que se cargó la imagen. Esto condujo a cambios en los diseños de página. Se mostró la página y, luego, cuando llegó la imagen, su contenido cambió. El navegador una vez más tuvo que volver a contar el diseño para asignar espacio para la imagen.Cuando llegó el momento de los diseños en los que los tamaños de las imágenes tenían que redimensionarse de manera flexible utilizando CSS, la presencia o ausencia de estos atributos ya no desempeñaba un papel especial. Como resultado, muchos simplemente dejaron de usar estos atributos.Pero gracias al trabajo recienteiniciado por Jen Simmons, Firefox y Chrome pueden calcular la relación de aspecto de las imágenes en función de sus atributos heighty width. Cuando este enfoque se combina con los estilos aplicados a las imágenes, resulta que los navegadores pueden reservar espacio para las imágenes durante el paso inicial del diseño.La política de medios no dimensionados le dice al navegador que todos los elementos multimedia deben tener atributos que especifiquen los tamaños de estos elementos. Si no hay tales atributos, el navegador debe usar los valores predeterminados. Todo, de hecho, es un poco más complicado, pero la conclusión es que si la imagen no tiene los atributos apropiados, el navegador usa el valor de 300x150píxel estándar .Feature-Policy: unsized-media 'none';
Cuando se aplica esta política, se mostrarán las imágenes, pero si su tamaño no se especifica en HTML, el desarrollador notará rápidamente que las imágenes se muestran en el tamaño predeterminado. Y, como de costumbre, se enviará un mensaje de error a la consola.La aplicación de la política de medios sin tamaño lleva al hecho de que se muestran imágenes y videos sin los atributos de alto y ancho, pero el navegador establece sus tamaños en 300x150 píxeles.Probablemente, vale la pena mencionar una característica que al principio me pareció inusual. Ella se muestra al compartir políticasunsized-mediayoversized-images. En esta situación, uno no debería sorprenderse por la aparición de más que antes, la cantidad de mensajes sobre imágenes demasiado grandes. El hecho es que debido a la aplicación de la política, elunsized-medianavegador cambiaeltamaño de las imágenes que no tienen atributosheightywidthhasta300x150píxeles. Después de lo cual es este tamaño el que utiliza el navegador como punto de referencia para determinar si la imagen coincide con su contenedor.Atraer la atención a problemas menos visibles
En las políticas relacionadas con la imagen, me gusta el hecho de que, en el proceso de desarrollo de proyectos, hacen posible hacer visible lo que generalmente está oculto. Como resultado, el desarrollador descubre que no se encargó de optimizar las imágenes, o que olvidó establecer sus atributos heighty width. Todos estos errores se reflejan inmediatamente en la apariencia de las páginas. De hecho, la principal ventaja de usar las políticas anteriores es que permiten que el desarrollador descubra rápidamente los problemas con las imágenes. Mientras la políticaunsized-mediapuede conducir a una disminución en el número de situaciones en las que ocurren "cambios" de diseños de página; el uso de otras políticas no impide la carga de imágenes inapropiadas. Como resultado, el único punto fuerte de la aplicación de estas políticas es que llaman la atención de los desarrolladores sobre los problemas.Existen varias políticas más que pueden ser útiles en términos de análisis de páginas para determinar el impacto de algo en su rendimiento. Aquí es donde las políticas como sync-script vienen a la mente (esta política bloquea la ejecución de scripts síncronos), sync-xhr(bloquea solicitudes AJAX síncronas) y document-write(bloquea llamadas document.write).Estas políticas son excelentes herramientas para controlar ciertos aspectos del rendimiento de la página, pero no proporcionan a los desarrolladores la misma retroalimentación notable que muchas de las políticas anteriores proporcionan en forma de imágenes faltantes. Por supuesto, si la página tiene una secuencia de comandos síncrona, sin la cual no se muestra, entonces no es fácil pasarla por alto (y esas páginas no son tan difíciles de encontrar). Pero estas políticas generalmente indican errores en forma de mensajes que se muestran en la consola. Y para ser honesto, sospecho que la mayoría de los desarrolladores no prestan mucha atención a la consola (creo que todos deberíamos tener más cuidado con la consola).Pero, sin embargo, podemos hacer que los errores detectados por las políticas "invisibles" sean mucho más notorios usando la APIReportingObserver para monitorear violaciones y para mostrar notificaciones relevantes en la página. Dichas notificaciones pueden hacerse muy notables.let reportingAlerts = document.createElement('ul');
reportingAlerts.setAttribute('id','reportingAlerts');
document.body.appendChild(reportingAlerts);
const alertBox = document.getElementById('reportingAlerts');
new ReportingObserver((reports, observer) => {
let fragment = document.createDocumentFragment();
Object.keys(reports).forEach(function(item) {
let li = document.createElement('li');
li.textContent = reports[item].body.message + ': ' + reports[item].body.featureId;
fragment.appendChild(li);
});
alertBox.appendChild(fragment)
}, {types: ['feature-policy-violation'], buffered: true}).observe();
Esbocé un ejemplo en CodePen de cómo se vería esto.Un ejemplo de cómo puede mostrar notificaciones de infracciones de políticas especificadas por el encabezado Feature-Policy. Dichas notificaciones están diseñadas para la producción en el entorno de desarrollo, o donde el proyecto está preparado para la producción.Menos uso del encabezado Feature-Policy
La gran desventaja de usar el encabezado Feature-Policyes su soporte por parte de los navegadores. Aparentemente, ahora solo es compatible con navegadores basados en Blink (Opera, Edge, Chrome, Samsung). Los navegadores Firefox y Safari admiten el atributo allowde elementos iframe. Pero incluso donde sea Feature-Policycompatible, para garantizar el buen estado de muchas de las políticas, debe habilitar la bandera Experimental Web Platform features(puede encontrarla en la dirección about:flags).Cómo uso el encabezado de característica-política
Ese menos del título Feature-Policy, que se menciona anteriormente, para mí personalmente no es un problema particular. Prefiero usar las políticas definidas por este encabezado como un verificador de página basado en navegador. Por lo tanto, no necesito esforzarme para aplicar Feature-Policyen producción, o para asegurar que las políticas funcionen para todos mis usuarios. Solo los necesito yo, así como aquellos que están desarrollando el sitio. Yo, en cualquier caso, uso Chrome como el navegador principal en el proceso de desarrollo. Por lo tanto, garantizar el rendimiento Feature-Policeen mi entorno de trabajo es habilitar el indicador apropiado. Después de esto, los políticos trabajan sin ninguna intervención adicional de mi parte.Descubrí que la forma más fácil de usar el encabezado es Feature-Policycon una extensión de navegadorModHeader . Esta extensión le permite establecer sus propios encabezados que se pasan a las páginas cuando se visualizan.La extensión ModHeader le permite configurar las opciones del encabezado Feature-Policy. Se pueden activar y desactivar, si lo desea. Tengo tres conjuntos de valores de encabezadoFeature-Policyque uso periódicamente:oversized-images 'none'; unoptimized-lossy-images 'none'; unoptimized-lossless-images 'none';unsized-media 'none'; oversized-images 'none'; unoptimized-lossy-images 'none'; unoptimized-lossless-images 'none';script-sync 'none'; unsized-media 'none'; oversized-images 'none'; unoptimized-lossy-images 'none'; unoptimized-lossless-images 'none';
A menudo mantengo el primero encendido. Es muy emocionante viajar a través de páginas web a las que se aplican las políticas utilizadas. Da miedo ver cuán grandes son algunas imágenes. Hay muchas cosas en la web moderna que podrían mejorarse.Entonces, la política a menudo se desencadena en las páginas unsized-media(y también peco por esto), por lo que su uso durante el trabajo normal en Internet es inconveniente. Es por eso que lo destaco en una política separada, que puedo activar y desactivar. Lo mismo se aplica a las políticas sync-scripts, cuya aplicación "rompe" muchos sitios.Algunos de los equipos con los que trabajé comenzaron a usar las políticas que describí durante el desarrollo. Esto les permite prestar atención rápidamente a problemas previamente invisibles. Por supuesto, recomiendo incluir todas las políticas Feature-Policyen el entorno de desarrollo, lo que le permite identificar y corregir errores rápidamente.Resumen
Espero que el soporte Feature-Policyaparezca, como resultado, no solo en Chrome. Aunque este es mi navegador principal, también tengo que usar otros navegadores. Sería útil si lo apoyaran Feature-Policy. Pero aquí, sin embargo, vemos esa rara situación en la que incluso el apoyo experimental de una determinada oportunidad es suficiente para que sea realmente beneficioso.Los problemas sutiles de rendimiento también son problemas. Y la capacidad de hacer que tales problemas sean más visibles es uno de los mejores métodos que un desarrollador puede usar para identificarlos y solucionarlos.¡Queridos lectores! ¿Planea utilizar el encabezado Feature-Policy para identificar problemas discretos en proyectos web?