Diseño WebEliminar el renderizado o bloqueo de JavaScript y CSS en WordPress

Eliminar el renderizado o bloqueo de JavaScript y CSS en WordPress

En este artículo vamos a ver como el eliminar el bloque de Js y CSS en WordPress.

Introducción

La velocidad de carga del sitio web es uno de los factores más importantes para atraer y captar visitantes. Si no hay ningún problema, el sitio web que produjo un más rápido más atractivo para los usuarios. Esto ocurre porque los motores de búsqueda consideran la velocidad del sitio para hacer el ranking de los resultados de búsqueda. Por lo tanto, si quieres hacer que tus competidores se revuelquen en SEO, entonces prioriza la velocidad de tu sitio.

Medir la velocidad de un sitio web no es necesariamente ejecutar sin problemas.

Hay muchas causas que pueden afectar la forma de comprobar la velocidad de su sitio web – velocidad de conexión a Internet, ubicación geográfica, etc.
Aquí es donde puedes aprovechar las percepciones de Google Pagespeed. Este servicio gratuito es proporcionado por Google y sirve para determinar el sitio web de puntuación basada en la velocidad. Idealmente, usted quiere conseguir su cuenta tan alta como sea posible en el pagespeed.
Y si usted ha estado utilizando esta herramienta en línea, usted encontrará instrucciones eliminar el renderizado-bloqueo de JavaScript y CSS en un contenido por encima de la doble en el sitio web que no debe seguir.

¿Qué es eliminar el renderizado-bloqueo de JavaScript y CSS en un contenido?

Te hace falta

Corregido el error elimina la representación-bloqueando JavaScript y CSS en un contenido sobre el doblez
Conclusión
¿Qué es eliminar el renderizado bloqueo de JavaScript y CSS en un contenido por encima de la doble?

Para entender esto con más profundidad, tenemos que mirar los criterios de Google para valorar la cuenta en el sitio PageSpeed Insights.

Reglas para la velocidad de carga según Google

Hay diez reglas en cuanto a la velocidad de carga de un sitio web que ha establecido Google, y si no se aplica una de estas reglas, se traducirá en una reducción de puntos o el valor.

La representación-bloqueo de JS y CSS en un contenido por encima de la doble ? es una de las diez de estas reglas. Específicamente, el script en JS y CSS para forzar al navegador web a retrasar la carga de la página HTML.
Por supuesto, esto no es un gran problema. De hecho, eso es lo que quieres; nadie quiere ver contenido que no ha sido presentado.

Sin embargo, el renderizado-bloqueo de JS y CSS se refiere a la secuencia de comandos, que lleva la latencia de carga pero no se utiliza en el contenido por encima del pliegue (ATF).

El contenido de ATF se refiere a una parte de una página web que es visible cuando la página estácargando; cada parte de la página que tiene que desplazarse hasta la parte inferior no es ATF.

Así, a través de este manual, Google quiere informarle que hay un script JS y CSS en esta página web que hace que la ralentización no tenga que estar en la página web, ya que parte de la página ralentizada incluso no puede ser observada por el usuario.

En este tutorial de WordPress, utilizamos Google PageSpeed Insights para identificar la representación de secuencias de comandos de bloqueo. A continuación, te mostraremos cómo solucionar este problema en su sitio web de WordPress mediante el uso de tres métodos diferentes.
Además, la mera sugerencia, también debe buscar otras formas de optimizar la velocidad de carga de su sitio web de WordPress con el fin de atraer a más visitantes.

¿Que necesitas?

Antes de iniciar este tutorial, necesitas:

– Acceso al área de administración de WordPress
Corregido el error elimina la representación-bloqueando JavaScript y CSS en un contenido sobre el doblez

– JS y CSS es lo más importante para cualquier sitio web moderno para trabajar no sólo al más alto nivel, sino también en todas las partes. Sin embargo, definitivamente hay una mala actuación. Aunque hay varias maneras que puedes utilizar para hacer su sitio más rápidamente, como posponer el análisis de JavaScript, a veces eso simplemente no es suficiente.

Por supuesto, estábamos hablando de la renderización-bloqueo de JavaScript y CSS.

Para resolver esta cuestión, primero debemos asegurarnos de que este problema realmente existe y no se ha solucionado.

Después de recibir la confirmación de los scripts de bloqueo de renderizado en el sitio web, el siguiente paso que necesitamos es buscar diferentes posibilidades de mejora.

