{"id":254351,"date":"2022-04-05T11:08:00","date_gmt":"2022-04-05T08:08:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=254351"},"modified":"2022-04-27T11:50:42","modified_gmt":"2022-04-27T08:50:42","slug":"como-optimizar-la-entrega-de-css-en-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-optimizar-la-entrega-de-css-en-wordpress\/","title":{"rendered":"C\u00f3mo optimizar la entrega de CSS en WordPress"},"content":{"rendered":"

Si est\u00e1 aqu\u00ed, es probable que haya recibido este aviso en la<\/a> prueba PageSpeed \u200b\u200bInsights de Google<\/a> :<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Si bien puede ser dif\u00edcil eliminar todos los archivos que bloquean el procesamiento, no es tan dif\u00edcil con las herramientas adecuadas.<\/p>\n

En esta gu\u00eda, le mostrar\u00e9 tres formas de acelerar su sitio<\/a> con la entrega de CSS optimizada. Hay opciones tanto para los principiantes como para los desarrolladores de WordPress incluidos aqu\u00ed.<\/p>\n

Comencemos desde arriba: \u00bfqu\u00e9 significa exactamente optimizar la entrega de CSS en su sitio de WordPress?<\/p>\n

\u00bfQu\u00e9 significa "optimizar la entrega de CSS"?<\/h2>\n

Perm\u00edtanme ser muy claro sobre lo que quiero decir primero.<\/p>\n

Los archivos CSS se utilizan para dise\u00f1ar p\u00e1ginas web<\/a>. Cada tema de WordPress carga un archivo style.css y es probable que tenga un pu\u00f1ado de hojas de estilo adicionales (archivos CSS) agregadas por complementos. Por ejemplo, si tiene un complemento que agrega un nuevo widget, deber\u00e1 cargar otra hoja de estilo para darle estilo a ese widget.<\/p>\n

Todos los archivos CSS se cargan antes de que se procese su sitio.<\/strong><\/p>\n

Esto significa que los visitantes ver\u00e1n una pantalla en blanco hasta entonces. Ahora aqu\u00ed est\u00e1 la cosa …<\/p>\n

La mayor parte del CSS cargado no es necesario para cualquier p\u00e1gina en la que se encuentre el visitante, e incluso se necesita menos para lo que pueden ver de inmediato. Por ejemplo, \u00bfpor qu\u00e9 hacer que esperen mientras cargan estilos para el pie de p\u00e1gina? Probablemente pasar\u00e1n al menos unos segundos antes de que lo vean (si es que alguna vez lo hacen).<\/p>\n

Al aplazar nuestros archivos CSS o cargarlos de forma asincr\u00f3nica, podemos permitir que el sitio se muestre en el navegador del visitante antes de que las hojas de estilo terminen de cargarse.<\/p>\n

En esta gu\u00eda, compartir\u00e9 tres enfoques diferentes para diferir sus hojas de estilo y optimizar la entrega de CSS.<\/p>\n

Rutas de renderizaci\u00f3n cr\u00edticas optimizadas en acci\u00f3n<\/h3>\n

Si visita la p\u00e1gina de inicio de Compete Themes<\/a>, vigile el indicador de carga en la pesta\u00f1a del navegador mientras se carga el sitio. Notar\u00e1s que despu\u00e9s de que el sitio sea visible y parezca estar cargado, el indicador de carga sigue girando por un momento m\u00e1s.<\/p>\n

Ese es un ejemplo de c\u00f3mo se ve la entrega de CSS optimizada en la pr\u00e1ctica.<\/p>\n

Si desea ver un ejemplo de una ruta de renderizaci\u00f3n cr\u00edtica<\/a> altamente optimizada, visite Amazon. El sitio completo no se carga a la vez. En cambio, en el transcurso de unos segundos, ver\u00e1 aparecer diferentes elementos a lo largo de la p\u00e1gina gracias a la ruta de representaci\u00f3n cuidadosamente optimizada.<\/p>\n

1 cohete WP<\/h2>\n

Utilizo el complemento WP Rocket<\/a> aqu\u00ed en Compete Themes y lo recomiendo antes que todas las dem\u00e1s soluciones para la optimizaci\u00f3n de la ruta de renderizaci\u00f3n cr\u00edtica.<\/p>\n

Optimizar su entrega de CSS con WP Rocket realmente no podr\u00eda ser m\u00e1s f\u00e1cil. En el men\u00fa Optimizaci\u00f3n de archivos, hay una casilla de verificaci\u00f3n para activar esta funci\u00f3n.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Una vez marcado, WP Rocket aplazar\u00e1 autom\u00e1ticamente todas sus hojas de estilo para que no se carguen hasta que el sitio aparezca en el navegador del visitante. Ahora, si se aplazara todo el CSS, su sitio se ver\u00eda terrible hasta que se cargara, y los desarrolladores de WP Rocket han abordado esto elegantemente con su complemento.<\/p>\n

Cuando activa esta opci\u00f3n, WP Rocket encontrar\u00e1 autom\u00e1ticamente el CSS necesario para dise\u00f1ar las partes de su sitio que los visitantes ven en el momento en que se carga, y ese c\u00f3digo se agrega en l\u00ednea al documento.<\/p>\n

En otras palabras, su sitio se muestra m\u00e1s r\u00e1pido en el navegador y parece estar completamente cargado, mientras que el CSS diferido se carga durante el siguiente o dos segundos.<\/p>\n

En mi opini\u00f3n, esta es, con mucho, la mejor soluci\u00f3n para optimizar la entrega de CSS con WordPress.<\/p>\n

WP Rocket es un complemento premium, pero si los tiempos de carga m\u00e1s r\u00e1pidos le permitir\u00e1n obtener m\u00e1s ingresos de su sitio, definitivamente considerar\u00eda obtenerlo para su sitio. Tengo un vistazo<\/a> mucho m\u00e1s detallado a WP Rocket<\/a> que puedes leer si quieres aprender m\u00e1s. De lo contrario, puede consultar su sitio aqu\u00ed<\/a>.<\/p>\n

2 Autoptimizar<\/h2>\n

El segundo enfoque que recomendar\u00eda es el complemento Autoptimize<\/a>.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Este complemento de rendimiento rico en funciones proporciona algunos enfoques para optimizar la entrega de CSS. La opci\u00f3n m\u00e1s simple es simplemente incorporar todo el CSS. Esto tomar\u00e1 todo el CSS que se encuentra en sus hojas de estilo y lo agregar\u00e1 directamente al documento de la p\u00e1gina para que no se carguen hojas de estilo.<\/p>\n

Para encontrar esta opci\u00f3n, debe hacer clic en el bot\u00f3n Mostrar configuraci\u00f3n avanzada en la parte superior.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

A continuaci\u00f3n, ver\u00e1 la opci\u00f3n de insertar todo el CSS.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Si bien esta opci\u00f3n puede mejorar el rendimiento, si ha agregado demasiado CSS al documento de la p\u00e1gina, en realidad puede ralentizar su sitio. Puede valer la pena experimentar con \u00e9l.<\/p>\n

De lo contrario, un buen enfoque es habilitar la opci\u00f3n de Inline y Aplazar CSS en su lugar. Esto aplazar\u00e1 todas las hojas de estilo y solo insertar\u00e1 el CSS cr\u00edtico. Sin embargo, no encontrar\u00e1 autom\u00e1ticamente el CSS cr\u00edtico para usted, como WP Rocket.<\/p>\n

Entonces, \u00bfc\u00f3mo se obtiene el CSS cr\u00edtico de su sitio? Incluso para un desarrollador de WP experimentado, esto puede ser una especie de rasca la cabeza.<\/p>\n

Si bien no he probado la confiabilidad de esta herramienta, esta herramienta gratuita Critical Path CSS Generator<\/a> ser\u00eda un enfoque viable. Ingrese la URL de su sitio y le devolver\u00e1 el CSS que absolutamente necesita cargar.<\/p>\n

Luego puede copiar y pegar ese c\u00f3digo en el cuadro CSS de ruta cr\u00edtica en Autoptimize.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Si utiliza este enfoque, es posible que deba agregar CSS adicional para diferentes p\u00e1ginas de su sitio, y es posible que deba conocer muy bien el CSS de su tema para garantizar un estilo coherente.<\/p>\n

Otro enfoque<\/h3>\n

Hay un complemento llamado Autoptimize criticcss.com power-up<\/a>. Es bastante complicado, pero este complemento adicional le permitir\u00e1 generar autom\u00e1ticamente el CSS cr\u00edtico de su sitio utilizando el servicio criticcss.com<\/a>.<\/p>\n

Deber\u00e1 registrarse con CriticalCSS para obtener una cuenta paga para usar esta opci\u00f3n.<\/p>\n

3 Acelerar<\/h2>\n

Esta \u00faltima opci\u00f3n es muy r\u00e1pida y ser\u00e1 sencilla de implementar para un desarrollador de WordPress.<\/p>\n

Speed \u200b\u200bUp<\/a> es un complemento liviano que le permite aplazar cualquier hoja de estilo no cr\u00edtica.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Si bien esto no optimizar\u00e1 completamente la entrega de CSS, ayudar\u00e1.<\/p>\n

Digamos que su tema agrega una hoja de estilo y luego hay cinco hojas de estilo m\u00e1s agregadas por complementos. Si solo es fundamental cargar la hoja de estilo del tema antes de mostrar el sitio, puede aplazar las otras cinco.<\/p>\n

Acelerar le brinda un filtro simple que puede agregar al archivo functions.php de un tema secundario (o un complemento) para diferir las hojas de estilo que desee. Todo lo que necesita son los identificadores de cada hoja de estilo que se est\u00e1 cargando. Aqu\u00ed<\/a> puede encontrar algunas funciones simples<\/a> para generar los identificadores de todas las hojas de estilo registradas en su sitio.<\/p>\n

Nuevamente, esto ser\u00e1 r\u00e1pido y f\u00e1cil para un desarrollador, pero no recomendar\u00eda esta soluci\u00f3n si no escribe c\u00f3digo.<\/p>\n

Conclusi\u00f3n<\/h2>\n

Espero que hayas aprendido un par de cosas sobre la optimizaci\u00f3n del rendimiento de WordPress<\/a> en esta publicaci\u00f3n.<\/p>\n

Si bien cada una de las tres soluciones anteriores puede funcionar bien, debo dar un saludo final al complemento WP Rocket<\/a>. Como blogger y desarrollador de temas de WordPress, me resulta muy f\u00e1cil y sencillo trabajar con \u00e9l.<\/p>\n

Si desea m\u00e1s consejos sobre c\u00f3mo acelerar su sitio, es posible que le guste esta gu\u00eda sobre optimizaci\u00f3n de im\u00e1genes<\/a> o mi revisi\u00f3n de WP Engine en la<\/a> que se basa Compete Themes para tiempos de carga r\u00e1pidos.<\/p>\n

Fuente de grabaci\u00f3n: www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Aprenda a acelerar su sitio de WordPress con uno de estos tres enfoques para optimizar la entrega de CSS. Consejos para principiantes y avanzados en el interior.<\/p>\n","protected":false},"author":1,"featured_media":256898,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[579,648,659,606],"tags":[849],"class_list":["post-254351","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-acelerar-wordpress","category-como-hacer","category-lanza-libre","category-uncategorized-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/254351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/comments?post=254351"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/254351\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media\/256898"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media?parent=254351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/categories?post=254351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/tags?post=254351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}