Artículos
Optimiza las tareas largas
Se te ha dicho que no bloquees el subproceso principal y dividas tus tareas largas, pero ¿qué significa hacer eso?
Precargar módulos
La precarga de módulos ofrece una manera de cargar los módulos de JavaScript de forma declarativa con anticipación.
Mide el autocompletado del navegador en tus formularios
Para optimizar la experiencia del usuario, es fundamental comprender cómo interactúan con tus formularios. La función Autocompletar del navegador desempeña un papel importante en este proceso. Obtén información para recopilar y analizar datos sobre cómo los usuarios usan la función Autocompletar en tus formularios.
Parte 2: Crea una detección de toxicidad de IA del cliente
La detección de toxicidad protege a tus usuarios y crea un entorno en línea más seguro. En la segunda parte, aprenderemos a crear una herramienta de IA del cliente para detectar y mitigar la toxicidad en su fuente.
Parte 1: IA del cliente para combatir la toxicidad en línea
"Protege a tus usuarios y crea un entorno en línea más seguro con la detección de toxicidad. En la primera parte, compartimos el contexto que necesitas para implementar la IA y mitigar la toxicidad en su fuente: los teclados de los usuarios".
Optimiza el procesamiento de imagen con contenido más grande
Una guía paso a paso sobre cómo desglosar el LCP y, además, identificar las áreas clave para mejorar
Comienza a medir las Métricas web
Aprende a medir las Métricas web de tu sitio en entornos reales y de labs.
Las formas más eficaces de mejorar las Métricas web esenciales
Una colección de prácticas recomendadas que Chrome identificó como las mayores oportunidades para optimizar el rendimiento web y mejorar las Métricas web esenciales
Web Vitals
Métricas esenciales para un sitio en buen estado
Compara la capacidad de LLM con el resumen
Evalúa los resultados de diferentes instrucciones y modelos con el LLM como técnica para juzgar. En lugar de depender del juicio humano, la validación del modelo se delega a otro LLM.
La propiedad content-visibility del CSS ahora está disponible como línea de base
La propiedad content-visibility del CSS ahora está disponible como Baseline Newly.
Cómo se definieron los umbrales de las métricas de Core Web Vitals
La investigación y la metodología detrás de los umbrales de las Métricas web esenciales
Flujos de trabajo de las Métricas web esenciales con las herramientas de Google
Con la creciente importancia de las Métricas web esenciales, los propietarios y desarrolladores de sitios se enfocan cada vez más en el rendimiento y las experiencias clave del usuario. Google ofrece muchas herramientas para evaluar, optimizar y supervisar las páginas, pero los usuarios suelen confundirse con las diferentes fuentes de datos y con cómo usarlas de manera efectiva. En esta guía, se propone un flujo de trabajo que combina varias herramientas y se aclara dónde y cómo tienen sentido a lo largo del proceso de desarrollo.
Cómo diagnosticar interacciones lentas en el lab de forma manual
Si revisaste los datos de campo, notas que algunas interacciones son lentas. El siguiente paso es aprender más sobre cómo probar manualmente esas interacciones e identificar las causas detrás de ellas.
Referencia
En este artículo, se explica la historia del origen de Baseline, la participación de Google y la propiedad del WebDX Community Group.
Memoria caché atrás/adelante
Aprende a optimizar tus páginas para cargas instantáneas cuando usas los botones Atrás y Avanzar del navegador.
El anidamiento de CSS mejora con CSSNestedDeclarations
La anidación de CSS está mejorando mucho.
First Input Delay (FID)
En esta entrada, se presenta la métrica Retraso de primera entrada (FID) y se explica cómo medirla.
Depura el rendimiento en el campo
Descubre cómo atribuir tus datos de rendimiento con información de depuración para identificar y solucionar problemas de usuarios reales con Analytics
Correlaciona las Métricas web esenciales y los ingresos publicitarios con las herramientas de Google
Obtén información para usar las herramientas de Google y correlacionar tus Métricas web esenciales con los ingresos publicitarios.
Mejora el rendimiento y la UX de la IA del cliente
Descubre los beneficios de la IA del cliente, como la baja latencia, los costos reducidos del servidor, la ausencia de requisitos de claves de API, la mayor privacidad del usuario y el acceso sin conexión.
Cómo realizar comparativas del rendimiento de la propiedad @ de CSS
¿Qué impacto tiene @property en el rendimiento de tu CSS?
Es hora de realizar una carga diferida de iframes fuera de pantalla.
En esta entrada, se explica el atributo de carga y cómo usarlo para controlar la carga de iframes.
El protocolo de envío web
Este instructivo interactivo paso a paso muestra cómo compilar un servidor que administra suscripciones a notificaciones push y envía solicitudes de protocolo push web a un servicio push.
Cómo compilar varias apps web progresivas en el mismo dominio
Explora las formas recomendadas y no recomendadas de compilar varias AWPs que reutilizan el mismo dominio con sus ventajas y desventajas.
Cómo maneja Chrome las actualizaciones del manifiesto de la app web
Qué se necesita para cambiar los íconos, los accesos directos, los colores y otros metadatos del manifiesto de la aplicación web para tu AWP.
Permite la reutilización de llaves de acceso en tus sitios con las solicitudes de origen relacionadas
Obtén información para usar las solicitudes de origen relacionados para permitir la reutilización de llaves de acceso en tus sitios.
Carga diferida de imágenes a nivel del navegador para la Web
En esta publicación, se explica el atributo de carga y cómo se puede usar para controlar la carga de imágenes.
Métricas personalizadas
Las métricas personalizadas te permiten medir y optimizar aspectos de la experiencia de tu sitio que son exclusivos de este.
Mide y depura el rendimiento con Google Analytics 4 y BigQuery
Descubre cómo enviar datos de Métricas web a las propiedades Google Analytics 4 y exportarlos para analizarlos en BigQuery y Looker Studio.
Prácticas recomendadas sobre permisos web
En esta guía, se describen las prácticas recomendadas que deben seguir los sitios web cuando solicitan permiso a los usuarios para acceder a funciones sensibles (como la cámara, el micrófono y la ubicación) para minimizar los mensajes innecesarios y el acceso bloqueado.
Prácticas recomendadas para los avisos de cookies
Obtén información sobre cómo los avisos de cookies afectan el rendimiento, la medición del rendimiento y la UX.
Personaliza las notificaciones multimedia y los controles de reproducción con la API de Media Session
Los desarrolladores web pueden personalizar las notificaciones multimedia y responder a eventos relacionados, como búsquedas o cambios de seguimiento, con la API de Media Session.
Cómo usar tabindex
Usa el atributo tabindex para establecer explícitamente la posición de pestaña de un elemento.
Busque interacciones lentas en el campo
Antes de que puedas reproducir interacciones lentas en el lab para optimizar la interacción a Next Paint de tu sitio web, deberás recurrir a los datos de campo para encontrarlas. Descubra cómo hacerlo en esta guía.
Tiempo hasta el primer byte (TTFB)
En esta entrada, se presenta la métrica Tiempo hasta el primer byte (TTFB) y se explica cómo medirla.
Ingeniería práctica de instrucciones para LLM más pequeños
Aprende a ajustar instrucciones para lograr tus resultados preferidos en diferentes LLM, modelos y tamaños de modelos.
Optimiza el tiempo hasta el primer byte
Aprende a realizar optimizaciones en función de la métrica Tiempo hasta el primer byte.
Interacción a la siguiente pintura (INP)
En esta publicación, se presenta la métrica Interaction to Next Paint (INP) y se explica cómo funciona, cómo medirla y se ofrecen sugerencias para mejorarla.
Colores de CSS que dependen del esquema de colores con claro-oscuro()
description: Define los colores que reaccionan al esquema de colores utilizado con la función claro-oscuro().
Patrones de rendimiento de WebAssembly para aplicaciones web
En esta guía, dirigida a los desarrolladores web que quieran beneficiarse de WebAssembly, aprenderás a usar Wasm para subcontratar tareas con uso intensivo de CPU con la ayuda de un ejemplo en ejecución.
Diseños de cuadrícula animados de CSS
En la cuadrícula de CSS, las propiedades “grid-template-columns” y “grid-template-rows” te permiten definir los nombres de las líneas y realizar un seguimiento del tamaño de las columnas y las filas de la cuadrícula, respectivamente. Admitir la interpolación para estas propiedades permite que los diseños de cuadrícula hagan una transición fluida entre los estados, en lugar de ajustarse en el punto medio de una animación o transición.
Disfruta del juego del dinosaurio de Chrome con tu control de mando
Aprende a controlar juegos web con la API de Gamepad.
El atributo inerte
La propiedad inert es un atributo HTML global que simplifica la forma de quitar y restablecer eventos de entrada del usuario para un elemento, incluidos los eventos de enfoque y de tecnologías de accesibilidad.
Conoce al equipo de IA de Web.dev
Conoce al equipo de escritores técnicos y de relaciones con desarrolladores.
¿Qué es la inteligencia artificial?
El acrónimo AI suele usarse indistintamente para representar varios tipos de tecnologías que conforman el campo de la IA.
Actualiza la búsqueda en tu sitio: Respuestas contextuales con la IA generativa
Existen numerosas consideraciones éticas relacionadas con el uso de herramientas de IA y la generación de contenido nuevo.
IA y ética
Existen numerosas consideraciones éticas relacionadas con el uso de herramientas de IA y la generación de contenido nuevo.
Determina el proveedor de llaves de acceso con AAGUID
Las partes de confianza pueden determinar de dónde proviene la llave de acceso examinando AAGUID. Descubre cómo funciona.
Compilación y optimización de Wasm con Binaryen
Usa el ejemplo de un lenguaje de juguete sintético llamado ExampleScript para aprender a escribir y optimizar módulos de WebAssembly en JavaScript con la API de Binaryen.js.
El componente web <model-viewer>
El componente web <model-viewer> te permite usar modelos 3D en una página web de forma declarativa.
Capturar audio y video en HTML5
La captura de audio y video ha sido el “Santo Grial” del desarrollo web durante mucho tiempo. Durante muchos años, tuvimos que depender de complementos de navegador ( Flash o Silverlight ) para realizar el trabajo. ¡Vamos! HTML5 al rescate. Es
Análisis detallado de user Verification
Obtén información para usar `userverification` en WebAuthn.
¿Por qué los datos de CrUX son diferentes de mis datos de RUM?
Obtén información sobre los motivos por los que los datos de RUM pueden mostrar diferentes números de Métricas web esenciales de CrUX.
Accesibilidad para desarrolladores web
Es importante crear sitios que sean inclusivos y accesibles para todos. Existen al menos seis áreas clave de discapacidad que podemos optimizar: visual, auditiva, móvil, cognitiva, del habla y neuronal.
Cargar JavaScript de terceros
Las secuencias de comandos de terceros proporcionan una amplia gama de funciones útiles, lo que hace que la Web sea más dinámica. Descubre cómo optimizar la carga de secuencias de comandos de terceros para reducir el impacto en el rendimiento.
Largest Contentful Paint (LCP)
En esta entrada, se presenta la métrica del Procesamiento de imagen con contenido más grande (LCP) y se explica cómo medirla.
Impedir la creación de una llave de acceso nueva si ya existe una
Obtén información para evitar que se cree una llave de acceso nueva si ya existe una en el administrador de contraseñas del usuario.
Trabaja con IndexedDB
Guía sobre los conceptos básicos de IndexedDB.
5 fragmentos de CSS que todo desarrollador front-end debe conocer en 2024
Un CSS estable, potente y digno de herramientas que puedes usar hoy mismo.
¿Cuáles son las partes de una URL?
¿Cuál es la diferencia entre un host, un sitio y un origen? ¿Qué es un eTLD+1? En este artículo, se explican los diferentes aspectos.
Análisis detallado de las credenciales detectables
Aprende qué son las credenciales detectables y cómo crear experiencias del usuario que se adapten a tu caso de uso.
Rendimiento del procesamiento
Los usuarios notan si los sitios y las apps no se ejecutan bien, por lo que optimizar el rendimiento de la renderización es fundamental.
Optimiza la codificación y el tamaño de transferencia de los recursos de texto
Después de eliminar las descargas de recursos innecesarios, lo mejor que puedes hacer para mejorar la velocidad de carga de la página es minimizar el tamaño general de las descargas optimizando y comprimiendo los recursos restantes.
OffscreenCanvas: Acelera tus operaciones de lienzo con un trabajador web
En este documento, se explica cómo puedes usar la API de OffscreenCanvas para lograr mejoras de rendimiento al procesar gráficos en tu app web.
First Contentful Paint (FCP)
En esta entrada, se presenta la métrica Primer procesamiento de imagen con contenido (FCP) y se explica cómo medirla.
Redes de distribución de contenidos (CDN)
En este artículo, se brinda una descripción general completa de las redes de distribución de contenidos (CDN). Además, se explica cómo elegir, configurar y optimizar una configuración de CDN.
¿Qué se necesita para una buena experiencia de salida?
Orientación práctica para desarrolladores sobre qué hacer cuando un usuario sale del sitio web
Tiempo de carga (TTI)
En esta entrada, se presenta la métrica Tiempo de carga (TTI) y se explica cómo medirla
Optimiza la carga de recursos con la API de Fetch Priority
La API de Fetch Priority indica la prioridad relativa de los recursos para el navegador. Puede permitir una carga óptima y mejorar las Métricas web esenciales.
Seudoclases :user-valid y :user-invalid
Información acerca de las pseudoclases :user-valid y :user-invalid y cómo usarlas para mejorar la experiencia del usuario en la validación de entradas
Optimiza las Métricas web esenciales para los responsables de tomar decisiones empresariales
Descubre cómo los responsables de la toma de decisiones empresariales y los que no son desarrolladores pueden mejorar las Métricas web esenciales.
Los matices de las strings de codificación en Base64 en JavaScript
Comprende y evita problemas comunes al aplicar la codificación y decodificación base64 a strings.
Subcuadrícula CSS
La subcuadrícula permite compartir la cuadrícula, lo que permite que las cuadrículas anidadas se alineen con los principales y del mismo nivel.
Carga eficaz de anuncios sin afectar la velocidad de la página
En el mundo digital actual, la publicidad en línea es una parte fundamental de la Web gratuita que todos disfrutamos. Sin embargo, los anuncios mal implementados pueden provocar una experiencia de navegación más lenta, frustrar a los usuarios y disminuir la participación. Aprende a cargar anuncios de forma eficaz sin afectar la velocidad de tu página, garantizar una experiencia del usuario fluida y maximizar las oportunidades de ingresos para los propietarios de sitios web.
Cuatro tipos comunes de cobertura de código
Aprende qué es la cobertura de código y descubre cuatro formas comunes de medirla.
Para probar o no, desde una perspectiva técnica
Determina lo que necesitas probar y lo que puedes descartar.
Definición de casos de prueba y prioridades
Determina lo que quieres probar, define tus casos de prueba y establece prioridades.
Métricas de rendimiento centradas en el usuario
Las métricas de rendimiento centradas en el usuario son una herramienta fundamental para comprender y mejorar la experiencia en tu sitio de una manera que beneficie a los usuarios reales.
Precargar imágenes responsivas
Conoce nuevas y emocionantes posibilidades para precargar imágenes responsivas y garantizar una excelente experiencia del usuario.
Adaptar la tipografía a las preferencias del usuario con CSS
Es un método para adaptar una fuente a las preferencias de tus usuarios, con el objetivo de que se sientan lo más cómodos posible al leer tu contenido.
¿Pirámide o cangrejo? Encuentra una estrategia de pruebas que se adapte
Descubre cómo combinar diferentes tipos de pruebas en una estrategia razonable que coincida con tu proyecto.
Tres tipos comunes de automatización de pruebas
Comencemos con los conceptos básicos. Explora los dos modos de prueba generales y tres tipos comunes de automatización de pruebas.
Eliminación de descargas innecesarias
Debes auditar tus recursos periódicamente para asegurarte de que cada uno ayude a brindar una mejor experiencia del usuario.
¿Qué es WebAssembly y de dónde proviene?
Una introducción a WebAssembly (a veces abreviado Wasm), el formato de código binario portátil y el formato de texto correspondiente para programas ejecutables, así como las interfaces de software para facilitar las interacciones entre esos programas y su entorno de host
Cómo compilar mkbitmap en WebAssembly
El programa mkbitmap de C lee una imagen y le aplica una o más de las siguientes operaciones, en este orden: inversión, filtrado de paso alto, escalamiento y umbral. Cada operación se puede controlar, activar o desactivar de forma individual. En este artículo, se muestra cómo compilar mkbitmap en WebAssembly.
El sistema de archivos privados de origen
El estándar de sistemas de archivos presenta un sistema de archivos privado de origen (OPFS) como un extremo de almacenamiento privado para el origen de la página y no visible para el usuario que proporciona acceso opcional a un tipo especial de
Aloja datos de usuarios de forma segura en aplicaciones web modernas
Cómo mostrar de forma segura contenido controlado por el usuario en aplicaciones web.
Implementa AVIF para sitios web más responsivos
Descripción general de cómo se adopta AVIF en el ecosistema y qué tipo de beneficios de rendimiento y calidad pueden esperar los desarrolladores de AVIF para las imágenes estáticas y las animaciones.
Optimiza la interacción para el siguiente procesamiento de imagen
Aprende a optimizar la interacción de tu sitio web a Next Paint.
Funciones de Baseline que puedes usar en la actualidad
Conocer algunas de las funciones que forman parte de Baseline
De qué manera los tamaños grandes de DOM afectan la interactividad y qué puedes hacer al respecto
Los grandes tamaños de DOM pueden ser un factor que determine si las interacciones son rápidas o no. Obtén más información sobre la relación entre el tamaño del DOM y el INP, y qué puedes hacer para reducir el tamaño del DOM y otras maneras de limitar el trabajo de renderización cuando tu página tiene muchos elementos del DOM.
Cómo optimizar el retraso de entrada
La demora en las entradas puede contribuir de manera significativa a la latencia de interacción total y afectar negativamente el INP de tu página. En esta guía, aprenderás qué es la demora de entrada y cómo puedes reducirla para lograr una interactividad más rápida.
Evaluación de secuencias de comandos y tareas largas
Cuando se cargan secuencias de comandos, el navegador tarda en evaluarlas antes de la ejecución, lo que puede causar tareas largas. Obtén información sobre cómo funciona la evaluación de secuencias de comandos y qué puedes hacer para evitar que provoque tareas largas mientras se carga la página.
Renderización de HTML e interactividad del cliente
Renderizar HTML con JavaScript es diferente de renderizar HTML que envía el servidor y que puede afectar el rendimiento. Obtén información sobre la diferencia en esta guía y lo que puedes hacer para preservar el rendimiento de renderización de tu sitio web, especialmente en lo que respecta a las interacciones.
Cómo usar la extensión de Métricas web para depurar problemas de Métricas web esenciales
La extensión de Métricas web ahora muestra más información de depuración para ayudarte a identificar las causas raíz de los problemas de Métricas web esenciales.
Cómo optimizar el cambio de diseño acumulado
El Cambio de diseño acumulado (CLS) es una métrica que cuantifica la frecuencia con la que los usuarios experimentan cambios repentinos en el contenido de las páginas. En esta guía, analizaremos la optimización de causas comunes de CLS, como iframes y imágenes sin dimensiones ni contenido dinámico.
Cumulative Layout Shift (CLS)
En esta entrada, se presenta la métrica Cambio de diseño acumulado (CLS) y se explica cómo medirla.
Crea experiencias de WordPress en el navegador con WordPress Playground y WebAssembly
La versión completa de WordPress con tecnología de PHP que se ejecuta únicamente en el navegador con WebAssembly
WebAssembly ofrece nuevas funciones para desarrolladores
Una muestra de las herramientas que ahora están disponibles en la Web gracias a WebAssembly.
AWP en tiendas de aplicaciones
Las apps web progresivas se pueden enviar a tiendas de aplicaciones, como Play Store de Android o Microsoft Store, entre otras.
¿Qué son los mapas de origen?
Mejora la experiencia de depuración web con mapas de origen.
6 fragmentos de CSS que todo desarrollador front-end debe conocer en 2023
Un CSS estable, potente y digno de herramientas que puedes usar hoy mismo.
Funciones trigonométricas en CSS
Calcula el seno, el coseno, la tangente y otros valores en CSS.
Realiza operaciones eficientes por fotograma en video con requestVideoFrameCallback()
El método requestVideoFrameCallback() permite a los autores web registrar una devolución de llamada que se ejecuta en los pasos de renderización cuando se envía un nuevo fotograma de video al compositor.
Momento destacado de la comunidad de GDE: Lars Knudsen
Una de una serie de entrevistas con miembros del programa de Expertos de Google Developers (GDE).
Nuevos patrones para apps de música
En esta entrada de blog, se anuncia una nueva colección de patrones para las apps de música.
Sugerencia de CSS rápida Texto gradiente animado
Hagamos ese efecto de texto con gradiente animado con propiedades personalizadas centradas y background-clip Ve a CodePen y crea un nuevo editor. Crea el marcado para tu texto. Usemos un encabezado con la palabra "Rápido": Luego, le daremos a nuestro
Compilando Chrometober
Cómo el libro, que tiene desplazamiento, cobró vida por compartir sugerencias y trucos divertidos y aterradores en este Chrometober.
Compila un componente de información sobre la herramienta
Una descripción general de los conceptos básicos para crear un elemento personalizado de información sobre la herramienta que se adapte a los colores y sea accesible.
Accede con una llave de acceso mediante el autocompletado del formulario
Las llaves de acceso hacen que las cuentas de usuario de un sitio web sean más seguras, sencillas y fáciles de usar, y no requieren contraseña. En este artículo, se explica cómo se debe diseñar un acceso sin contraseña mediante llaves de acceso y, a la vez, adaptarse a los usuarios existentes que tienen contraseñas.
Crea una llave de acceso para los accesos sin contraseña
Las llaves de acceso hacen que las cuentas de usuario de un sitio web sean más seguras, sencillas y fáciles de usar, y no requieren contraseña. En este artículo, se explica cómo permitir que los usuarios creen llaves de acceso para tu sitio web.
Cómo compilar un componente de botón de acción flotante (BAF)
Una descripción general fundamental de cómo crear componentes de BAF que se adapten al color, responsivos y accesibles.
Prácticas recomendadas para fuentes
Obtén información sobre cómo optimizar las fuentes web para las Métricas web esenciales.
Sugerencia de CSS rápida Cargador animado
Construyamos un cargador de CSS animado con propiedades personalizadas centradas y animation-timing-function Ve a CodePen y crea un nuevo editor. Crea el marcado para nuestro cargador. Ten en cuenta el uso de propiedades personalizadas intercaladas:
Cómo probar el contraste de colores de un diseño web
Una descripción general de tres herramientas y técnicas para probar y verificar el contraste de color accesible de tu diseño.
Destacado de la comunidad de GDE: Alba Silvente Fuentes
Una de una serie de entrevistas con miembros del programa de Expertos de Google Developers (GDE).
Cómo crear la navegación principal para un sitio web
En este instructivo, se describe cómo crear una navegación principal accesible de un sitio web. Aprenderás sobre HTML semántico, la accesibilidad y cómo el uso de atributos de ARIA a veces puede ser más dañino que beneficioso.
¿Es :modal?
Este práctico pseudoselector de CSS te brinda una manera de seleccionar elementos que son modales.
Estilo de la lista de creatividades
Descubre algunas formas útiles y creativas de diseñar una lista.
Prácticas recomendadas para las etiquetas y los administradores de etiquetas
Optimiza las etiquetas y los administradores de etiquetas para las Métricas web esenciales.
Construir una ilusión de cuadrícula torcida
Explora divertidas formas de recrear una ilusión óptica con CSS.
Cómo Nordhealth usa propiedades personalizadas en componentes web
Los beneficios de usar propiedades personalizadas en sistemas de diseño y bibliotecas de componentes
Control más detallado sobre las transformaciones de CSS con propiedades de transformación individuales
Aprende a usar las propiedades individuales de CSS de traducción, rotación y escala para abordar las transformaciones de forma intuitiva.
Animaciones de bordes CSS
Varias maneras de animar un borde en CSS
Cómo la BBC está implementando HSTS para mejorar la seguridad y el rendimiento.
La BBC lanzará HSTS en su sitio web para mejorar la seguridad y el rendimiento. Descubre qué significa y cómo puede ayudarte HSTS.
Por qué los datos de lab y de campo pueden ser diferentes (y qué hacer al respecto)
Obtén información sobre por qué las herramientas que supervisan las Métricas web esenciales pueden generar informes con números distintos y cómo interpretar esas diferencias.
Una situación beneficiosa para todos
Enrique Fernandez Guerra, GDE, habla sobre la creación de su ONG HelpDev en código abierto.
El fin de Internet Explorer
El objetivo final de la compatibilidad con Internet Explorer para los clientes y desarrolladores de Maersk.com
Dile adiós a HTML5Rocks
Hasta ahora HTML5Rocks, ha sido bueno conocerte.
Recetas de galletas propias
Aprende a configurar cookies propias para garantizar la seguridad y la compatibilidad entre navegadores, y minimizar las posibilidades de fallas una vez que se eliminen gradualmente las cookies de terceros.
Sincroniza la reproducción de audio y video en la Web
La API de Web Audio permite lograr correctamente la sincronización de AV.
Usar gradientes cónicos para crear un borde frío
Los gradientes cónicos se pueden usar para crear algunos efectos interesantes, como este bonito ejemplo de borde. En este CodePen creado por Adam Argyle, que se compartió originalmente a través de este tweet en Twitter, se muestra cómo usar un
La diferencia entre las bibliotecas y los frameworks de JavaScript
Comprender las diferencias entre frameworks y bibliotecas en el contexto de un entorno de JavaScript del cliente
Elige un framework o una biblioteca de JavaScript
Comprende las decisiones relacionadas con el uso de una biblioteca o un framework de JavaScript.
Implementa el manejo de errores cuando se usa la API de recuperación
Detección de errores cuando se trabaja con la API de recuperación
Una API para fuentes web rápidas y atractivas
Una actualización sobre la API de CSS de Google Fonts: cómo funciona, cómo usarla y cómo puede proporcionar tus fuentes web de manera eficiente.
Guía para desarrolladores de frontend sobre la terminal
Este recurso puede ayudarlo a desplazarse rápidamente por la terminal.
GOV.UK descarta jQuery desde su frontend.
GOV.UK eliminó su dependencia de jQuery de su frontend. Nunca adivinarás lo que sucedió. (Sí, lo harás).
Cómo compilar un componente de botón
Una descripción general fundamental de cómo crear componentes que se adapten al color, sean responsivos y sean accesibles.
No te comprometas con el escáner de precarga del navegador
Descubre qué es el escáner de precarga del navegador, cómo ayuda a mejorar el rendimiento y cómo puedes evitar interferir en su trabajo.
Prácticas recomendadas para medir las Métricas web en el campo
Cómo medir las Métricas web con tu herramienta de estadísticas actual
Ayudamos a reducir la brecha
Facilitamos la compilación para la Web.
Cómo encontrar el coraje y la inspiración en la comunidad de desarrolladores
Expertos de Google Developers web sobre cómo los programas de tutoría los empoderaron para convertirse en líderes.
Fuentes variables en la vida real
Compartir una guía práctica sobre fuentes variables, con muchos ejemplos.
Crea rápidamente gradientes de CSS atractivos con el Creador de gradientes de CSS
Esta herramienta de Josh W Comeau hace que crear gradientes atractivos sea muy simple.
Análisis detallado de los principales problemas de los desarrolladores web
Una recopilación de información sobre los principales puntos débiles, recopilada de varias conversaciones individuales con desarrolladores web.
Crea una imagen perfecta de tu sitio con images.tooling.report
Revisa el estado de las herramientas de imagen.
Alcance de las variables globales y locales
Obtén más información sobre el alcance y cómo funciona en JavaScript.
Cómo compilar un componente de diálogo
Descripción general de los conceptos básicos sobre cómo crear mini y mega modales que se adapten al color, respondan y sean accesibles con el elemento ``.
Cómo depurar errores de reproducción de contenido multimedia en la Web
Obtén información para depurar errores de reproducción de contenido multimedia en la Web.
Momento destacado de la comunidad de GDE: Nishu Goel
Una de una serie de entrevistas con miembros del programa de Expertos de Google Developers (GDE).
Los efectos en el rendimiento de un exceso de carga diferida
Cargar con anticipación imágenes en el viewport inicial, mientras se carga de forma diferida el resto, puede mejorar las Métricas web mientras se cargan menos bytes.
Cómo compilar un componente de barra de carga
Descripción general de los conceptos básicos sobre cómo compilar una barra de carga adaptable de color y accesible con el elemento ``
Guardar credenciales desde Formularios
Mantén los formularios de registro y acceso lo más simples posible. Guarda las credenciales de los formularios de acceso para que los usuarios no tengan que volver a acceder cuando regresen. Para almacenar las credenciales de los usuarios desde los
Chrome y Firefox pronto llegarán a la versión principal 100
Cambios en las strings de usuario-agente, estrategias que Chrome y Firefox están adoptando para mitigar el impacto y cómo puedes ayudar.
Cómo compilar un ícono de página adaptable
Una descripción general de los conceptos básicos para crear un ícono de página adaptable.
Cómo dibujar a lienzo en Emscripten
Aprende a renderizar gráficos 2D en un lienzo de la Web desde WebAssembly con Emscripten.
Actualiza la caché HTTP para mejorar la seguridad y la privacidad
Olvidar o hacer un uso inadecuado del encabezado Cache-Control puede afectar negativamente la seguridad de tu sitio web y la privacidad de los usuarios. Obtenga recomendaciones de sitios web valiosos.
Elementos HTML adicionales
Métricas esenciales para un sitio en buen estado
Portabilidad de aplicaciones USB a la Web Parte 2: gPhoto2
Descubre cómo se portó gPhoto2 a WebAssembly para controlar cámaras externas mediante USB desde una app web.
Registro de errores de red (NEL)
Usa Network Error Logging (NEL) para recopilar errores de red del cliente.
Detección de funciones de WebAssembly
Aprende a usar las funciones más recientes de WebAssembly y a la compatibilidad con usuarios en todos los navegadores.
Portabilidad de aplicaciones USB a la Web Parte 1: libusb
Descubre cómo el código que interactúa con dispositivos externos se puede transferir a la Web con las APIs de WebAssembly y Fugu.
Cómo compilar un componente de cambio de tema
Una descripción general de los conceptos básicos para compilar un componente de cambio de tema adaptable y accesible.
Incorporación de fragmentos de JavaScript en C++ con Emscripten
Aprende a incorporar código JavaScript en tu biblioteca WebAssembly para comunicarte con el mundo exterior.
AWP en Oculus Quest 2
Oculus Quest 2 es un visor de realidad virtual (RV) creado por Oculus, una división de Meta. Ahora los desarrolladores pueden compilar y distribuir apps web progresivas (AWP) en 2D y 3D que aprovechen la función para realizar varias tareas a la vez de Oculus Quest 2. En este artículo, se describe la experiencia y cómo compilar, transferir y probar tu AWP en Oculus Quest 2.
Diseño del edificio
Descubre el proceso y las herramientas que se usaron para crear la experiencia con estilo de calendario festivo de Designcember.
Calculadora de diseño
Un intento esqueuomórfico de recrear una calculadora solar en la Web que utiliza el sensor de luz ambiente y la función de superposición de controles de las ventanas.
Copia profunda en JavaScript con estructuradoClone
Durante más tiempo, tuviste que recurrir a soluciones alternativas y bibliotecas para crear una copia profunda de un valor de JavaScript. La plataforma ahora viene con `StructuredClone()`, una función integrada para la copia profunda.
Cómo compilar un componente de aviso
Una descripción general de los conceptos básicos para crear un componente de aviso adaptable y accesible.
UI Fund
Anunciamos el fondo de interfaz de usuario de Chrome, diseñado para otorgar subsidios a las personas que trabajan en herramientas de diseño, CSS y HTML.
Cómo compilar un componente del menú del juego en 3D
Descripción general de los conceptos básicos sobre cómo crear un menú de juegos en 3D responsivo, adaptable y accesible.
Hacia una métrica de fluidez de animación
Aprende a medir animaciones, a pensar en los fotogramas de animación y a la fluidez general de la página.
Novedades de PageSpeed Insights
Obtén información sobre las funciones más recientes de PageSpeed Insights para medir y optimizar mejor la calidad de tu página y tu sitio.
Todos los anuncios de Chrome Dev Summit 2021
Un resumen de todos los anuncios clave de la Chrome Dev Summit 2021, con los vínculos que necesitas para obtener más información.
Flujos de usuarios de Lighthouse
Prueba una nueva API de Lighthouse para medir el rendimiento y las prácticas recomendadas en todo un flujo de usuarios.
El recorrido de Photoshop hacia la Web
Durante los últimos tres años, Chrome ha estado trabajando para potenciar las aplicaciones web que quieren desafiar los límites de lo que es posible en el navegador. Una de esas aplicaciones web fue Photoshop. Hace unos años, habría sido difícil imaginar la idea de ejecutar un software tan complejo como Photoshop directamente en el navegador. Sin embargo, a través del uso de varias tecnologías web nuevas, Adobe ha puesto en marcha una versión beta pública de Photoshop en la Web.
Compila un componente de selección múltiple
Una descripción general de los conceptos básicos sobre cómo crear un componente de selección múltiple responsivo, adaptable y accesible para ordenar y filtrar las experiencias del usuario.
Cómo evaluar el rendimiento de carga en el campo con Navigation Timing y Resource Timing
Aprende los conceptos básicos del uso de las APIs de Navigation y Resource Timing para evaluar el rendimiento de carga en el campo.
Manipulación segura de DOM con la API de Sanitizer
La nueva API de Sanitizer tiene como objetivo compilar un procesador sólido para que las strings arbitrarias se inserten de forma segura en una página. En este artículo, se presenta la API y se explica su uso.
Prácticas recomendadas para usar incorporaciones de terceros
En este documento, se analizan las prácticas recomendadas de rendimiento que puedes usar cuando cargas incorporaciones de terceros, técnicas de carga eficientes y la herramienta Terminador de cambio de diseño que ayuda a reducir los cambios de diseño para inserciones populares.
Cómo afectan las arquitecturas de SPA a las Métricas web esenciales
Respuestas a preguntas comunes sobre las SPA, las Métricas web esenciales y el plan de Google para abordar las limitaciones de medición actuales
Análisis detallado de los eventos de JavaScript
preventDefault y stopPropagation: cuándo usar cada uno y qué hace exactamente cada método El manejo de eventos de JavaScript suele ser sencillo. Esto es especialmente cierto cuando se trata de una estructura HTML simple (relativamente plana). Sin
Cómo crear paquetes de recursos que no son de JavaScript
Obtén información sobre cómo importar y agrupar varios tipos de recursos desde JavaScript de un modo que funcione tanto en navegadores como en agrupadores.
Cómo compilar un componente de botón dividido
Una descripción general de los conceptos básicos para compilar un componente accesible de botón dividido
Uso de secuencias de comandos del módulo CSS para importar hojas de estilo
Obtén información sobre cómo usar secuencias de comandos de módulos de CSS para importar hojas de estilo CSS con la misma sintaxis que los módulos de JavaScript.
Cómo compilar un componente de interruptor
Una descripción general de los conceptos básicos para crear un componente de interruptor responsivo y accesible
Encabezados de sugerencias de clientes para las funciones multimedia de preferencias de los usuarios
Un conjunto de encabezados de sugerencias del cliente permite que los sitios obtengan las preferencias de contenido multimedia del usuario de forma opcional en el momento de la solicitud, lo que permite que los servidores incorporen el CSS correcto
Cómo compilar un componente de rutas de navegación
Una descripción general de los conceptos básicos sobre cómo crear un componente de rutas de navegación adaptables y accesibles para que los usuarios naveguen por tu sitio
Cómo usar subprocesos de WebAssembly desde C, C++ y Rust
Aprende a incorporar aplicaciones multiproceso escritas en otros lenguajes en WebAssembly.
Frameworks de contenido multimedia
Los frameworks de contenido multimedia se ofrecen en una variedad de propiedad y de código abierto, y en esencia son un conjunto de APIs que admiten la reproducción de audio o video para varios formatos de contenedores y protocolos de transmisión.
AWP con transmisión sin conexión
Compilar una AWP con transmisión sin conexión tiene sus desafíos. En este artículo, obtendrás información sobre las APIs y técnicas que les brindan a los usuarios una experiencia de contenido multimedia sin conexión de alta calidad.
Encriptación de contenido multimedia
Aprende los conceptos de administración de derechos digitales y los comandos necesarios para pasar de un archivo mov sin procesar a contenido multimedia encriptado empaquetado para MPEG-DASH o HLS con la encriptación Clear Key o Widevine.
Conceptos básicos de la transmisión de contenido multimedia
La transmisión multimedia es el método para entregar continuamente contenido multimedia desde un servidor donde el contenido se dividió en fragmentos individuales de datos que se pueden unir durante la reproducción en un orden específico a través de una solicitud de rango usando protocolos como DASH y HLS.
Mejore su camino con los datos de campo de la actualización de la extensión de Métricas web
La extensión de Métricas web ahora te muestra dónde se encuentran tus experiencias locales en relación con experiencias de usuarios reales en el campo.
Ajuste de tamaño de CSS para @font-face
A medida que se carga una fuente web, ahora puedes ajustar su escala para normalizar los tamaños de fuente del documento y evitar el cambio de diseño al cambiar de fuente.
Cómo crear un esquema de colores
Una descripción general fundamental de cómo establecer un esquema de colores dinámico y configurable
Cómo usar AVIF para comprimir imágenes en tu sitio
Publicar imágenes del tamaño de una computadora de escritorio en dispositivos móviles puede consumir 2 o 4 veces más datos de lo necesario. En lugar de adoptar un enfoque de “talla única para todos” respecto de las imágenes, publica imágenes de distintos tamaños en distintos dispositivos.
CSS para Métricas web
En este artículo, se describen las técnicas relacionadas con CSS para optimizar las Métricas web.
Evolucion del cambio de diseño acumulado en las herramientas web
A partir de hoy, se lanzó un cambio en CLS en varias plataformas de herramientas web de Chrome, como Lighthouse, PageSpeed Insights y el Informe de UX de Chrome.
Ya está disponible la nueva capacitación sobre apps web progresivas
Ya está disponible una nueva capacitación en apps web progresivas de seis partes, que incluye una nueva serie de codelabs para enseñarte a compilar AWPs confiables, instalables y capaces.
El nuevo responsivo: diseño web en un mundo basado en componentes
Las funciones multimedia basadas en las preferencias de los usuarios, las consultas de contenedores y las consultas de medios para nuevos tipos de pantalla, como las pantallas plegables, nos permitirán utilizar estos recursos en una nueva era de diseño web responsivo.
Excalidraw y Fugu: cómo mejorar los recorridos principales de los usuarios
Resumen de la charla de Google I/O 2021 de Thomas Steiner titulada Excalidraw y Fugu: cómo mejorar los recorridos principales de los usuarios
Módulos de ES en service workers
Los service workers pueden usar importaciones estáticas de módulos de ES para incorporar código adicional, como alternativa a importScripts().
Cómo compilar un componente de desplazamiento multimedia
Descripción general de los conceptos básicos sobre cómo crear una vista de desplazamiento horizontal responsiva para TVs, teléfonos, computadoras de escritorio, etcétera
Optimización de las Métricas web con Lighthouse
Hoy, abordaremos nuevas funciones de herramientas en Lighthouse, PageSpeed y Herramientas para desarrolladores para ayudar a identificar la manera en que tu sitio puede mejorar las Métricas web.
Personaliza la superposición de los controles de la ventana de la barra de título de tu AWP
Con la función de superposición de controles de ventana, los desarrolladores pueden personalizar la barra de título de las AWP instaladas para que se parezcan más a las aplicaciones.
Mantén bajo control las secuencias de comandos de terceros
Las secuencias de comandos de terceros (o etiquetas) pueden ser una fuente de problemas de rendimiento en tu sitio y, por lo tanto, un objetivo de optimización. Sin embargo, antes de comenzar a optimizar las etiquetas que agregó, asegúrese de no optimizar las etiquetas que ni siquiera necesita. En este artículo, se explica cómo evaluar las solicitudes de etiquetas nuevas y cómo administrar y revisar las existentes.
Supera los obstáculos con la API de DataTransfer
El objeto DataTransfer contiene datos que se arrastran durante una operación de arrastrar y soltar. Puede contener uno o más elementos de datos, cada uno de uno o más tipos de datos. En este artículo, se explica lo que puedes hacer con la API de DataTransfer.
Completar formularios de OTP dentro de iframes de origen cruzado con la API de WebOTP
La API de WebOTP ahora puede recibir una OTP desde un iframe.
Cómo crear animaciones de texto dividido
Una descripción general de los conceptos básicos para crear animaciones de letras y palabras divididas.
Evoluciona la métrica de CLS
Planes para mejorar la métrica de CLS a fin de que sea más justa para las páginas de larga duración.
Satisfacción de los desarrolladores web
Web Developer Satisfaction es un proyecto de Google para recopilar información sobre las necesidades de los desarrolladores web. El objetivo es crear una plataforma web más confiable, interoperable y predecible que permita a los desarrolladores invertir en ella y confiar en ella, además de adoptar y usar nuevas funciones para hacer crecer la plataforma y sus negocios.
Cómo compilar un componente de configuración
Una descripción general de los conceptos básicos sobre cómo crear un componente de configuración con controles deslizantes y casillas de verificación
Cómo depurar cambios de diseño
Obtén información para identificar y corregir los cambios de diseño.
Ideas finales de un desarrollador web sobre miniapps
En este capítulo, concluye la colección de miniapps con la observación de que pensar de manera innovadora, y obtener información e inspiración desde fuera de la propia burbuja puede, sin dudas, ayudar a construir un futuro mejor en la Web.
Cómo programar la miniapp
En este capítulo, se presenta la manera de programar la forma de miniapp.
Componentes de la miniapp
En este capítulo, se proporcionan detalles sobre los componentes que ofrecen todas las plataformas de miniapps.
Aplicar los principios de programación de miniapps a un proyecto de ejemplo
En este capítulo, se muestra un proyecto de ejemplo que sigue el enfoque de "programación de apps en miniatura.
Miniproyectos de código abierto de app
En este capítulo, se presenta una selección de proyectos interesantes de miniapps de código abierto.
Estructura, ciclo de vida y paquetes del proyecto
En este capítulo, se aborda la estructura del proyecto, el ciclo de vida y la agrupación de miniapps.
¿Qué son H5 y QuickApp?
En este capítulo, se proporciona información general sobre las apps de H5 y QuickApp, que son distintas de las miniapps.
Lenguaje de marcado, estilo, secuencia de comandos y actualización de miniapps
En este capítulo, se analizan las opciones de marcado, estilo, secuencia de comandos y actualización de varias plataformas de miniapps.
Cómo compilar un componente de pestañas
Una descripción general de los conceptos básicos sobre cómo crear un componente de pestañas similar al de las apps para iOS y Android
Solicita el aislamiento de rendimiento con el encabezado Origin-Agent-Cluster
El encabezado Origin-Agent-Cluster corta el acceso síncrono a otros orígenes en el mismo dominio y sugiere al navegador proporcionar recursos exclusivos a tu origen.
La propiedad aspect-ratio de CSS
Mantener la relación de aspecto dentro de las imágenes y los elementos ahora es más fácil con la nueva propiedad de relación de aspecto de CSS.
Prácticas recomendadas para carruseles
Aprende a optimizar los carruseles para mejorar el rendimiento y la usabilidad.
Codelab: Compila un componente de navegación lateral
Aprende a crear un componente de diseño de navegación lateral de diapositivas responsivas.
Cómo compilar un componente de navegación lateral
Descripción general de los conceptos básicos para crear una diapositiva responsiva desde los costados
Centrar en CSS
Sigue 5 técnicas de centrado a medida que pasan por una serie de pruebas para ver cuál es la más resistente al cambio.
Codelab: Centrar en CSS
Aprende 5 técnicas diferentes para centrar con CSS.
Me encanta tu caché ❤️
El rendimiento de la primera carga es importante, pero no lo es todo. Los usuarios que carguen tu sitio por segunda vez utilizarán su caché para acceder a tu contenido, por lo que es fundamental que te asegures de que también funcione bien, tanto para la velocidad como para la precisión.
Trabajadores de pintura entre navegadores y Houdini.how
Aprende a implementar las API de Houdini Paint en varios navegadores y explora un mundo de trabajos de Houdini con Houdini.how.
Codelab de prácticas recomendadas para el formulario de registro
Usa las funciones multiplataforma del navegador para crear un formulario de registro sencillo que sea seguro, accesible y fácil de usar.
Automatiza auditorías con AutoWebPerf
Una nueva herramienta modular que permite la recopilación automática de datos de rendimiento de varias fuentes.
Codelab de prácticas recomendadas para el formulario de dirección
Conoce las prácticas recomendadas para los formularios de dirección.
Codelab de prácticas recomendadas para los formularios de pago
Conoce las prácticas recomendadas para los formularios de pago.
Comunicación bidireccional con los service workers
Cómo establecer un canal de comunicación bidireccional entre la página y el service worker
Guía de almacenamiento en caché imperativo
Cómo comunicar una ventana y un service worker para realizar tareas relacionadas con el rendimiento, el almacenamiento en caché y el funcionamiento sin conexión
Transmite actualizaciones a las páginas con service workers
De qué manera los service workers pueden comunicarse proactivamente con la página para informar sobre ciertos eventos
Descripción general de los trabajadores
Cómo los trabajadores web y los service workers pueden mejorar el rendimiento de tu sitio web, y cuándo usar un trabajador web en lugar de un service worker.
Inhabilita la aceleración del mouse para brindar una mejor experiencia de juego FPS
Las apps web ahora pueden inhabilitar la aceleración del mouse al capturar eventos del puntero.
Cómo crear un componente Historias
Descripción general de los conceptos básicos sobre cómo crear una experiencia similar a las historias de Instagram en la Web.
Codelab: Compila un componente de historias
Descubre cómo crear una experiencia similar a las historias de Instagram en la Web.
Schemeful SameSite
La definición de “mismo sitio” está evolucionando para incluir el esquema de URL, por lo que los vínculos entre las versiones HTTP y HTTPS de un sitio ahora cuentan como solicitudes entre sitios. Actualiza a HTTPS de forma predeterminada para evitar problemas siempre que sea posible o lee más detalles sobre los valores de atributo de SameSite que se necesitan.
Carga diferida de CMS a nivel del navegador
En esta publicación, se proporciona orientación para adoptar el atributo de carga en los sistemas de administración de contenido.
Codelab: Compila un servidor de notificaciones push
Este instructivo interactivo paso a paso muestra cómo compilar un servidor que administra suscripciones a notificaciones push y envía solicitudes de protocolo push web a un servicio push.
Codelab: Compila un cliente de notificaciones push
Un instructivo interactivo paso a paso en el que se muestra cómo compilar un cliente que suscribe al usuario a las notificaciones push, muestra mensajes push como notificaciones y anula la suscripción del usuario a estas notificaciones.
Descripción general de las notificaciones push
Una descripción general de qué son las notificaciones push, por qué podrías usarlas y cómo funcionan.
Mide el uso sin conexión
Cómo hacer un seguimiento del uso sin conexión de su sitio para argumentar el motivo por el que su sitio necesita una mejor experiencia sin conexión
Ejemplos de animaciones de CSS de alto rendimiento
Demostrar cómo las técnicas de alto rendimiento pueden crear animaciones complejas y hermosas
Mejoras lógicas en el diseño con abreviaturas relativas de flujo
Nuevas abreviaturas de propiedades lógicas y nuevas propiedades de inserción para Chromium.
¿Por qué algunas animaciones son lentas?
Una buena animación es fundamental para ofrecer una gran experiencia web. En esta publicación, se explica por qué algunos tipos de animación tienen un mejor rendimiento que otros.
Cómo crear animaciones CSS de alto rendimiento
Para mejorar el rendimiento de tus animaciones de CSS, usa las propiedades de CSS de transformación y opacidad tanto como sea posible, y evita cualquier elemento que active el diseño o la pintura.
Cómo manejar solicitudes de rango en un service worker
Asegúrate de que tu service worker sepa qué hacer cuando se solicita una respuesta parcial.
Cómo controlar el desplazamiento lateral, la inclinación y el zoom de la cámara
Finalmente, las funciones de desplazamiento lateral, inclinación y zoom de las cámaras se pueden controlar en la Web.
¿Qué son las pruebas de origen de terceros?
Las pruebas de origen son una forma de evaluar una función nueva o experimental de una plataforma web. Una prueba de origen de terceros permite que los proveedores de contenido incorporado prueben una función nueva en varios sitios. Las pruebas de
Fugas de memoria de la ventana separada
Las ventanas separadas son un tipo común de fuga de memoria que es particularmente difícil de encontrar y solucionar.
Crea formas de imagen interesantes con la propiedad de ruta de recorte de CSS
El uso de recorte en CSS puede ayudarnos a alejarnos de todo en nuestros diseños como si fuera una caja. Si usas varias formas básicas, o un archivo SVG, puedes crear una ruta de recorte. Luego, corta las partes de un elemento que no quieras mostrar.
Viñetas personalizadas con marcador de CSS
Usa CSS para personalizar el color, el tamaño o el tipo de números o viñetas en los elementos `` o ``.
Cómo manejar información de pago opcional con un service worker
Una vez que se registra una app de pagos basada en la Web, esta está lista para aceptar solicitudes de pago de los comercios. En este artículo, se explica cómo organizar una transacción de pago de un service worker durante el tiempo de ejecución.
Organización de transacciones de pago con un service worker
Una vez que se registra una app de pagos basada en la Web, esta está lista para aceptar solicitudes de pago de los comercios. En este artículo, se explica cómo organizar una transacción de pago de un service worker durante el tiempo de ejecución.
ARIA: ¿veneno o antídoto?
Cómo mentir a los lectores de pantalla cura la accesibilidad cuando no le trae sal.
Cómo depurar fugas de memoria en WebAssembly con Emscripten
Aprende a usar WebAssembly para llevar bibliotecas escritas en otros lenguajes a la Web de manera idiomática y segura.
content-visibility: la nueva propiedad de CSS que mejora el rendimiento de su renderización
La propiedad content-visibility de CSS permite obtener beneficios de rendimiento en la renderización de contenido web, ya que omite la renderización del contenido fuera de la pantalla. En este artículo, se muestra cómo usar esta nueva propiedad CSS para obtener tiempos de carga iniciales más rápidos con la palabra clave auto. También aprenderás sobre la especificación de contención de CSS y otros valores para la visibilidad del contenido que te brindan más control sobre cómo se renderiza tu contenido en el navegador.
Web en Android
Descubre cómo se pueden usar diferentes componentes a fin de renderizar contenido web dentro de las apps para Android.
Cómo compilar una AWP en Google (parte 1)
Qué aprendió el equipo de boletín sobre los service workers durante el desarrollo de una AWP.
Supervisión del rendimiento con Lighthouse CI
Aprende a configurar Lighthouse CI e integrarlo en los flujos de trabajo de los desarrolladores.
Diseño de la experiencia del usuario de las llaves de acceso en Cuentas de Google
Brindamos mayor seguridad y una mejor experiencia del usuario a las Cuentas de Google.
@property: Otorga superpoderes a las variables de CSS
Aprende a implementar propiedades personalizadas de CSS con escritura semántica, un valor de resguardo y mucho más, directamente en tu archivo CSS.
Cómo registrar una app de pagos basada en la Web
Aprende a registrar una app de pagos basada en la Web en el navegador de un cliente. También aprenderás a depurarlos.
Proporciona información de contacto y de envío desde una app de pagos de Android
Aprende a modificar tu app de pagos de Android para proporcionar la dirección de envío seleccionada al usuario, así como la información de contacto cuando el comercio los solicita, a través de la API de Payment Request.
Descripción general de las apps de pago basadas en la Web
Obtén información sobre cómo adaptar tu app de pagos basada en la Web para que funcione con pagos web y brinde una mejor experiencia del usuario a los clientes.
Relación entre la velocidad del sitio y las métricas empresariales
Aprovecha las pruebas A/B para evaluar el impacto de la velocidad del sitio en las métricas de tu empresa.
Cómo controlar las solicitudes de navegación
Las solicitudes de navegación son solicitudes de HTML que se realizan cada vez que ingresas una nueva URL en la barra de navegación o sigues un vínculo en una página. Aquí es donde los service workers tienen el mayor impacto en el rendimiento: cuando se usa un service worker para responder sin esperar a la red, puedes asegurarte de que las navegaciones sean rápidas y resilientes de manera confiable.
Uso del informe de UX de Chrome para analizar el rendimiento en el campo
El Informe de UX de Chrome (conocido informalmente como CrUX) es un conjunto de datos públicos de datos sobre la experiencia del usuario real en millones de sitios web. A diferencia de los datos de lab, los de CrUX provienen de usuarios habilitados en el campo.
Renderización perfecta de píxeles con devicePixelContentBox
A partir de Chrome 84, ResizeObserver admite una nueva medición de caja llamada device-pixel-content-box, que mide la dimensión del elemento en píxeles físicos. Esto es fundamental para renderizar gráficos de píxeles perfectos, especialmente en el contexto de pantallas de alta densidad.
Resumen de web.dev EN VIVO
Un resumen de las noticias y actualizaciones más importantes que se anunciaron durante nuestro evento comunitario en línea de 3 días y un recordatorio sobre los próximos eventos regionales.
Usar funciones de navegador multiplataforma para crear un formulario de acceso
Usa las funciones multiplataforma del navegador para crear un formulario de acceso sencillo que sea seguro, accesible y fácil de usar.
Herramientas para desarrolladores web que permiten depurar problemas de JavaScript en la Búsqueda de Google
Cómo depurar problemas de SEO en páginas individuales o en todo un sitio
Crea experiencias de búsqueda resilientes con Workbox
Cómo implementar una experiencia de búsqueda resiliente con Workbox mediante la sincronización en segundo plano y la API de Push.
Agregar medios a una página web
Incorpora un archivo multimedia en una página web mediante las etiquetas y
Mide el rendimiento con el modelo RAIL
El modelo RAIL permite a los diseñadores y desarrolladores orientar de manera confiable el trabajo de optimización del rendimiento que tiene el mayor impacto en la experiencia del usuario. Aprende qué objetivos y pautas establece el modelo RAIL y qué herramientas puedes usar para lograrlos.
Acelera la navegación en React con Quicklink
Quicklink es una biblioteca para lograr cargas de páginas posteriores más rápidas cargando previamente los vínculos en viewports durante el tiempo de inactividad.
Reordenamiento de contenido
Cuando creas un diseño con CSS, debes asegurarte de no crear una experiencia desconectada para los usuarios que navegan con el teclado.
Mejoras de la API de Web Animations en Chromium 84
La transformación de tus animaciones web será mucho más fácil.
Ciclo de una transacción de pago
Conoce la manera en que los comercios integran las apps de pago, cómo funcionan las transacciones de pago con la API de Payment Request y qué se puede hacer en los pagos web.
Potencia las apps de pago con pagos web
El objetivo de Web Payments es proporcionar una experiencia de pago fluida en la Web. Descubre cómo funciona y cuáles son sus beneficios, y prepárate para integrar tu app de pagos con los pagos web.
Más opciones de fuentes variables para la fuente system-ui de macOS en Chromium 83
Chromium 80 tuvo una regresión de peso de fuente de system-ui en macOS. En Chromium 83, vale la pena esperar por el motivo por el que se rompió y los nuevos superpoderes posteriores a la resolución.
Cómo generar perfiles de apps de audio web en Chrome
Aprende a generar perfiles del rendimiento de las apps de audio web en Chrome usando `about://tracing` y la extensión **WebAudio** en las Herramientas para desarrolladores de Chrome.
Rendimiento mejorado de carga de páginas de Next.js y Gatsby con fragmentación detallada
Descubre cómo Next.js y Gatsby mejoraron el resultado de su compilación para minimizar el código duplicado y mejorar el rendimiento de carga de la página
Cómo hacer que tu sitio web esté "aislado de origen cruzado" con COOP y COEP
Algunas APIs web aumentan el riesgo de ataques de canal lateral, como Spectre. Para mitigar ese riesgo, los navegadores ofrecen un entorno aislado basado en la opción de aceptación llamado aislado de origen cruzado. Usa COOP y COEP para configurar este entorno y habilitar funciones potentes como `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory()` o un temporizador de alta resolución con mejor precisión.
Supervisa el uso total de memoria de tu página web con MeasureUserAgentSpecificMemory()
Aprende a medir el uso de memoria de tu página web en producción para detectar regresiones.
Blog de ingeniería de web.dev n.o 1: Cómo creamos el sitio y usamos componentes web
En esta primera publicación del equipo de ingeniería de web.dev, descubrirás cómo compilamos el sitio, incluido nuestro uso de Eleventy y Web Components.
Asegúrese de que su sitio web esté disponible y sea utilizable para todos durante el brote de COVID-19
Cómo garantizar que la funcionalidad principal de su sitio web esté siempre disponible y sea accesible, segura, utilizable, detectable y rápida.
Diseño adaptable accesible
Sabemos que es una buena idea diseñar de forma responsiva para proporcionar la mejor experiencia multidispositivo, pero el diseño adaptable también mejora la accesibilidad.
Evita los cambios de diseño y los destellos de texto invisible (FOIT) precargando fuentes opcionales.
Al optimizar los ciclos de renderización, Chrome 83 elimina los cambios de diseño cuando se precargan fuentes opcionales. Combinación con font-display: opcional es la manera más eficaz de garantizar la representación sin bloqueos de las fuentes personalizadas.
Cómo distribuir intercambios HTTP firmados (SXG) con nginx
Cómo obtener y entregar archivos SXG con nginx y los desafíos de la carga previa de subrecursos
Cómo configurar intercambios HTTP firmados (SXG) con nginx
Cómo generar un certificado TLS con extensiones SXG, instalar herramientas para generar archivos SXG y configurar nginx para entregar archivos SXG
Optimiza las imágenes de fondo de CSS con consultas de medios
Usa consultas de medios para enviar imágenes que tengan el tamaño necesario, una técnica conocida comúnmente como imágenes responsivas.
Corregir de manera multidisciplinaria la velocidad del sitio web
Cómo pueden ayudar otros departamentos a lograr que el proyecto de optimización de la velocidad de tu sitio web sea más exitoso
Ajuste de desplazamiento después de cambiar el diseño
A partir de Chrome 81, los desplazadores permanecen ajustados cuando cambia el diseño de la página. En otras palabras, ya no necesitas agregar objetos de escucha de eventos para forzar el ajuste.
Cómo configurar intercambios firmados con Web Packager
Obtén información para publicar intercambios firmados (SXG) con Web Packager.
Posicionamiento de objetos virtuales en vistas del mundo real
La API de WebXR Hit Test es una mejora de la realidad aumentada de la Web que te permite colocar objetos virtuales en una vista del mundo real.
La realidad virtual llega a la Web (parte II)
La realidad virtual llegó a la Web en Chrome 79. Este lanzamiento está basado en la API de WebXR Device y es la base de la realidad virtual y aumentada. Este artículo es el segundo de una serie y se enfoca en el bucle de fotogramas, la parte de una sesión XR en la que las imágenes se muestran a un usuario. Otros navegadores serán compatibles con la API de WebXR Device, como Firefox Reality, el navegador Oculus, Edge y el navegador Helio de Magic Leap, entre otros.
Realidad aumentada: Quizás ya la conozcas
Si ya usaste la API de WebXR Device, te alegrará saber que hay muy poco que aprender. El ingreso a una sesión de WebXR es prácticamente lo mismo. Ejecutar un bucle de marcos es casi el mismo. Las diferencias se encuentran en las configuraciones que permiten que el contenido se muestre correctamente en la realidad aumentada.
Avance del ecosistema del framework web
Obtén información sobre cómo Chrome está invirtiendo esfuerzos en una serie de herramientas de código abierto para avanzar en el ecosistema de JavaScript.
Integra las AWP en las IUs de uso compartido integradas con Workbox
Cómo registrar rutas en Workbox para que tu app web progresiva aparezca en las IU de uso compartido a nivel del sistema, junto con apps específicas de la plataforma.
Se mejoró el descarte de páginas en XMLHttpRequest() síncrono
Es habitual que una página o app tenga estadísticas u otros datos que no se hayan enviado cuando el usuario la cierra. Los sitios usan una llamada síncrona a XMLHttpRequest() para mantener la página o app abierta hasta que sus datos se pasan al servidor. Esto afecta la experiencia del usuario e ignora las mejores formas de ahorrar datos. En Chrome 80, se implementa un cambio de especificaciones reciente para solucionar este problema.
Cómo ejecutar subprocesos en la Web con trabajadores del módulo
Los trabajadores de módulos facilitan el desbloqueo del subproceso principal moviendo código costoso a un subproceso en segundo plano, a la vez que mantienen los beneficios ergonómicos y de rendimiento de los módulos de JavaScript estándar.
Evoluciones de las herramientas de velocidad: aspectos destacados de Chrome Developer Summit 2019
Lee sobre los desarrollos más recientes en herramientas de velocidad, incluidas las nuevas métricas de rendimiento, las actualizaciones de PageSpeed Insights y el Informe sobre la experiencia del usuario en Chrome (CrUX), y las estadísticas del análisis de Almanac web del ecosistema web.
Carga adaptable: Mejora el rendimiento de la Web en dispositivos lentos
Obtén información sobre el patrón de carga adaptable, cómo implementarlo y cómo Facebook, Tinder, eBay y otras empresas usan la carga adaptable en producción.
Comentarios de la encuesta de optimización de imágenes del verano de 2019
Comentarios de los encuestados sobre varias técnicas de optimización de imágenes.
Compila un servidor de notificaciones push
En este codelab, aprenderás a compilar un servidor de notificaciones push.
Carga previa de la ruta en Next.js
Cómo Next.js acelera las navegaciones con la carga previa de rutas y cómo personalizarla En esta publicación, aprenderás cómo funciona el enrutamiento en Next.js, cómo se optimiza para la velocidad y cómo personalizarlo para que se adapte mejor a tus
División de código con importaciones dinámicas en Next.js
Cómo acelerar tu app de Next.js con la división de código y estrategias de carga inteligente En esta publicación, se explican los diferentes tipos de división de código y cómo usar las importaciones dinámicas para acelerar tus apps de Next.js. De
Realiza la integración con la IU de uso compartido del SO mediante la API de Web Share
Con la API de Web Share, las apps web pueden usar las mismas capacidades de uso compartido proporcionadas por el sistema que las apps específicas de la plataforma. La API de Web Share permite que las apps web compartan vínculos, texto y archivos con otras apps instaladas en el dispositivo de la misma manera que las apps específicas de la plataforma.
Rendimiento como predeterminado con Next.js
Next.js se encarga de muchas optimizaciones en tu app de React para que no tengas que hacerlo Next.js es un framework de React con una serie de optimizaciones de rendimiento integradas. La idea principal detrás del framework es garantizar que las
Cómo AMP puede garantizar la rapidez de tu app de Next.js
Obtén más información sobre las ventajas y desventajas de admitir AMP en tu app de Next.js AMP es un framework de componentes web que garantiza que las páginas se carguen rápidamente. Next.js tiene compatibilidad integrada con AMP. En esta guía,
La realidad virtual llega a la Web
La realidad virtual llegó a la Web en Chrome 79. Este lanzamiento está basado en la API de WebXR Devicer y es la base de la realidad virtual y aumentada. Este artículo es el primero de una serie, en el que se exploran conceptos básicos y se describe cómo ingresar a una sesión de XR. Otros navegadores serán compatibles con la API de WebXR Device, como Firefox Reality, el navegador Oculus, Edge y el navegador Helio de Magic Leap, entre otros.
Conceptos básicos sobre las cookies
Obtén más información sobre cómo funcionan las cookies y qué son las cookies propias y de terceros.
Los anuncios rápidos son importantes
Comprende el valor de los anuncios rápidos y cómo pensar en la velocidad del anuncio.
Usa notificaciones push para atraer a los usuarios y volver a atraerlos
Usa notificaciones push para atraer a los usuarios con actualizaciones específicas y oportunas.
Comienza a usar la API de Notifications
En este codelab, aprenderás a solicitar permisos del usuario y enviar notificaciones.
Cómo usar un Service Worker para administrar notificaciones
En este codelab, aprenderás a administrar notificaciones con un service worker.
Cómo corregir la inestabilidad del diseño
Explica cómo usar WebPageTest para identificar y solucionar problemas de inestabilidad de diseño.
Técnicas para que una app web se cargue rápido, incluso en teléfonos de gama media
Los teléfonos de gama media están creciendo y son populares, sobre todo en los mercados emergentes, donde 2G es la norma. A continuación, te mostramos lo que aprendimos con la creación de PROXX, una clonación de Buscaminas para dispositivos móviles, que se carga rápidamente en teléfonos de gama media con 2G.
Propiedades personalizadas más inteligentes con la nueva API de Houdini
Si bien son útiles, resulta difícil trabajar con las variables de CSS porque pueden tomar cualquier valor y anularse, y no es posible usar transiciones con ellas. El nivel de API 1 de las propiedades y los valores de CSS resuelve estos problemas.
Dos formas de precarga: etiquetas <link> y encabezados HTTP
Obtén información sobre cómo acelerar las navegaciones futuras mediante la carga previa de recursos.
Precarga recursos para acelerar la navegación en el futuro
Obtén información sobre la sugerencia de recursos de rel=prefetch y cómo usarla.
Más allá de las imágenes con videos básicos para la Web
Las investigaciones demuestran que los videos web generan más participación y ventas. Incluso si aún no has agregado un video a tus sitios, solo es cuestión de tiempo hasta que lo hagas.
Cómo agregar un ícono táctil de Apple a tu app web progresiva
Es una demostración interactiva de cómo especificar qué ícono debe aparecer en las pantallas principales de iOS.
Ready Player Web
Actualmente, la plataforma web es muy desarrollada para el desarrollo de juegos. La clave para crear un juego web moderno es adoptar las prácticas recomendadas de diseño y monetización de juegos. En esta publicación, encontrarás orientación sobre este objetivo.
Reducir el tamaño de la fuente web
En esta entrada, se explica cómo reducir el tamaño de WebFonts que usas en tu sitio, de modo que una buena tipografía no implique un sitio lento.
Optimiza la carga y el procesamiento de WebFont
En esta publicación, se explica cómo cargar WebFonts para evitar cambios de diseño y páginas en blanco cuando WebFonts no esté disponible cuando se cargue la página.
Crea una app web progresiva con la CLI de Angular
Aprende a crear aplicaciones progresivas de Angular instalables.
Carga eficientemente JavaScript de terceros
Aprende a evitar las dificultades comunes de usar secuencias de comandos de terceros para mejorar los tiempos de carga y la experiencia del usuario.
Usa CDN de imágenes para optimizar las imágenes
Considera usar una CDN de imágenes para optimizar las imágenes del sitio y reducir el costo de datos para los usuarios.
Identifica JavaScript de terceros lento
Obtén información sobre cómo usar Lighthouse y las Herramientas para desarrolladores de Chrome para identificar recursos de terceros lentos.
Rendimiento de JavaScript de terceros
En esta publicación, se describen los tipos comunes de JavaScript de terceros y los problemas de rendimiento que pueden causar. También se proporciona orientación general sobre cómo optimizar las secuencias de comandos de terceros.
Controles de formularios con mayor capacidad
Las nuevas funciones de la plataforma web facilitan la compilación de elementos personalizados que funcionan como los controles de formularios integrados.
Optimiza JavaScript de terceros
Obtén información sobre técnicas para optimizar recursos lentos de terceros con la ayuda de Lighthouse.
Establece conexiones de red con anticipación para mejorar la velocidad percibida de la página.
Obtén información sobre las sugerencias de recursos de rel=preconnect y rel=dns-prefetch y cómo usarlas.
Virtualiza listas grandes con el CDK de Angular
Aprende a lograr que las listas grandes sean más responsivas implementando el desplazamiento virtual con el Kit de desarrollo de componentes de Angular.
Estrategias de precarga de rutas en Angular
Aprende a usar las estrategias de precarga de Angular para apps más rápidas.
Optimiza la detección de cambios de Angular
Aprende a optimizar la detección de cambios de tu app de Angular para que sea más responsiva.
Navegación web más rápida con carga previa predictiva
La división de código te permite acelerar tus aplicaciones, pero puede ralentizar la navegación posterior. La carga previa predictiva es una forma eficiente de usar el análisis de datos para precargar de forma inteligente lo que el usuario podría usar a continuación, lo que optimiza la utilización de la red.
Adapta el video a la publicación de imágenes en función de la calidad de la red
Aprende a usar la API de Network Information para adaptar tu contenido en función de la calidad de la red.
Audita la accesibilidad de tu app de Angular con un codificador de código
Aprende a hacer que tu aplicación de Angular sea accesible con Codelyzer.
Presupuestos de rendimiento con la CLI de Angular
Aprende a usar presupuestos de rendimiento directamente en la CLI de Angular.
Cómo almacenar previamente en caché con el service worker de Angular
Aprende a usar el service worker de Angular para almacenar en caché por adelantado los recursos estáticos en tu app.
División de código a nivel de la ruta en Angular
Obtén información para reducir el tamaño del paquete de aplicación inicial mediante la división de código a nivel de la ruta.
Primeros pasos: Optimiza una aplicación de Angular
Aprende a hacer que tu aplicación de Angular sea más rápida, confiable, detectable, instalable y accesible.
Sugerencias principales para el rendimiento de la Web
Usa srcset para elegir automáticamente el tamaño de imagen correcto.
Componentes web: el ingrediente secreto que ayuda a potenciar la Web
En esta publicación, se resume una charla sobre el estado de los componentes web en 2019, a cargo de Kevin Schaaf del proyecto Polymer y Caridy Patiño de Salesforce.
Usa Lighthouse para los presupuestos de rendimiento
Lighthouse ahora admite presupuestos de rendimiento. Esta función, LightWallet, se puede configurar en menos de cinco minutos y proporciona feedvack para el tamaño y la cantidad de los recursos de la página.
El valor de la velocidad
Demuestre los ingresos generados por las mejoras en el sitio y excluya factores externos, como las campañas de marketing.
Actualizaciones de las API de pagos web
Desde el lanzamiento de la API Payment Request en Chrome 53 y la Payment Handler API en Chrome 68, se realizaron bastantes cambios en sus respectivas especificaciones. En esta publicación, se resumen esas actualizaciones y se seguirán acumulando esos cambios de API.
Instalación de la barra de direcciones para apps web progresivas en el escritorio
Las Progressive Web Apps son fáciles de instalar gracias a un nuevo botón en la barra de direcciones de Chrome (cuadro multifunción).
¿Cómo puede el rendimiento mejorar las conversiones?
Conocer el impacto que tiene el rendimiento del sitio web en diferentes partes del embudo de comercio electrónico
Mentalidad de service worker
Trabajar con service workers es algo nuevo y desconocido para muchos desarrolladores web. En esta publicación, se brindan algunos consejos para tener una idea clara.
¿Cómo puedo notificar a los usuarios que mi AWP se puede instalar?
Cómo promover la instalación de apps web progresivas y prácticas recomendadas
Políticas de imágenes para tiempos de carga rápidos y mucho más
Las imágenes ocupan una gran cantidad de espacio visual y constituyen la mayoría de los bytes descargados en un sitio web. Usa las nuevas políticas de funciones para identificar imágenes de gran tamaño.
Extraer e intercalar CSS crítico con Critical
Aprende a usar la función Critical para extraer e intercalar las claves CSS críticas, y mejorar los tiempos de renderización.
¿Las tareas largas de JavaScript retrasan su tiempo de carga?
Descubre cómo diagnosticar una interacción de usuario costosa y que impide el trabajo
Extraer CSS crítico
Aprende a mejorar los tiempos de renderización con las técnicas fundamentales de CSS y a elegir la mejor herramienta para tu proyecto.
Velocidad a gran escala: ¿cuáles son las novedades sobre el rendimiento web?
Para Google I/O 2019, presentamos tres iniciativas nuevas de rendimiento web que esperamos que generen mejores experiencias del usuario para todos.
Presentamos PROXX
PROXX como un juego tipo buscaminas compilado como una AWP. Funciona en una gran variedad de dispositivos y mejora progresivamente la apariencia visual mientras más capaz sea el dispositivo.
Búsqueda visual con el kit de herramientas de percepción web
¿No sería genial si los usuarios pudieran realizar búsquedas en tu sitio con la cámara?
Entrega adaptable según la calidad de la red
Usa la API de Network Information para adaptar los recursos que se muestran a los usuarios en función de la calidad de su conexión.
Reduce y comprime las cargas útiles de red con brotli
En este codelab, aprenderás cómo la compresión Brotli puede reducir aún más los índices de compresión y el tamaño general de tu app.
web.dev en I/O 2019
Para Google I/O 2019, los miembros del equipo de web.dev enviaron varias actualizaciones, como un diseño renovado, más documentos de Lighthouse y un blog nuevo.
¿Cómo se mide la velocidad?
El rendimiento en el mundo real es muy variable debido a diferencias en los dispositivos de los usuarios, las conexiones de red y otros factores. En esta publicación, exploraremos las herramientas que pueden ayudarte a recopilar datos de laboratorio o campo para evaluar el rendimiento de las páginas.
¿Cómo mantener la rapidez?
Las marcas que optimizan la velocidad suelen notar que sufren una regresión rápida. En esta publicación, exploramos cómo garantizar que tu experiencia sea rápida.
¿Qué es la velocidad?
La velocidad importa, pero ¿a qué nos referimos exactamente con ella? ¿Qué significa tener un sitio rápido?
Procesamiento previo de rutas con reacción-snap
react-snap es una biblioteca de terceros que renderiza previamente las páginas de tu sitio en archivos HTML estáticos. Esto puede mejorar los tiempos del primer procesamiento de imagen en tu aplicación.
Primeros pasos: Optimiza tu app de React
React es una biblioteca de código abierto que facilita la compilación de IUs. En esta ruta de aprendizaje, se abordarán las diferentes APIs y herramientas del ecosistema que debes considerar para mejorar el rendimiento y la usabilidad de tu aplicación.
División de código con React.lazy y Suspense
El método React.lazy facilita la división del código de una aplicación de React a nivel de componente mediante importaciones dinámicas. Úsala junto con Suspense para mostrar los estados de carga adecuados a los usuarios.
Almacenamiento previo en caché en la creación de una app de React con Workbox
Workbox está integrada en Create React App con una configuración predeterminada que almacena previamente en caché todos los recursos estáticos de tu aplicación con cada compilación.
Auditoría de accesibilidad con react-axe y eslint-plugin-jsx-a11y
react-axe es una biblioteca que audita una aplicación de React y registra los problemas de accesibilidad en la consola de Herramientas para desarrolladores de Chrome. eslint-plugin-jsx-a11y es un complemento de ESLint que identifica y aplica varias reglas de accesibilidad directamente en tu JSX. Su uso en combinación puede proporcionar un enfoque de auditoría integral para encontrar y solucionar cualquier problema de accesibilidad en tu aplicación.
Codelab: Carga previamente recursos críticos para mejorar la velocidad de carga
En este codelab, aprenderás a mejorar el rendimiento de una página mediante la precarga y la carga previa de recursos.
Aplaza el CSS que no sea crítico
Aprende a diferir el código CSS no crítico con el objetivo de optimizar la ruta de renderización crítica y mejorar el Primer procesamiento de imagen con contenido (FCP).
La confianza es buena y la observación es mejor: Intersection Observer v2
Intersection Observer v2 agrega la capacidad no solo de observar intersecciones en sí, sino también de detectar si el elemento de intersección era visible en el momento de la intersección.
Hojas de estilo para construir
Las hojas de estilo construibles proporcionan una forma perfecta de crear y distribuir estilos a documentos o shadow roots sin preocuparse por el FOUC.
Renderización en la Web
Recomendaciones para implementar lógica y renderización en apps.
Usa bundlesize con Travis CI
Define presupuestos de rendimiento con una configuración mínima y aplícalos como parte de tu flujo de trabajo de desarrollo mediante el tamaño del paquete con Travis CI.
Incorporar presupuestos de rendimiento en el proceso de compilación
La mejor manera de supervisar tu presupuesto de rendimiento es automatizarlo. Descubre cómo elegir la herramienta que mejor se adapte a tus necesidades y configuración actual.
Configura presupuestos de rendimiento con webpack
Aprende a establecer presupuestos de rendimiento y controlar el tamaño de tu paquete con Webpack.
Cómo usar el bot de Lighthouse para establecer un presupuesto de rendimiento
Ya hiciste un gran esfuerzo para ser rápido, ahora asegúrate de hacerlo mediante la automatización de las pruebas de rendimiento en Travis CI con Lighthouse Bot.
Emscripten y npm
¿Cómo integras WebAssembly en esta configuración? En este artículo, trabajaremos con C/C++ y Emscripten como ejemplo.
¿Tu app está instalada? getInstalledRelatedApps() te lo dirá.
La API de getInstalledRelatedApps() es una API de plataforma web que te permite comprobar si tu app de iOS/Android/computadora de escritorio o AWP está instalada en el dispositivo del usuario.
Adapta la app a usuarios con Client Hints
Las sugerencias de clientes son un conjunto de encabezados de solicitud HTTP que podemos usar para cambiar la forma en que entregamos los recursos de la página en función de las características del dispositivo y la conexión de red de un usuario. En este artículo, obtendrá información acerca de las sugerencias de clientes, cómo funcionan y algunas ideas sobre cómo puede usarlas a fin de que su sitio sea más rápido para los usuarios.
¿Qué es la accesibilidad?
Un sitio accesible es aquel a cuyo contenido se puede acceder independientemente de las discapacidades de cualquier usuario, y cuya funcionalidad también puede ser operada por la mayor variedad de usuarios posible.
Aspectos básicos del acceso al teclado
Muchos usuarios diferentes dependen del teclado para navegar por las aplicaciones, desde usuarios con discapacidades motoras temporales y permanentes hasta usuarios que utilizan combinaciones de teclas para ser más eficientes y productivos. Tener una buena estrategia de navegación con el teclado para tu aplicación crea una mejor experiencia para todos.
Semántica y lectores de pantalla
¿Alguna vez te preguntaste cómo sabe la tecnología de asistencia, como un lector de pantalla, qué anunciar a los usuarios? La respuesta es que estas tecnologías dependen de que los desarrolladores marquen sus páginas con código HTML semántico. Pero ¿qué es la semántica y cómo la usan los lectores de pantalla?
Usa código HTML semántico para lograr una implementación óptima del teclado.
Si usas los elementos HTML semánticos correctos, podrás satisfacer la mayoría de las necesidades de acceso al teclado o todas ellas. Esto significa que tendrás menos tiempo de manipular tabindex y tendrás más usuarios satisfechos.
Enfoque de estilo
El indicador de enfoque (a menudo representado por un "anillo de enfoque") identifica el elemento enfocado actualmente. Para los usuarios que no pueden utilizar un mouse, este indicador es extremadamente importante, ya que actúa como reemplazo del puntero del mouse.
Reduce las cargas útiles de JavaScript con la división de código
En este codelab, aprenderás a mejorar el rendimiento de una aplicación simple mediante la división de código.
Cómo especificar varios anchos de ranura
En este codelab, aprenderás a usar el atributo size para ajustar el tamaño de las imágenes correctamente según el viewport del usuario.
¿Qué son los ataques de seguridad?
Una aplicación insegura podría exponer a los usuarios y sistemas a varios tipos de daños. Cuando una parte maliciosa usa vulnerabilidades o la falta de funciones de seguridad en su beneficio para causar daños, se denomina ataque. En esta guía, analizaremos los distintos tipos de ataques para que sepas a qué debes prestar atención cuando proteges tu aplicación.
Cómo crear imágenes WebP con la línea de comandos
En este codelab, aprenderás a entregar imágenes optimizadas con WebP.
Introducción a los presupuestos de rendimiento
Rara vez tener un buen rendimiento es un efecto secundario. Obtén información sobre los presupuestos de rendimiento y cómo te ayudan a alcanzar el éxito.
Quita el código que no se use
Analiza el paquete de JavaScript para detectar y quitar el código que no se usa.
Zona de pruebas del navegador
Para defenderse de los ataques, un desarrollador debe mitigar las vulnerabilidades y agregar funciones de seguridad a una aplicación. Afortunadamente, en la Web, el navegador proporciona muchas funciones de seguridad, incluida la idea de una "zona de pruebas".
Publica imágenes responsivas
Publicar imágenes del tamaño de una computadora de escritorio en dispositivos móviles puede consumir 2 o 4 veces más datos de lo necesario. En lugar de adoptar un enfoque de “talla única para todos” respecto de las imágenes, publica imágenes de distintos tamaños en distintos dispositivos.
Evita solicitudes de red innecesarias con la caché HTTP
La caché HTTP del navegador es tu primera línea de defensa contra solicitudes de red innecesarias.
Política del mismo origen y solicitudes de recuperación
En este codelab, aprenderás cómo funciona la política del mismo origen cuando se recuperan recursos.
Cómo usar imágenes WebP
Las imágenes WebP son más pequeñas que sus equivalentes JPEG y PNG, generalmente en la magnitud de una reducción del tamaño de archivo de entre un 25% y un 35%. Esto reduce el tamaño de las páginas y mejora el rendimiento.
Cómo trabajar con service workers
En este codelab, aprenderás a hacer que una aplicación sea confiable registrando un service worker.
Corrige errores 404 engañosos
En este codelab, aprenderás a rastrear un error 404 engañoso que podría impedir que tu página se indexe correctamente.
Configura el comportamiento del almacenamiento en caché de HTTP
En este codelab, aprenderás a controlar el comportamiento del almacenamiento en caché de recursos mediante encabezados HTTP.
Cómo usar descriptores de densidad
En este codelab, aprenderás a usar descriptores de densidad y srcset para cargar imágenes con la densidad de píxeles correcta para el dispositivo del usuario.
Reemplazar los GIF animados por videos para que las páginas se carguen más rápido
¿Alguna vez viste un GIF animado en un servicio como Imgur o Gfycat, lo revisaste en tus herramientas para desarrolladores y descubriste que ese GIF era realmente un video? Hay una buena razón para eso. Los GIF animados pueden ser realmente enormes. Si conviertes GIF de gran tamaño en videos, puedes ahorrar mucho en ancho de banda de los usuarios.
cómo funciona la búsqueda,
Los motores de búsqueda son la versión digital del bibliotecario. Usan un índice integral para ayudar a encontrar la información correcta para una consulta. Comprender los conceptos básicos de la búsqueda te prepara para que los usuarios puedan descubrir tu contenido.
Política del mismo origen
Un navegador puede cargar y mostrar recursos de varios sitios. Si no hay restricciones en las interacciones entre esos recursos, y si un atacante vulnera una secuencia de comandos, esta podría exponer todo el contenido del navegador de un usuario.
Reduce las cargas útiles de JavaScript con la división de código
El envío de cargas útiles de JavaScript de gran tamaño afecta significativamente la velocidad de tu sitio. En lugar de enviar todo el JavaScript al usuario en cuanto se carga la primera página de tu aplicación, divide el paquete en varias partes y envía solo lo necesario desde el principio.
Identifica los recursos cargados desde la red
Elaborar las estrategias adecuadas de almacenamiento en caché para tu aplicación web requiere controlar lo que cargaste exactamente. Cuando se compila una aplicación web confiable, la red puede estar sujeta a todo tipo de fuerzas oscuras. Debes comprender las vulnerabilidades de la red para poder lidiar con ellas en tu app.
Cómo usar Imagemin con webpack
En este codelab, aprenderás a usar imagemin con webpack para optimizar imágenes JPEG y PNG a fin de que se descarguen más rápido.
¡La seguridad no debería ser tan aterradora!
Cuando se nos viene a la mente la palabra "seguridad", generalmente aparece en el contexto de malas noticias. Sin embargo, la seguridad es algo que se debe tomar como una parte positiva y necesaria del desarrollo web, al igual que la "experiencia del usuario" o la "accesibilidad".
Explore el panel Network de Herramientas para desarrolladores
En este codelab, aprenderás a generar errores en el tráfico de red con las Herramientas para desarrolladores de Chrome.
Cómo usar Imagemin para comprimir imágenes
Las imágenes sin comprimir sobrecargan tus páginas con bytes innecesarios. Ejecuta Lighthouse a fin de buscar oportunidades para mejorar la carga de la página comprimiendo imágenes.
Publica imágenes con las dimensiones correctas
En este codelab, aprenderás a entregar imágenes con las dimensiones correctas para mejorar el rendimiento de la red.
Reemplazar GIF por video
En este codelab, aprenderás a reemplazar un GIF animado por un video para mejorar el rendimiento.
Cómo medir la optimización para motores de búsqueda con Lighthouse
La auditoría de Lighthouse SEO analiza tu página, prueba elementos que son importantes para los motores de búsqueda y te da una puntuación para que puedas ver áreas específicas de mejora. La SEO es importante porque es la forma en que haces que usuarios más relevantes vean tu contenido.
Tu primer presupuesto de rendimiento
Asegúrate de que tu sitio se cargue rápido con una guía paso a paso que te permitirá definir umbrales para las métricas de rendimiento que sean significativas para tu sitio.
Dirección artística
En este codelab, aprenderás a cargar imágenes completamente diferentes según el tamaño de la pantalla del dispositivo.
Aplica la carga instantánea con el patrón PRPL
PRPL es un acrónimo que describe un patrón utilizado para hacer que las páginas web se carguen y se vuelvan interactivas más rápido. En esta guía, aprenderás cómo estas técnicas encajan, pero también se pueden usar de forma independiente para lograr resultados de rendimiento.
Quita el código que no se use
En este codelab, aprenderás a mejorar el rendimiento de una aplicación quitando las dependencias innecesarias y no utilizadas.
Política del mismo origen y iframe
En este codelab, aprenderás cómo funciona la política del mismo origen cuando se accede a datos dentro de un iframe.
Precarga los recursos críticos para mejorar la velocidad de carga
En cuanto abres una página web, el navegador solicita un documento HTML de un servidor, analiza el contenido del archivo HTML y envía solicitudes separadas para cualquier otra referencia externa. La cadena de solicitudes críticas representa el orden de los recursos que el navegador prioriza y recupera.
Descubre oportunidades de rendimiento con Lighthouse
Lighthouse es una herramienta que te ayuda a medir y buscar maneras de mejorar el rendimiento de una página. Lighthouse te brinda un informe sobre el rendimiento de la página. El informe proporciona una puntuación para cada métrica y una lista de oportunidades que, si las implementa, deberían hacer que la página se cargue más rápido.
Hay subprocesos de WebAssembly listos para probar en Chrome 70
La compatibilidad con subprocesos de WebAssembly se lanzó en Chrome 70 en una prueba de origen.
Conversión de medios
Comandos necesarios para convertir un archivo mov sin procesar en elementos multimedia empaquetados para DASH o HLS.
Cómo funciona la API de Payment Request
Conoce el funcionamiento general de la API de Payment Request.
Descripción general de los pagos web
Obtén más información sobre los pagos web y cómo funcionan.
Cómo funciona el ecosistema de pagos
Obtén más información sobre quiénes forman parte del ecosistema de pagos web, cómo interactúan entre sí y cómo puedes participar.
Elige el nivel correcto de compresión
Muchas imágenes se pueden comprimir en gran medida, lo que proporciona excelentes mejoras de rendimiento. Esta publicación te ayudará a elegir el nivel de compresión adecuado para mantener el aspecto de las imágenes y obtener el mejor rendimiento.
Extiende el navegador con WebAssembly
WebAssembly nos permite ampliar el navegador con funciones nuevas. En este artículo, se muestra cómo portar el decodificador AV1 y reproducir videos AV1 en cualquier navegador moderno.
Web Performance Easy: Google I/O edición 2018
En Google IO 2018, presentamos un resumen de herramientas, bibliotecas y técnicas de optimización que facilitan la mejora del rendimiento de la Web. A continuación, los explicamos mediante la aplicación Oodles Theater. También hablamos sobre nuestros experimentos con la carga predictiva y la nueva iniciativa Guess.js.
La embinada de Emscripten
La embinada de Emscripten
Próximos pasos
Después de completar una auditoría del sitio, debes contar con datos de revisión precisos que faciliten que los desarrolladores y otras partes interesadas prioricen y justifiquen los cambios.
Auditoría del rendimiento
Una auditoría de tu sitio o app te ayudará a crear una experiencia resiliente y eficaz, y a destacar los beneficios rápidos que se pueden implementar con una aprobación mínima. Una auditoría también te proporciona un modelo de referencia para el desarrollo basado en datos. ¿Un cambio mejoró las cosas? ¿Cómo se compara tu sitio con el de la competencia? Obtienes métricas para priorizar el esfuerzo y evidencia concreta para presumir cuando realizaste mejoras.
Comparte los resultados
Una vez que audites un sitio, asegúrate de presentar los resultados de un modo asimilable. Sé sensible a las personas que reciben la auditoría, estructura tu informe cuidadosamente y presenta tus datos en términos de oportunidades y soluciones.
Utiliza herramientas para medir el rendimiento
Existen varios objetivos principales para crear un sitio resistente y de buen rendimiento con bajo costo de datos. Para cada objetivo, necesitas una auditoría.
Trabajo previo
Antes de recopilar métricas de rendimiento para la auditoría de un sitio, puedes realizar varias verificaciones a fin de identificar correcciones fáciles y áreas de enfoque. Algunas de estas comprobaciones son relativamente subjetivas, pero pueden identificar problemas que afectan el rendimiento percibido.
Verificar la seguridad del sitio
No podrás compilar una AWP sin HTTPS. La entrega de tu sitio a través de HTTPS es fundamental para la seguridad, y muchas APIs no funcionarán sin él. Si necesita justificar los costos de implementación, descubra por qué HTTPS es importante.
Desplazamiento bien controlado con Snap de desplazamiento de CSS
CSS Scroll Snap permite a los desarrolladores web crear experiencias de desplazamiento bien controladas mediante la declaración de posiciones de ajuste de desplazamiento. Esto habilita patrones comunes de desplazamiento de UX sin la necesidad de JavaScript.
Reduce las cargas útiles de JavaScript con la eliminación de código no utilizado
Saber dónde comenzar a optimizar el JavaScript de tu aplicación puede ser abrumador. Sin embargo, si aprovechas las herramientas modernas, como Webpack, la eliminación de código no utilizado puede ser un buen punto de partida.
Te damos la bienvenida a la Web envolvente
La Web inmersiva se traduce en experiencias de mundo virtual alojadas a través del navegador. Todas estas experiencias de realidad virtual aparecen en el navegador o en los visores compatibles con RV.
Reduce y comprime las cargas útiles de red con gzip
En este codelab, aprenderás cómo reducir y comprimir el paquete de JavaScript de una aplicación mejora el rendimiento de la página al reducir el tamaño de la solicitud de la app.
Precarga fuentes web para mejorar la velocidad de carga
En este codelab, aprenderás a mejorar el rendimiento de una página mediante la precarga de fuentes web.
Carga módulos de WebAssembly de manera eficiente
Cuando trabajes con WebAssembly, a menudo querrás descargar un módulo, compilarlo, crear una instancia de él y, luego, usar lo que exporte en JavaScript. En esta publicación, se explica nuestro enfoque recomendado para lograr una eficiencia óptima.
Verificación de la detección de atributos de la API de Credential Management
Verificación de la detección de atributos de la API de Credential Management
Escribe una biblioteca de C a Wasm
Escribe una biblioteca de C a Wasm
Cómo pensar las herramientas de velocidad
Cómo pensar las herramientas de velocidad
Webpack
Paquetes para aplicaciones web modernas
Conclusión del Webpack
Resumen de Webpack
Aprovechar el almacenamiento en caché a largo plazo
Cómo Webpack ayuda con el almacenamiento en caché de recursos
Reduce el tamaño del frontend
Cómo usar webpack para que tu app sea lo más pequeña posible
Supervisa y analiza la app
Qué herramientas usar para hacer un seguimiento del paquete webpack y analizarlo
Optimización de inicio de JavaScript
Mantenga bajos costos de transmisión de red y análisis y compilación de JavaScript para garantizar que las páginas sean interactivas con rapidez.
API de Cache: Guía rápida
Aprende a usar la API de Cache para que los datos de tu aplicación estén disponibles sin conexión.
Componentes de HowTo: Casilla de verificación para instructivos
Un <howto-checkbox> representa una opción booleana en un formulario. El tipo más común de casilla de verificación es un tipo dual que permite al usuario alternar entre dos opciones: marcada y desmarcada. El elemento intenta autoaplicar los
Grabación de video del usuario
La mayoría de los navegadores pueden acceder a la cámara del usuario.
Reproducción rápida con precarga de audio y video
Un inicio de reproducción más rápido significa que más personas miran el video o escuchan tu audio. Ese es un dato conocido. En este artículo, exploraremos técnicas que puedes usar para acelerar la reproducción de contenido multimedia mediante la precarga activa de recursos según tu caso de uso.
Componentes de construcción
Los componentes son los componentes básicos de las aplicaciones web modernas. ¿Qué prácticas recomendadas debes seguir cuando construyas tus propios componentes para que puedan resistir el paso del tiempo?
Elementos personalizados v1: Componentes web reutilizables
Los elementos personalizados permiten a los desarrolladores web definir nuevas etiquetas HTML, extender las existentes y crear componentes web reutilizables.
Prácticas recomendadas para los elementos personalizados
Los elementos personalizados te permiten crear tus propias etiquetas HTML. Esta lista de verificación incluye las prácticas recomendadas para ayudarte a crear elementos de alta calidad.
Efectos en tiempo real para imágenes y videos
Muchas de las apps más populares de la actualidad te permiten aplicar filtros y efectos a imágenes o videos. En este artículo, se muestra cómo implementar estas funciones en la Web abierta.
Accesibilidad para los equipos
Cómo incorporar la accesibilidad en el proceso de tu equipo
Tasa de bits
La tasa de bits es la cantidad máxima de bits que se usan para codificar un segundo de una transmisión. Cuantos más bits se usen para codificar un segundo de transmisión, mayor será la fidelidad.
Cómo preparar archivos multimedia para la Web
En esta sección, aprenderás a dar formato a videos para reproducirlos en la Web móvil, a crear varios archivos para abarcar varios navegadores y a encriptarlos.
Solución
La resolución es la cantidad de información en un fotograma de video.
¿Qué es una experiencia multimedia?
Los videos pueden ser informativos y divertidos. Para que el usuario tenga una buena experiencia, los videos deben cumplir con una serie de requisitos técnicos.
Contenedores y códecs
Los archivos multimedia son como cebollas. El archivo que ve en la shell del sistema operativo es solo un contenedor con varios flujos de datos y diferentes tipos de codificaciones permitidas.
Conceptos básicos de las aplicaciones multimedia
A menudo, trabajar con contenido multimedia requiere cambiar las características de los archivos multimedia. En esta página, aprenderás sobre las herramientas que se usan y cómo instalarlas rápidamente.
WebAPK en Android
Cuando el usuario agrega tu app web progresiva a su pantalla de inicio en Android, Chrome genera automáticamente un APK, que a veces llamamos WebAPK. Cuando se instala a través de un APK, tu app puede aparecer en el selector de aplicaciones y en la configuración de apps de Android, y registrar un conjunto de filtros de intents.
Reproducción de videos web para dispositivos móviles
Sigue estas prácticas recomendadas para crear la mejor experiencia en medios móviles en la Web.
Componentes de HowTo: Pestañas de instructivos
<howto-tabs> limita el contenido visible separándolo en varios paneles. Solo se puede ver un panel a la vez, mientras que todas las pestañas correspondientes siempre están visibles. Para cambiar de un panel a otro, se debe seleccionar la
Componentes de HowTo: información sobre la herramienta
Un <howto-tooltip> es una ventana emergente que muestra información relacionada con un elemento cuando este recibe el enfoque del teclado o cuando el mouse se coloca sobre él. El elemento que activa el cuadro de información hace referencia al
Descripción general de los componentes de HowTo
Componentes de HowTo
Cómo informar errores y problemas habituales
Hay maneras correctas de usar las notificaciones y hay maneras de usarlas mejor. Descubre cuáles son las características de una buena notificación. No solo te mostraremos qué hacer, te mostraremos cómo hacerlo.
Cómo revisar la accesibilidad
Cómo revisar tu sitio para detectar problemas de accesibilidad
Extensiones de fuentes de medios
Las extensiones de fuente de medios (MSE) son una API de JavaScript que te permiten crear transmisiones para reproducir a partir de segmentos de audio o video.
Componentes web v1: la nueva generación
Los componentes web están cada vez más compatibles con todos los navegadores, la comunidad está creciendo a pasos agigantados y hay un catálogo totalmente nuevo de componentes web que te permite encontrar exactamente el componente que necesitas.
Registro de service worker
Prácticas recomendadas para cronometrar el registro de tu service worker.
La API de Credential Management
La API de Credential Management es una API para navegadores basada en estándares que ofrece una interfaz programática entre el sitio y el navegador para un acceso fluido en todos los dispositivos. La API de Credential Management: ¿Quieres verlo en
Usuarios que acceden
Para que los usuarios accedan, recupera las credenciales del gestor de contraseñas del navegador y úsalas para que los usuarios accedan automáticamente. En el caso de los usuarios con varias cuentas, permíteles seleccionar la cuenta con un solo toque
Funciones asíncronas: hacer promesas amigables
Las funciones asíncronas te permiten escribir código basado en promesas como si fuera síncrono.
Introducción a ARIA
Introducción a ARIA y semántica de HTML no nativo
Árbol de accesibilidad
Introducción al árbol de accesibilidad
Alternativas de texto para imágenes
Uso del atributo alt para proporcionar alternativas de texto para imágenes
Semántica y navegación por el contenido
La función de la semántica en la navegación de páginas
Cuestiones de orden del DOM
La importancia del orden predeterminado del DOM
Cómo ocultar y actualizar el contenido
Ocultar contenido de la tecnología de accesibilidad
Etiquetas y relaciones ARIA
Uso de etiquetas ARIA para crear descripciones de elementos accesibles
Introducción a la semántica
Introducción a la semántica y la tecnología de asistencia
Desarrollar experiencias en pantalla completa
Pantalla completa en modo de pantalla completa.