Paso 1 – utilizar Google Insights para la búsqueda de PageSpeed renderizado-bloqueo de JS y CSS

El primer paso para superar el bloqueo de renderizado es medir kcepatan su sitio web utilizando Google PageSpeed Insights. Visita la página de Google PageSpeed Insights, y en la columna Input, pega (pega) la URL de tu sitio. Haga clic en analizar para obtener informes sobre su sitio. La mayoría de los sitios de valor o puntuación oscilaron entre 50-70; Este debe ser el punto de referencia para la puntuación de su sitio Web. Junto con la partitura, Google hará una lista de sugerencias con el fin de mejorar el rendimiento de su sitio.

eliminate-render-blocking-javascript-css-above-the-fold-1.png

Para que pueda entender mejor el error que el bloqueo representa , entonces usamos el sitio web real. En la captura de pantalla de arriba, se puede ver que hay varios recursos bloqueando JS y CSS.

Si después de medir la velocidad de la página web con herramientas como PageSpeed Insights también obtener instrucciones eliminar la representación de bloqueo de JavaScript y CSS en un contenido por encima del doble, entonces usted debe seguir leyendo este tutorial de WordPress.

Una cosa importante a tener en cuenta es que su propósito aquí no es para conseguir una puntuación perfecta de 100, en el PageSpeed Insights. Preferentemente, haga su mejor esfuerzo para obtener una buena puntuación sin tener que sacrificar el tiempo navegando por los visitantes del sitio en su web. 

Si hay una secuencia de comandos importante en su sitio de WordPress para tener una buena experiencia de usuario no lo elimine para obtener una puntuación más alta en el PageSpeed Insights. 

Las reglas en las que Google da la puntuación en su sitio sólo es aplicable como una directriz, y todavía debe ser considerado como tal.

Paso 2 – mejorar el renderizado-bloqueando JavaScript y CSS

Opción 1 – utilizar el W3 Total Cache

Ahora ya sabe sobre el código de bloqueo de representación en su sitio Web. Ahora tiene varias opciones para resolverlo. 

Recomendamos descargar un plugin que facilite las cosas al enfrentarse a este tipo de problema. Uno de nuestros favoritos es el plugin W3 Total Cache. Instalar y activar en el plugin. 

Tan pronto como el plugin esté instalado, siga estos pasos:

Funcionamiento abierto – configuración general. Buscar minify encabezado en la página.

Bajo el encabezado tendrá algunas opciones. La primera opción es minify; Marque la casilla de activación junto a esa opción.

Modo de opciones de minify, seleccione manual y haga clic en guardar todos los ajustes.

w3-total-cache-minify-settings.png

En este punto, debe eliminar todos los scripts JS y CSS que provoquen el bloqueo de la representación. 

Estos dos guiones se pueden encontrar a través de Google PageSPeed Insights. 

Si no PageSpeed cerró la pestaña como se sugiere en el paso 1, entonces usted encontrará el texto para mostrar cómo corregir el clic en la dirección de la representación de bloqueo. 

Haga clic en el texto. Después de eso, todas las listas que contienen el script y la hoja de estilos provocan que se pueda conocer el bloqueo del renderizado.

Volver a WordPress. Open performance-> minify. Usted debe proceder a minify JS archivos y CSS por separado.

Primero, echemos un vistazo al JS. En esa página, localice el encabezado JS. A continuación, verá las operaciones de las piezas en las áreas. Seleccione no bloqueo mediante diferir como tipo para incrustar la etiqueta antes<head>.</head>

w3-total-cache-js-minify-settings.png

En la subsección encabezado JS files Management, seleccione el tema activo y haga clic en el botón Agregar el script. a continuación, copie (copie) la URL de la ficha script del PageSpeed JS y pegue (pegue) el script uno por uno. Este paso Fix JS archivo.

add-js-resources-w3-total-cache.png

Ahora es el momento de manejar CSS. En la misma página, desplácese hacia abajo para buscar la sección de la CSS. En la subsección encabezado Administración de archivos CSS, seleccione el tema activo y haga clic en agregar una hoja de estilos. Igual que JS script, copiar/pegar (copiar/pegar) la hoja de estilos de las percepciones a esta sección pagespeed.

css-file-management-w3-total-cache.png

Finalmente, haga clic en el botón Guardar configuración y purgue la caché.

