Cómo optimizar la entrega de CSS en WordPress con pocas molestias
CSS puede mejorar el aspecto general de su sitio web y es fácil de usar, editar y mantener. La única desventaja es la posibilidad de ralentizar la velocidad de carga de tu página. Por lo tanto, este artículo creado por nuestro equipo en WpDataTables le mostrará cómo optimizar la entrega de CSS en WordPress.
Si CSS no se entrega bien, el navegador deberá procesar y descargar datos antes de que termine de mostrar su página. Esto significa que los visitantes experimentarán un retraso al ver su página y pueden hacer clic en ella porque parece que no se está cargando. De ahí la importancia de optimizar la entrega de CSS, así que sigue leyendo para saber cómo evitar las trampas que podrían ralentizar tu página web.
Todo sobre la entrega de CSS
Básicamente, CSS, una hoja de estilo en cascada, hace que los sitios web se vean atractivos y, sin ellos, los sitios web aún estarían estancados en los años 90.
Las páginas web, incluidas las páginas web de WordPress, están diseñadas con CSS. Cada tema de WordPress usa un archivo style.cc para crear una apariencia elegante. Agregar complementos agregará más hojas de estilo, por ejemplo, si descarga un complemento de widget, agregará un archivo CSS adicional (hoja de estilo) para crear el aspecto deseado.
Los scripts CSS se cargan antes de que su sitio sea visible, lo que significa que su navegador no mostrará ningún contenido hasta que se procese la información CSS proporcionada. Esto da como resultado un bloqueo de procesamiento que ocurre cuando un navegador carga todos los scripts CSS antes de mostrar un sitio.
CSS se puede usar de múltiples maneras para la entrega en WordPress, con muchas configuraciones diferentes.
Independientemente de cómo haya configurado su página web, CSS en realidad puede ayudar a renderizar su sitio más rápido.
JavaScript y CSS que bloquean el renderizado: ¿qué es?
Se esperan sitios de carga rápida en nuestra sociedad de alta tecnología y es vital para el SEO de alto rango. PageSpeed Insights de Google puede ayudarlo a comprender la velocidad de carga de su sitio. A veces, aparecerá una advertencia cuando utilice la herramienta: "Elimine JavaScript y CSS que bloquean la representación en el contenido de la mitad superior de la página", pero aquí hay una solución a este problema.
Es necesario renderizar el HTML antes de que un navegador pueda mostrar cualquier página web. Mientras hace esto, encontrará scripts y hojas de estilo, y debe detenerse para solicitar y descargar ese archivo. Luego lo ejecuta y continúa pasando por el HTML. La mayoría de los temas y complementos para WordPress utilizan muchos archivos JavaScript y/o CSS, lo que puede hacer que tarde mucho tiempo en procesar incluso una página de su sitio.
Esto evita que los visitantes de su sitio vean rápidamente la información de las páginas web y, para empeorar las cosas, no es necesario cargar estos scripts de inmediato.
Estos archivos innecesarios se conocen como CSS y JavaScript que bloquean el renderizado. Continúe leyendo para averiguar qué son y cómo eliminarlos de su sitio de WordPress.
Use Google Pagespeed Insights para descubrir CSS y JavaScript que bloquean el renderizado
Los navegadores de carga lenta generalmente intentan procesar una cantidad significativa de código CSS y, por lo tanto, no pueden mostrar la página; sin embargo, no todos los recursos de CSS bloquean el procesamiento.
Los sitios web aparecen en blanco o solo parcialmente visibles si el CSS se cargó incorrectamente o a menos que el CSS esté optimizado, lo que puede resultar en fuentes o diseños incorrectos.
Es importante comprender qué elementos son necesarios y cuáles no, para optimizar la entrega de CSS.
Para iniciar el proceso de bloqueo de procesamiento, primero pruebe la velocidad de su sitio con Google PageSpeed Insights.
Así es cómo:
- Ir a la página de Google PageSpeed Insights
- Copie y pegue la URL de nuestro sitio en el campo correspondiente
- Presiona ‘Analizar’
- Esto dará como resultado un informe. Tenga en cuenta los scripts que aparecen como ‘Eliminar JavaScript y CSS que bloquean el procesamiento’
Por lo general, estos CSS son cruciales para su sitio:
- Por encima de los estilos de página de pliegue
- Temas
- color del fondo
- Otros, según el tipo de sitio
Estos CSS suelen ser menos importantes:
- Debajo del pliegue CSS
- CSS dirigido a otros dispositivos
Reducir secuencias de comandos de bloqueo de procesamiento
Es posible minimizar la cantidad de secuencias de comandos que bloquean el renderizado que tiene en su sitio:
- Reduciendo la cantidad de CSS y JavaScript. Puede eliminar cualquier espacio en blanco y comentarios innecesarios
- Combinando tu CSS y JavaScript. Tome diferentes archivos .css y .js y agréguelos, lo que resultará en menos archivos.
- Aplazamiento de la carga de JavaScript. Puede hacer que se carguen por última vez después de que todo lo demás se haya cargado, mediante el uso de carga asíncrona.
WordPress usa un filtro combinado para registrar scripts front-end, para que pueda ver los archivos CSS o JavaScript entrantes. Es posible que no sepa qué buscar, por lo que es útil usar un complemento.
lEl CSS no es necesario en todas las páginas todo el tiempo. Sin embargo, está ahí por una razón y lo usará todo en algún momento, que es donde se requiere una ruta de renderizado crítica.
Es posible que se requieran diferentes partes del CSS de una página Contáctenos y una página de Servicios que ofrecemos. Cuando alguien carga la página Servicios que ofrecemos, las partes de CSS que son solo para la página Contáctenos no son necesarias en ese momento; sin embargo, ese CSS todavía está cargado, porque el webmaster necesita que todos los archivos CSS estén cargados para representar la página web.
Por lo tanto, el sitio web necesita todo el CSS, pero no todo el CSS para cada página. Por lo tanto, el CSS crítico es diferente en cada página y para cada usuario de tu sitio.
El CSS y el JavaScript que bloquean el renderizado en la parte superior de la página son un problema grave y deben solucionarse lo antes posible.
No es realista esperar que su sitio obtenga una puntuación de 100/100, así que apunte a una buena puntuación que les brinde a sus visitantes una página de carga rápida.
No elimine los scripts necesarios para una buena UX; estos son más importantes que tratar de lograr una puntuación más alta.
Optimización de la Ruta de Representación Crítica en WordPress
La ruta de representación crítica indica el orden en que el navegador realiza las tareas para representar su página, es decir, la secuencia en la que descarga y procesa CSS, HTML y JavaScript y los muestra en el navegador.
El contenido de arriba del pliegue es importante porque esta es la primera parte que verá el usuario. Hay más tiempo para cargar el contenido debajo del pliegue, ya que el usuario tendrá que desplazarse para verlo.
Para cargar la sección anterior del pliegue lo más rápido posible, debe:
- Cree el HTML para que priorice la carga de las partes superiores del pliegue
- Minimice los datos utilizados por CSS, JS y HTML
Se pueden encontrar más explicaciones en la guía PageSpeed de Google. A veces, los datos que necesita para cargar el ATF son más que la ventana de congestión (que asciende a 14,6 kb). En este caso, es necesario que ocurran más viajes de red desde el servidor al navegador y viceversa. Las redes móviles que tienen una latencia alta encontrarán que esto evita que la página se cargue.
El navegador construye el DOM una parte a la vez, lo que puede reducir el tiempo necesario para representar el ATF. Estructure el HTML para que el contenido de la parte superior de la página se cargue primero y el resto de la página después.
El proceso de optimización requiere mejora continua, seguimiento y medición.
Si bien CSS se puede usar de varias maneras para crear páginas web elegantes, lo más importante es que se carga rápido. Limpie el código y siga los pasos anteriores para que sus páginas se carguen más rápido.
Si disfrutó leyendo este artículo sobre cómo optimizar la entrega de CSS en WordPress, debe consultar este sobre cómo agregar metaetiquetas en WordPress sin un complemento.
También escribimos sobre algunos temas relacionados, como incrustar un pdf en WordPress, cómo incrustar Excel en html, cómo ocultar una imagen destacada en una publicación de WordPress, cómo saber si un sitio es WordPress, cómo desinstalar WordPress de cPanel y cómo crear un sitio web como Amazon.