Framehole: laguna de PageSpeed ​​6.0 para una puntuación perfecta fácil

Todo buen desarrollador web sabe que PageSpeed ​​Insights de Google y el Lighthouse de código abierto que se usa entre bastidores son las herramientas más avanzadas para ayudar a identificar el rendimiento relativo de un sitio web. También ofrecen información clave sobre los cambios que puede realizar para mejorar esta velocidad percibida. PageSpeed ​​se ha convertido en la medida estándar de oro de velocidad y lentitud en la web.

No está de más que los mismos Google ahora estén rastreando este puntaje de PageSpeed ​​de cada sitio web y usándolo como una de las muchas entradas para determinar quién llega a la parte superior de los resultados de búsqueda y quién es exiliado al purgatorio de la página 10.

Hay toda una industria y muchos millones de dólares cambiando de manos solo para optimizar y mejorar esta puntuación con la esperanza de acercarse a la puntuación perfecta inalcanzable de 100. La última versión de PageSpeed/Lighthouse 6.0 incluye un nuevo conjunto de métricas favoritas para los desarrolladores de todo el mundo. optimizar para. Estas nuevas métricas son: pintura con contenido más grande (LCP), cambio de diseño acumulativo (CLS) y tiempo total de bloqueo (TBT). Google tiene un artículo completo que explica estos nuevos "Web Vitals" que hace un excelente trabajo al detallar el meollo de la forma en que se miden.

Con este nuevo lanzamiento, es una nueva oportunidad para que la industria del rendimiento web venda más servicios, ya que los sitios web ahora necesitan cambios nuevos y diferentes para lograr esa puntuación máxima. Bueno, no es necesario que gaste un centavo, le mostraré un cambio simple que lo llevará de inmediato incluso desde las profundidades del infierno de 60 puntos hasta el cielo de 100 puntos.

TLDR: PageSpeed ​​ya no tiene en cuenta los impactos de velocidad de incrustaciones de terceros como YouTube y Ads

Si solo quiere la esencia de esto, la respuesta es que los últimos cambios de Google le dan una gran importancia a la pintura con contenido más grande. Esta es la medida de cuánto tiempo tarda en aparecer el elemento más grande en la pantalla al cargar un sitio web. Es un buen indicador de la percepción que tiene un usuario de la velocidad de carga. El problema es que la pintura con contenido más grande no considera ningún contenido incrustado, incluso si ese contenido califica técnicamente como el elemento más grande en la mitad superior de la página.

Sin especular sobre las motivaciones para no mostrar el impacto en el rendimiento del contenido incrustado de terceros, como los videos de YouTube y las grandes inserciones publicitarias, simplemente diría que incentivará a las personas a realizar los cambios incorrectos para mejorar la velocidad y hará que la web retroceda.

Como ejemplo, eso parecería absurdo, aunque no improbable dada la importancia que se ha vuelto la puntuación de PageSpeed. Mejoramos la puntuación de PageSpeed ​​de un sitio web de 60 a 100, simplemente con iframeing en la versión lenta original del sitio web. Los comandos rápidos solo para confirmar los resultados están aquí, pero lea a continuación para ver cómo un usuario que optimiza su puntaje progresa a nuestra solución Framehole definitiva.

 # Verify you have the new Lighthouse 6.0 installed npm install -g lighthouse # This one should have a score somewhere around 60 :( lighthouse https://webvitalsfail.b-cdn.net/ --view # Instantly to 100 lighthouse https://webvitalsfail.b-cdn.net/anything-100.html --view

Cat Dance v1 - Enlace

Este es un sitio web de ejemplo simple que muestra una página de promoción de aspecto típico para nuestra aplicación móvil, "Cat Dance". Cuenta con un gif animado súper genial para demostrar los gatos bailarines que obtienes al instalar nuestra aplicación recién salida de la prensa en tu teléfono. Ahora veamos la puntuación de Lighthouse 6.0 para este sitio web:

Guau, una puntuación de rendimiento de 60 es dolorosa para los que tienen un rendimiento superior como nosotros. ¿Cómo podría este simple sitio ser tan lento según Google? Centrémonos en la "Pintura con contenido más grande", ya que es una de las nuevas métricas nuevas introducidas en esta versión.

Esto es muy útil ya que recomienda usar un video para contenido animado y nos muestra que el elemento de pintura con contenido más grande es el gif animado de nuestros gatos bailarines. Genial, pasemos a:

Cat Dance v2 - Enlace

En esta versión, reemplazamos el gif animado con un mp4 reproducido usando el elemento de video HTML5 nativo. Esto debería ser mucho mejor ya que los mp4 se hicieron literalmente para contenido animado y serán mucho más pequeños que el gif animado comparable.

Bueno, esto ciertamente se está moviendo en la dirección correcta. Mejoramos en 14 puntos simplemente cambiando a un mp4 para la animación de nuestros impresionantes gatos bailarines. Pasar de un LCP de 104,9s a 9,9s es sin duda una mejora sustancial. Pero no estamos contentos con un 74. Eso es como una calificación de "C" y somos un grupo de triunfadores A+.

Parece que nuestro LCP ahora es generado por el video, lo que tiene sentido en lugar del gif animado anterior. Pero tal vez estemos haciendo un mal trabajo con la codificación, la imagen del póster o algo así, así que juguemos con eso a continuación.

