Cómo eliminar los recursos que bloquean la representación de WordPress

“Recursos que bloquean la representación”. Si ha visto esta apariencia mientras prueba la velocidad de su sitio o se ha escuchado como una causa común de baja velocidad de carga, probablemente esté confundido. Buscando formas de acelerar su sitio web y deshacerse de cualquier código extranjero que lo ralentice, pero ¿dónde comienza a solucionar esto? Afortunadamente para ti, la eliminación de los recursos que bloquean la representación no es tan difícil una vez que sabes qué hacer. Un complemento simple puede hacer un truco, o incluso puede cuidarlo manualmente si prefiere hacerlo.
¿Totalmente perdido? Explicaremos en términos simples cuáles son los recursos que bloquean la representación, cómo saber si su sitio tiene y qué puede hacer al respecto. ¿Cuáles son los recursos que bloquean la representación? Cuando alguien visita una página desde su sitio, debe descargar (o “representar”) su contenido. Incluye código, a saber, HTML, CSS y JavaScript. Y si no hace todo lo posible para cambiarlo, cada script tendrá que cargarse antes de que el usuario pueda ver algo. Eso significa bloquear la reacción: detenga la pantalla de la página hasta que el usuario esté cargado. Todo lo que recibirán es una pantalla blanca vacía.

¿Pero por qué? Con HTML, tiene sentido que bloquee la representación. HTML es el núcleo de su sitio, donde se encuentra todo el contenido. Sin él, no tendrías un sitio web para cargar. Y HTML suele ser muy pequeño, por lo que la descarga no lleva mucho tiempo. Los problemas pueden ocurrir con CSS y JavaScript. CSS afecta el estilo de su página; Coloque los elementos, determine la apariencia y haga que su sitio sea receptivo. Sin CSS, su sitio se vería como un gran bloque de texto con algunos enlaces e imágenes. Y JavaScript hace que su sitio web sea dinámico, cambiando su aspecto en la caminata. Además, los complementos de WordPress pueden usarlo para agregar funcionalidades a su sitio. Aquí está el problema: no todos los scripts son inmediatamente visibles. Todo lo que necesita para mostrar todo correctamente es cualquier estilo CSS y elementos de JavaScript que aparezcan sobre el pliegue. El resto se puede empujar hacia atrás de manera segura, de modo que la página se pueda mostrar antes de que la carga termine por completo. Si tiene recursos útiles JavaScript y CSS, lo que obliga a los usuarios a esperar más de lo que debería, verá el error de bloquear la rebelión al probar su sitio. ¿Por qué deshacerse de los recursos que bloquean la representación? Entonces la gente tiene que esperar unos segundos más (¡o incluso milisegundos!) Para cobrar, ¿a quién le importa? Pero puede tener un mayor impacto en sus visitantes de lo que podría pensar.
Fuente: Google Cuando se trata de los tiempos de carga, cada segundo es importante. Cada vez más propietarios de sitios web aprenden cómo comprimir sus imágenes y código, y las personas se basan en esas velocidades de carga más altas. Si no se mantiene al día, es probable que hagan clic y encuentren otro sitio. También hay personas en dispositivos móviles menos potentes o en Internet más lento. Es posible que pueda cargar su propio sitio relativamente rápido en una computadora de escritorio, pero las personas en teléfonos o tabletas pueden luchar y esperar unos segundos solo para pasar la pantalla blanca. Entrega para hacer todo lo que está en su poder para deshacerse de cualquier cosa que puedan bloquear Tú sitio. Incluso las pequeñas optimizaciones, como eliminar los recursos del bloque de renderizado, pueden marcar una gran diferencia para algunas personas. ¿Su sitio tiene Randid bloqueando los recursos? Puede estar aquí porque le han dicho que su sitio tiene los recursos de recursos y no está seguro de cómo remediarlo. Pero si aún no lo ha probado, ahora es el momento de hacerlo. Hay varios servicios gratuitos que pueden resaltar los bloqueos comunes que afectan su velocidad de carga, y pueden decirle si tiene scripts en su sitio que es ineficiente.

PageSpeed ​​Insights es la más popular de estas herramientas. Puede ingresar a cualquier URL deseada para ver cuál es su puntaje. Continúe e ingrese la dirección de su sitio ahora.
Después de unos segundos, aparecerán los resultados. Desplácese hacia abajo y encontrará oportunidades que puede aprovechar para mejorar los tiempos de carga, junto con las auditorías que su sitio ha pasado. Si tiene los recursos de recursos de recursos, debería verlos en la pestaña Oportunidad. Puede preguntarse: ¿es importante obtener una puntuación perfecta para la velocidad de la página? La respuesta es que depende. Recuerde que esta es una herramienta automatizada y es solo una guía para ponerlo en el camino correcto. Si sacrifica la funcionalidad o experiencia del usuario de obtener una puntuación perfecta, no gana absolutamente nada. Pero los recursos de bloquear la rebelión son ciertamente algo que querrá escapar, así que obtengamos de algunas maneras para eliminarlos. La eliminación manual de CSS y JavaScript que bloquea la representación definitivamente no es necesaria para tratar este problema manualmente, porque hay muchos complementos que son mucho más fáciles de usar y los cubriremos a continuación. Pero si se siente cómodo navegando por código y prefiere usar la menor cantidad de complementos posible, puede hacer todo esto en cualquier momento. Para optimizar JavaScript, puede elegir scripts individuales que se reproducen a continuación en la página y puede agregar un atributo async o un atributo de deferencia. Más información sobre W3Schools aquí y aquí.
Con la carga de carga predeterminada de la reacción, cada vez que el navegador cumple con un archivo JavaScript, detendrá la carga HTML para descargarla y ejecutarlo. El atributo Async le permite continuar descargando HTML con JavaScript, pero detendrá la descarga por un corto tiempo para ejecutar el script. El atributo se hace igual, pero ejecuta el script solo después de que el HTML haya terminado de analizar. ¿Cuándo debe usar alguno de los atributos? Async a veces puede romper los scripts que dependen del orden de carga, como JQuey, por lo que cuando tienes dudas, usa diferir; siempre ejecuta los scripts en el orden correcto. Puede usar Async en scripts independientes que no se basan en nada más para la carga. La representación CSS que bloquea la representación puede tomar un poco más de trabajo. Puede en línea CSS que se reproduce sobre el redil, colocándolos en la sección del documento HTML. Sin embargo, haga esto solo con archivos pequeños y solo estilos que el espectador verá instantáneamente. En cuanto al resto de su CSS, puede agregar atributos asíncronos o posponidos como en JavaScript. También puede agregar consultas de medios a ciertos estilos, de modo que solo se cargan en situaciones específicas. Nota: La pestaña de portada de los desarrolladores de navegador puede ayudarlo a identificar rápidamente los elementos que sus visitantes primero deben cargar y ayudarlo a identificar el código no utilizado que podría eliminarse.

