Como parte de los tutoriales de Core Web Vitals, hablé sobre First Contentful Paint y ahora es el momento de trabajar en First Input Delay.
First Input Delay, también conocido como FID, es parte de Core Web Vitals y también se convertirá en un factor de clasificación en 2021.
FuenteNo hay mejor momento que ahora para optimizar sus sitios para Core Web Vitals y dejarnos aprender cómo optimizar FID en WordPress.
Optimice y mejore el retraso de la primera entrada en WordPress.Optimice el retardo de la primera entrada (FID) en WordPress
Veamos primero, ¿qué es el retardo de la primera entrada?
El retardo de la primera entrada (FID) mide el tiempo entre la primera interacción de un usuario en la página y el tiempo que tarda el navegador en responder a la interacción.
En pocas palabras, cuando visitas una página, el texto se vuelve visible primero y luego los demás elementos. Incluso si los textos son visibles, no podrá desplazarse por la página ni ampliar las imágenes ni hacer clic en ningún elemento basado en JavaScript. Después de algunas veces, estos elementos estarán disponibles para interactuar.
Esto es lo que mide la FID. El tiempo que transcurre desde la primera interacción del usuario hasta el momento en que el navegador responde a la interacción
¿Quién es responsable de una FID deficiente? JavaScript.
Es necesario optimizar el Análisis y ejecución de Javascript. en sus páginas web para mejorar el FID.
A continuación se encuentran mis técnicas de optimización de Javascript favoritas. Soy
1. Eliminar JavaScript no deseado
Cuando se trata de WordPress, los temas y complementos mal codificados son la causa principal de una mala experiencia de JavaScript en sus sitios.
Su objetivo final debería ser elegir un buen tema de WordPress basado en un marco y no utilizar un tema barato.
Antes de optimizar cualquier JavaScript, puede verificar los JavaScript que se ejecutan en su sitio y eliminar los no deseados.
Abra la página de inicio de su sitio, haga clic derecho y haga clic en Inspeccionar elemento y vaya a la pestaña Red. Ahora seleccione JS y verá todo el JavaScript que pertenece a su sitio.
Este es un sitio aleatorio que elijo entre los resultados de SERP.
Cuando pasas el cursor, Chrome muestra qué complemento tarda más en cargarse. Obviamente, debe elegir un buen alojamiento TTFB para reducir el tiempo de respuesta inicial del servidor, como se describe sobre la optimización LCP.
Ahora ordene el tiempo y verifique cada JS de su sitio. Sin pensarlo dos veces, elimina los complementos necesarios del nivel mínimo al moderado. Algunos de los complementos más comunes que inyectan dicho JS son
- Creadores de páginas como WPBakery
- Compartir en redes sociales como AddThis, ShareThis
- Complementos para publicaciones relacionadas como YARP
- Complementos de seguridad como Wordfence
- Complementos de diseño elegante, etc.
Soy un gran admirador de los creadores de páginas, pero luego me di cuenta de que están destinados únicamente a diseñar páginas de destino y no a ser utilizados en publicaciones de blogs habituales.
Si su empresa de hosting tiene seguridad WAF, no necesita un complemento de seguridad. Elija un tema que tenga funciones integradas para compartir en redes sociales, opciones de publicaciones relacionadas y que no dependa de los creadores de páginas. Neve es uno de esos temas que me ha impresionado en los últimos meses y sin olvidar Astra y GeneratePress, que también se desarrollan con menos JS.
Los tres temas anteriores se envían con Vanilla JavaScript en lugar de jQuery, lo que reduce significativamente los recursos de bloqueo de renderizado listos para usar.
Mientras que arriba mostré un sitio no optimizado y así es como se ve bloggingio.com JS
Solo conservé el JS más esencial y eliminé el resto, razón por la cual nuestros resultados de Core Web Vitals son mejores.
2. Reducir la ejecución de JavaScript
El JS generado por sus complementos se cargará en todas las páginas independientemente del caso de uso. Thrive Ultimatum es un excelente complemento de marketing para mejorar las conversiones. Pero al mismo tiempo, el complemento JS se carga en todas las páginas incluso si no tiene promociones activas en su sitio.
Del mismo modo, los creadores de páginas como Elementor agregarán muchos elementos JS incluso si no los usas.
Para optimizar JS aquí, complementos de WordPress como Limpieza de recursos de WP y PerfMatters te ayuda a cargar JS selectivo por página. Si no utiliza creadores de páginas en una página, puede desactivar la carga de su JS. Este es uno de los métodos subestimados que pueden solucionar fácilmente el FID en WordPress.
Para este tutorial, estoy considerando PerfMatters ya que hace el trabajo más fácilmente que cualquier otro complemento del mercado.
Una vez instalado el complemento, habilite Administración de scripts en la pestaña Extras.
Vaya a cualquier URL que deba optimizarse y haga clic en Administrador de secuencias de comandos en la barra de administración.
Ahora, el complemento muestra todos los CSS y JS cargados en la página y simplemente puede elegir APAGADO para deshabilitar la carga de JS desde la página.
3. Minimizar y comprimir JavaScript
WP Rocket hace este trabajo con facilidad, aunque muchos complementos gratuitos lo agradecen Optimización automática hace el mismo trabajo. Dado que WP Rocket es un complemento de optimización todo en uno, lo recomiendo para obtener mejores resultados.
Junto con Minify, pocos sitios recomiendan Combinar archivos JavaScript para reducir las solicitudes HTTP.
Pero no hagas esto si tu sitio usa HTTP/2, ya que perjudicará la entrega de tus scripts. La concatenación de archivos JS solo es necesaria si su sitio utiliza HTTP/1.
Además, en lugar de la minificación JS basada en complementos, recomiendo optar por la minificación basada en CDN como se explica en la publicación LCP para obtener mejores resultados.
¿Cómo comprimir archivos JS en WordPress?
Brotli y Gzip son los dos algoritmos de compresión para realizar esta función. Pregúntele a su proveedor de alojamiento web o consulte su cPanel para habilitar estas opciones.
4. Posponer el análisis de JavaScript
Para ver una página web, el navegador primero debe representar el HTML.
Cuando un navegador intenta hacer este trabajo y encuentra un JavaScript, debe detenerse, solicitar el archivo, esperar a que se descargue del servidor y luego ejecutarlo. Después de eso, el navegador continúa analizando el HTML.
Para evitar esto, debe dejar de bloquear la visualización de JavaScript en sus sitios de WordPress.
Vaya a la pestaña Optimización de archivos en WP Rocket y habilite la opción Cargar JavaScript diferido y también marque Modo seguro para jQuery para admitir referencias jQuery en línea de temas y complementos.
5. Optimización JS avanzada
Si bien las técnicas de optimización anteriores se pueden lograr mediante complementos y código, algunas de las mejoras de JS requieren un desarrollador.
Nuestro equipo encontró un sitio que utiliza cuestionarios como su principal programa de monetización y que involucra un gran conjunto de JavaScript que realizan tareas que requieren mucho tiempo.
Cualquier tarea JS que tarde más en ejecutarse se considera una tarea larga. Google recomienda división de tareas largas lo que puede reducir el retraso de entrada en su sitio.
En conclusión
Esta es nuestra primera copia para mejorar FID en WordPress. Estamos probando dos formas de implementaciones avanzadas, pero los códigos no son los mismos para todos los sitios, lo que requiere pruebas intensivas del tiempo de carga del sitio y los cambios de código.
También estoy explorando nuevos complementos que puedan optimizar aún más el FID y actualizaré este tema más a fondo.
/Pronto.