Cat Dance v3 - Enlace

Para esta versión, solo usaremos YouTube para el video del gato animado. De esa manera, si se trata de algo relacionado con la codificación de video, esto ayudará a eliminar eso. En general, tal vez nuestra ingenua codificación de video nos esté frenando, así que veamos qué puntaje obtenemos de esta manera.

Espera un segundo, estos muchachos son genios, subieron mi puntuación de PageSpeed ​​hasta 99. Realmente debemos haber cometido un error en la codificación de nuestro video para haber causado la puntuación de 76, ¿verdad?

¿Hay algo mal aquí? En las versiones anteriores, los gatos bailarines eran siempre el elemento más grande de la pantalla. Y mirar las capturas de pantalla de esta prueba muestra que el video sigue siendo del mismo tamaño en esta versión. Entonces, ¿por qué afirma que el texto de nuestro <h1> es el elemento más grande? La respuesta está en la descripción de Google de la métrica de mayor pintura con contenido. Esta métrica incluye el elemento más grande que incluye video, imágenes, SVG, PERO NO IFRAMES

¿Esperar lo? Esto no puede estar bien. Si el iframe es el elemento más grande y se carga lento como la melaza, no importa... ¡no se cuenta! Por lo tanto, los iframes son como agujeros negros de rendimiento mágicos donde podemos incrustar nuestros elementos lentos o grandes y no afectarán nuestra puntuación de rendimiento. ¡De ninguna manera! Probemos esto.

Cat Dance v4 - Enlace

Para probar nuestra teoría, volveremos a nuestro sitio de la versión 1 exacta con el gran gif animado y todo. Solo haremos un único cambio. Carguemos el gif animado en un iframe y veamos qué sucede con nuestra puntuación de PageSpeed.

Mierda... ¿realmente puede ser esta la solución? Simplemente tomamos cualquier problema que esté causando que el puntaje de velocidad de un sitio web disminuya, lo colocamos en un iframe, luego BOOM, no más problemas. Quiero decir que sabemos que esto realmente no cambia la rapidez con la que se cargan las cosas, porque es el mismo archivo, del mismo tamaño, simplemente cargado en un iframe. Al igual que sucedió al usar la inserción de YouTube, en realidad no cambió tanto la velocidad. Los iframes son solo portales mágicos para superar la puntuación de PageSpeed.

Pero tener que mover todos nuestros elementos lentos a iframes es una especie de dolor en el trasero...

Cat Dance v5 - Enlace de Framehole'd

Necesitamos una forma más sencilla de aumentar inmediatamente la velocidad de cualquier sitio web. Tener que reemplazar elementos de forma selectiva con versiones iframed es muy complicado y puede que no valga la pena a largo plazo. Sabemos cómo trabajar de manera más inteligente en lugar de más duro.

¿Qué pasa si ponemos todo el sitio en un iframe? De esta forma, nuestra solución estaría separada del código base real del sitio. Incluso podríamos hacer este tipo de cosas en el borde, o en NGINX, separando totalmente esto del impacto en cualquier código existente.

Nuestro v5 es solo la página de v1, iframed en un envoltorio vacío. El mismo gran gif animado, sin optimizaciones. Y ahora hemos pasado de 60 a 100. Es el santo grial y no se necesita hacer ningún trabajo en el sitio web real.

esto es tonto

Si está pensando que este es el aceite de serpiente más grande que jamás haya visto y ningún desarrollador en su sano juicio se preocuparía por este cambio de puntaje ya que la velocidad subyacente no cambió ni un poco, entonces creo que está en el frente del aceite de serpiente, pero muy equivocado sobre si a la gente le importa.

Recuerde, PageSpeed ​​es el estándar de oro en rendimiento web. Google incluso usa esta puntuación para alimentar su algoritmo. Si nunca ha escuchado de un cliente que quiera ver cómo su producto afecta su puntaje de PageSpeed, entonces no ha hablado con suficientes clientes. Les importa porque a Google le importa , y se supone que la puntuación significa algo. Mire cuántas palabras me tomó explicar esto e imagine decirle a un cliente que está equivocado acerca de que su producto ralentiza el sitio en comparación con el puntaje de PageSpeed ​​simplificado y fácil de entender, proclamando cuán equivocado está.

Cualquiera que sea la razón de esto, al final del día, elegir excluir iframes de los cálculos de cuánto tiempo tarda en aparecer el contenido más importante en un sitio web es simplemente incorrecto.

Usar el tiempo de visualización del elemento más grande como indicador de velocidad en un sitio web tiene todo el sentido del mundo. Todavía afecta la percepción de la velocidad incluso si está cargado en un iframe. Y avanzar con una puntuación que excluya el contenido incrustado es perjudicial para el objetivo de hacer que la web sea más rápida. El contenido incrustado no obtiene un pase gratuito, especialmente cuando es la causa de los tiempos de carga lentos.

Si la puntuación se implementa con estas métricas web, nos encontraremos con una web incentivada para volver a un sitio de retazos con mucha publicidad e incrustaciones de terceros, sin tener en cuenta el costo de la velocidad de esos elementos. No tenga dudas de que habrá personas que implementarán exactamente el iframe de todo el sitio como se menciona en este artículo, porque la administración quería el puntaje de PageSpeed ​​más alto posible.

El comportamiento está determinado por la forma en que mantenemos la puntuación