Al crear un sitio web, hay algunos aspectos que son fundamentales para ofrecer a los usuarios una experiencia fluida. Uno de estos aspectos está representado por el tiempo de carga. Los visitantes que desean encontrar lo que buscan lo más rápido posible siempre aprecian un sitio web que se carga rápidamente . Para obtener un tiempo de carga rápido, debe aprender a eliminar JavaScript y CSS que bloquean la representación en el contenido de la mitad superior de la página.

La velocidad de un sitio web puede verse influenciada por una amplia gama de factores, pero los factores discutidos en este artículo tienen el mayor impacto. La ecuación del sitio web perfecto puede ser difícil de resolver, ya que ciertos elementos no dependen de sus acciones. Están dictados por cada situación en particular (por ejemplo, ubicación geográfica, velocidad de Internet). Sin embargo, puede optimizar la entrega de CSS modificando los elementos que puede controlar por completo. Obtenga más información sobre este tema a continuación en este artículo creado por nuestro equipo en wpDataTables.

Definición de bloqueo de visualización y contenido de la mitad superior de la página

bloqueo de procesamiento

El bloqueo de procesamiento se refiere a los elementos que evitan que el contenido crucial de un sitio web (por ejemplo, el cuerpo del texto principal de un artículo) se cargue antes de que se cargue toda la página. Un buen ejemplo de un elemento de este tipo está representado por cualquier JavaScript o CSS adicional que se agregue a un sitio web. Este código puede evitar que el usuario vea algo en su navegador hasta que el código se haya ejecutado por completo, lo que se convierte en un bloqueo de procesamiento.

Contenido de la mitad superior de la página

Cuando un visitante accede a un sitio web, es recibido por una determinada parte del sitio, es decir, la parte superior. Para ver el resto, el usuario deberá desplazarse hacia abajo o realizar otras acciones en el sitio. El contenido que los visitantes pueden ver inmediatamente después de acceder a él se denomina contenido de la mitad superior de la página.

Acerca del bloqueo de procesamiento en JavaScript y CSS

Los navegadores leen HTML para mostrar un sitio. Este es un proceso que tiene varios pasos. Si el navegador encuentra elementos que hacen referencia a un script/hoja de estilo, se requieren pasos adicionales para leer el código. El navegador deberá solicitar un archivo, esperar una respuesta, descargar el archivo del servidor y luego ejecutar el archivo.

Por supuesto, estos pasos adicionales pueden ralentizar el tiempo de carga. Tenga en cuenta que algunos temas de WordPress implican más de un solo archivo CSS o JavaScript. El tiempo de carga se puede ralentizar drásticamente debido a estos archivos. Esta es la razón por la que deberá eliminar los recursos que bloquean el renderizado de su sitio. La mayoría de las veces, estos no son archivos críticos, por lo que puede diferir el análisis de JavaScript para reducir el bloqueo de la representación de la página, mejorando así la velocidad de su sitio.

Identificación de JavaScript y CSS que bloquean el renderizado

Para eliminar JavaScript y CSS que bloquean la representación en el contenido de la mitad superior de la página, deberá identificar cuáles son estos elementos. Una de las formas más fáciles de identificarlos es abrir su sitio web con una herramienta de velocidad de página que le indica qué problemas enfrenta durante la carga. PageSpeed Insights de Google es una de esas herramientas que debería ayudarlo a encontrar los archivos que bloquean la representación en su sitio. Una vez que haya averiguado cuáles son los archivos, puede proceder a eliminar o reorganizar el JavaScript que bloquea el renderizado.

¿Cómo eliminar JavaScript y CSS que bloquean la representación en el contenido de la mitad superior de la página?

Tiene dos opciones en esta situación: aprenda a eliminar usted mismo JavaScript y CSS que bloquean la representación en el contenido de la mitad superior de la página o use un complemento para hacerlo. Si es experto en tecnología y está dispuesto a aprender cómo se eliminan los recursos que bloquean el renderizado, aplique uno de estos métodos:

Borrar JavaScript de la ruta de representación crítica

La ruta de representación crítica solo debe incluir los elementos que son esenciales para el sitio web. Puede mover los recursos de JavaScript innecesarios fuera de esta ruta. Esto se hace agregando ciertos atributos donde se requiere JavaScript. Los atributos son:

Async: este atributo le dice al navegador que debe comenzar a descargar los recursos de inmediato para evitar tiempos de carga lentos. Una vez que los recursos están disponibles, el análisis de HTML se detiene temporalmente y los recursos se cargan.
Aplazar: este atributo le dice al navegador que posponga la descarga de los recursos hasta que finalice el proceso de análisis de HTML. Una vez que se complete, el navegador descargará y procesará los scripts en el orden en que aparecen en el sitio web.

Compruebe cómo se entregan los recursos CSS y optimícelos

Para eliminar los recursos que bloquean el renderizado en CSS, deberá:

Identifique los recursos necesarios para el contenido de la mitad superior de la página y alinee los estilos CSS con HTML.
Use otro atributo para identificar los recursos CSS que son absolutamente necesarios (atributo de medios).
Cargue los recursos CSS de forma asincrónica (usando los atributos discutidos anteriormente).

Una lista de complementos que pueden ayudarlo a eliminar JavaScript que bloquea el renderizado más fácilmente

Autooptimizar

Para eliminar JavaScript y CSS que bloquean la representación en el contenido de la mitad superior de la página de WordPress, puede usar complementos como Autoptimize. Este complemento mejora el tiempo de carga de su sitio de WordPress al combinar bits de código, hacer que los bloques de código sean más pequeños al eliminar caracteres innecesarios (compresión), etc. Al realizar estos cambios, el código es más fácil de leer y el tamaño del archivo se reduce, lo que reduce el tiempo de carga en unos pocos cientos de milisegundos o incluso segundos.

Para instalar este complemento, simplemente necesita acceder a su panel de control de WordPress y navegar a la pestaña Complementos. Luego, seleccione la opción Agregar nuevo que se encuentra en la parte superior de la ventana. Después de eso, puede buscar Autoptimize u otros complementos en la barra de búsqueda. Haga clic en Instalar ahora, actívelo para el sitio web que desee y estará listo para comenzar.

Caché total W3

Autoptimize tiene muchas otras alternativas que puede usar para eliminar los recursos que bloquean el renderizado de WordPress. El complemento W3 Total Cache es uno de los mejores. Lo interesante de este complemento es que incorpora múltiples funciones adicionales para optimizar WordPress. El almacenamiento en caché representa el proceso en el que ciertos archivos se almacenan en la computadora de un usuario para mejorar su experiencia con el sitio web. Las visitas posteriores serán más fáciles y los tiempos de carga mejorarán.

Paquete de refuerzo de velocidad

Otra opción es Speed Booster Pack. Una vez que lo hayas instalado, podrás acceder a la configuración y elegir las opciones que se ajusten a tus necesidades. El complemento ofrece algunas opciones de configuración, como mover scripts al pie de página o diferir el análisis de archivos JavaScript. Al seleccionarlos, puede eliminar JavaScript y CSS que bloquean la representación en el contenido de la mitad superior de la página con solo un par de clics.

JCH Optimizar

JCH Optimize es un complemento que combina JavaScript y CSS mientras reduce el tamaño de los archivos. Tiene muchas otras características que pueden ser útiles a largo plazo, pero es excelente para eliminar los recursos que bloquean el renderizado. Navegue a través de su configuración y active las funciones que le parezcan relevantes para su sitio web.

Aunque requiere algo de atención, resolver este problema tendrá un gran impacto en su sitio. Una vez que haya aprendido a eliminar JavaScript y CSS que bloquean la representación en el contenido de la mitad superior de la página, asegúrese de eliminar cualquier elemento que pueda ralentizar su sitio web lo antes posible.

Si disfrutó leyendo este artículo sobre cómo eliminar JavaScript y CSS que bloquean la representación en el contenido de la mitad superior de la página, debe consultar este sobre cómo cambiar las fuentes en WordPress.

También escribimos sobre algunos temas relacionados, como incrustar un iframe de WordPress, cómo encontrar la ID de la página en WordPress, cómo descargar la biblioteca de medios de WordPress, cómo detener un ataque DDoS y cómo ocultar el título de la página en WordPress.

Fuente de grabación: wpdatatables.com