Cómo eliminar JavaScript y CSS que bloquean la representación en WordPress

Cómo eliminar JavaScript y CSS que bloquean la representación en WordPress

Tener un sitio web que se carga rápidamente es crucial si desea clasificar alto en las páginas de resultados del motor de búsqueda (SERP).Es por eso que PageSpeed Insights de Google está ahí para ayudarlo a optimizar la velocidad de carga de su sitio.Si obtiene la herramienta "Eliminar la representación de bloqueo de JavaScript y CSS en la mitad superior" mientras usa la herramienta, no se preocupe.En este artículo, le mostraremos cómo solucionar el problema.

Conozca la advertencia "Eliminar JavaScript y CSS que bloquean la representación en contenido por encima del pliegue"

Si sigue las reglas de velocidad de página de Google, eliminar JavaScript y CSS que bloquean la representación es una de ellas.Cualquier error en esto dará lugar a una velocidad de carga de página más lenta.Pero, ¿cómo pueden JavaScript y CSS en su página HTML ralentizar su sitio?

Bueno, cada vez que instalas un nuevo tema o plugin, añaden código JavaScript y CSS al front-end.Como resultado, los navegadores pueden tardar más en cargar la página.

Por encima del pliegue (ATF) es la parte de la página web que está visible la primera vez que se carga la página.Cualquier parte de la página a la que tienes que desplazarte hacia abajo para llegar no es ATF.

Por lo tanto, si aparece código JavaScript y CSS irrelevante cuando los visitantes cargan su sitio web, puede recibir una alerta para reducir el número de JavaScript y CSS que bloquean la representación en recursos de contenido por encima del pliegue.

Obtén información sobre la representación de bloqueo de JavaScript y CSS con Google Page Speed Insights

El primer paso para arreglar la congelación de renderizado es probar la velocidad de su sitio utilizando Google PageSpeed Insights.Siga estos pasos para hacer esto:

  1. Visita la página y pega la URL de tu sitio web en el campo "Introducir una URL de página web".
  2. Haga clic en Analizar para obtener el informe.

    La mayoría de los sitios tienen una puntuación entre 50 y 70; esto debe servir como un punto de referencia para su puntuación.Google también enumerará consejos para mejorar el rendimiento de tu sitio web.

    Anota información sobre la velocidad de la página de Google de tu sitio web

Si también encuentra la sugerencia de eliminar JavaScript y CSS que bloquean la representación en contenido por encima del pliegue, deberá solucionar el problema.
elimina javascript y css que bloquean la representación en lo anterior la advertencia de contenido de plegadoTenga en cuenta que no debe forzar a su sitio web a obtener una puntuación perfecta de 100. Simplemente haga todo lo posible para obtener una buena puntuación sin sacrificar la experiencia del usuario.

Si hay scripts en su sitio de WordPress que son esenciales para una experiencia de usuario robusta, no debe eliminarlos sólo para obtener una puntuación ligeramente más alta en PageSpeed Insights.

Las reglas en las que Google clasifica sus sitios web son sólo directrices y deben tomarse como tales.

(Eliminar javascript y CSS que bloquean la representación en contenido por encima del pliegue) error

Con WordPress, reducir los recursos de JavaScript y CSS que bloquean la representación en su sitio de WordPress es simple.Puedes usar los tres plugins que hemos enumerado a continuación:

Caché total W3

Uno de nuestros favoritos es el plugin W3 Total Cache.Una vez instalado y activado, siga estos pasos en el panel de administración de WordPress:

  1. Vaya a Rendimiento -> Configuración general .
  2. Busque el encabezado Minify en la página.A continuación, verá algunas opciones bajo este título.
  3. Marque la casilla Habilitar para minimizar.A continuación, para la opción Minimizar modo , seleccione Manual.
  4. Pulse Guardar todos los ajustes .
    minimizar los recursos de script css y js con el plugin de caché total w3
  5. Descargue todos los scripts de JavaScript y CSS que bloquean la representación, que puede encontrar a través de Google PageSpeed Insights.
  6. Una vez que haya encontrado al alborotador, vuelva a Rendimiento -> Minimizar en su panel de WordPress.
  7. Busque la sección JS.En la sección Operaciones de área, seleccione el tipo de incrustación sin bloqueo usando "differ" para la etiqueta B ephore <head> .
  8. Para administrar archivos JS, elija el tema activo y haga clic en el botón Agregar script.Copie y pegue urls de JavaScript de Google Page Speed Insights en los campos proporcionados, como se muestra a continuación.
    Eliminar recursos JS de bloqueo de renderizado con W3 Total Cache plugin
  9. Desplázate hacia abajo y busca la sección CSS.Para administrar archivos CSS, elija el tema activo y haga clic en Agregar una hoja de estilo.De forma similar al paso anterior, copie las direcciones URL de las hojas de estilos CSS de PageSpeed Insights y péguelas en los campos necesarios.
    Elimine los recursos jss que bloquean la representación con el complemento W3 Total Cache
  10. Finalmente, haga clic en el botón Guardar configuración y eliminar caché .