Volver a Google PageSpeed Insights para comprobar si el bloqueo de renderizado podría haberse resuelto. Desde la captura de pantalla de abajo, se sabe que puede gestionar la configuración del W3 Total Cache resulta ser superado el error de JavaScript y CSS en un contenido por encima del doble en el sitio que probamos.

Elimine el renderizado-bloqueo de JavaScript y CSS en un contenido por encima de la doble se ha abordado en WordPress

Si desea más control sobre el doblez, compruebe su contenido por encima de la optimización de pliegues. Este plugin está diseñado específicamente para el contenido de ATF y puede ser usado con otros plugins populares, tales como W3 Total Cache y Autoptimize.

Opción 2 – Use Autoptimize

Un método más fácil para abordar el problema de la renderización-bloqueo es utilizar otro plugin llamado Autoptimize. Descargue e instale el plugin, una vez finalizado el proceso de instalación, vaya a la configuración-WordPress Autoptimize >. Marque la casilla optimizar código JavaScript? y optimizar el código CSS? y haga clic en el botón Guardar cambios y en la caché vacía.

autoptimize-settings.png

En general, este paso es suficiente para superar el problema de la renderización-bloqueo (dependiendo de los temas y los plugins están activos). Para averiguar si esta manera poderosa, a continuación, ir a su sitio a través de PageSpeed Insights una vez más.

google-page-speed-insights-after-autoptimize.png

Como se puede ver en la captura de pantalla de arriba, dejando sólo 1 Autoptimize recurso bloqueando JS y 1 bloqueando el recurso CSS.

Si desea realizar otras optimizaciones, vuelva a la configuración-> Autoptimize. Haga clic en el botón Mostrar configuración avanzada. Aquí, marque en la opción también agregan en línea JS y también agregan CSS en línea. Luego, termine haciendo clic en guardar cambios y vaciar caché. Para ver si este paso es exitoso, abra las PageSpeed Insights una vez más.

Opción 3 – uso del paquete Booster Speed

Otros plugins populares que pueden ser útiles para hacer frente a la representación-bloqueo en su sitio de WordPress es Speed Booster Pack. Descargue y active el plugin. 

Usted encontrará las opciones en la sección configuración-> Speed BOSTER Pack en el área de administración de WordPress/

Para el script JS, debe habilitar el movimiento de secuencias de comandos en el pie de la base y diferir el análisis de archivos JavaScript.

speed-booster-pack-settings.png

Para la renderización o bloque de CSS, abrir el menú todavía necesita más velocidad?. Aquí encontrarás ajustes adicionales relacionados con la optimización de CSS; me-minify CSS, mueve el estilo CSS en línea al pie de la base y yo-cargando CSS son asincrónicos.

speed-booster-pack-need-more-speed-settings-1024x261.png

Debe intentar estos pasos de optimización para encontrar la mejor manera – activar todas las optimizaciones con el fin de aumentar la velocidad de carga de su sitio Web. Es sólo que, un flash de contenido sin estilo (Fouc) que no se espera que aparezca. 

Esto sucedió porque en el momento en que la página web del navegador carga tensiones sin esperar la hoja de estilo para cargar resultando en un flash momentáneo en el diseño de la página. Para asegurar que el renderizado-bloqueo ya no es un gran problema, entonces revisa Google PageSpeed Insights una vez más.

Puedes ampliar información sobre Los mejores Plugins de Captación y Gestión de Leads para WordPress Los mejores plugins de redes sociales para WordPress por si quieres conocer otro tipo de plugins para WordPress.

Conclusión

La representación-bloqueo dio una influencia negativa en la velocidad y el rendimiento de su sitio web de WordPress. 

En tutoriales de WordPress, hemos aprendido a superar eliminar el renderizado-bloqueo de JavaScript y CSS en un contenido por encima de la doble en su sitio Web. 

Aunque el sitio que todavía tiene el script y la renderización de hojas de estilo de bloqueo es necesario, este tutorial se espera que le ayudará a tratar con problemas como este.

Si las formas de mejora de lo anterior incluso hacen que la funcionalidad de su sitio esté comprometida, asegúrese de seguir el código de bloqueo. Tenga en cuenta que la velocidad del sitio sólo se asocia con un mayor rendimiento de su sitio web: no es necesario comprometer la funcionalidad básica. 

Por lo tanto, si todavía hay código de bloqueo de representación en su sitio, entonces no se preocupe. 

Categories: Diseño Web

Comments

No Comments Yet. Be the first?

Post a comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies