ThemeLocal: consejos de blog que funcionan como magiaThemeLocal: consejos de blog que funcionan como magia
  • Blogging
  • WordPress
  • Marketing por correo
  • SEO
  • Redes sociales
  • Más
    • Tutoriales
    • Shopify
    • Críticas
    • Consejo
    • Seguridad
    • Software y servicios
    • Generación de tráfico
    • Guia de principiantes
    • Escaparate
Search
  • Términos de Uso
  • Política de privacidad
  • Política de cookies
  • Contactar
© 2022 Themelocal. Reservados todos los derechos.
Lectura: Cómo eliminar JS y CSS que bloquean el procesamiento para la velocidad del sitio
Cuota
Notificación Mostrar más
Últimas noticias
iOS 16.4 Beta: Cómo habilitar el aislamiento de voz para llamadas de teléfono celular
Cómo
Revisión: OWC Thunderbay 8 ofrece almacenamiento Mac de alto rendimiento y alto volumen
Reseñas de tecnología
Cómo crear un GIF en Photoshop
Cómo
Fotograma completo vs APS-C: ¿Qué sensor de cámara debería elegir?
Versus
Currys acaba de lanzar el mejor paquete de Pixel 7 hasta el momento
Ofertas
Aa
ThemeLocal: consejos de blog que funcionan como magiaThemeLocal: consejos de blog que funcionan como magia
Aa
  • Blogging
  • WordPress
  • Marketing por correo
  • SEO
  • Redes sociales
  • Más
Search
  • Blogging
  • WordPress
  • Marketing por correo
  • SEO
  • Redes sociales
  • Más
    • Tutoriales
    • Shopify
    • Críticas
    • Consejo
    • Seguridad
    • Software y servicios
    • Generación de tráfico
    • Guia de principiantes
    • Escaparate
Síganos
  • Términos de Uso
  • Política de privacidad
  • Política de cookies
  • Contactar
© 2022 Themelocal. Reservados todos los derechos.
ThemeLocal: consejos de blog que funcionan como magia > Blog > Tutoriales > Cómo eliminar JS y CSS que bloquean el procesamiento para la velocidad del sitio
Tutoriales

Cómo eliminar JS y CSS que bloquean el procesamiento para la velocidad del sitio

Última actualización: noviembre 12, 2021 12:56 am
ThemeLocal hace 1 año 13 Minutos mínimos para leer
Cuota
13 Minutos mínimos para leer
Cuota

Si bien la estética de un sitio web es importante, su contenido y velocidades de carga hacen que la gente regrese. WordPress proporciona a los usuarios una sofisticada caja de herramientas de complementos y temas para crear rápidamente sus propios sitios web personalizados.

Contents
¿Qué son los scripts CSS y JS que bloquean el renderizado y por qué son malos?Cómo optimizar su sitio web mediante la búsqueda y reparación de secuencias de comandos de bloqueo de procesamiento1. Optimiza el orden de carga2. Minificar código3. Utilice la carga diferida y asincrónica de JavaScript4. Reemplace los elementos visuales de JavaScript con CSS35. Elimine todos los scripts innecesarios6. Uso de complementos para optimizar su sitio web de WordPress

Sin embargo, estos temas y complementos requieren JavaScript (JS) y hojas de estilo en cascada (CSS) para funcionar. WordPress los crea automáticamente en forma de archivos de script. A menudo están mal optimizados. Como tal, pueden ralentizar considerablemente su sitio web.

Esto puede resultar frustrante para los lectores. Por lo tanto, en esta guía, exploraremos cómo encontrar y eliminar estos scripts que bloquean el procesamiento y le mostraremos cómo aumentar las velocidades de carga de su sitio web de WordPress.

¿Qué son los scripts CSS y JS que bloquean el renderizado y por qué son malos?

Scripts de WordPress

La mayoría de las páginas web en Internet están formadas por tres componentes clave: JavaScript, CSS y lenguajes de marcado de hipertexto. HTML sirve como base, mientras que JavaScript y CSS están incrustados en él. Sin embargo, en estos días, es más convencional incrustar llamadas a scripts externos en el documento HTML.

Estos scripts se guardan en una cola que su navegador web usa para representar la página web. La forma más fácil de ver qué scripts usa una página web sin mirar el código fuente es descargarlo desde su navegador web (Ctrl + S). El navegador web descargará el documento HTML junto con una carpeta con todos (o la mayoría) de los scripts, imágenes y otros archivos que utiliza la página web.

Cuanto más complejos sean los scripts que tenga que llamar su página web desde la cola, más tiempo tardará en procesarse. A menudo, los navegadores web descargarán recursos de la página web, como scripts e imágenes, en un caché local para cargar las páginas web más rápido. Mientras que los usuarios del lado del cliente pueden acelerar los tiempos de representación de la página web deshabilitar JavaScript, aumentando el tamaño de la caché y usando AdBlockers, esta no es una solución ideal. La responsabilidad debe recaer en el desarrollador web.

Si recibe quejas o ha notado que su sitio web tiene problemas para reproducir su contenido, no es demasiado tarde para solucionarlo.

Cómo optimizar su sitio web mediante la búsqueda y reparación de secuencias de comandos de bloqueo de procesamiento

Antes de decidir qué scripts terminar u optimizar, debe evaluar su sitio web o la velocidad de su página web. Puede utilizar una plataforma en línea como GTmetrix o PageSpeed ​​Insights de Google. Todo lo que se le pedirá que haga es insertar la URL del sitio web o la página web que desea probar, y la herramienta la calificará y proporcionará otras ideas.

También le sugerirán auditorías que puede utilizar para hacer que su sitio web sea más rápido. Por ejemplo, te propondrán que uses menos elementos en tu página web o que reduzcas CSS y JavaScript no utilizados. GTmetrix llegará tan lejos como para mostrarle qué scripts deben optimizarse.

Pestaña de cobertura de Chrome DevTools

Alternativamente, puede usar Pestaña de cobertura de Chrome DevTools para mostrarle los datos de utilización de sus scripts. Una vez que identifique qué scripts no son óptimos, puede hacer algunas cosas para corregirlos. Sin embargo, estos pasos requerirán bastante destreza en la codificación para implementarlos con éxito. Necesitará al menos un conocimiento básico de la programación funcional de JavaScript.

Unirse a un curso tutorial de codificación (o bootcamp) también es una buena idea para ayudarlo a desarrollar aún más sus habilidades. En promedio, un bootcamp de codificación puede llevar hasta quince semanas para completar, y aunque esto puede parecer mucho tiempo, vale la pena si considera que la alfabetización básica en código es una habilidad importante en el mundo moderno. Sin embargo, aquí hay cinco formas de corregir los scripts de bloqueo de procesamiento y aumentar la velocidad de su página web.

1. Optimiza el orden de carga

La sección de la cabeza ( ) de la página web se utiliza para precargar elementos. La base de su página web debe ir aquí, por lo que una pantalla en blanco no saluda al usuario cuando carga su página web. Si bien CSS incrustado está bien, debe evitar colocar JavaScript aquí.

Una vez que haya optimizado la sección de la cabeza, debe optimizar el cuerpo. La mayoría de los navegadores web muestran las páginas web de arriba a abajo. Debe ordenar las llamadas a los scripts de acuerdo con su importancia y complejidad. Debe realizar llamadas a secuencias de comandos que no son cruciales para la representación de la página web en último lugar junto con secuencias de comandos complejas que requieren tiempo.

2. Minificar código

Minificar código implica reescribirlo y borrar caracteres innecesarios como espacios en blanco, comentarios, comas, saltos de línea, etc. Esto hace que el código sea más conciso y compacto, lo que finalmente reduce el tamaño del script y aumenta los tiempos de carga de su página web.

Los complementos y herramientas como W3TC tienen módulos que minimizan el JavaScript y CSS en sus temas. Alternativamente, puede minificar manualmente su código de secuencia de comandos con una herramienta en línea gratuita como JavaScript Minifier.

3. Utilice la carga diferida y asincrónica de JavaScript

Los navegadores web leen el código de arriba a abajo. Cuando encuentran una etiqueta de secuencia de comandos, dejan de cargar la página web y leen el archivo de secuencia de comandos. Esto ralentiza el renderizado.

Puedes usar el asincrónico atributo para cargar el script en paralelo con la página web y ejecutarlo tan pronto como esté disponible. Alternativamente, puede utilizar el aplazar atributo para aplazar el análisis de los scripts. Esto significa que también cargará el script en paralelo a la página web, pero solo lo ejecutará cuando el navegador analice la página web.

Le recomendamos que no utilice el asincrónico o aplazar atributos en los scripts utilizados para representar y mostrar elementos visuales. Las palabras clave de JavaScript equivalentes a estos atributos son las asincrónico y esperar palabras clave. Puedes usarlos para cargue sus Javascripts de forma más asincrónica sin editar las etiquetas HTML en su página web.

4. Reemplace los elementos visuales de JavaScript con CSS3

En el pasado, CSS no era tan versátil como lo es hoy. Por ejemplo, CSS 1.0 y 2.0 carecían de herramientas de interfaz de usuario como controles básicos y controles deslizantes.

Luego apareció CSS ​​3. Presentaba nuevos colores, sombras de cuadro, opacidad, etc. JavaScript es excelente para agregar controles de interfaz de usuario complejos. Sin embargo, Javascript es más pesado en recursos que CSS.

Por lo tanto, el uso de cantidades excesivas de JavaScript ralentiza considerablemente su sitio web. Si nota que su página web está usando JavaScript para compensar donde las versiones anteriores de CSS fracasaron, debe modificarlo y reemplazar todo el JavaScript innecesario con CSS, donde pueda. Esto permitirá que las páginas web se carguen más rápido.

5. Elimine todos los scripts innecesarios

El propósito de JS y CSS es expandir la funcionalidad a las páginas web y agregar lógica donde HTML no puede. Sin embargo, HTML 5.3 llegó con nuevas etiquetas que harían innecesarias algunas operaciones de CSS y JS. El uso de HTML en lugar de scripts hace que sus páginas web se carguen más rápidamente.

Por lo tanto, la mejor manera de optimizar la velocidad de su sitio web es eliminar todos los scripts infrautilizados. Deberá analizar qué scripts son completamente innecesarios y eliminarlos. Nuevamente, puede usar la pestaña Cobertura de Chrome DevTools o GTmetrix para encontrar los scripts más infrautilizados en su página web y luego eliminarlos.

Una vez que elimine todas las funciones o etiquetas innecesarias, puede combinar scripts cuyas funciones sean similares. Si ya sabe cómo manipular el código fuente de su página web, esta no debería ser una tarea difícil para usted. Sin embargo, los usuarios que no tienen tanta experiencia o conocimientos en diseño web no deben preocuparse. WordPress le facilita identificar los scripts en su sitio web y editarlos utilizando varios complementos de optimización. Los cubriremos a continuación.

6. Uso de complementos para optimizar su sitio web de WordPress

Nuevamente, no necesita un conocimiento práctico de programación para optimizar su sitio web WP. Aunque algo de experiencia ayudaría. Sin embargo, existe una gama de complementos orientados a la optimización de scripts. Algunos de ellos usan IA para minimizar el código, cambiar el orden de carga y reemplazar los scripts infrautilizados con códigos y scripts más eficientes.

Algunos de los mejores complementos para la optimización de scripts incluyen:

  • Cohete WP: Este es uno de los complementos más populares para la optimización web. Puede detectar automáticamente qué scripts son problemáticos y solucionarlos por usted. Puede usarlo para almacenamiento en caché rápido, deferencia, compresión y minificación.
  • Autoptimizar: Esto puede aplazar y eliminar scripts no esenciales, integrar CSS en línea y minimizar scripts, HTML e imágenes. Autoptimize es altamente personalizable a través de una API abierta y opciones avanzadas.
  • Caché total de W3: Este complemento requiere un poco de trabajo para su uso. Deberá realizar un seguimiento e identificar los scripts manualmente antes de eliminarlos o editarlos. En la mayoría de los casos, este complemento ya está disponible con su paquete de WordPress.
  • JavaScript asíncrono: Un complemento de código abierto presentado por WordPress. Le permite detectar JavaScript que bloquea la representación y luego diferirlo o cargarlo de forma asincrónica.