Complementos para eliminar los recursos que bloquean la representación Aunque puede optimizar JavaScript y CSS sin tocar un complemento de WordPress, no tiene que hacer todo este trabajo. Es posible que no se sienta seguro de trabajar con un código confidencial o solo desea un instrumento que sea mejor de manera eficiente. Si este es el caso, uno de estos complementos hará muy bien el trabajo. Solo una nota: antes de usar cualquiera de estos complementos, asegúrese de hacer una copia de seguridad de su sitio si algo no va bien. La autooptimización de JavaScript y la asincronización hechas por el mismo desarrollador, estos dos complementos tienen como objetivo ayudarlo a detener esos scripts de hinchazón de la página y mover el código crítico a la cabeza donde se carga el primero.
La auto-cabeza es un complemento de optimización todo en uno. Además de reducir las imágenes, HTML y otros scripts también pueden integrar CSS y posponer scripts no críticos. Todos estos están disponibles haciendo clic en un botón. Los desarrolladores pueden personalizar el complemento para sus necesidades con opciones avanzadas y una API. Pero la mayoría de los usuarios solo tendrán que marcar dos casillas para solucionar el problema de bloquear la reacción. Simplemente vaya a Configuración> Optimización automática de back-end y active la optimización del código JavaScript y la optimización del código CSS.
Esto generalmente hará esto, pero si tiene problemas, puede experimentar con opciones y activación o deshabilitar archivos JS/archivos CSS agregados. Es una buena idea comenzar con autoaptizado y, si aún tiene penalizado por los recursos que bloquean la representación, pruebe los asyncjs para limpiar cualquier extremo. Su uso es tan fácil. Vaya a Configuración> JavaScript Asynchronous y verifique para activarlo. Aquí puede elegir entre async o diferir. Pruébelo y, si Async hace que su página se rompa, active el diferencial. También debe posponer o excluir a JQuey, porque la activación de Async definitivamente destruirá su sitio. WP Rocket
Una desventaja de la autoevaluación es que puede ser un poco difícil de configurar. WP Rocket es un complemento premium especialmente diseñado para la facilidad de uso, independientemente de su nivel de habilidad. Memoriza en caché, se comprime, minimiza y, por supuesto, pospone los recursos que bloquean la representación. A $ 49 al año (y puede continuar usándolo sin ayuda o actualizaciones para siempre), es bastante accesible para todas las funciones que ofrece y, por supuesto, una configuración fácil. WP Rocket viene con dos configuraciones para eliminar los scripts que bloquean la representación: optimizar la entrega de CSS y JavaScript cargado. Para activarlos, vaya a Configuración> WP Rocket> Optimización de archivos. Habilite las dos configuraciones mencionadas anteriormente y estará listo. Mientras esté aquí, también puede reducir JavaScript y CSS para una carga aún más rápida. Caché total W3

Este último complemento está un poco más involucrado. Le pedirá que identifique y bloquee manualmente los archivos que causan el error de bloqueo de rango. Si prefiere marcar una casilla y terminar, entonces debe probar el cohete WP o la auto -tiempo, pero W3 Total Cache le permite tener un control más fino sobre los archivos para posponer otra ventaja de caché W3 sobre otro complemento Es que probablemente ya usted ya sea que ya sea que ya sea que ya sea que ya sea que ya usted ya tenerlo instalado. Se encuentra entre los complementos de caché más populares (y cada instalación de WordPress debería tener uno), por lo que no tendrá que inflar el sitio con suplementos adicionales. Después de instalar el complemento, lo primero que querrá hacer es regresar a las ideas de PageSpeed. Bajo la eliminación de los recursos que bloquean la representación, debe ver una lista de archivos JavaScript y CSS que causan el problema. Mantenga la página abierta para copiarlos más tarde. Vuelva a la placa de WordPress, vaya a la configuración general de rendimiento y asegúrese de que Minify esté activado y configurado en modo manual.

Ahora vaya al rendimiento> Minimización. Bajo la configuración de minimización de JS, en el cuadro de operaciones en áreas, coloque hacia adelante el tipo de incorporación a la loca usando “aplazamiento”.

Luego, en la administración de archivos JS, haga clic en Agregar un script e inserta los archivos JavaScript en PageSpeed ​​que causan problemas uno por uno. Luego desplácese hacia abajo al administrar archivos CSS y haga clic en Agregar una hoja de estilo. Inserte la URL en la hoja de estilo para la que ha sido penalizado.