diff options
Diffstat (limited to 'files/es/web/performance/index.html')
| -rw-r--r-- | files/es/web/performance/index.html | 242 |
1 files changed, 242 insertions, 0 deletions
diff --git a/files/es/web/performance/index.html b/files/es/web/performance/index.html new file mode 100644 index 0000000000..9b27ba854c --- /dev/null +++ b/files/es/web/performance/index.html @@ -0,0 +1,242 @@ +--- +title: Rendimiento Web +slug: Web/Performance +tags: + - Mejores Practicas + - Pagina de Inicio + - Rendimiento + - Rendimiento Web +translation_of: Web/Performance +--- +<div>{{draft}}</div> + +<p><span class="seoSummary">El rendimiento web es la medición objetiva y la experiencia percibida por el usuario del tiempo de carga y el tiempo de ejecución; es el tiempo que tarda un sitio en cargarse, ser interactivo y responsivo, y que tan fluido es el contenido durante las interacciones del usuario: ¿el desplazamiento es suave? ¿Se puede hacer clic en los botones? ¿Las ventanas emergentes se abren rápidamente y se animan fluidamente al hacerlo? El rendimiento web incluye mediciones objetivas como el tiempo de carga, cuadros por segundo y tiempo para interactuar y subjetivas de cuánto tiempo se sintió que tardó en cargarse el contenido.</span></p> + +<p><span class="seoSummary">Cuanto más tarde un sitio en responder, más usuarios abandonarán el sitio. Es importante minimizar los tiempos de carga y respuesta, y agregar funciones adicionales para ocultar la latencia al hacer que la experiencia sea lo más accesible e interactiva posible, tan pronto como sea posible, mientras se carga de forma asíncrona en las partes que más tarda la experiencia.</span></p> + +<p><span class="seoSummary">Existen herramientas, API y mejores prácticas que nos ayudan a medir y mejorar el rendimiento web. Los cubrimos en esta sección.</span></p> + +<div class="cleared topicpage-table"> +<div class="section"> +<h2 id="Tutoriales_claves">Tutoriales claves</h2> + +<p>El <a href="/en-US/docs/Learn/Performance">Área de aprendizaje de Rendimiento</a> Web de MDN contiene tutoriales modernos y actualizados que cubren aspectos esenciales del rendimiento:<br> + </p> + +<p><a href="/en-US/docs/Learn/Performance/What_is_web_performance">¿Qué es el rendimiento web?</a></p> + +<p>Este artículo inicia el módulo con un buen vistazo a lo que realmente es el rendimiento: esto incluye las herramientas, métricas, API, redes y grupos de personas que debemos tener en cuenta al pensar en el rendimiento y cómo podemos hacer que el rendimiento sea parte de nuestro flujo de trabajo de desarrollo web.</p> + +<dl> + <dt><a href="/en-US/docs/Web/Performance/Critical_rendering_path">Ruta crítica de renderización</a></dt> + <dd>Algunos atributos y el orden en los origenes del código pueden afectar el rendimiento o su sitio web. Al minimizar el número de nodos del DOM, asegurándose de utilizar el mejor orden y los atributos para el contenido incluido, como estilos, código, elementos multimedia y código de terceros, puede mejorar drásticamente la experiencia del usuario. Este artículo analiza en detalle cómo el HTML y la ruta crítica de renderización pueden usarse para garantizar el máximo rendimiento.</dd> + <dt><a href="/en-US/docs/Learn/Performance/JavaScript">Mejores prácticas de rendimiento de Javascript</a></dt> + <dd>JavaScript, cuando se usa correctamente, puede permitir experiencias web interactivas e inmersivas ... o puede dañar significativamente el tiempo de descarga, el tiempo de reproducción, el rendimiento de la aplicación, la duración de la batería y la experiencia del usuario. Este artículo describe algunas de las mejores prácticas de JavaScript que pueden garantizar que, incluso el contenido más complejo, tenga el mejor rendimiento posible.<br> + </dd> + <dt><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: Images and Video</a></dt> + <dd>Con frecuencia, la optimización de elementos multimedia es la forma más usada de hacer rendimiento web. Es posible servir diferentes archivos multimedia según el tipo de navegador, el tamaño y la densidad de píxeles de cada usuario. Consejos adicionales, como eliminar el sonido en imágenes de fondo, pueden mejorar aún más el rendimiento. En este artículo, analizamos el impacto que el video, el audio y el contenido de imagen tienen en el rendimiento y los métodos para garantizar que su impacto sea el mínimo posible.</dd> + <dt><a href="/en-US/docs/Learn/Performance/CSS_performance">Características de rendimiento CSS </a></dt> + <dd>CSS puede tener un enfoque de optimización menos importante para mejorar el rendimiento, pero hay algunas características de CSS que afectan el rendimiento más que otras. En este artículo, analizamos algunas propiedades de CSS que afectan el rendimiento y sugerimos formas de manejar los estilos para garantizar que el rendimiento no se vea afectado negativamente.</dd> + <dt><a href="/en-US/docs/Learn/Performance/perceived_performance">¿Como los usuarios perciben el rendimiento?</a></dt> + <dd> + <p>Más importante que la rapidez de su sitio web en milisegundos, es la rapidez con la que los usuarios perciben su sitio. El tiempo de carga, el tiempo en ocio de la página, la capacidad de respuesta a la interacción del usuario y lo fluido de los desplazamientos y otras animaciones afectan estas percepciones. En este artículo, analizamos las diversas métricas de carga, animación y métricas de capacidad de respuesta, junto con las mejores prácticas para mejorar la percepción del usuario, y de los tiempos reales.</p> + </dd> + <dt><a href="/en-US/docs/Learn/Performance/web_performance_basics">Conceptos básicos de rendimiento web</a></dt> + <dd>Además de los componentes HTML, CSS, JavaScript y archivos multimedia, hay características que pueden hacer que las aplicaciones sean más lentas y características que pueden hacer que las aplicaciones sean subjetivamente y objetivamente más rápidas. Existen muchas API, herramientas de desarrollo, mejores prácticas y malas prácticas relacionadas con el rendimiento web. Aquí presentaremos muchas de estas funciones al nivel básico y proporcionaremos enlaces a temas más profundos para mejorar el rendimiento en cada tema.</dd> + <dt> + <p><a href="/en-US/docs/Learn/Performance/Mobile">Rendimiento movil</a></p> + </dt> + <dd> + <p>Dado que el acceso a la web en dispositivos móviles es tan popular y que todas las plataformas móviles tienen navegadores web completos, pero es posible que el ancho de banda, la CPU y la vida útil de la batería sean limitados, es importante considerar el rendimiento de su contenido web en estas plataformas. Este artículo analiza las consideraciones de rendimiento específicas para dispositivos móviles.</p> + </dd> + <dt>Llenando la página</dt> + <dd>El cliente realiza una solicitud HTTP y, con suerte, unos segundos después, aparece el sitio. Mostrar el contenido implica ejecutar JavaScript, posiblemente modificando el DOM, calcular estilos, calcular la disposición del diseño y, finalmente, representar el contenido, lo que implica pintar y componer, y puede involucrar la aceleración de la GPU en un hilo de ejecución separado.<br> + .</dd> + <dt>Cuellos de botella en rendimiento </dt> + <dd> </dd> + <dt><a href="/en-US/docs/Web/Performance/time_to_interactive">Tiempo para interactuar</a></dt> + <dd> </dd> + <dt><a href="/en-US/docs/Learn/Performance/Latency">Entendiendo la latencia</a></dt> + <dd> + <p>La latencia es la cantidad de tiempo que se tarda entre realizar una solicitud de un recurso y recibir el primer byte del recurso solicitado. Este artículo explica qué es la latencia, cómo afecta el rendimiento y cómo medir y mejorar la latencia.</p> + </dd> + <dt>Entendiendo ancho de banda </dt> + <dd> + <div> + <div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span><span>El ancho de banda es la cantidad de datos (medidos en Mbps o Kbps) que uno puede enviar por segundo. Este artículo explica la función del ancho de banda en las aplicaciones de Internet ricas en elementos multimedia, cómo puede medirlo y cómo puede optimizar las aplicaciones para aprovechar al máximo el ancho de banda disponible.</span></span></div> + </div> + </dd> + <dt><a href="/en-US/docs/Learn/Performance/HTTP2">HTTP/2 y tu</a></dt> + <dd> + <p>La capa de transporte, es decir, HTTP, es absolutamente esencial para el funcionamiento de la web, y solo recientemente se ha visto una actualización importante en la forma de HTTP/2. Viendolo de otra forma HTTP/2 proporciona muchas mejoras de rendimiento y ventajas sobre su predecesor, pero también cambia el panorama. En este artículo, aprenderá lo que HTTP/2 hace por usted, y cómo ajustar su aplicación para que vaya más allá.</p> + </dd> + <dt>El papel de TLS en el rendimiento</dt> + <dd> + <p>TLS o HTTPS, como solemos llamarlo, es crucial para crear experiencias de usuario seguras. Si bien el hardware ha reducido los impactos negativos que TLS ha tenido en el rendimiento del servidor, todavía representa una porción sustancial del tiempo que pasamos esperando que los navegadores se conecten a los servidores. Este artículo explica el proceso de reconocimiento de TLS y ofrece algunos consejos para reducir este tiempo, como el grapado OCSP, los encabezados de precarga de HSTS y el posible papel de las sugerencias de recursos en el enmascaramiento de la latencia TLS para terceros.<br> + </p> + </dd> + <dt>Leyendo gráficos de rendimientos </dt> + <dd>Las herramientas del desarrollador proporcionan información sobre el rendimiento, la memoria y las solicitudes de red. Saber cómo leer los cuadros de cascada, los árboles de llamadas, los trazos, los gráficos de llamas y las asignaciones de memoria en las herramientas de desarrollo de su navegador lo ayudará a comprender los cuadros de cascada y de llama en otras herramientas de rendimiento.</dd> + <dt>Analizando paquetes de JavaScript</dt> + <dd><span><span>Sin duda, JavaScript es una gran parte del desarrollo web moderno. Si bien siempre debemos esforzarnos por reducir la cantidad de JavaScript que se utiliza en nuestas aplicaciones, puede ser difícil saber dónde comenzar. En esta guía, le mostraremos cómo analizar los paquetes de scripts de su aplicación, para que sepa qué está utilizando y cómo detectar si su aplicación contiene scripts duplicados entre paquetes.</span></span></dd> + <dt><br> + </dt> + <dt><a href="/en-US/docs/Web/Performance/Lazy_loading">Carga diferida </a></dt> + <dd>No siempre es necesario cargar todos los activos de aplicaciones web en la carga de la página inicial. La carga diferida es diferir la carga de elementos en una página, como scripts, imágenes, etc., para un momento posterior, cuando esos elementos son realmente necesarios.</dd> + <dd> </dd> +</dl> + +<dl> + <dt>Carga diferida de JavaScript con import()</dt> + <dd>El término "carga diferida" a menudo se refiere a técnicas de aplazamiento de carga para elementos que no se muestran en la vista inicial de la página solo cuando el usuario se desplaza hacia esos elementos en la página. Ahora hay características nativas para cargar JavaScript! En esta guía, hablaremos sobre el compando import() de carga dinamica, una nueva función del navegador, que carga un módulo de JavaScript a pedido.</dd> + <dt><a href="/en-US/docs/Web/Performance/Controlling_resource_delivery_with_resource_hints">Controlar la entrega de recursos con sugerencias de recursos</a></dt> + <dd>Los navegadores a menudo saben mejor que nosotros cuando se trata de la priorización y la entrega de recursos, pero están lejos de ser clarividentes. Las características nativas del navegador nos permiten sugerirle al navegador cuándo debe conectarse a otro servidor, o precargar un recurso antes de que el navegador sepa que lo necesita. Cuando se usa juiciosamente, esto puede hacer que la experiencia rápida parezca aún más rápida. En este artículo, cubrimos las características nativas del navegador como rel = preconnect, rel = dns-prefetch, rel = prefetch y rel = precarga, y cómo usarlas para su ventaja.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">Documentacion adicional</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Performance/business_case_for_performance">Caso de negocio para rendimiento web</a></dt> + <dd> + <p>Usted sabe que el rendimiento web es importante, pero ¿cómo convencer a los clientes y a la administrativos para que inviertan en el rendimiento y lo conviertan en una prioridad? En este artículo, discutiremos la creación de un caso de negocio claro para convencer a los tomadores de decisiones para que hagan la inversión.</p> + </dd> + <dt><a href="/en-US/docs/Web/Performance/Performance_budget">Presupuestos de rendimiento</a></dt> + <dd>Las necesidades de mercadotecnia, diseño y ventas, y la experiencia del desarrollador, grandes anuncios, scripts de terceros y otras características que pueden ralentizar el rendimiento web. Para ayudar a establecer prioridades, es útil establecer un presupuesto de desempeño: un conjunto de restricciones que no deben excederse durante la fase de desarrollo. En este artículo, analizaremos la creación y el apego a un presupuesto de rendimiento.</dd> + <dt><a href="/en-US/docs/Web/Performance/Mobile_performance_checklist">Lista de pendientes de rendimiento móvil </a></dt> + <dd>Una lista de pendientes concisa de las consideraciones de rendimiento que afectan a los usuarios de redes móviles en dispositivos portátiles que funcionan con baterías.</dd> + <dt><a href="/en-US/docs/Web/Apps/Fundamentals/Performance/Optimizing_startup_performance">Optimización del rendimiento de inicio </a></dt> + <dd>¿Cuánto tiempo demora su aplicación en iniciarse? ¿Bloquea el navegador mientras se carga? Tómese el tiempo para asegurarse de que su aplicación se inicie bien. Este artículo ofrece consejos y sugerencias para ayudarle a alcanzar ese objetivo.</dd> + <dt><a href="/en-US/docs/Tools/Performance">Funciones de rendimiento en las herramientas de desarrollo</a></dt> + <dd>This section provides information on how to use and understand the performance features in your developer tools, including <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>, <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a>, and <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Charts</a>.<br> + Esta sección proporciona información sobre cómo utilizar y comprender las funciones de rendimiento en sus herramientas de desarrollador, incluidos <a href="/en-US/docs/Tools/Performance/Waterfall">gráficos de cascada</a>, <a href="/en-US/docs/Tools/Performance/Call_Tree">árbol de llamadas</a> y <a href="/en-US/docs/Tools/Performance/Flame_Chart">gráficos de llamas</a></dd> +</dl> + +<dl> + <dt> </dt> + <dt><a href="/en-US/docs/Learn/Performance/Latency">Entendiendo la latencia</a></dt> + <dd> + <p>La latencia es la cantidad de tiempo que se tarda entre realizar una solicitud de un recurso y recibir el primer byte del recurso solicitado. Este artículo explica qué es la latencia, cómo afecta el rendimiento y cómo medir y mejorar la latencia.</p> + </dd> + <dt><a href="/en-US/docs/Web/Performance/Checklist">Lista de control de rendimiento web</a></dt> + <dd>Una lista de verificación del rendimiento de las funciones que se deben tener en cuenta al desarrollar aplicaciones con enlaces a tutoriales sobre cómo implementar cada una de ellas, incluye service workers, diagnóstico de problemas de rendimiento, mejores prácticas de carga de fuentes, sugerencias para los clientes, creación de animaciones optimizadas, etc.</dd> + <dt> </dt> +</dl> + +<h3 id="Rendimiento_de_aplicaciones">Rendimiento de aplicaciones</h3> + +<dl> + <dt><a href="/en-US/Apps/Developing/Performance/Performance_fundamentals">Fundamentos de rendimiento</a></dt> + <dd>Una visión general del rendimiento de las aplicaciones web, qué es, cómo el navegador ayuda a mejorarlo, y qué herramientas y procesos puede utilizar para probar y mejorarlo aún más.</dd> + <dt><a href="/en-US/Apps/Developing/Performance/Optimizing_startup_performance">Optimizando el rendimiento de inicio</a></dt> + <dd>Consejos y sugerencias para ayudarlo a mejorar el rendimiento de inicio, tanto al escribir una nueva aplicación como al migrar una aplicación de otra plataforma a la Web.</dd> + <dt><a href="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">Profiling con el profiler integrado</a> </dt> + <dd>Aprenda como rastrear el performance de las aplicaciones con el profiler integrado de Firefox.</dd> + <dt><a href="/en-US/Apps/Build/Performance/CSS_JavaScript_animation_performance">Rendimiento en animaciones con CSS y con JavaScript </a></dt> + <dd>Las animaciones son críticas para una experiencia de usuario placentera. Este artículo analiza las diferencias de rendimiento entre las animaciones basadas en CSS y JavaScript. </dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Performance">Ver todos los articulos acerca de rendimiento...</a></span></p> +</div> +</div> + +<p>{{LandingPageListSubpages}}</p> + +<h2 id="Ver_También">Ver También</h2> + +<p>HTML</p> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Element/picture">El elemento <code><picture></code> </a></li> + <li><a href="/en-US/docs/Web/HTML/Element/video">El elemento <code><video></code></a></li> + <li><a href="/en-US/docs/Web/HTML/Element/source">El elemento <code><source></code></a></li> + <li><a href="/en-US/docs/Web/HTML/Element/img#Attributes">El atributo <code><img> srcset</code> </a> + <ul> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Imagenes responsivas</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Web/HTML/Preloading_content">Precargando contenido con <code>rel="preload"</code></a> - <a href="https://w3c.github.io/preload/">(https://w3c.github.io/preload/ </a>)</li> +</ul> + +<p>CSS</p> + +<ul> + <li><a href="/en-US/docs/Web/CSS/will-change">will-change</a></li> + <li>GPU v CPU</li> + <li>Midiendo disposición del diseño</li> + <li>Mejores practicas en carga de fuentes</li> +</ul> + +<p>JavaScript</p> + +<ul> + <li><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></li> + <li><a href="/en-US/docs/Glossary/Garbage_collection">Recolector de basura </a></li> + <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a></li> +</ul> + +<p>APIs</p> + +<ul> + <li><a href="/en-US/docs/Web/API/Performance_API">Performance API</a></li> + <li><a href="/en-US/docs/Web/API/Navigation_timing_API">Navigation Timing API</a></li> + <li><a href="/en-US/docs/Web/API/Media_Capabilities_API/Using_the_Media_Capabilities_API">Media Capabilities API</a></li> + <li><a href="/en-US/docs/Web/API/Network_Information_API">Network Information API</a></li> + <li><a href="/en-US/docs/Web/API/PerformanceNavigationTiming">PerformanceNavigationTiming</a></li> + <li><a href="/en-US/docs/Web/API/Battery_Status_API">Battery Status API</a></li> + <li><a href="/en-US/docs/Web/API/Navigator/deviceMemory">Navigator.deviceMemory</a></li> + <li><a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer</a></li> + <li><a href="/en-US/docs/Web/API/User_Timing_API/Using_the_User_Timing_API">Using the User Timing AP</a>I</li> + <li><a href="/en-US/docs/Web/API/Long_Tasks_API">Long Tasks API</a></li> + <li><a href="/en-US/docs/Web/API/DOMHighResTimeStamp">High Resolution Timing API</a> (<a href="https://w3c.github.io/hr-time/">https://w3c.github.io/hr-time/)</a></li> + <li><a href="/en-US/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API">Resource Timing API</a></li> + <li><a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility</a></li> + <li><a href="/en-US/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a> + <ul> + <li style="margin-top: 0.25em;"><a href="/en-US/docs/Web/API/Window/requestIdleCallback">requestIdleCallback() </a></li> + </ul> + </li> + <li><a href="/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API">Beacon API</a></li> + <li>Resource Hints - <a href="/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control">dns-prefetch</a>, preconnect, <a href="/en-US/docs/Web/HTTP/Link_prefetching_FAQ">prefetch</a>, and prerender</li> + <li><a href="/en-US/docs/Web/API/FetchEvent/navigationPreload">Fetchevent.navigationPreload</a></li> + <li><a href="/en-US/docs/Web/API/PerformanceServerTiming">Performance Server Timing API</a></li> +</ul> + +<p>Headers</p> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/Headers/Content-Encoding">Content-encoding</a></li> + <li>HTTP/2</li> + <li><a href="/en-US/docs/Glossary/GZip_compression">gZip</a></li> + <li>Client Hints</li> +</ul> + +<p>Tools</p> + +<ul> + <li><a href="/en-US/docs/Tools/Performance">Performance in Firefox Developer Tools</a></li> + <li>Flame charts</li> + <li>the Network panel</li> + <li>waterfall charts</li> +</ul> + +<p>Additional Metrics</p> + +<ul> + <li>Speed Index and Perceptual Speed Index</li> +</ul> + +<p>Best Practices</p> + +<ul> + <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a></li> + <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using Web Workers</a> + <ul> + <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Web/Apps/Progressive/Offline_Service_workers">PWA</a></li> + <li><a href="/en-US/docs/Web/HTTP/Caching">Caching</a></li> + <li>Content Delivery Networks (CDN)</li> +</ul> |