{"id":58033,"date":"2024-11-25T07:00:00","date_gmt":"2024-11-25T15:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=58033"},"modified":"2025-01-16T16:22:31","modified_gmt":"2025-01-17T00:22:31","slug":"como-evitar-bajo-rendimiento-fuentes-web","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-evitar-bajo-rendimiento-fuentes-web\/","title":{"rendered":"M\u00e9tricas Web Principales: C\u00f3mo Evitar los Problemas de Rendimiento de las Fuentes Web"},"content":{"rendered":"\n<p>Las fuentes web aportan personalidad a tu sitio, pero tambi\u00e9n agregan peso.<\/p>\n\n\n\n<p>Y si tus fuentes tardan demasiado en cargarse, los usuarios se quedan mirando una pantalla en blanco. A\u00fan peor, tu sitio podr\u00eda parecer inestable mientras el texto se desplaza de forma inesperada.<\/p>\n\n\n\n<p>Esto tambi\u00e9n perjudica las <a target=\"_blank\"href=\"https:\/\/www.dreamhost.com\/blog\/es\/mejorar-metricas-web-principales\/\">M\u00e9tricas Web Principales<\/a>, las m\u00e9tricas que afectan directamente tu clasificaci\u00f3n en los motores de b\u00fasqueda y la experiencia del usuario.<\/p>\n\n\n\n<p>Aqu\u00ed, cada milisegundo cuenta.<\/p>\n\n\n\n<p>Entonces, \u00bfc\u00f3mo puedes mantener tu elecci\u00f3n de fuentes web sin sacrificar el rendimiento?<\/p>\n\n\n\n<p>Vamos a desglosarlo, paso a paso.<\/p>\n\n\n\n<p>Pero primero, \u00bfqu\u00e9 son exactamente las fuentes web seguras y las fuentes web?<\/p>\n\n\n\n<h2 id=\"h-que-son-las-fuentes-web-seguras\" class=\"wp-block-heading\">\u00bfQu\u00e9 Son las Fuentes Web Seguras?<\/h2>\n\n\n\n<p>Las <a target=\"_blank\"href=\"https:\/\/www.dreamhost.com\/blog\/es\/fuentes-seguras-web\/\">fuentes web seguras<\/a> son las opciones probadas y confiables que funcionan en todos los dispositivos. Son fuentes que la mayor\u00eda de los dispositivos ya tienen, lo que significa que puedes contar con ellas para cargar r\u00e1pidamente.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"561\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01-Que-son-las-fuentes-web-seguras-1024x561.jpg\" alt=\"Diagrama que explica qu\u00e9 son las fuentes de un sitio web; mostrando un servidor conect\u00e1ndose con un navegador y viceversa, y el navegador con el computador del usuario, y las fuentes regresando al navegador.\" class=\"wp-image-58035 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01-Que-son-las-fuentes-web-seguras-1024x561.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01-Que-son-las-fuentes-web-seguras-300x164.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01-Que-son-las-fuentes-web-seguras-768x421.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01-Que-son-las-fuentes-web-seguras-1536x842.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/01-Que-son-las-fuentes-web-seguras-600x329.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/01-Que-son-las-fuentes-web-seguras-1200x658.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/01-Que-son-las-fuentes-web-seguras-730x400.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/01-Que-son-las-fuentes-web-seguras-1460x800.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/01-Que-son-las-fuentes-web-seguras-784x430.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/01-Que-son-las-fuentes-web-seguras-1568x859.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/01-Que-son-las-fuentes-web-seguras-877x481.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/01-Que-son-las-fuentes-web-seguras.jpg.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/561;\" \/><\/figure>\n\n\n\n<p>Estas son las fuentes web seguras que puedes usar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Arial<\/li>\n\n\n\n<li>Times New Roman<\/li>\n\n\n\n<li>Verdana<\/li>\n\n\n\n<li>Trebuchet MS<\/li>\n\n\n\n<li>Courier<\/li>\n\n\n\n<li>Impact<\/li>\n\n\n\n<li>Georgia<\/li>\n\n\n\n<li>Comic Sans MS<\/li>\n\n\n<\/ul>\n\n\n\n<p>Aunque las opciones son limitadas, un dise\u00f1ador h\u00e1bil puede utilizar estas fuentes de manera creativa.<\/p>\n\n\n\n<p>Sin embargo, las fuentes web seguras a menudo se usan en exceso y le dan a tu sitio web una sensaci\u00f3n &#8220;similar&#8221;, incluso cuando has invertido mucho esfuerzo y dinero en el dise\u00f1o del sitio.<\/p>\n\n\n\n<p>Entonces, \u00bfc\u00f3mo lo haces m\u00e1s atractivo?<\/p>\n\n\n\n<p>Con fuentes web.<\/p>\n\n\n\n<h2 id=\"h-que-son-las-fuentes-web\" class=\"wp-block-heading\">\u00bfQu\u00e9 Son Las Fuentes Web?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"566\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02-Google-Fonts-1024x566.jpg\" alt=\"Ejemplo de diferentes fuentes de Google mostrando la frase &quot;Everyone has the right to freedom of thought&quot; en tres tipos de fuentes diferentes.\" class=\"wp-image-58036 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02-Google-Fonts-1024x566.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02-Google-Fonts-300x166.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02-Google-Fonts-768x425.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02-Google-Fonts-1536x850.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/02-Google-Fonts-600x332.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/02-Google-Fonts-1200x664.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/02-Google-Fonts-730x404.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/02-Google-Fonts-1460x808.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/02-Google-Fonts-784x434.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/02-Google-Fonts-1568x867.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/02-Google-Fonts-877x485.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/02-Google-Fonts.jpg.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/566;\" \/><\/figure>\n\n\n\n<p>Las fuentes web te permiten alejarte de las fuentes web seguras, que a menudo se usan en exceso.<\/p>\n\n\n\n<p>En lugar de depender de las fuentes disponibles en el dispositivo del usuario, las fuentes web pueden descargarse desde una fuente externa como <a target=\"_blank\"href=\"https:\/\/fonts.google.com\/\">Google Fonts<\/a> o directamente desde tu servidor al dispositivo del usuario (temporalmente).<\/p>\n\n\n\n<p>Esto te permite usar cualquier fuente personalizada que se ajuste a tu marca o necesidades de dise\u00f1o.<\/p>\n\n\n\n<p>Tambi\u00e9n hemos recopilado las <a target=\"_blank\"href=\"https:\/\/www.dreamhost.com\/blog\/es\/mejores-fuentes-tipograficas-google\/\">mejores fuentes de Google<\/a> para ayudarte a comenzar.<\/p>\n\n\n\n<p>Cuando un usuario visita tu sitio, la fuente web se descarga temporalmente y se aplica al texto utilizando la regla <strong>@font-face<\/strong> en CSS.<\/p>\n\n\n\n<p>Las fuentes web luego comienzan a comportarse como fuentes locales: se ajustan autom\u00e1ticamente al tama\u00f1o de la pantalla manteniendo tu sitio web n\u00edtido.<\/p>\n\n\n\n<p>Las fuentes tambi\u00e9n han evolucionado con el tiempo para tener formatos de almacenamiento m\u00e1s eficientes. Al igual que los <a target=\"_blank\"href=\"https:\/\/www.dreamhost.com\/blog\/es\/formas-optimizar-imagenes-para-web\/\">formatos de imagen<\/a>, las fuentes tienen TTF, WOFF, WOFF2 y EOT.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Embedded OpenType (EOT):<\/strong> Compatible con versiones antiguas de Internet Explorer (por debajo de IE9). No se comprime por defecto, pero se puede aplicar compresi\u00f3n GZIP.<\/li>\n\n\n\n<li><strong>TrueType (TTF):<\/strong> Compatible con navegadores Android antiguos (por debajo de la versi\u00f3n 4.4). No est\u00e1 comprimido por defecto, pero se puede comprimir con GZIP.<\/li>\n\n\n\n<li><strong>Web Open Font Format (WOFF):<\/strong> Compatible con la mayor\u00eda de los navegadores modernos e incluye compresi\u00f3n integrada.<\/li>\n\n\n\n<li><strong>Web Open Font Format 2 (WOFF2):<\/strong> Compatible con los navegadores que lo soportan, con algoritmos de compresi\u00f3n personalizados que reducen el tama\u00f1o del archivo en alrededor del 30% en comparaci\u00f3n con otros formatos.<\/li>\n\n\n<\/ul>\n\n\n\n<p>Los formatos modernos ofrecen compresi\u00f3n para un mejor rendimiento y ayudan a mantener el dise\u00f1o de tu sitio tanto funcional como visualmente distintivo.<\/p>\n\n\n\n<h2 id=\"h-que-son-las-metricas-web-principales-mwp\" class=\"wp-block-heading\">\u00bfQu\u00e9 son las M\u00e9tricas Web Principales (MWP)?<\/h2>\n\n\n\n<p>Aqu\u00ed est\u00e1 la cuesti\u00f3n: Google quiere que todos sus usuarios tengan una experiencia excelente.<\/p>\n\n\n\n<p>El sitio web o la aplicaci\u00f3n que ofrezca la mejor experiencia a los usuarios de Google recibir\u00e1 m\u00e1s &#8220;preferencia&#8221; de los algoritmos de Google.<\/p>\n\n\n\n<p>\u00bfY c\u00f3mo se mide esta &#8220;<strong>experiencia<\/strong>&#8220;?<\/p>\n\n\n\n<p>Google lanz\u00f3 Core Web Vitals o M\u00e9tricas Web Principales a <a target=\"_blank\"href=\"https:\/\/web.dev\/articles\/vitals#core-web-vitals\">principios de 2020<\/a> con ese prop\u00f3sito.<\/p>\n\n\n\n<p><a target=\"_blank\"href=\"https:\/\/www.dreamhost.com\/blog\/es\/mejorar-metricas-web-principales\/\">MWP<\/a> es un conjunto de tres m\u00e9tricas que le indican a Google c\u00f3mo se desempe\u00f1a tu sitio web o aplicaci\u00f3n para los usuarios que llegan all\u00ed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"940\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03-LCP-INP-CLS-1024x940.jpg\" alt=\"LCP vs INP vs CLS mostrando diferentes mediciones en una escala de Bueno - Necesita Mejora - Malo\" class=\"wp-image-58037 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03-LCP-INP-CLS-1024x940.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03-LCP-INP-CLS-300x275.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03-LCP-INP-CLS-768x705.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03-LCP-INP-CLS-1536x1409.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/03-LCP-INP-CLS-600x551.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/03-LCP-INP-CLS-1200x1101.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/03-LCP-INP-CLS-730x670.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/03-LCP-INP-CLS-1460x1340.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/03-LCP-INP-CLS-784x719.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/03-LCP-INP-CLS-1568x1439.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/03-LCP-INP-CLS-877x805.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/03-LCP-INP-CLS.jpg.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/940;\" \/><\/figure>\n\n\n\n<p>Puntuaciones m\u00e1s altas en estas m\u00e9tricas pueden ayudarte a mejorar tu posici\u00f3n en Google. Repasemos r\u00e1pidamente estas m\u00e9tricas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-largest-contentful-paint-lcp\">Largest Contentful Paint (LCP)<\/h3>\n\n\n\n<p><a target=\"_blank\"href=\"https:\/\/www.dreamhost.com\/glossary\/es\/hosting\/despliegue-de-contenido-mas-extenso\/\"><strong>LCP<\/strong><\/a><strong> mide cu\u00e1nto tiempo tarda en cargarse el elemento m\u00e1s grande y visible en tu p\u00e1gina.<\/strong><\/p>\n\n\n\n<p>Generalmente, esto es una imagen o video, pero tambi\u00e9n podr\u00eda ser un bloque grande de texto o un video incrustado.<\/p>\n\n\n\n<p>Cuanto m\u00e1s r\u00e1pido ocurra esto, mejor ser\u00e1 el rendimiento de tu sitio tanto para los usuarios como para los motores de b\u00fasqueda.<\/p>\n\n\n\n<p>Una buena puntuaci\u00f3n de LCP significa que los usuarios no se quedan esperando a que aparezca el contenido principal.<\/p>\n\n\n\n<p>Interaction to Next Paint (INP)<\/p>\n\n\n\n<p><strong>INP mide el tiempo entre la interacci\u00f3n de un usuario (como hacer clic o tocar) y cuando la p\u00e1gina responde visualmente.<\/strong><\/p>\n\n\n\n<p>Ofrece una imagen m\u00e1s precisa de la interactividad que el FID, ya que considera todo el recorrido del usuario en lugar de solo la primera interacci\u00f3n.<\/p>\n\n\n\n<p>Una puntuaci\u00f3n baja de INP significa que tu sitio se siente m\u00e1s receptivo, mejorando el compromiso y la satisfacci\u00f3n del usuario.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-cumulative-layout-shift-cls\">Cumulative Layout Shift (CLS)<\/h3>\n\n\n\n<p><strong>CLS mide qu\u00e9 tan estable es tu p\u00e1gina mientras se carga.<\/strong><\/p>\n\n\n\n<p>Cuando los elementos se mueven inesperadamente, frustra a los usuarios y hace que la p\u00e1gina se sienta poco confiable.<\/p>\n\n\n\n<p>Una puntuaci\u00f3n baja de CLS significa que tu p\u00e1gina se carga de manera fluida, sin desplazamientos de dise\u00f1o que interrumpan la experiencia del usuario.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"h-como-optimizar-las-fuentes-web-para-mejorar-las-metricas-web-principales\" class=\"wp-block-heading\">C\u00f3mo Optimizar las Fuentes Web Para Mejorar las M\u00e9tricas Web Principales<\/h2>\n\n\n\n<p>Entonces, \u00bfpor qu\u00e9 tanto alboroto sobre el rendimiento de las fuentes web?<\/p>\n\n\n\n<p>\u00bfPor qu\u00e9 no simplemente agregar fuentes web y listo? Bueno, puedes.<\/p>\n\n\n\n<p>Pero como hemos hablado antes, las fuentes web no son locales. Se obtienen desde un servidor, se descargan y se aplican a tu sitio, y ah\u00ed es donde est\u00e1 el problema.<\/p>\n\n\n\n<p><strong>Toma tiempo<\/strong>.<\/p>\n\n\n\n<p>Y si tarda demasiado, afecta tus M\u00e9tricas Web Principales y la tasa de <a target=\"_blank\"href=\"https:\/\/www.dreamhost.com\/blog\/es\/incrementar-tasa-conversion-sitio-web\/\">conversi\u00f3n de tu sitio web<\/a>.<\/p>\n\n\n\n<p>Veamos algunas formas de optimizar las fuentes web para mejorar las M\u00e9tricas Web Principales.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-pre-cargar-las-fuentes\">1. Pre-cargar las fuentes<\/h3>\n\n\n\n<p>Quieres que tus fuentes est\u00e9n listas en el momento en que la p\u00e1gina comience a cargarse.<\/p>\n\n\n\n<p>As\u00ed, cuando la p\u00e1gina est\u00e9 lista para el usuario, tambi\u00e9n lo estar\u00e1 la fuente.<\/p>\n\n\n\n<p>Eso se llama <a target=\"_blank\"href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Attributes\/rel\/preload\">pre-carga<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"627\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04-Precarga-de-fuentes-1024x627.jpg\" alt=\"Tiempos de precarga en un gr\u00e1fico de barras horizontal: index.html var\u00eda de 0 ms a 280 ms, main.css de 50 ms a 380 ms, y as\u00ed sucesivamente.\" class=\"wp-image-58038 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04-Precarga-de-fuentes-1024x627.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04-Precarga-de-fuentes-300x184.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04-Precarga-de-fuentes-768x470.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04-Precarga-de-fuentes-1536x940.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/04-Precarga-de-fuentes-600x367.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/04-Precarga-de-fuentes-1200x734.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/04-Precarga-de-fuentes-730x447.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/04-Precarga-de-fuentes-1460x893.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/04-Precarga-de-fuentes-784x480.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/04-Precarga-de-fuentes-1568x959.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/04-Precarga-de-fuentes-877x537.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/04-Precarga-de-fuentes.jpg.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/627;\" \/><\/figure>\n\n\n\n<p><a target=\"_blank\"href=\"https:\/\/www.bramstein.com\/writing\/preload-hints-for-web-fonts.html\"><em>Fuente<\/em><\/a><\/p>\n\n\n\n<p>La pre-carga le dice al navegador: &#8220;Oye, esta fuente es importante. C\u00e1rgala de inmediato.&#8221;<\/p>\n\n\n\n<p>Supongamos que est\u00e1s usando la popular <a target=\"_blank\"href=\"https:\/\/fonts.google.com\/specimen\/Roboto\">fuente de Google, Roboto<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"521\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05-Roboto-fuente-1024x521.jpg\" alt=\"Captura de pantalla de un ejemplo de Google Fonts utilizando Roboto con el texto en fuente Roboto &quot;Whereas disregard and contempt for human rights have resulted&quot;\" class=\"wp-image-58039 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05-Roboto-fuente-1024x521.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05-Roboto-fuente-300x153.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05-Roboto-fuente-768x391.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05-Roboto-fuente-1536x781.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/05-Roboto-fuente-600x305.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/05-Roboto-fuente-1200x611.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/05-Roboto-fuente-730x371.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/05-Roboto-fuente-1460x743.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/05-Roboto-fuente-784x399.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/05-Roboto-fuente-1568x798.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/05-Roboto-fuente-877x446.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/05-Roboto-fuente.jpg.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/521;\" \/><\/figure>\n\n\n\n<p>Necesitas agregar un solo atributo a tu c\u00f3digo HTML para pre-cargar la fuente: <strong>rel = \u201cpreload\u201d<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>&lt;link rel=&#8221;preload&#8221; href=&#8221;https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400&amp;display=swap&#8221; as=&#8221;font&#8221; type=&#8221;font\/woff2&#8243; crossorigin&gt;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Despu\u00e9s de esto, el navegador sabe priorizar la descarga de Roboto, para que tu texto aparezca estilizado con la fuente correcta m\u00e1s r\u00e1pido.<\/p>\n\n\n\n<p>Esto reduce el tiempo que tarda en renderizarse el bloque de texto m\u00e1s grande (LCP), de modo que los usuarios ven la versi\u00f3n final de tu sitio m\u00e1s pronto.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-controla-el-comportamiento-de-carga-de-la-fuente-con-la-propiedad-font-display\">2. Controla El Comportamiento De Carga De La Fuente Con La Propiedad Font-Display<\/h3>\n\n\n\n<p>Sin embargo, la pre-carga podr\u00eda aumentar un poco el tiempo de carga inicial, ya que las fuentes tienen prioridad.<\/p>\n\n\n\n<p>La <strong>propiedad <\/strong><strong>font-displa<\/strong>y te permite controlar c\u00f3mo se comporta tu texto mientras las fuentes personalizadas a\u00fan est\u00e1n cargando.<\/p>\n\n\n\n<p>Esto puede ayudarte a evitar el temido <strong><em>Flash of Invisible Text<\/em><\/strong><strong> (FOIT)<\/strong>, donde los usuarios ven espacios en blanco, y el <strong><em>Flash of Unstyled Text<\/em><\/strong><strong> (FOUT)<\/strong>, donde la p\u00e1gina aparece con fuentes de reserva por un segundo y luego cambia inmediatamente a las fuentes personalizadas.<\/p>\n\n\n\n<p>La propiedad font-display tiene cuatro opciones para gestionar el comportamiento del texto: <em>block<\/em>, <em>swap<\/em>, <em>fallback<\/em> y <em>optional<\/em>.<\/p>\n\n\n\n<p>Veamos las dos que necesitar\u00edas.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"796\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06-Impacto-de-los-valores-de-font-display-en-la-carga-de-la-pagina-1024x796.jpg\" alt=\"Gr\u00e1ficos de l\u00edneas trazados que muestran el impacto de los valores de font-display en la carga de la p\u00e1gina entre block, swap, fallback y optional.\" class=\"wp-image-58040 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06-Impacto-de-los-valores-de-font-display-en-la-carga-de-la-pagina-1024x796.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06-Impacto-de-los-valores-de-font-display-en-la-carga-de-la-pagina-300x233.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06-Impacto-de-los-valores-de-font-display-en-la-carga-de-la-pagina-768x597.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06-Impacto-de-los-valores-de-font-display-en-la-carga-de-la-pagina-1536x1193.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/06-Impacto-de-los-valores-de-font-display-en-la-carga-de-la-pagina-600x466.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/06-Impacto-de-los-valores-de-font-display-en-la-carga-de-la-pagina-1200x932.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/06-Impacto-de-los-valores-de-font-display-en-la-carga-de-la-pagina-730x567.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/06-Impacto-de-los-valores-de-font-display-en-la-carga-de-la-pagina-1460x1134.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/06-Impacto-de-los-valores-de-font-display-en-la-carga-de-la-pagina-784x609.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/06-Impacto-de-los-valores-de-font-display-en-la-carga-de-la-pagina-1568x1218.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/06-Impacto-de-los-valores-de-font-display-en-la-carga-de-la-pagina-877x681.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/06-Impacto-de-los-valores-de-font-display-en-la-carga-de-la-pagina.jpg.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/796;\" \/><\/figure>\n\n\n\n<p><strong>font-display: swap<\/strong> \u2014 Esta opci\u00f3n es la apuesta m\u00e1s segura para la mayor\u00eda de los sitios. Asegura que el texto aparezca de inmediato con una fuente de reserva y luego cambie a la fuente personalizada una vez que est\u00e9 lista.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>@font-face {<br>&nbsp; font-family: &#8216;Roboto&#8217;;<br>&nbsp; src: url(&#8216;https:\/\/fonts.gstatic.com\/s\/roboto\/v27\/KFOmCnqEu92Fr1Me5Q.ttf&#8217;) format(&#8216;truetype&#8217;);<br>&nbsp; font-display: swap;<br>}<br><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Aqu\u00ed, la fuente de reserva (como Arial o cualquier otra fuente del sistema) se cargar\u00e1 instant\u00e1neamente, manteniendo la p\u00e1gina legible.<\/p>\n\n\n\n<p>Cuando Roboto se haya descargado, reemplazar\u00e1 la fuente de reserva sin dejar un espacio en blanco en la pantalla.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"399\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07-font-swap-display-1024x399.jpg\" alt=\"Captura de pantalla &quot;font-display: swap&quot; con el texto: este es un p\u00e1rrafo. Este es un texto m\u00e1s grueso (en negrita). Este es un texto enfatizado (en cursiva). Este es un texto m\u00e1s grueso y enfatizado (en cursiva y negrita).\" class=\"wp-image-58041 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07-font-swap-display-1024x399.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07-font-swap-display-300x117.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07-font-swap-display-768x300.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07-font-swap-display-1536x599.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/07-font-swap-display-600x234.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/07-font-swap-display-1200x468.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/07-font-swap-display-730x285.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/07-font-swap-display-1460x569.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/07-font-swap-display-784x306.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/07-font-swap-display-1568x612.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/07-font-swap-display-877x342.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/07-font-swap-display.jpg.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/399;\" \/><\/figure>\n\n\n\n<p><a target=\"_blank\"href=\"https:\/\/www.zachleat.com\/web-fonts\/demos\/font-display.html\">Fuente<\/a><\/p>\n\n\n\n<p>Aqu\u00ed tienes una <a target=\"_blank\"href=\"https:\/\/www.zachleat.com\/web-fonts\/demos\/font-display.html\">demostraci\u00f3n de c\u00f3mo se comporta font-display: swap<\/a> en el mundo real.<\/p>\n\n\n\n<p><strong>font-display: optional<\/strong> \u2014 Si te preocupa la velocidad, esto le indica al navegador que omita la fuente personalizada si no se carga lo suficientemente r\u00e1pido. Esto funciona cuando no te importa si la fuente de reserva se mantiene en su lugar.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>@font-face {<br>&nbsp; font-family: &#8216;Roboto&#8217;;<br>&nbsp; src: url(&#8216;https:\/\/fonts.gstatic.com\/s\/roboto\/v27\/KFOmCnqEu92Fr1Me5Q.ttf&#8217;) format(&#8216;truetype&#8217;);<br>&nbsp; font-display: optional;<br>}<br><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Esta opci\u00f3n tiene sentido cuando el rendimiento es m\u00e1s cr\u00edtico que el dise\u00f1o, lo que la hace perfecta para un sitio que se basa en la velocidad.<\/p>\n\n\n\n<p>Aqu\u00ed tienes <a target=\"_blank\"href=\"https:\/\/www.zachleat.com\/web-fonts\/demos\/font-display-optional.html\">un ejemplo<\/a> de c\u00f3mo se ve esto en el mundo real. No notar\u00e1s el cambio aqu\u00ed, ya que la mayor\u00eda de las fuentes se cargan lo suficientemente r\u00e1pido.<\/p>\n\n\n\n<p>Sin embargo, el argumento <em>optional<\/em> es excelente en caso de que tu servidor de fuentes se caiga o se vuelva lento.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-subconjuntos-de-fuentes\">3. Subconjuntos de fuentes<\/h3>\n\n\n\n<p>La mayor\u00eda de las fuentes vienen con cientos, incluso miles, de caracteres.<\/p>\n\n\n\n<p>Lo m\u00e1s probable es que solo necesites una peque\u00f1a porci\u00f3n de esos caracteres. Eliminar los caracteres innecesarios se llama subconjunto de fuentes.<\/p>\n\n\n\n<p>As\u00ed es, puedes eliminar caracteres innecesarios para reducir el tama\u00f1o del archivo de la fuente.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"512\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08-Subconjunto-de-fuentes-1024x512.jpg\" alt=\"Una ilustraci\u00f3n abstracta que muestra el subconjunto de fuentes, donde la letra &quot;a&quot; se est\u00e1 extrayendo y separando de un archivo de fuente m\u00e1s grande.\" class=\"wp-image-58042 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08-Subconjunto-de-fuentes-1024x512.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08-Subconjunto-de-fuentes-300x150.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08-Subconjunto-de-fuentes-768x384.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08-Subconjunto-de-fuentes-1536x768.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/08-Subconjunto-de-fuentes-600x300.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/08-Subconjunto-de-fuentes-1200x600.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/08-Subconjunto-de-fuentes-730x365.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/08-Subconjunto-de-fuentes-1460x730.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/08-Subconjunto-de-fuentes-784x392.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/08-Subconjunto-de-fuentes-1568x784.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/08-Subconjunto-de-fuentes-877x439.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/08-Subconjunto-de-fuentes.jpg.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/512;\" \/><\/figure>\n\n\n\n<p><a target=\"_blank\"href=\"https:\/\/fonts.google.com\/knowledge\/glossary\/subsetting\">Fuente<\/a><\/p>\n\n\n\n<p>Supongamos que tu sitio solo necesita caracteres en ingl\u00e9s.<\/p>\n\n\n\n<p>Una herramienta como <a target=\"_blank\"href=\"https:\/\/github.com\/fonttools\/fonttools\">FontTools<\/a> puede ayudarte a crear un subconjunto de tu fuente que solo incluya los caracteres que realmente usar\u00e1s.<\/p>\n\n\n\n<p>Esto significa que todos los caracteres Unicode que no son necesarios en el idioma ingl\u00e9s se pueden eliminar para ahorrar espacio en el archivo.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Unicode<\/h3>\n    <p>El est\u00e1ndar Unicode es un est\u00e1ndar de codificaci\u00f3n internacional que hace que la codificaci\u00f3n de los lenguajes sea uniforme a trav\u00e9s de diferentes sistemas de escritura. Esto proporciona un n\u00famero \u00fanico para cada car\u00e1cter, que se puede usar sin importar el dispositivo, plataforma, aplicaci\u00f3n o idioma.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/es\/diseno-web\/unicode-2\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Ver m\u00e1s                    <\/a>\n\n<\/div>\n\n\n\n<p>Esto reduce el tama\u00f1o del archivo de, por ejemplo, 80 KB a 30 KB.<\/p>\n\n\n\n<p>Los archivos m\u00e1s peque\u00f1os significan descargas m\u00e1s r\u00e1pidas, mejorando tanto LCP como CLS, ya que la fuente se carga r\u00e1pidamente y no desplaza el dise\u00f1o.<\/p>\n\n\n\n<p>Aqu\u00ed tienes un ejemplo de c\u00f3mo eliminar todo lo que no sean caracteres en ingl\u00e9s usando FontTools:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>pyftsubset Roboto-Regular.ttf &#8211;unicodes=U+0020-007F<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Ahora, tu fuente Roboto solo contiene los caracteres latinos b\u00e1sicos necesarios para el texto en ingl\u00e9s, lo que la hace mucho m\u00e1s r\u00e1pida de cargar.<\/p>\n\n\n\n<p>Si prefieres un enfoque basado en GUI, tambi\u00e9n puedes <a target=\"_blank\"href=\"https:\/\/www.fontsquirrel.com\/tools\/webfont-generator\">probar Font Squirrel<\/a>. Una vez que subas un archivo de fuente, tendr\u00e1s muchas opciones de personalizaci\u00f3n para agregar o eliminar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"712\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09-Generador-de-fuentes-font-squirrel-1024x712.jpg\" alt=\"Una interfaz web para el Generador de Fuentes Web de Font Squirrel que muestra las opciones de conversi\u00f3n de fuentes y la configuraci\u00f3n de formatos.\" class=\"wp-image-58043 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09-Generador-de-fuentes-font-squirrel-1024x712.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09-Generador-de-fuentes-font-squirrel-300x209.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09-Generador-de-fuentes-font-squirrel-768x534.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09-Generador-de-fuentes-font-squirrel-1536x1068.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/09-Generador-de-fuentes-font-squirrel-600x417.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/09-Generador-de-fuentes-font-squirrel-1200x834.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/09-Generador-de-fuentes-font-squirrel-730x507.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/09-Generador-de-fuentes-font-squirrel-1460x1015.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/09-Generador-de-fuentes-font-squirrel-784x545.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/09-Generador-de-fuentes-font-squirrel-1568x1090.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/09-Generador-de-fuentes-font-squirrel-877x610.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/09-Generador-de-fuentes-font-squirrel.jpg.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/712;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-comprimir-fuentes\">4. Comprimir Fuentes<\/h3>\n\n\n\n<p>Los formatos modernos de fuentes como WOFF2 ofrecen compresi\u00f3n que puede reducir el tama\u00f1o de la fuente hasta en un 30% en comparaci\u00f3n con formatos m\u00e1s antiguos como TTF.<\/p>\n\n\n\n<p>Usar la versi\u00f3n m\u00e1s comprimida de tu fuente puede reducir significativamente su impacto en el tiempo de carga de la p\u00e1gina.<\/p>\n\n\n\n<p>Por ejemplo, aqu\u00ed te mostramos c\u00f3mo asegurarte de que est\u00e1s usando WOFF2:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>@font-face {<br>&nbsp; font-family: &#8216;Roboto&#8217;;<br>&nbsp; src: url(&#8216;roboto.woff2&#8217;) format(&#8216;woff2&#8217;),<br>&nbsp; &nbsp; &nbsp; url(&#8216;roboto.woff&#8217;) format(&#8216;woff&#8217;);<br>&nbsp; font-weight: 400;<br>}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>De esta manera, los navegadores que soportan WOFF2 lo usar\u00e1n por defecto, reduciendo los tiempos de carga mientras siguen mostrando una fuente n\u00edtida y de alta calidad.<\/p>\n\n\n\n<p>Sin embargo, si un navegador no puede usar WOFF2, se utilizar\u00e1 WOFF como predeterminado.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-5-codificacion-base64\">5. Codificaci\u00f3n Base64<\/h3>\n\n\n\n<p>Esta es otra pr\u00e1ctica com\u00fanmente utilizada para optimizar tus fuentes web.<\/p>\n\n\n\n<p>Sin embargo, debes tener cuidado de cu\u00e1ndo usar fuentes codificadas en Base64.<\/p>\n\n\n\n<p><strong>La codificaci\u00f3n Base64 es m\u00e1s \u00fatil para fuentes peque\u00f1as o iconos.<\/strong><\/p>\n\n\n\n<p>Si se usa en exceso, puede inflar el CSS, aumentando el tiempo de carga de la p\u00e1gina m\u00e1s que simplemente usar la fuente misma.<br><br>Si quieres usar la codificaci\u00f3n Base64 para una fuente de iconos, primero convertir\u00edas el archivo de la fuente a formato Base64. As\u00ed es como podr\u00eda verse:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>@font-face {<br>&nbsp; font-family: &#8216;CustomIcons&#8217;;<br>&nbsp; src: url(&#8216;data:font\/woff2;base64,d09GRgABAAAAAAn4ABAAAAAAB&#8230;&#8217;) format(&#8216;woff2&#8217;);<br>&nbsp; font-weight: normal;<br>&nbsp; font-style: normal;<br>}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Este m\u00e9todo funciona bien para fuentes de iconos peque\u00f1as que usas con frecuencia en todo el sitio.<\/p>\n\n\n\n<p>El archivo CSS se carga con la fuente incrustada, eliminando una solicitud HTTP adicional.<\/p>\n\n\n\n<p>Sin embargo, evita esto para fuentes grandes del cuerpo del texto, ya que puede ralentizar la representaci\u00f3n inicial de la p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-6-lt-link-gt-vs-css-import-para-fuentes\">6. &lt;link&gt; vs. CSS @import Para Fuentes<\/h3>\n\n\n\n<p>&lt;link&gt; y @import tienen una diferencia significativa en el rendimiento de carga.<\/p>\n\n\n\n<p>La etiqueta &lt;link&gt; carga las fuentes de manera as\u00edncrona, lo que significa que no retrasa la carga del resto de la p\u00e1gina, mientras que @import es un poco m\u00e1s lento.<\/p>\n\n\n\n<p><strong>Usa <\/strong><strong>&lt;link&gt;<\/strong><strong> siempre que sea posible.<\/strong><\/p>\n\n\n\n<p><em>\u201cPara m\u00e1s del 90% de los casos, probablemente querr\u00e1s usar la etiqueta &lt;link>. Como regla general, debes evitar las reglas @import porque retrasan la carga del recurso incluido hasta que el archivo se obtenga\u201d. <\/em><a target=\"_blank\"href=\"https:\/\/stackoverflow.com\/questions\/12316501\/including-google-fonts-link-or-import\"><em>Ilya Grigorik<\/em><\/a><em>, Ingeniero y Asesor T\u00e9cnico del CEO de Shopify<\/em><\/p>\n\n\n\n<p>La etiqueta &lt;link&gt; carga las fuentes de forma independiente, permitiendo que el resto de la p\u00e1gina se cargue sin esperar el archivo de la fuente.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>&lt;link rel=&#8221;stylesheet&#8221; href= &#8220;https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400&amp;display=swap&#8221;&gt;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Este es el m\u00e9todo preferido para cargar Google Fonts o servicios externos similares de fuentes.<\/p>\n\n\n\n<p>Colocada en la secci\u00f3n &lt;head&gt; de tu HTML, asegura que la fuente comience a cargarse temprano sin bloquear otros recursos.<\/p>\n\n\n\n<p><strong>Evita <\/strong><strong>@import<\/strong><strong> para fuentes cr\u00edticas.<\/strong><\/p>\n\n\n\n<p>@import espera hasta que el archivo CSS se cargue por completo, lo que puede aumentar el tiempo de carga y afectar el LCP.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>@import url(&#8216;https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400&amp;display=swap&#8217;);<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Usar @import solo funciona para fuentes secundarias o menos cr\u00edticas. Como pr\u00e1ctica, ev\u00edtalo para cualquier cosa en la primera pantalla de contenido.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-7-reduce-los-desplazamientos-visuales-cls-con-la-coincidencia-de-fuentes-y-ajuste-de-tamano\">7. Reduce los Desplazamientos Visuales\/CLS con la Coincidencia de Fuentes y Ajuste de Tama\u00f1o<\/h3>\n\n\n\n<p>Los desplazamientos visuales \u2014 o cambios de dise\u00f1o acumulativos (CLS), como los llama Google \u2014 ocurren cuando el dise\u00f1o cambia inesperadamente, a menudo debido a intercambios de fuentes.<\/p>\n\n\n\n<p>Para minimizar este efecto, elige fuentes de reserva que se asemejen al estilo y las dimensiones de tu fuente personalizada.<\/p>\n\n\n\n<p>La propiedad <strong>size-adjust<\/strong><strong> de CSS<\/strong> tambi\u00e9n te permite controlar el tama\u00f1o de la fuente de reserva, reduciendo los desplazamientos visuales cuando se carga la fuente personalizada.<\/p>\n\n\n\n<p>Si tu fuente personalizada es Roboto y una fuente de reserva, ajusta su tama\u00f1o para que coincida con Roboto, haciendo la transici\u00f3n casi imperceptible.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>@font-face {<br>&nbsp; font-family: &#8216;Roboto&#8217;;<br>&nbsp; src: url(&#8216;roboto.woff2&#8217;) format(&#8216;woff2&#8217;);<br>&nbsp; font-display: swap;<br>&nbsp; size-adjust: 100%;<br>}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Aqu\u00ed, la fuente de reserva de Roboto (por ejemplo, Arial) mantiene un tama\u00f1o consistente, reduciendo cualquier movimiento visible cuando Roboto se carga completamente.<\/p>\n\n\n\n<p>Una vez que alinees el tama\u00f1o y el espaciado de la fuente de reserva con tu fuente personalizada, aseguras que cuando Roboto reemplace a Arial, el cambio sea m\u00ednimo, manteniendo el CLS bajo y mejorando la experiencia del usuario.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-8-encuentra-el-lugar-adecuado-para-alojar-las-fuentes-web\">8. Encuentra el Lugar Adecuado para Alojar las Fuentes Web<\/h3>\n\n\n\n<p>Alojar tus fuentes de manera local no siempre significa un mejor rendimiento.<\/p>\n\n\n\n<p>Muchas opciones de terceros tambi\u00e9n funcionan bien \u2014 y a veces, incluso pueden cargar m\u00e1s r\u00e1pido.<\/p>\n\n\n\n<p>El <a target=\"_blank\"href=\"https:\/\/almanac.httparchive.org\/en\/2020\/fonts#fig-7\">Web Almanac<\/a> encontr\u00f3 que ciertos sitios que usaban fuentes de terceros se renderizaban m\u00e1s r\u00e1pido que aquellos con fuentes autoalojadas.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10-Rendimiento-Hosting-Fuentes-web-\nDesktop-1024x960.jpg\" alt=\"Gr\u00e1fico de barras que compara los tiempos de carga FCP y LCP para m\u00e9todos de alojamiento de fuentes autohospedadas, externas y combinadas, mostrando que el alojamiento combinado es el m\u00e1s lento.\" class=\"wp-image-58044\"\/><\/figure>\n\n\n\n<p>En \u00faltima instancia, el rendimiento de las fuentes depende menos de la elecci\u00f3n del alojamiento y m\u00e1s de tres factores clave:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Content Delivery Network (CDN):<\/strong> Asegura una entrega m\u00e1s r\u00e1pida al servir las fuentes desde m\u00faltiples ubicaciones en todo el mundo.<\/li>\n\n\n\n<li><strong>HTTP\/2:<\/strong> Aumenta la velocidad de carga al manejar m\u00faltiples solicitudes en paralelo, reduciendo la latencia.<\/li>\n\n\n\n<li><strong>Pol\u00edtica de Cach\u00e9 Web:<\/strong> Almacena las fuentes en cach\u00e9 de manera eficiente, para que no sea necesario volver a descargarlas con cada visita.<\/li>\n\n\n<\/ul>\n\n\n\n<p>En lugar de quedarte atascado en el debate sobre el alojamiento, conc\u00e9ntrate en configurar estos elementos esenciales para mantener la carga de tus fuentes de manera fluida, sin importar d\u00f3nde est\u00e9n alojadas.<\/p>\n\n\n\n<h2 id=\"h-como-simplificar-la-optimizacion-del-rendimiento-web\" class=\"wp-block-heading\">C\u00f3mo Simplificar la Optimizaci\u00f3n del Rendimiento Web<\/h2>\n\n\n\n<p>Si las t\u00e9cnicas anteriores te parecen demasiado pr\u00e1cticas, un <a target=\"_blank\"href=\"https:\/\/automattic.pxf.io\/OrN6xZ\">plugin como Jetpack<\/a> puede facilitarte las cosas.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"602\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11-Jetpack-1024x602.jpg\" alt=\"P\u00e1gina de aterrizaje de marketing que muestra las caracter\u00edsticas de optimizaci\u00f3n de WordPress de Jetpack, con gr\u00e1ficos de m\u00e9tricas de rendimiento y dispositivos m\u00f3viles.\" class=\"wp-image-58045 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11-Jetpack-1024x602.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11-Jetpack-300x176.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11-Jetpack-768x452.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11-Jetpack-1536x903.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/11-Jetpack-600x353.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/11-Jetpack-1200x706.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/11-Jetpack-730x429.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/11-Jetpack-1460x859.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/11-Jetpack-784x461.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/11-Jetpack-1568x922.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/11-Jetpack-877x516.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/11\/11-Jetpack.jpg.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/602;\" \/><\/figure>\n\n\n\n<p>Jetpack, <a target=\"_blank\"href=\"https:\/\/github.com\/Automattic\/jetpack\">desarrollado por Automattic<\/a> (los creadores de WordPress), es una soluci\u00f3n todo en uno creada espec\u00edficamente para sitios de WordPress.<\/p>\n\n\n\n<p>Combina caracter\u00edsticas esenciales para seguridad, rendimiento y marketing, todo gestionado desde una sola plataforma.<\/p>\n\n\n\n<p>Incluso si no eres t\u00e9cnico, Jetpack puede ayudar a mejorar la velocidad del sitio, fortalecer la seguridad y mejorar la experiencia del usuario. (\u00a1No se requieren configuraciones complejas!)<\/p>\n\n\n\n<h2 id=\"h-crea-el-equilibrio-perfecto-entre-belleza-y-rendimiento\" class=\"wp-block-heading\">Crea el Equilibrio Perfecto Entre Belleza y Rendimiento<\/h2>\n\n\n\n<p>Las fuentes web le dan a tu sitio un aspecto \u00fanico y hermoso.<\/p>\n\n\n\n<p>Sin embargo, sin los ajustes adecuados, tambi\u00e9n pueden ralentizarlo y frustrar a los usuarios.<\/p>\n\n\n\n<p>Aunque hemos cubierto t\u00e9cnicas esenciales de optimizaci\u00f3n de fuentes, afinar el rendimiento implica una cantidad infinita de detalles t\u00e9cnicos.<\/p>\n\n\n\n<p>Y obtener los mejores resultados puede sentirse abrumador.<\/p>\n\n\n\n<p>Ah\u00ed es donde entran los <a target=\"_blank\"href=\"https:\/\/www.dreamhost.com\/es\/servicios-profesionales\/\">Servicios Profesionales de desarrollo web de DreamHost<\/a>.<\/p>\n\n\n\n<p>Nos aseguraremos de que tu sitio sea hermoso y est\u00e9 optimizado para la velocidad y la experiencia del usuario.<\/p>\n\n\n\n<p>D\u00e9janos manejar los detalles t\u00e9cnicos mientras te concentras en construir un sitio que realmente se destaque.<\/p>\n\n\n\n\n<div class=\"article-cta-shared article-cta-small article-cta--product\">\n\t<div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/03\/product-cta-pro-services-development-877x586.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/03\/product-cta-pro-services-development.webp 2x\"  \/><\/div>\n\n\t<a href='https:\/\/www.dreamhost.com\/pro-services\/development\/' class='link-top' target='_blank' rel='noopener noreferrer'>\n\t\t<span>Pro Services &#8211; Development<\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\" width=\"15\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n\n\t<div class=\"content-btm\">\n\t\t<h2 class=\"h2--md\">\n\t\t\tYou Dream It, We Code It\n\t\t<\/h2>\n\t\t<p class=\"p--md\">\n\t\t\tTap into 20+ years of development expertise. Just let us know what you want for your site \u2013 we\u2019ll take it from there.\n\t\t<\/p>\n\n\t\t        <a\n            href=\"https:\/\/www.dreamhost.com\/pro-services\/development\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            See More                    <\/a>\n\n\t<\/div>\n<\/div>\n\n\n<p>Esta p\u00e1gina contiene enlaces de afiliados. Esto significa que podemos ganar una comisi\u00f3n si compras servicios a trav\u00e9s de nuestro enlace, sin ning\u00fan costo adicional para ti.<\/p>\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Las fuentes web pueden afectar los Core Web Vitals de tu sitio. Aprende consejos sencillos para optimizar las fuentes web y mantener tu sitio r\u00e1pido y f\u00e1cil de usar.<\/p>\n","protected":false},"author":1058,"featured_media":58013,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Las fuentes web pueden afectar las M\u00e9tricas Web Principales de tu sitio. Aprende consejos sencillos para optimizar las fuentes web y mantener tu sitio r\u00e1pido y f\u00e1cil de usar.","toc_headlines":"[[\"h-que-son-las-fuentes-web-seguras\",\"\u00bfQu\u00e9 Son las Fuentes Web Seguras?\"],[\"h-que-son-las-fuentes-web\",\"\u00bfQu\u00e9 Son Las Fuentes Web?\"],[\"h-que-son-las-metricas-web-principales-mwp\",\"\u00bfQu\u00e9 son las M\u00e9tricas Web Principales (MWP)?\"],[\"h-como-optimizar-las-fuentes-web-para-mejorar-las-metricas-web-principales\",\"C\u00f3mo Optimizar las Fuentes Web Para Mejorar las M\u00e9tricas Web Principales\"],[\"h-como-simplificar-la-optimizacion-del-rendimiento-web\",\"C\u00f3mo Simplificar la Optimizaci\u00f3n del Rendimiento Web\"],[\"h-crea-el-equilibrio-perfecto-entre-belleza-y-rendimiento\",\"Crea el Equilibrio Perfecto Entre Belleza y Rendimiento\"]]","hide_toc":false,"footnotes":""},"categories":[12896],"tags":[],"class_list":["post-58033","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>C\u00f3mo Evitar Bajo Rendimiento de las Fuentes Web - DreamHost<\/title>\n<meta name=\"description\" content=\"Las fuentes web pueden afectar las M\u00e9tricas Web Principales de tu sitio. Aprende consejos sencillos para optimizar las fuentes web y mantener tu sitio r\u00e1pido y f\u00e1cil de usar.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-evitar-bajo-rendimiento-fuentes-web\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimiza las Fuentes Web para la Velocidad y la Experiencia del Usuario\" \/>\n<meta property=\"og:description\" content=\"Las fuentes web agregan personalidad a tu sitio, pero pueden ralentizarlo si no est\u00e1n optimizadas. Encuentra estrategias para mantener tu sitio tanto hermoso como de alto rendimiento, optimizando las fuentes web para la velocidad y estabilidad.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-evitar-bajo-rendimiento-fuentes-web\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-25T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-17T00:22:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1220x628_OGIMAGE_-Core-Web-Vitals_-How-to-Avoid-the-Performance-Pitfalls-of-Web-Fonts.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ian Hernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Optimiza las Fuentes Web para la Velocidad y la Experiencia del Usuario\" \/>\n<meta name=\"twitter:description\" content=\"Las fuentes web agregan personalidad a tu sitio, pero pueden ralentizarlo si no est\u00e1n optimizadas. Encuentra estrategias para mantener tu sitio tanto hermoso como de alto rendimiento, optimizando las fuentes web para la velocidad y estabilidad.\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo Evitar Bajo Rendimiento de las Fuentes Web - DreamHost","description":"Las fuentes web pueden afectar las M\u00e9tricas Web Principales de tu sitio. Aprende consejos sencillos para optimizar las fuentes web y mantener tu sitio r\u00e1pido y f\u00e1cil de usar.","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:\/\/www-dev.dreamhost.com\/blog\/es\/como-evitar-bajo-rendimiento-fuentes-web\/","og_locale":"en_US","og_type":"article","og_title":"Optimiza las Fuentes Web para la Velocidad y la Experiencia del Usuario","og_description":"Las fuentes web agregan personalidad a tu sitio, pero pueden ralentizarlo si no est\u00e1n optimizadas. Encuentra estrategias para mantener tu sitio tanto hermoso como de alto rendimiento, optimizando las fuentes web para la velocidad y estabilidad.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-evitar-bajo-rendimiento-fuentes-web\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-11-25T15:00:00+00:00","article_modified_time":"2025-01-17T00:22:31+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1220x628_OGIMAGE_-Core-Web-Vitals_-How-to-Avoid-the-Performance-Pitfalls-of-Web-Fonts.jpg","type":"image\/jpeg"}],"author":"Ian Hernandez","twitter_card":"summary_large_image","twitter_title":"Optimiza las Fuentes Web para la Velocidad y la Experiencia del Usuario","twitter_description":"Las fuentes web agregan personalidad a tu sitio, pero pueden ralentizarlo si no est\u00e1n optimizadas. Encuentra estrategias para mantener tu sitio tanto hermoso como de alto rendimiento, optimizando las fuentes web para la velocidad y estabilidad.","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Ian Hernandez","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-evitar-bajo-rendimiento-fuentes-web\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-evitar-bajo-rendimiento-fuentes-web\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"M\u00e9tricas Web Principales: C\u00f3mo Evitar los Problemas de Rendimiento de las Fuentes Web","datePublished":"2024-11-25T15:00:00+00:00","dateModified":"2025-01-17T00:22:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-evitar-bajo-rendimiento-fuentes-web\/"},"wordCount":3026,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-evitar-bajo-rendimiento-fuentes-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","articleSection":["Dise\u00f1o Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-evitar-bajo-rendimiento-fuentes-web\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-evitar-bajo-rendimiento-fuentes-web\/","name":"C\u00f3mo Evitar Bajo Rendimiento de las Fuentes Web - DreamHost","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-evitar-bajo-rendimiento-fuentes-web\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-evitar-bajo-rendimiento-fuentes-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","datePublished":"2024-11-25T15:00:00+00:00","dateModified":"2025-01-17T00:22:31+00:00","description":"Las fuentes web pueden afectar las M\u00e9tricas Web Principales de tu sitio. Aprende consejos sencillos para optimizar las fuentes web y mantener tu sitio r\u00e1pido y f\u00e1cil de usar.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-evitar-bajo-rendimiento-fuentes-web\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/es\/como-evitar-bajo-rendimiento-fuentes-web\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-evitar-bajo-rendimiento-fuentes-web\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","width":1460,"height":1095,"caption":"Core Web Vitals: How to Avoid the Performance Pitfalls of Web Fonts"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-evitar-bajo-rendimiento-fuentes-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"M\u00e9tricas Web Principales: C\u00f3mo Evitar los Problemas de Rendimiento de las Fuentes Web"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96","name":"Ian Hernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","caption":"Ian Hernandez"},"description":"Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: https:\/\/www.linkedin.com\/in\/ianhernandez23\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/ianh\/"}]}},"lang":"es","translations":{"es":58033,"en":58000,"it":68795,"fr":71167,"nl":71194,"pt":72377,"uk":72392,"pl":72423,"de":73073,"ru":73076},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/58033","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1058"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=58033"}],"version-history":[{"count":3,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/58033\/revisions"}],"predecessor-version":[{"id":63663,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/58033\/revisions\/63663"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/58013"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=58033"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=58033"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=58033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}