Propiedad autoptimize

Alternativamente, puede usar el complemento Autoptimize para resolver la representación de bloqueo de errores javascript y css.Realice estos pasos en el panel después de instalar y activar el complemento:

  1. Vaya a Configuración -> Optimizar automáticamente.
  2. Marque las casillas para ¿Optimizar el código JavaScript? "¿Y optimizar el código CSS?
  3. Pulse el botón Guardar cambios y borrar caché .
    Optimice CSS y JavaScript con el plugin Autoptimize

En la mayoría de los casos, esto es suficiente para corregir la alerta.Sin embargo, el resultado puede variar dependiendo del tema y los plug-ins activos.

Para asegurarse de que el problema se ha solucionado, vuelva a ejecutar el sitio a través de PageSpeed Insights.Si le quedan recursos JS y CSS de bloqueo, lleve la optimización aún más siguiendo estos pasos:

  1. Vuelva a Configuración -> Optimizar automáticamente.
  2. Pulse el botón Mostrar configuración avanzada .
  3. Luego, verifique las opciones para También agregar JS en línea y También agregar CSS en línea.
    configuración avanzada para optimizar css y js agregando también CSS y JS en línea
  4. Guarde los cambios.

Paquete de refuerzo de velocidad

Otro complemento popular que puede resultarle útil para corregir errores de bloqueo de renderizado javascript y css para su sitio web de WordPress es Speed Booster Pack.Para ello, sigue estos pasos en tu área de wp-admin:

  1. Ve a la sección Speed Booster Pack y accede a la pestaña Avanzado .
  2. En el menú Optimización de JavaScript , habilite Mover script a pie de página y Reenviar análisis de archivos JavaScript.
    Habilite la navegación de scripts en el pie de página y el aplazamiento del análisis de archivos JavaScript en la sección Optimización de JavaScript para corregir la eliminación de bloques de representación javascript y CSS en el error de plegado anterior
  3. Desplácese hacia abajo hasta el menú Optimización de CSS para establecer la optimización del bloque de representación CSS.
  4. Encontrará ajustes adicionales para alinear todo CSS, minimizar todo (previamente) CSS integrado y mover todo el CSS integrado en el pie de página.Experimente con estas opciones para encontrar una solución adecuada.
    Experimente con optimizaciones CSS para encontrar la solución adecuada

    Simplemente habilitando todo esto cargará su sitio más rápido, pero también podría introducir el artefacto no deseado de contenido no extendido (FOUC).Esto sucede cuando el navegador carga la página web sin esperar a que se cargue la hoja de estilos, lo que provoca un flash de página momentáneo no editado.

Después de probar los métodos anteriores, vuelva a PageSpeed Insights de Google para asegurarse de que el bloqueo de representación ya no es un problema.

Conclusión

La velocidad del sitio web es uno de los factores más importantes para atraer y retener visitantes.Esto se debe a que los motores de búsqueda tienen en cuenta la velocidad del sitio al clasificar los resultados.

PageSpeed Insights de Google califica los sitios web en función de la velocidad de carga.Si está recibiendo la infame representación de bloqueo de JavaScript y CSS en sugerencias sobre el pliegue al analizar el rendimiento de su sitio de WordPress, simplemente solucione el problema con los complementos.

Esperamos que este tutorial sea útil para usted.Siéntase libre de comentar a continuación si tiene alguna pregunta.¡Buena suerte!

Open

info.ibdi.it@gmail.com

Close