{"id":60643,"date":"2020-05-29T07:48:26","date_gmt":"2020-05-29T02:18:26","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?p=60643"},"modified":"2023-12-28T16:08:45","modified_gmt":"2023-12-28T10:38:45","slug":"fixing-render-blocking-css","status":"publish","type":"post","link":"https:\/\/git-staging.wpastra.com\/es\/guides-and-tutorials\/fixing-render-blocking-css\/","title":{"rendered":"C\u00f3mo eliminar el bloqueo de renderizado CSS en WordPress"},"content":{"rendered":"
<\/div>\n

Si mide el rendimiento de su sitio web con herramientas en l\u00ednea como Google PageSpeed Insights<\/a>puede que te encuentres con un peque\u00f1o problema conocido como Render Blocking CSS. Tambi\u00e9n te dir\u00e1 que debes resolver este problema si quieres un rendimiento \u00f3ptimo para tu sitio web. <\/p>\n\n\n\n

\n Pero, \u00bfen qu\u00e9 consiste el bloqueo de renderizado CSS?\n<\/p>\n\n\n\n

\n En pocas palabras, se refiere a las secuencias de comandos CSS que impiden que su sitio web se cargue correctamente. Como resultado, los visitantes tienen que esperar m\u00e1s tiempo antes de ver algo en su sitio web. Pero, \u00bfpor qu\u00e9 ocurre esto? \u00bfY c\u00f3mo solucionarlo?\n<\/p>\n\n\n\n

\n Bueno, para ayudarte con todas tus dudas, hemos elaborado un post detallado que cubre todo lo que necesitas saber sobre el Render Blocking CSS junto con diferentes m\u00e9todos para solucionar este problema. \n<\/p>\n\n\n\n

\n As\u00ed que, sin m\u00e1s pre\u00e1mbulos, empecemos:\n<\/p>\n\n\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tTabla de contenidos\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
  1. Render Blocking CSS - Visi\u00f3n general<\/a>
  2. C\u00f3mo eliminar el bloqueo de renderizado CSS<\/a>
  3. Los 3 mejores plugins para eliminar el CSS que bloquea el renderizado<\/a>
  4. Conclusi\u00f3n<\/a><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n

    <\/a>Render Blocking CSS - Visi\u00f3n general<\/h2>\n\n\n\n

    \n Antes de empezar a discutir c\u00f3mo arreglar el bloqueo de renderizado CSS, primero vamos a discutir r\u00e1pidamente lo que es y por qu\u00e9 es un problema. Con una comprensi\u00f3n adecuada del problema, ser\u00e1 mucho m\u00e1s f\u00e1cil de solucionar.\n<\/p>\n\n\n\n

    <\/a>\u00bfQu\u00e9 es el bloqueo de renderizado CSS?<\/h3>\n\n\n\n

    \n T\u00e9cnicamente, \"renderizar\" por un navegador significa analizar el c\u00f3digo HTML y mostrarlo en la pantalla. Un navegador lee primero todo el texto HTML y luego genera la p\u00e1gina web para que el visitante la vea y la utilice. Por lo tanto, cuanto m\u00e1s CSS tenga en su sitio web, m\u00e1s tiempo tardar\u00e1 el navegador en analizarlo, lo que se traducir\u00e1 en una mayor velocidad de carga.\n<\/p>\n\n\n\n

    \n Por eso se suele considerar que CSS bloquea la renderizaci\u00f3n. Pero al mismo tiempo, CSS es importante si quieres crear un sitio web moderno y atractivo. Por tanto, el truco est\u00e1 en encontrar un equilibrio. \n<\/p>\n\n\n\n

    \n No exageres con demasiados archivos CSS o archivos CSS de gran tama\u00f1o. Esfu\u00e9rzate y utiliza trucos inteligentes para entregarlos lo m\u00e1s r\u00e1pido posible. Vamos a discutir todas estas t\u00e9cnicas en profundidad a continuaci\u00f3n. Pero primero, entendamos por qu\u00e9 es tan importante eliminar el CSS de bloqueo de renderizado.\n<\/p>\n\n\n\n

    <\/a>\u00bfPor qu\u00e9 debe eliminarse? <\/h3>\n\n\n\n

    \n Como se ha comentado anteriormente, el CSS de bloqueo de renderizado retrasar\u00e1 la velocidad de carga y, lo crea o no, la velocidad de carga de un sitio tiene un gran impacto en su \u00e9xito. Si un sitio tarda demasiado en cargarse, no solo irritar\u00e1 a tus clientes potenciales, sino que tambi\u00e9n afectar\u00e1 a tu puntuaci\u00f3n SEO.\n<\/p>\n\n\n\n

    Seg\u00fan los estudios, un sitio web que tarda m\u00e1s de 2 segundos en cargarse pierde visitantes a un ritmo exponencial. Por ejemplo, los sitios con un tiempo de carga de 2 segundos tienen un 6% tasa de rebote<\/a>. Esto significa que por cada 100 personas que visitan su sitio web, usted pierde 6 de ellas porque se impacientaron. <\/p>\n\n\n\n

    \n Alrededor de los 3 segundos, la tasa de rebote sube a 11%. Y a los 5 segundos, alcanza los 38%, es decir, m\u00e1s de un tercio de todo el tr\u00e1fico entrante perdido por un sitio web que carga lentamente. Adem\u00e1s, si su sitio web tarda m\u00e1s en cargarse, su puntuaci\u00f3n SEO se ver\u00e1 afectada, lo que dificultar\u00e1 su posicionamiento en los motores de b\u00fasqueda.\n<\/p>\n\n\n\n

    \n As\u00ed que no s\u00f3lo est\u00e1 perdiendo visitantes debido a la mayor tasa de rebote, sino que tambi\u00e9n est\u00e1 perdiendo tr\u00e1fico de los motores de b\u00fasqueda al mismo tiempo. Por lo tanto, es muy importante que arregles r\u00e1pidamente cualquier problema de CSS con bloqueo de renderizado que tengas en tu sitio web.\n<\/p>\n\n\n\n

    Ahora bien, dicho esto, cabe se\u00f1alar que hay muchas cosas que tienes que hacer para mejor rendimiento del sitio web<\/a>y arreglar el bloqueo de renderizado CSS es s\u00f3lo una parte de ello. Sin embargo, es uno de los problemas m\u00e1s f\u00e1ciles que se pueden resolver r\u00e1pidamente con algunos ajustes menores. <\/p>\n\n\n\n

    <\/a>C\u00f3mo eliminar el bloqueo de renderizado CSS<\/h2>\n\n\n\n

    \n Como hemos dicho antes, CSS se considera un recurso que bloquea la renderizaci\u00f3n, pero no podemos abandonar completamente su uso, ya que sigue siendo crucial para el aspecto y la sensaci\u00f3n del sitio web. Por lo tanto, el truco para minimizar su efecto en la velocidad de carga de un sitio es minimizar su uso por completo.\n<\/p>\n\n\n\n

    \n Para ello:\n<\/p>\n\n\n\n