Pregunta sobre Autoptimize de Wordpress:

Aplazamiento de CSS

Un usuario preguntó 👇

Hola

Utilizo el plugin CriticalCSS para Autoptimize y lo he configurado para usarlo.

Sigo viendo un problema con «Aplazar CSS no utilizado» en Google Page Speed ​​Insights y el principal culpable es el archivo autoptimize_4f5035da460555b39c0083be68e69392.css.

Tengo algunos puntos aquí.

1. ¿Podrías poner el enlace CSS normal en el cráneo, pero dentro de las etiquetas

Eso dejaría la carga de CSS perezosa y no crítica después de la página, lo que conduciría a un rendimiento mucho mejor para los visitantes móviles.

(@optimizingmatters)

Hace 2 años

1. ¿Podrías poner el enlace CSS normal en el cráneo, pero dentro de las etiquetas

que _casi_ es exactamente lo que hace AO; * CSS noscript se agrega en el encabezado * JS fragmento está en el pie de página para cargar el CSS para navegadores no compatibles rel="preload"

Una diferencia; el CSS completo se carga antes de cargar, sin bloquear la representación. Estoy viendo esto con la gente detrás de loadCSS (eso es lo que AO usa y Google recomienda), por lo que podemos cambiar eso.

Pero, ponga las cosas en contexto; Google está cambiando el nombre de «Aplazar CSS no utilizado» a … «Eliminar CSS no utilizado» en Lighthouse, que está basado en GPSI, lo que sugiere que el enfoque no está tanto en la sección diferida, sino en la función de «CSS no utilizado».

Espero que esto aclare, honestamente

Lanzador de hilos

(@ hades200082)

Hace 2 años

Gracias por la respuesta rápida … Me di cuenta de la sutil diferencia en el nombre en GPSI justo después de publicar.

Una cosa a tener en cuenta sobre su enfoque …

utilizando el atributo onload de la etiqueta hace que la acción queme una carga cuando la etiqueta cargado … no cuando la página se está cargando. Esto puede hacer que se libere antes de que se complete la carga de la página, y aún habrá capacidad de bloqueo, especialmente en una conexión más lenta como la móvil.

¿Podría ser mejor hacerlo de la siguiente manera…?

1. Continúe dando la precarga y el número, pero sin ninguna carga. 2. Adjunte una pequeña etiqueta de secuencia de comandos asíncrona al pie de página, justo antes de la etiqueta del cuerpo final que está buscando. link[rel="preload"] e intercambiar con ellos para rel="stylesheet"

(@optimizingmatters)

Hace 2 años

Si no me equivoco, se considera que la descarga de CSS bloquea el procesamiento, no el análisis, por lo que el CSS en línea (crítico) tampoco bloquea el procesamiento.

Pero de manera más general; Quiero mantenerme al día con el estándar de la industria y (levemente) respaldado por Google loadCSS-solution en lugar de seguir mi propio camino 🙂

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada.