Cerca

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 ayudarte a optimizar la velocidad de carga de tu sitio.Si recibe la herramienta "Eliminar JavaScript y CSS que bloquean la representación en contenido por encima del pliegue" mientras utiliza 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 nos fijamos en las reglas de velocidad de página de Google, la eliminación de 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 corregir el bloqueo de representación es probar la velocidad de su sitio mediante 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 la URL de una 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 Minify.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 encuentre el plantaína del piso, vuelva a Performance -> Minimizar en el panel de WordPress.
  7. Busque la sección JS.En la sección Operaciones en regiones, seleccione el tipo de incrustación sin bloqueo utilizando "differ" para la etiqueta Efore B <head>.</head>
  8. Para la administración de 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 encuentra la sección CSS.Para la administración de archivos CSS, elija el tema activo y haga clic en Agregar una hoja de estilos.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. Por último, haga clic en el botón Guardar configuración y elimine la memoria caché.

Propiedad autoptimize

Como alternativa, puede utilizar el complemento Autoptimize para resolver el error javascript y css que bloquea la representación.Realice estos pasos en el panel después de instalar y activar el complemento:

  1. Ve a Configuración -> Automáticamente.
  2. ¿Marca las casillas para Optimizar 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, marque las opciones para también agrega js en línea y también agrega 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 plugin popular que usted puede encontrar útil para la corrección de errores de javascript y la representación de bloqueo 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 Paquete de refuerzo de velocidad y ve a la pestaña Avanzado.
  2. En el menú Optimización de JavaScript, habilite Mover script a Pie de página y Aplazar el 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ázate hacia abajo hasta el menú Optimización de CSS para establecer la optimización de bloques 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 habilitar todo esto cargará su sitio más rápido, pero también podría introducir el artefacto no deseado de contenido no planchado (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 puntúa sitios web en función de la velocidad de carga.Si usted está recibiendo el infame Delete JavaScript y CSS que bloquean la representación en sugerencias por encima de la redil al analizar el rendimiento de su sitio de WordPress, simplemente solucione el problema con los plugins.

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