Entonces, ¿por qué no recomendamos los complementos en primer lugar? Desafortunadamente, algunos de estos complementos le costarán. Por ejemplo, Autoptimize cuesta $ 49 por año. Si bien es una tarifa razonable, puede no ser ideal para las personas que ya están pagando una gran cantidad de dinero por el alojamiento y otras aplicaciones y complementos.

Sin embargo, independientemente de si está utilizando complementos o buscando scripts manualmente, debe comprender conceptos como minificación, carga asincrónica y orden de carga. Le facilitará la resolución de problemas de carga en caso de que falle uno de sus scripts.

También podría gustarte

iOS 16.4 Beta: Cómo habilitar el aislamiento de voz para llamadas de teléfono celular

Cómo crear un GIF en Photoshop

Cómo eliminar una lista de reproducción de tu iPhone

SharePlay: Cómo hacer ejercicio con amigos usando Apple Fitness Plus

¿El modo de enfoque no funciona? Pruebe estos 8 consejos para solucionar problemas

ETIQUETADO: bloquean, Cómo, CSS, del, eliminar, para, procesamiento, sitio, velocidad
ThemeLocal noviembre 12, 2021
Comparte este artículo
Facebook Twitter Pinterest Whatsapp Whatsapp
Cuota
¿Qué piensas?
Amor0
Triste0
Contento0
Somnoliento0
Enfadado0
Sin comentarios0
Guiño0
Artículo anterior Cómo utilizar las auditorías de Google Lighthouse para mejorar la velocidad
Artículo siguiente Cómo enviar automáticamente nuevas publicaciones por correo electrónico a los suscriptores
Deja un comentario

Deja una respuesta Cancelar la respuesta

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

Publicación popular

Oppo Find X6 Pro vs Samsung Galaxy S23 Ultra: todas las diferencias clave
Versus
NordVPN Standard vs NordVPN Complete: ¿Qué paquete es el adecuado para usted?
Versus
Cómo obtener ChatGPT en su Apple Watch
Cómo
Los mejores complementos de WordPress de realidad aumentada
Plugins
Cómo cambiar el navegador predeterminado en Windows 11
Cómo
Sony A80L vs Sony A80K: ¿Cómo se comparan?
Versus

También podría gustarte

Cómo

iOS 16.4 Beta: Cómo habilitar el aislamiento de voz para llamadas de teléfono celular

hace 4 horas 3 Minutos mínimos para leer
Cómo

Cómo crear un GIF en Photoshop

hace 8 horas 3 Minutos mínimos para leer
Cómo

Cómo eliminar una lista de reproducción de tu iPhone

hace 9 horas 5 Minutos mínimos para leer
Cómo

SharePlay: Cómo hacer ejercicio con amigos usando Apple Fitness Plus

hace 13 horas 3 Minutos mínimos para leer
Cómo

¿El modo de enfoque no funciona? Pruebe estos 8 consejos para solucionar problemas

hace 18 horas 9 Minutos mínimos para leer
Ofertas

¿Alguna vez has usado Wi-Fi público? Esta oferta de NordVPN es para ti

hace 21 horas 3 Minutos mínimos para leer
Cómo

Cómo configurar la autenticación multifactor en NordVPN

hace 1 día 4 Minutos mínimos para leer
Versus

Oppo Find X6 Pro vs OnePlus 11: ¿Cómo se comparan?

hace 1 día 6 Minutos mínimos para leer
Mostrar más
ThemeLocal: consejos de blog que funcionan como magiaThemeLocal: consejos de blog que funcionan como magia
Síganos

© 2022 Themelocal. Reservados todos los derechos.

  • Términos de Uso
  • Política de privacidad
  • Política de cookies
  • Contactar

Removed from reading list

Deshacer
Welcome Back!

Sign in to your account

¿Perdiste tu contraseña?