{"id":13715,"date":"2025-03-20T20:47:00","date_gmt":"2025-03-20T20:47:00","guid":{"rendered":"https:\/\/newblog.siteground.com\/es\/?p=13715"},"modified":"2025-09-19T08:12:05","modified_gmt":"2025-09-19T08:12:05","slug":"eliminar-recursos-bloquean-renderizado","status":"publish","type":"post","link":"https:\/\/www.siteground.es\/blog\/eliminar-recursos-bloquean-renderizado\/","title":{"rendered":"C\u00f3mo Eliminar Recursos que Bloquean el Renderizado"},"content":{"rendered":"\n<div class=\"post-page__colored-blocks post-page__colored-blocks--update\"><p class=\"text text--size-medium color-darkest\">Este art\u00edculo fue escrito y publicado originalmente el 28 de marzo de 2022 por Cal Evans. Ha sido actualizado el 20 de marzo de 2025 para reflejar los \u00faltimos desarrollos en t\u00e9cnicas para eliminar recursos que bloquean el renderizado.<\/p><\/div>\n\n\n\n<p>Durante la primera etapa de la era web, las primeras p\u00e1ginas web se construyeron en una versi\u00f3n simplificada de XML llamada HTML. Blanco con texto negro. Si ve\u00edas una frase con un subrayado azul, sab\u00edas que pod\u00edas hacer clic en ella. Si era morado, sab\u00edas que ya hab\u00edas hecho clic.<\/p>\n\n\n\n<p>La vida era simple.<\/p>\n\n\n\n<p>Hoy en d\u00eda, el HTML suele ser la parte m\u00e1s peque\u00f1a de cualquier p\u00e1gina web. Cuando un navegador solicita una p\u00e1gina, obtiene el HTML pero luego tiene que procesarlo y descargar los recursos.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CSS<\/li>\n\n\n\n<li>JavaScript<\/li>\n\n\n\n<li>Im\u00e1genes<\/li>\n\n\n\n<li>Fuentes<\/li>\n\n\n\n<li>&#8230;y otros archivos externos necesarios para proporcionar la experiencia del usuario<\/li>\n<\/ul>\n\n\n\n<p>No todos los recursos se cargan de la misma forma. Algunos recursos que deben cargarse pueden ralentizar la visualizaci\u00f3n de la p\u00e1gina web.<\/p>\n\n\n\n<p>Estos recursos se llaman <strong>\u201cRecursos que Bloquean el Renderizado\u201d<\/strong> y este art\u00edculo te mostrar\u00e1 algunas <strong>t\u00e1cticas que puedes usar para reducir el n\u00famero de recursos que bloquean el renderizado en tu sitio web<\/strong> y c\u00f3mo aplicarlas manualmente o usando el plugin SiteGround Speed Optimizer.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-que-son-los-recursos-que-bloquean-el-renderizado\"><span class=\"ez-toc-section\" id=\"%C2%BFQue_son_los_Recursos_que_Bloquean_el_Renderizado\"><\/span><strong>\u00bfQu\u00e9 son los Recursos que Bloquean el Renderizado?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u201cRenderizar\u201d es el t\u00e9rmino t\u00e9cnico para \u201cmostrar\u201d. En este art\u00edculo, cada vez que hablamos de renderizado, nos referimos al proceso de mostrar tu sitio web en una pantalla.<\/p>\n\n\n\n<p>Cada recurso que se carga en tu sitio web tiene el potencial de ser un recurso que bloquea el renderizado. Esto incluye:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Im\u00e1genes grandes<\/li>\n\n\n\n<li>C\u00f3digo JavaScript que debe ejecutarse en elde tu p\u00e1gina<\/li>\n\n\n\n<li>CSS grande que tu p\u00e1gina no puede mostrar hasta que est\u00e9 completamente cargado<\/li>\n\n\n\n<li>Cualquier recurso de otro sitio que sea m\u00e1s lento que el tuyo<\/li>\n\n\n\n<li>Plugins que tienen sus propios archivos CSS y JavaScript<\/li>\n<\/ul>\n\n\n\n<p>En resumen, <strong>cualquier cosa que tengas en tu HTML para ser cargada es potencialmente un recurso que bloquea el renderizado.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-por-que-deberias-eliminar-los-recursos-que-bloquean-el-renderizado\"><span class=\"ez-toc-section\" id=\"%C2%BFPor_Que_Deberias_Eliminar_los_Recursos_que_Bloquean_el_Renderizado\"><\/span><strong>\u00bfPor Qu\u00e9 Deber\u00edas Eliminar los Recursos que Bloquean el Renderizado?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Cuando un visitante llega a tu sitio web, su navegador quiere mostrarle la p\u00e1gina lo m\u00e1s r\u00e1pido posible. Pero si hay demasiados recursos que bloquean el renderizado, el navegador tiene que frenar y esperar a que esos archivos se descarguen y procesen antes de mostrar algo \u00fatil.<\/p>\n\n\n\n<p>Esto crea lo que llamamos un &#8220;primer renderizado lento&#8221; &#8211; esa pausa inc\u00f3moda donde los usuarios miran una p\u00e1gina en blanco o medio cargada. No es lo ideal, \u00bfverdad?<\/p>\n\n\n\n<p>\u00bfPor qu\u00e9 es importante?:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Mejor Experiencia de Usuario<\/strong> \u2013 Las p\u00e1ginas que cargan r\u00e1pido se sienten fluidas y pulidas. Una p\u00e1gina que carga lentamente, por otro lado, puede frustrar a los visitantes y hacer que se vayan antes de siquiera ver tu contenido.<\/li>\n\n\n\n<li><strong>Optimizaci\u00f3n<\/strong> <a href=\"https:\/\/www.siteground.es\/kb\/seo-guia-general\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>SEO<\/strong><\/a> \u2013 Google y otros motores de b\u00fasqueda consideran la velocidad de la p\u00e1gina como un factor principal de clasificaci\u00f3n. Si tus p\u00e1ginas son lentas debido a recursos que bloquean el renderizado, afectar\u00e1 tu posici\u00f3n en los resultados de b\u00fasqueda.<\/li>\n\n\n\n<li><strong>Mayores Tasa de Conversi\u00f3n<\/strong> \u2013 Ya sea que est\u00e9s gestionando una tienda en l\u00ednea, un blog o un sitio de portafolio, las p\u00e1ginas que cargan m\u00e1s r\u00e1pido a menudo significan tasas de conversi\u00f3n m\u00e1s altas. Una p\u00e1gina \u00e1gil ayuda a mantener a la gente interesada.<\/li>\n\n\n\n<li><strong>Uso M\u00e1s Eficiente de los Recursos<\/strong> \u2013 Eliminar activos innecesarios o mal optimizados reduce el uso de ancho de banda y la carga del servidor, lo que puede ahorrarte dinero y reducir la tensi\u00f3n en tu entorno de hosting.<\/li>\n<\/ul>\n\n\n\n<style> .post-page__colored-blocks.post-page__colored-blocks--update p {\n    margin: 15px 0px;\n}\n<\/style>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--update\"><p class=\"text text--size-medium color-darkest\">Con <strong>Interacci\u00f3n al Siguiente Renderizado (INP)<\/strong> reemplazando a <strong>Retraso de la Primera Entrada (FID)<\/strong> como una m\u00e9trica de <a href=\"https:\/\/newblog.siteground.com\/es\/core-web-vitals-guia\/\"><strong>core web vitals<\/strong><\/a>, es a\u00fan m\u00e1s importante reducir los recursos que bloquean el renderizado.<br><br>Optimizar la rapidez con la que los usuarios pueden interactuar con tu p\u00e1gina no solo mejorar\u00e1 el rendimiento percibido, sino que tambi\u00e9n impactar\u00e1 positivamente en tu puntuaci\u00f3n de web vitals.<\/p><\/div>\n\n\n\n<p>Al final, el objetivo de tu sitio web es comunicar algo de manera r\u00e1pida y clara. Los recursos que bloquean el renderizado se interponen en el camino al retrasar el momento en que los visitantes pueden comenzar a interactuar con tu contenido.<\/p>\n\n\n\n<p>Ahora que sabes el \u201cpor qu\u00e9\u201d, vamos a profundizar en c\u00f3mo identificar estos lentos y agilizar el proceso de carga de tu sitio web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-como-identificar-recursos-que-bloquean-el-renderizado-en-tu-sitio-web\"><span class=\"ez-toc-section\" id=\"%C2%BFComo_Identificar_Recursos_que_Bloquean_el_Renderizado_en_tu_Sitio_Web\"><\/span><strong>\u00bfC\u00f3mo Identificar Recursos que Bloquean el Renderizado en tu Sitio Web?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Hay muchas herramientas para ayudarte a ver c\u00f3mo carga tu sitio web. Sugerimos estas opciones para identificar recursos que bloquean el renderizado:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-usando-las-devtools-del-navegador\"><strong>Usando las DevTools del Navegador<\/strong><\/h3>\n\n\n\n<p>Esta es una de las herramientas que puede mostrarte una vista de \u201ccascada\u201d de c\u00f3mo carga una p\u00e1gina. Todos los navegadores modernos incluyen esta funci\u00f3n.<\/p>\n\n\n\n<p>Haz clic derecho en cualquier parte de tu p\u00e1gina web, selecciona <strong>\u201cInspeccionar\u201d<\/strong>, luego dir\u00edgete a la pesta\u00f1a <strong>\u201cRed\u201d<\/strong>.<\/p>\n\n\n\n<p>Recarga la p\u00e1gina, y ver\u00e1s algo como esto:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"605\" src=\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2024\/07\/La-opcio\u0301n-22Inspeccionar-elemento22-del-navegador-1024x605.jpg\" alt=\"La opci\u00f3n &quot;Inspeccionar elemento&quot; del navegador\" class=\"wp-image-16656\"\/><\/figure>\n\n\n\n<p>En el lado derecho, ver\u00e1s el gr\u00e1fico de cascada. Las barras de colores muestran cu\u00e1nto tiempo tarda cada recurso en cargarse. La delgada l\u00ednea azul marca cu\u00e1ndo la p\u00e1gina comienza a renderizarse.<\/p>\n\n\n\n<p>Si notas muchos recursos carg\u00e1ndose antes de esa l\u00ednea, podr\u00eda significar que hay margen de mejora.<\/p>\n\n\n\n<p>Esta vista integrada es genial para revisiones r\u00e1pidas, pero solo te dice c\u00f3mo se desempe\u00f1a la p\u00e1gina en tu configuraci\u00f3n actual. Si est\u00e1s desarrollando localmente, los resultados podr\u00edan ser m\u00e1s r\u00e1pidos que en condiciones reales.<\/p>\n\n\n\n<p>Para obtener informaci\u00f3n m\u00e1s profunda, puedes recurrir a herramientas en l\u00ednea como <a href=\"https:\/\/www.webpagetest.org\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">WebPageTest<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-webpagetest-y-otras-herramientas-de-pruebas-de-rendimiento\"><strong>WebPageTest y Otras Herramientas de Pruebas de Rendimiento<\/strong><\/h3>\n\n\n\n<p>WebPageTest te da una imagen m\u00e1s clara de c\u00f3mo se desempe\u00f1a tu sitio a nivel global. Adem\u00e1s, puedes personalizar las pruebas para que coincidan con condiciones del mundo real.<\/p>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--update\"><p class=\"text text--size-medium color-darkest\"><strong>Consejo profesional<\/strong>: Si quieres una visi\u00f3n general m\u00e1s r\u00e1pida, herramientas como <a href=\"https:\/\/www.siteground.es\/kb\/guia-de-google-pagespeed-insights\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>PageSpeed Insights<\/strong><\/a> tambi\u00e9n se\u00f1alan recursos que bloquean el renderizado.<\/p><\/div>\n\n\n\n<p>El m\u00e9todo t\u00edpico es:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Comienza con una prueba de escritorio<\/li>\n\n\n\n<li>Elige una ubicaci\u00f3n de servidor que est\u00e9 lejos del host de tu sitio web<\/li>\n\n\n\n<li>Mantente con Chrome a menos que tengas una raz\u00f3n para elegir otro navegador<\/li>\n<\/ul>\n\n\n\n<p>Puedes ajustar esto en la pesta\u00f1a de <strong>\u201cConfiguraci\u00f3n Avanzada\u201d<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"346\" src=\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2024\/07\/WebPage-Test.jpg\" alt=\"WebPage Test\" class=\"wp-image-16658\"\/><\/figure><\/div>\n\n\n<p>Haz clic en <strong>\u201cIniciar Prueba\u201d<\/strong> y revisa los resultados.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"397\" src=\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2024\/07\/WebPage-Test-.jpg\" alt=\"WebPage Test\" class=\"wp-image-16659\"\/><\/figure><\/div>\n\n\n<p>Ahora ver\u00e1s un gr\u00e1fico de cascada m\u00e1s detallado. Al hacer clic en \u00e9l, se abre una versi\u00f3n de tama\u00f1o completo donde puedes identificar archivos JavaScript y CSS que bloquean el renderizado.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"671\" src=\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2024\/07\/Una-de-las-cosas-que-te-mostrara\u0301-es-una-lista-de-los-recursos-que-bloquean-el-renderizado..jpg\" alt=\"Una de las cosas que te mostrar\u00e1 es una lista de los recursos que bloquean el renderizado\" class=\"wp-image-16660\"\/><\/figure><\/div>\n\n\n<p>En este ejemplo, hay 32 recursos que bloquean el renderizado, principalmente archivos CSS, con algunos archivos JavaScript mezclados.<\/p>\n\n\n\n<p>Es f\u00e1cil ver por qu\u00e9 JavaScript puede bloquear el renderizado, pero CSS tambi\u00e9n puede hacerlo. El navegador no puede mostrar completamente la p\u00e1gina hasta que tenga todos los estilos que necesita. Si una regla CSS importante se carga tarde, tu p\u00e1gina podr\u00eda pausarse hasta que est\u00e9 lista.<\/p>\n\n\n\n<p>Por eso es clave optimizar la entrega de CSS y JS, y es exactamente lo que cubriremos a continuaci\u00f3n.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-como-eliminar-recursos-que-bloquean-el-renderizado\"><span class=\"ez-toc-section\" id=\"Como_Eliminar_Recursos_que_Bloquean_el_Renderizado\"><\/span><strong>C\u00f3mo Eliminar Recursos que Bloquean el Renderizado<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Con el tiempo, los desarrolladores web han experimentado con varios m\u00e9todos para reducir o eliminar recursos que bloquean el renderizado. Hoy en d\u00eda, hay varias t\u00e9cnicas confiables que puedes usar para acelerar el renderizado de la p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-optimizacion-de-la-carga-de-javascript\"><strong>1. Optimizaci\u00f3n de la Carga de JavaScript<\/strong><\/h3>\n\n\n\n<p>JavaScript es uno de los culpables m\u00e1s comunes cuando se trata de bloquear el renderizado. Afortunadamente, hay varias t\u00e9cnicas para controlar c\u00f3mo y cu\u00e1ndo se cargan tus scripts, para que tu p\u00e1gina pueda mostrarse m\u00e1s r\u00e1pido.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-1-1-entendiendo-async-vs-defer\"><strong>1.1. Entendiendo Async vs. Defer<\/strong><\/h4>\n\n\n\n<p>Para evitar que los archivos JavaScript bloqueen el renderizado de la p\u00e1gina, debes usar los atributos <strong><em>DEFER<\/em><\/strong> o <strong><em>ASYNC<\/em><\/strong> en tus etiquetas de script.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<pre class=\"wp-block-code\"><code>&lt;script defer src=\"https:\/\/example.com\/script.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<\/blockquote>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>DEFER<\/strong> descarga el script mientras la p\u00e1gina se est\u00e1 renderizando y lo ejecuta solo despu\u00e9s de que el HTML est\u00e9 completamente analizado. Preserva el orden de los scripts.<\/li>\n\n\n\n<li><strong>ASYNC<\/strong> descarga y ejecuta el script tan pronto como est\u00e9 listo, independientemente del estado de renderizado de la p\u00e1gina. Esto puede causar que los scripts se ejecuten fuera de orden.<\/li>\n<\/ul>\n\n\n\n<p>Generalmente, <strong>DEFER<\/strong> es la mejor opci\u00f3n, especialmente cuando tus scripts dependen unos de otros o del DOM. Permite que el navegador se concentre en pintar la p\u00e1gina antes de ejecutar scripts.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-1-2-manejo-eficiente-de-scripts-de-terceros\"><strong>1.2. Manejo Eficiente de Scripts de Terceros<\/strong><\/h4>\n\n\n\n<p>Los scripts de terceros, como los de anal\u00edticas o widgets de redes sociales, son bloqueadores de renderizado comunes. Si es posible, carga estos scripts usando <strong>DEFER<\/strong> o <strong>ASYNC<\/strong>.<\/p>\n\n\n\n<p>Algunos scripts de terceros no esenciales tambi\u00e9n pueden moverse para cargarse despu\u00e9s de que la p\u00e1gina haya terminado de renderizarse por completo, usando escuchadores de eventos como <em>window.onload<\/em>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-1-3-carga-diferida-de-scripts-no-criticos-con-intersectionobserver\"><strong>1.3. Carga Diferida de Scripts No Cr\u00edticos con IntersectionObserver<\/strong><\/h4>\n\n\n\n<p>Para scripts que solo se necesitan una vez que un usuario interact\u00faa o se desplaza a una cierta secci\u00f3n (por ejemplo, widgets de chat o videos incrustados), puedes cargarlos de manera diferida usando la API IntersectionObserver.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const observer = new IntersectionObserver((entries) =&gt; {\n  if (entries&#91;0].isIntersecting) {\n    \/\/ Dynamically load script here\n  }\n});\nobserver.observe(document.querySelector('#lazy-element'));<\/code><\/pre>\n\n\n\n<p>Esto le indica al navegador que cargue estos scripts solo cuando los elementos relacionados entren en vista, reduciendo la carga inicial para el navegador.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-optimizacion-de-css-para-una-renderizacion-mas-rapida\"><strong>2. Optimizaci\u00f3n de CSS para una Renderizaci\u00f3n m\u00e1s R\u00e1pida<\/strong><\/h3>\n\n\n\n<p>CSS le dice a tu navegador c\u00f3mo estilizar tu p\u00e1gina, pero tambi\u00e9n puede ralentizar la velocidad con la que aparece esa p\u00e1gina. Veamos c\u00f3mo hacer que tu CSS trabaje contigo, no contra ti, en lo que respecta al rendimiento.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-2-1-incluir-css-critico-para-el-contenido-above-the-fold\"><strong>2.1. Incluir CSS Cr\u00edtico para el Contenido Above-the-Fold<\/strong><\/h4>\n\n\n\n<p>Los navegadores bloquean la renderizaci\u00f3n hasta que han procesado el CSS. Para acelerar el primer pintado, Google sugiere identificar tu \u201c<strong>CSS cr\u00edtico<\/strong>\u201d (los estilos necesarios para el contenido above-the-fold) e incluirlos directamente en tu HTML.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\/* Critical CSS goes here *\/&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>Esto elimina la necesidad de que el navegador espere por hojas de estilo externas antes de mostrar el contenido above-the-fold. <\/p>\n\n\n\n<p>La forma m\u00e1s f\u00e1cil de identificar e incluir CSS cr\u00edtico es usando herramientas como la <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/coverage\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Herramienta de Cobertura de Chrome<\/a> para ver qu\u00e9 estilos se cargan durante la renderizaci\u00f3n inicial.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"844\" src=\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2024\/07\/Chrome-Coverage-Tool.jpg\" alt=\"Chrome Coverage Tool\" class=\"wp-image-16661\"\/><\/figure><\/div>\n\n\n<p>Te mostrar\u00e1 el CSS que est\u00e1s cargando que no es cr\u00edtico (barra roja) y el cr\u00edtico (barra verde).<\/p>\n\n\n\n<p>Al extraer el CSS cr\u00edtico y colocarlo inline, puedes eliminar el CSS como un recurso que bloquea la renderizaci\u00f3n.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-2-2-aplazar-css-no-critico\"><strong>2.2. Aplazar CSS No Cr\u00edtico<\/strong><\/h4>\n\n\n\n<p>Para estilos no esenciales, como los que afectan al pie de p\u00e1gina o elementos debajo del fold, puedes aplazar la carga usando el atributo media con un valor como print y cambiarlo de nuevo a all despu\u00e9s de que la p\u00e1gina cargue:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"stylesheet\" href=\"non-critical.css\" media=\"print\" onload=\"this.media='all'\"&gt;<\/code><\/pre>\n\n\n\n<p>Este truco permite al navegador priorizar recursos cr\u00edticos y cargar el resto despu\u00e9s de que la p\u00e1gina est\u00e9 visualmente completa.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-2-3-pre-cargar-archivos-css-clave\"><strong>2.3. Pre-cargar Archivos CSS Clave<\/strong><\/h4>\n\n\n\n<p>Otra t\u00e1ctica es pre-cargar archivos CSS que sabes que son cruciales pero no quieres incluir inline. Pre-cargar ayuda al navegador a descubrir estos recursos antes en el proceso de renderizaci\u00f3n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"preload\" href=\"important.css\" as=\"style\" onload=\"this.rel='stylesheet'\"&gt;<\/code><\/pre>\n\n\n\n<p>Es \u00fatil para hojas de estilo importantes que impactan el aspecto y la sensaci\u00f3n del contenido above-the-fold pero son demasiado grandes o complejas para incluir inline.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-tecnicas-de-renderizacion-progresiva\"><strong>3. T\u00e9cnicas de Renderizaci\u00f3n Progresiva<\/strong><\/h3>\n\n\n\n<p>M\u00e1s all\u00e1 de scripts y hojas de estilo, hay algunas estrategias adicionales que puedes usar para cargar contenido progresivamente y acelerar el primer pintado de tu sitio web.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-3-1-renderizacion-del-lado-del-servidor-ssr-y-generacion-estatica\"><strong>3.1. Renderizaci\u00f3n del Lado del Servidor (SSR) y Generaci\u00f3n Est\u00e1tica<\/strong><\/h4>\n\n\n\n<p>La Renderizaci\u00f3n del Lado del Servidor (SSR) y la generaci\u00f3n est\u00e1tica pueden ayudar a entregar HTML completamente formado al navegador, reduciendo la dependencia de scripts del lado del cliente para la renderizaci\u00f3n inicial.<\/p>\n\n\n\n<p>Esto significa que el contenido se vuelve visible m\u00e1s pronto porque el navegador no tiene que esperar a que JavaScript construya la estructura de la p\u00e1gina.<\/p>\n\n\n\n<p>Frameworks como Next.js o Gatsby facilitan la implementaci\u00f3n de SSR y generaci\u00f3n est\u00e1tica.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-3-2-optimizacion-de-fuentes-e-imagenes-para-mejorar-los-tiempos-de-carga\"><strong>3.2. Optimizaci\u00f3n de Fuentes e Im\u00e1genes para Mejorar los Tiempos de Carga<\/strong><\/h4>\n\n\n\n<p>Las fuentes e im\u00e1genes tambi\u00e9n pueden bloquear la renderizaci\u00f3n si no se manejan correctamente. Para optimizarlas:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Usa la propiedad CSS font-display: swap para evitar que los archivos de fuentes bloqueen el primer pintado.<\/li>\n\n\n\n<li>Carga diferida de im\u00e1genes debajo del fold usando el atributo <em>loading=&#8221;lazy&#8221;<\/em>.<\/li>\n\n\n\n<li>Precarga fuentes clave o im\u00e1genes heroicas con la etiqueta para priorizarlas.<\/li>\n<\/ul>\n\n\n\n<p>Juntas, estas estrategias mejoran el rendimiento de tu sitio al permitir que los navegadores muestren contenido lo antes posible mientras cargan activos no esenciales en segundo plano.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-como-reducir-recursos-que-bloquean-la-renderizacion-en-wordpress-con-siteground-speed-optimizer\"><span class=\"ez-toc-section\" id=\"Como_Reducir_Recursos_que_Bloquean_la_Renderizacion_en_WordPress_con_SiteGround_Speed_Optimizer\"><\/span><strong>C\u00f3mo Reducir Recursos que Bloquean la Renderizaci\u00f3n en WordPress con SiteGround Speed Optimizer<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Si usas WordPress, el plugin <a href=\"https:\/\/www.siteground.es\/tutoriales\/wordpress\/speed-optimizer\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Speed Optimizer<\/strong><\/a> de SiteGround ofrece una manera f\u00e1cil de reducir recursos que bloquean la renderizaci\u00f3n sin tocar tu c\u00f3digo.<\/p>\n\n\n\n<p>Incluso si no alojas con SiteGround, este plugin a\u00fan puede ayudar a optimizar el rendimiento de tu sitio web.<\/p>\n\n\n\n<style> .post-page__colored-blocks.post-page__colored-blocks--update p {\n    margin: 15px 0px;\n}\n<\/style>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--update\"><p class=\"text text--size-medium color-darkest\"><strong>Advertencia<\/strong>:<br><br>Al hacer estos cambios, es importante proceder con cuidado. Recomendamos ajustar una configuraci\u00f3n a la vez y luego verificar tu sitio en un navegador diferente para asegurarte de que todo sigue funcionando correctamente.<br><br>De esta manera, puedes identificar cualquier problema potencial y solucionarlo inmediatamente antes de pasar a la siguiente optimizaci\u00f3n.<\/p><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-optimizacion-de-javascript\"><strong>1. Optimizaci\u00f3n de JavaScript<\/strong><\/h3>\n\n\n\n<p>Primero, ve a la configuraci\u00f3n de <strong>JavaScript<\/strong> en el plugin. Aqu\u00ed est\u00e1n las optimizaciones clave:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2868\" height=\"1334\" src=\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2022\/04\/js-ajustes-optimizer.jpeg\" alt=\"Captura de pantalla de la configuraci\u00f3n de JavaScript del Speed Optimizer en el Frontend, que muestra las opciones para activar o desactivar la minificaci\u00f3n, combinaci\u00f3n y aplazamiento de archivos JavaScript, y opciones adicionales para excluir archivos espec\u00edficos de la optimizaci\u00f3n.\" class=\"wp-image-18136\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Minificar Archivos JavaScript:<\/strong> Esto elimina caracteres innecesarios de tu c\u00f3digo JavaScript. Esto lo hace m\u00e1s peque\u00f1o y r\u00e1pido de cargar.<\/li>\n\n\n\n<li><strong>Combinar Archivos JavaScript:<\/strong> Combinar archivos JavaScript reduce el n\u00famero de solicitudes que el navegador necesita hacer, acelerando el tiempo de carga.<\/li>\n\n\n\n<li><strong>Aplazar JavaScript que Bloquea la Renderizaci\u00f3n:<\/strong> Esta opci\u00f3n importante a\u00f1ade el atributo DEFER a tus archivos JavaScript, permitiendo que la p\u00e1gina se renderice antes de ejecutar JavaScript.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-optimizacion-de-css\"><strong>2. Optimizaci\u00f3n de CSS<\/strong><\/h3>\n\n\n\n<p>A continuaci\u00f3n, dir\u00edgete a la configuraci\u00f3n de <strong>CSS<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2864\" height=\"1340\" src=\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2022\/04\/css-ajustes-optimizer.jpeg\" alt=\"Captura de pantalla de la configuraci\u00f3n de CSS del Speed Optimizer en el Frontend, que muestra las opciones para activar o desactivar la minificaci\u00f3n, combinaci\u00f3n y precarga de archivos CSS, y opciones adicionales para excluir archivos espec\u00edficos de la optimizaci\u00f3n.\" class=\"wp-image-18135\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Pre-cargar CSS Combinado:<\/strong> Esta configuraci\u00f3n asegura que tu archivo CSS combinado se cargue temprano en el proceso, para que est\u00e9 disponible cuando la p\u00e1gina comience a renderizarse.<\/li>\n\n\n\n<li><strong>Minificar Archivos CSS:<\/strong> Esto elimina espacios, nuevas l\u00edneas y comentarios de tu CSS, reduciendo el tama\u00f1o del archivo y mejorando los tiempos de carga.<\/li>\n\n\n\n<li><strong>Combinar Archivos CSS:<\/strong> Combinar archivos CSS ayuda a reducir el bloqueo de renderizaci\u00f3n al disminuir el n\u00famero de solicitudes HTTP.<\/li>\n<\/ul>\n\n\n\n<p>Al aplicar estas optimizaciones, puedes reducir significativamente los recursos que bloquean la renderizaci\u00f3n en tu sitio de WordPress y <a href=\"https:\/\/www.siteground.es\/kb\/mejorar-rendimiento-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">hacerlo m\u00e1s r\u00e1pido<\/a>.<\/p>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--update\"><p class=\"text text--size-medium color-darkest\">Si quieres profundizar en las optimizaciones de WordPress, echa un vistazo a nuestro video sobre <a href=\"https:\/\/www.youtube.com\/watch?v=pjq1mcaBJrM\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>C\u00f3mo Acelerar tu Sitio Web de WordPress como un Pro.<\/strong><\/a><\/p><\/div>\n\n\n\n<iframe width=\"100%\" height=\"330\" data-cookieblock-src=\"https:\/\/www.youtube.com\/embed\/pjq1mcaBJrM?si=ETkXV-iQAOiT-VgG\" data-cookieconsent=\"marketing\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen=\"\"><\/iframe>\n\n\n\n<p>Despu\u00e9s de pasar por todos estos pasos en nuestro sitio de prueba, hemos reducido a 24 recursos que bloquean la renderizaci\u00f3n de 32. Eso es un muy buen comienzo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"496\" src=\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2024\/07\/image6-1024x496-1.jpg\" alt=\"Optimiza tu Javascript\" class=\"wp-image-16671\"\/><\/figure>\n\n\n\n<p>El siguiente paso es localizar todo el CSS cr\u00edtico e incluirlo inline. Luego aplazar todo el CSS restante y aplicar las otras t\u00e9cnicas de optimizaci\u00f3n que discutimos anteriormente. <strong>Eso eliminar\u00e1 casi todos los bloqueadores de renderizaci\u00f3n restantes.<\/strong><\/p>\n\n\n\n<p>Ahora, repasemos una lista de verificaci\u00f3n final de todas las t\u00e9cnicas que hemos explorado.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-lista-de-verificacion-para-eliminar-recursos-que-bloquean-la-renderizacion\"><span class=\"ez-toc-section\" id=\"Lista_de_Verificacion_para_Eliminar_Recursos_que_Bloquean_la_Renderizacion\"><\/span><strong>Lista de Verificaci\u00f3n para Eliminar Recursos que Bloquean la Renderizaci\u00f3n<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Hasta ahora, has aprendido que los recursos que bloquean la renderizaci\u00f3n no solo ralentizan las cosas, sino que pueden impactar directamente en la experiencia del usuario, <a href=\"https:\/\/www.siteground.es\/kb\/auditoria-tecnica-seo\/\" target=\"_blank\" rel=\"noreferrer noopener\">SEO<\/a> y conversiones.<\/p>\n\n\n\n<p>Para ayudarte a poner todo en acci\u00f3n, aqu\u00ed tienes una lista de verificaci\u00f3n que puedes seguir:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 Identifica recursos que bloquean la renderizaci\u00f3n usando las DevTools del navegador o herramientas como WebPageTest.<\/li>\n\n\n\n<li>\u2705 A\u00f1ade atributos <strong>defer<\/strong> o <strong>async<\/strong> a archivos JavaScript no cr\u00edticos.<\/li>\n\n\n\n<li>\u2705 Optimiza scripts de terceros carg\u00e1ndolos de forma as\u00edncrona o aplaz\u00e1ndolos cuando sea posible.<\/li>\n\n\n\n<li>\u2705 Usa <strong>IntersectionObserver<\/strong> para cargar scripts de forma diferida que no se necesitan inmediatamente.<\/li>\n\n\n\n<li>\u2705 Incluye tu CSS cr\u00edtico (estilos above-the-fold) directamente en tu HTML.<\/li>\n\n\n\n<li>\u2705 Aplaza CSS no cr\u00edtico o c\u00e1rgalo de forma as\u00edncrona, y elimina CSS no utilizado.<\/li>\n\n\n\n<li>\u2705 Pre-carga archivos CSS importantes para darle al navegador una ventaja.<\/li>\n\n\n\n<li>\u2705 Implementa t\u00e9cnicas de renderizaci\u00f3n progresiva como la Renderizaci\u00f3n del Lado del Servidor (SSR) o generaci\u00f3n est\u00e1tica donde tenga sentido.<\/li>\n\n\n\n<li>\u2705 Optimiza fuentes e im\u00e1genes para eliminar cuellos de botella ocultos.<\/li>\n\n\n\n<li>\u2705 Usa plugins de optimizaci\u00f3n de rendimiento como el SiteGround Speed Optimizer para automatizar muchas de estas tareas f\u00e1cilmente.<\/li>\n<\/ul>\n\n\n\n<p>Eliminar recursos que bloquean la renderizaci\u00f3n puede parecer un ajuste fino. Cada uno de estos pasos reduce esas pausas frustrantes durante las cargas de p\u00e1gina. Apl\u00edcalos de manera consistente y crear\u00e1s una experiencia m\u00e1s r\u00e1pida y fluida para tus visitantes.<\/p>\n\n\n\n<p>Desde mejorar la experiencia del usuario hasta impulsar el SEO, cada optimizaci\u00f3n cuenta. Cuando tus p\u00e1ginas cargan r\u00e1pidamente, los visitantes se quedan m\u00e1s tiempo y los motores de b\u00fasqueda se dan cuenta de eso.<\/p>\n\n\n\n<p>\u00bfLa mejor parte? Con una herramienta como el SiteGround Speed Optimizer, puedes automatizar muchos de estos pasos y obtener resultados m\u00e1s r\u00e1pidos sin mucho esfuerzo y conocimiento de codificaci\u00f3n.<\/p>\n\n\n\n<p>A largo plazo, cada peque\u00f1a mejora suma, y eso es lo que mantiene tu sitio web r\u00e1pido, confiable y listo para rendir.<\/p>\n","protected":false},"excerpt":{"rendered":"Este art\u00edculo fue escrito y publicado originalmente el 28 de marzo de 2022 por Cal Evans. Ha sido actualizado el 20 de marzo de 2025 para reflejar los \u00faltimos desarrollos en t\u00e9cnicas para eliminar recursos que bloquean el renderizado. Durante la primera etapa de la era web, las primeras p\u00e1ginas web se construyeron en una&hellip;","protected":false},"author":136,"featured_media":13717,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2532,2781,2753,19],"tags":[],"class_list":["post-13715","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo","category-entendiendo-el-hosting","category-velocidad","category-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.2 (Yoast SEO v24.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>C\u00f3mo Eliminar Recursos que Bloquean el Renderizado - El blog de SiteGround<\/title>\n<meta name=\"description\" content=\"Renderizado es el t\u00e9rmino t\u00e9cnico para &quot;mostrar&quot;. En este art\u00edculo aprender\u00e1s a optimizar CSS y JavaScript para evitar el bloqueo del renderizado de tu web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo Eliminar Recursos que Bloquean el Renderizado | El blog de SiteGround\" \/>\n<meta property=\"og:description\" content=\"Renderizado es el t\u00e9rmino t\u00e9cnico para &quot;mostrar&quot;. En este art\u00edculo aprender\u00e1s a optimizar CSS y JavaScript para evitar el bloqueo del renderizado de tu web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/\" \/>\n<meta property=\"og:site_name\" content=\"SiteGround\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-20T20:47:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-19T08:12:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2022\/04\/Main_How_to_eliminate_render-blocking_resources_1200x600.jpg\" \/>\n<meta name=\"author\" content=\"Aleksandar Kolev\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aleksandar Kolev\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/\"},\"author\":{\"name\":\"Aleksandar Kolev\",\"@id\":\"https:\/\/newblog.siteground.com\/es\/#\/schema\/person\/cb7243a505466cc04641e011eb97c94d\"},\"headline\":\"C\u00f3mo Eliminar Recursos que Bloquean el Renderizado\",\"datePublished\":\"2025-03-20T20:47:00+00:00\",\"dateModified\":\"2025-09-19T08:12:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/\"},\"wordCount\":2963,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/newblog.siteground.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2022\/04\/Main_How_to_eliminate_render-blocking_resources_1200x600.jpg\",\"articleSection\":[\"Desarrollo\",\"Entendiendo el Hosting\",\"Velocidad\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/\",\"url\":\"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/\",\"name\":\"C\u00f3mo Eliminar Recursos que Bloquean el Renderizado - El blog de SiteGround\",\"isPartOf\":{\"@id\":\"https:\/\/newblog.siteground.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2022\/04\/Main_How_to_eliminate_render-blocking_resources_1200x600.jpg\",\"datePublished\":\"2025-03-20T20:47:00+00:00\",\"dateModified\":\"2025-09-19T08:12:05+00:00\",\"description\":\"Renderizado es el t\u00e9rmino t\u00e9cnico para \\\"mostrar\\\". En este art\u00edculo aprender\u00e1s a optimizar CSS y JavaScript para evitar el bloqueo del renderizado de tu web.\",\"breadcrumb\":{\"@id\":\"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/#primaryimage\",\"url\":\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2022\/04\/Main_How_to_eliminate_render-blocking_resources_1200x600.jpg\",\"contentUrl\":\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2022\/04\/Main_How_to_eliminate_render-blocking_resources_1200x600.jpg\",\"width\":1200,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/newblog.siteground.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo Eliminar Recursos que Bloquean el Renderizado\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/newblog.siteground.com\/es\/#website\",\"url\":\"https:\/\/newblog.siteground.com\/es\/\",\"name\":\"El blog de SiteGround\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/newblog.siteground.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/newblog.siteground.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/newblog.siteground.com\/es\/#organization\",\"name\":\"SiteGround Espa\u00f1a\",\"url\":\"https:\/\/newblog.siteground.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/newblog.siteground.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2025\/01\/cropped-Siteground-Logo-on-white.jpg\",\"contentUrl\":\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2025\/01\/cropped-Siteground-Logo-on-white.jpg\",\"width\":166,\"height\":250,\"caption\":\"SiteGround Espa\u00f1a\"},\"image\":{\"@id\":\"https:\/\/newblog.siteground.com\/es\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/newblog.siteground.com\/es\/#\/schema\/person\/cb7243a505466cc04641e011eb97c94d\",\"name\":\"Aleksandar Kolev\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/newblog.siteground.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e052d4b0a923379bef2baff3319f7dbe?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e052d4b0a923379bef2baff3319f7dbe?s=96&d=mm&r=g\",\"caption\":\"Aleksandar Kolev\"},\"description\":\"Aleksandar focuses on how hosting infrastructure, performance systems, and platform tools work together to keep websites fast, secure, and reliable. His work translates complex hosting concepts, such as caching, DNS, and server-level optimization, into practical guidance based on real-world scenarios and user needs. Outside of work, he enjoys chess, meditation, playing guitar, and integrating AI systems in his daily life.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/aleksandar-kolev-a62172310\/\"],\"url\":\"https:\/\/newblog.siteground.com\/es\/author\/aleksandarkolev\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo Eliminar Recursos que Bloquean el Renderizado - El blog de SiteGround","description":"Renderizado es el t\u00e9rmino t\u00e9cnico para \"mostrar\". En este art\u00edculo aprender\u00e1s a optimizar CSS y JavaScript para evitar el bloqueo del renderizado de tu web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/","og_locale":"en_US","og_type":"article","og_title":"C\u00f3mo Eliminar Recursos que Bloquean el Renderizado | El blog de SiteGround","og_description":"Renderizado es el t\u00e9rmino t\u00e9cnico para \"mostrar\". En este art\u00edculo aprender\u00e1s a optimizar CSS y JavaScript para evitar el bloqueo del renderizado de tu web.","og_url":"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/","og_site_name":"SiteGround","article_published_time":"2025-03-20T20:47:00+00:00","article_modified_time":"2025-09-19T08:12:05+00:00","og_image":[{"url":"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2022\/04\/Main_How_to_eliminate_render-blocking_resources_1200x600.jpg","type":"","width":"","height":""}],"author":"Aleksandar Kolev","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Aleksandar Kolev","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/#article","isPartOf":{"@id":"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/"},"author":{"name":"Aleksandar Kolev","@id":"https:\/\/newblog.siteground.com\/es\/#\/schema\/person\/cb7243a505466cc04641e011eb97c94d"},"headline":"C\u00f3mo Eliminar Recursos que Bloquean el Renderizado","datePublished":"2025-03-20T20:47:00+00:00","dateModified":"2025-09-19T08:12:05+00:00","mainEntityOfPage":{"@id":"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/"},"wordCount":2963,"commentCount":0,"publisher":{"@id":"https:\/\/newblog.siteground.com\/es\/#organization"},"image":{"@id":"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/#primaryimage"},"thumbnailUrl":"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2022\/04\/Main_How_to_eliminate_render-blocking_resources_1200x600.jpg","articleSection":["Desarrollo","Entendiendo el Hosting","Velocidad","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/","url":"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/","name":"C\u00f3mo Eliminar Recursos que Bloquean el Renderizado - El blog de SiteGround","isPartOf":{"@id":"https:\/\/newblog.siteground.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/#primaryimage"},"image":{"@id":"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/#primaryimage"},"thumbnailUrl":"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2022\/04\/Main_How_to_eliminate_render-blocking_resources_1200x600.jpg","datePublished":"2025-03-20T20:47:00+00:00","dateModified":"2025-09-19T08:12:05+00:00","description":"Renderizado es el t\u00e9rmino t\u00e9cnico para \"mostrar\". En este art\u00edculo aprender\u00e1s a optimizar CSS y JavaScript para evitar el bloqueo del renderizado de tu web.","breadcrumb":{"@id":"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/#primaryimage","url":"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2022\/04\/Main_How_to_eliminate_render-blocking_resources_1200x600.jpg","contentUrl":"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2022\/04\/Main_How_to_eliminate_render-blocking_resources_1200x600.jpg","width":1200,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/newblog.siteground.com\/es\/eliminar-recursos-bloquean-renderizado\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/newblog.siteground.com\/es\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo Eliminar Recursos que Bloquean el Renderizado"}]},{"@type":"WebSite","@id":"https:\/\/newblog.siteground.com\/es\/#website","url":"https:\/\/newblog.siteground.com\/es\/","name":"El blog de SiteGround","description":"","publisher":{"@id":"https:\/\/newblog.siteground.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/newblog.siteground.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/newblog.siteground.com\/es\/#organization","name":"SiteGround Espa\u00f1a","url":"https:\/\/newblog.siteground.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/newblog.siteground.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2025\/01\/cropped-Siteground-Logo-on-white.jpg","contentUrl":"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2025\/01\/cropped-Siteground-Logo-on-white.jpg","width":166,"height":250,"caption":"SiteGround Espa\u00f1a"},"image":{"@id":"https:\/\/newblog.siteground.com\/es\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/newblog.siteground.com\/es\/#\/schema\/person\/cb7243a505466cc04641e011eb97c94d","name":"Aleksandar Kolev","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/newblog.siteground.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e052d4b0a923379bef2baff3319f7dbe?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e052d4b0a923379bef2baff3319f7dbe?s=96&d=mm&r=g","caption":"Aleksandar Kolev"},"description":"Aleksandar focuses on how hosting infrastructure, performance systems, and platform tools work together to keep websites fast, secure, and reliable. His work translates complex hosting concepts, such as caching, DNS, and server-level optimization, into practical guidance based on real-world scenarios and user needs. Outside of work, he enjoys chess, meditation, playing guitar, and integrating AI systems in his daily life.","sameAs":["https:\/\/www.linkedin.com\/in\/aleksandar-kolev-a62172310\/"],"url":"https:\/\/newblog.siteground.com\/es\/author\/aleksandarkolev\/"}]}},"_links":{"self":[{"href":"https:\/\/newblog.siteground.com\/es\/wp-json\/wp\/v2\/posts\/13715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/newblog.siteground.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/newblog.siteground.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/newblog.siteground.com\/es\/wp-json\/wp\/v2\/users\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/newblog.siteground.com\/es\/wp-json\/wp\/v2\/comments?post=13715"}],"version-history":[{"count":17,"href":"https:\/\/newblog.siteground.com\/es\/wp-json\/wp\/v2\/posts\/13715\/revisions"}],"predecessor-version":[{"id":18234,"href":"https:\/\/newblog.siteground.com\/es\/wp-json\/wp\/v2\/posts\/13715\/revisions\/18234"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/newblog.siteground.com\/es\/wp-json\/wp\/v2\/media\/13717"}],"wp:attachment":[{"href":"https:\/\/newblog.siteground.com\/es\/wp-json\/wp\/v2\/media?parent=13715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/newblog.siteground.com\/es\/wp-json\/wp\/v2\/categories?post=13715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/newblog.siteground.com\/es\/wp-json\/wp\/v2\/tags?post=13715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}