Investigación del rendimiento web
Este repositorio es una compilación de recursos que consumí con el tiempo para obtener conocimiento y hacer mi propia investigación sobre el rendimiento web.
Table of Contents
- Web Performance Research
- Table of Contents
- Architecture
- Backend
- Browser
- Service Workers / Workers
- Rendering Engines
- Build tools
- Cache & Memoization
- Career
- Case Studies
- Community
- Books
- Blogs
- Conferences & Meetups
- Courses
- Podcasts
- Core Web Vitals
- Cumulative Layout Shift (CLS)
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Interaction to Next Paint (INP)
- Total Blocking Time
- CSS
- Fonts
- General
- Images
- Infraestructura
- JavaScript
- Medición del rendimiento
- Rendimiento de tiempo de ejecución
- Devtools
- Cómo
medir - la medida de la medida Medida
- Herramientas
- Gestión de la memoria
- Presupuesto
- de rendimiento Presupuesto de presupuesto Herramientas
- Prepacando
- herramientas previas a las herramientas
- web Web Frameworks
- React
- React Rendering
- Medición
- de
- tweets
- de
- reaccionamiento
- La
arquitectura
de licencia de API web de UX Web - ? ¿Patrones de representación avanzados
- ? Renderización en la Web: ¿Implicaciones de rendimiento de la arquitectura de aplicaciones
- ? ¿Lleva la espera
- ? Transmisión en Next.js
- ? Lo que sucede antes de la hidratación
- 2023 Informe de rendimiento del marco web
- Una toma moderna sobre el corte de la mostaza
- Aplicar la carga instantánea con el patrón PRPL
- que compara los spas con el modo concurrente SSG y SSR
- e hidratación parcial en react
- conquistar Javascript Hydration
- conquistando
la hidratación JavaScript - que la creación de una alta alternativa a la interfaz de usuario de la Hydrana
de la Hidratación de la Hidratación de la - Hidratación
- de la Hidratación de la Hidratación de la Hidratación de la Hydratación de la Hydratación
- . Para hacer una hidratación parcial en reaccionamiento
de - la
- carga
- inutilizante con una
- arquitectura
- de
- islas de
- arquitectura
- de
shell - de
- aplicaciones
- a continuación
- .
- Renderizar sobre el lado del cliente, lo que representa
- el caso de hidratación parcial (con Next y Preeatt)
- el futuro (y el pasado) de la web es la representación del lado del servidor
- comprensión de la mejora progresiva
- de comprensión en los
- patrones de representación web de
Jamstack - ¿Qué es la hidratación parcial y por qué todos hablan sobre eso?
- ¿Por qué la hidratación eficiente en los marcos de JavaScript es tan desafiante
Backend
- Todo lo que sabe sobre la latencia es
un navegador
equivocado - ? ¿Una introducción a la representación del navegador
- ? ¿Control de caché
- ? Caché sus fuentes, imágenes y páginas - ¿Desempacando la caja de trabajo
- ? Ruta de renderización crítica: ¿Curso de bloqueo en el rendimiento web
- ? ¿Entregando 60 fps en el navegador
- ? ¿Entregando 60 fps en el navegador
- ? ¿Consegues tu "cabeza" recta
- ? Salir del camino de los usuarios: ¿Menos Jank con los trabajadores web
- ? ¿Cómo utilizamos WebAssembly para acelerar nuestra aplicación web en 20X (estudio de caso)
- ? En el bucle: setTimeOut, micro tareas, requestAnimationFrame, requestIdlecallback
- ? ¿Optimización de la ruta de renderización crítica para sitios web móviles instantáneos
- ? Programar dentro y fuera del hilo principal
- ? ¿El hilo principal está con exceso de trabajo y mal pagado
- ? ¿Hay un proxy del lado del cliente (ServiceWorker) en su navegador
- ? WebAssembly como arquitectura multiplataforma
- 60 fps en la
- representación acelerada de la web móvil en Chrome
- Acelerado JavaScript (en el navegador)
- Servicio
- adaptativo utilizando JavaScript y la API de información de la red
- Agrega
- los
cambios de sugerencias de prioridad a los cambios de - las
- sugerencias de prioridad
- .
El contenido de la página dinámica - del escáner de precarga
- con los trabajadores de Cloudflare
- Fast es bueno, ¡el instante es mejor!
- Arreglar el diseño de la paliza en el mundo real | Matt Andrews
- Frontend Web Performance: The Essentials 0
- Frontend Web Performance: The Essentials 1
- Get to know your browser's performance profiler
- How JavaScript works: A comparison with WebAssembly + why in certain cases it's better to use it over JavaScript
- How JavaScript works: Deep dive into WebSockets and HTTP/2 with SSE + how to pick the right path
- How JavaScript works: The building blocks of Web Workers + 5 cases when you should use ¿
- Cómo el navegador representa una página web? -DOM, CSSOM y Rendering
- Cómo eliminar los recursos de bloqueo de renderizado
¿Cómo cortamos el 99% de nuestro - JavaScript
- con QWIK + Partytown
- mejorando las métricas de pintura eliminando las precargas
- no
- utilizadas
- ?
- PageSpeed Insights | Google Developers
- Modern Multi-Process Browser Architecture
- Notes sobre cómo los navegadores trabajan
- notas sobre los intérpretes de JavaScript
- Notas sobre el perfil de memoria de JavaScript en Google Chrome
- ¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡
- Optimización del contenido web en UIWebviews y sitios web en
- páginas prerenderas iOS en Chrome para navegaciones de página instantáneas
- que evitan 'Supremo de diseño' | Wilson Page
- Perfiling y optimización del rendimiento del tiempo de ejecución con la pestaña de rendimiento DevTools
- Proxying Solicitudes de imagen en la nube con los trabajadores de Cloudflare
- Reflows & Repaints: CSS Performance haciendo que su JavaScript sea lento?
- Representación: repinte, reflujo/releimiento, reproducción de Restyle/Stoyan
- : repintado, reflujo/releimiento,
- rendimiento de desplazamiento de
reposición - Configuración de trabajadores de CloudFlare para la optimización del rendimiento web y pruebe
- la carga útil HTML más pequeña con los trabajadores de servicios
- para que haya oído hablar de las intentos de los clientes y cree que tiene tiempo, ¿verdad?
Comprensión - incorrecta
- de reflexión y repintado en el navegador
- Use los trabajadores web para ejecutar JavaScript del hilo principal del navegador
- utilizando los trabajadores de CloudFlare a CSS externos en línea.
- Pasamos una semana haciendo que los tableros de trello se carguen extremadamente rápido. Así es como lo hicimos. - Fog Creek Blog
- Web Browser Ingeniería
- de trabajadores web
- Arquitectura WebKit
- ¿Qué fuerzas Fuerza Diseño / Reflujo
- ¿Qué hace que la Web sea lenta? El cuello de botella del navegador
- ¿Cuándo debería usar trabajadores web?
- WilsonPage / Fastdom
Service Workers / Workers
- ? ¿Aumentar la actuación de su sitio con Partytown
- ? Acelere su sitio con
- las recetas de los trabajadores de los trabajadores para los trabajadores de la nube para las pruebas de rendimiento frontend
- del hilo principal con un trabajador web en línea: un ejemplo
- de cómo Partytown elimina el bloqueo del sitio web de los scripts de terceros
- Introducción a los trabajadores de la caja de trabajo y los trabajadores de servicios
- que hacen la web más rápido con los trabajadores de servicios de servicio y los trabajadores de servicio de rendimiento
- almacenado en caché de los trabajadores de servicios de http y
- la configuración de los trabajadores de la nube de flota de la web para la optimización de rendimiento web y la
- caja de trabajo de trabajo: bibliotecas de Javascripts para los trabajadores de servicios de rendimiento para los trabajadores de servicios web progresivos
- ?
¿Motores de representación de
- ? Motores JavaScript: ¿Las piezas buenas
- ? ¿Vida de un píxel
- ? Rendimiento de rendimiento de adentro hacia afuera
- Renderingng: el nuevo motor de representación de Chrome
- durante todo el Web en FPS máximo: cómo Webrender se deshace de Jank
- por qué los desarrolladores de la web deben preocuparse por la interactividad de la interactividad
de las herramientas
- de
- la
- webpack
- Shaking
- utilizando
módulos - Javascript
- nativos en la producción hoy
- Se construye con
- los consejos de optimización de Webpack de Metro 13 que debe conocer
- para encontrar y arreglar duplicados en Webpack con Inspectpack
- cómo mejorar el rendimiento de la webpack
- de rendimiento web y la compresión
- Mantenga la Webpack rápida: una guía de campo para una mejor compilación de optimizaciones
- Libs Optimizations
- Awesome Webpack perf
Cache & Memoization
- ? Me encanta su caché: optimice para la segunda carga
de carrera profesional
- : la junta de trabajo para los entusiastas del rendimiento web
- Ingeniero de software de pila completa en el ingeniero
- de software de rendimiento senior de Mozilla Corp en
- el ingeniero de rendimiento web de Mozilla Corp (W/m/D) - Remote o Hamburg en Bagend
- Software Engineer (L4) - Rendering & Performance de UI en
Estudios de casos
de Netflix - ?
¿ - Construir rendimiento a largo plazo
- ? Core Web Vitals: ¿Teoría y práctica
- ? ¿Lecciones aprendidas del monitoreo del rendimiento en Chrome
- ?
¿ - Optimizar las ventanas emergentes de vista previa
- ? ¿Registro de rendimiento en React y aplicaciones transaccionales con Redux
- ? Varios componentes están representando el rendimiento del cliente a escala de slack a escala
- de 300 ms más rápido: reduciendo el tiempo de bloqueo total de Wikipedia,
- un estudio de caso de rendimiento web de Netflix,
- un estudio de caso de rendimiento de la aplicación web progresiva de Pinterest,
- un estudio de caso de caso de rendimiento de Tinder PWA
- Agrofy: una mejora del 70% en LCP correlacionada en un 76% de reducción de 76% en el abandono de la carga
- que analiza la calidad de los usuarios de los usuarios de Wikipedia
- . YouTube en
- el estudio de caso de caso web Estudio de caso Renault Group
- : Analizar
- el estudio de caso de rendimiento de la aplicación de noción: analizar el rendimiento del sitio de Walmart
- elaborando una interfaz de usuario de TV de alto rendimiento utilizando React
- Economic Times Búsqueda de la búsqueda de INP
- Mejorar el rendimiento web del New York Times con React 18
- de los usuarios de desarrollo a los usuarios reales: cómo crear una compensación de
- rendimiento
- web
- . Las optimizaciones aumentaron yahoo! Vistas de la página de Japan News por sesión en un 15%
- cómo Mercado Libre optimizó para Web Vitals (TBT/FID)
- cómo la plataforma de gestión de consentimiento de PUBTech redujo INP en los sitios web de sus clientes en hasta un 64%, al tiempo que mejora la capacidad de visibilidad de anuncios en un 1,5%
- de cómo aumentó las tasas de conversión y las páginas de la sesión de la sesión de la página
- . 33.13%
- Cómo Redbus mejoró la interacción de su sitio web a la próxima pintura (INP) y aumentó las ventas en un 7% de
- cómo los ciudadanos del domingo mejoraron las conversiones al centrarse en el rendimiento
- de cómo convencer a su cliente para que se centren en el rendimiento web: un estudio de caso
- cómo Trendyol redució INP en un 50%, lo que resulta en un 1% de 1% en el tiempo de clic en el tiempo de clic en el momento
- de la tarea y el momento de la tarea de los tiempos de la carga de reacción en el 70%
- . Un puntaje de 98 faro
- de cómo WIX mejoró TTFB con 103 pistas tempranas
- Hughesnet vs Tesla: ¡un estudio de caso en datos de campo frente a los datos de laboratorio,
- mejore la experiencia del usuario! Cómo gestionamos los vitales de la web central en nuestro Yahoo! Sitio web de noticias de Japón
- Mejora el rendimiento del paquete de JavaScript con el código de división de código
- Mejora del rendimiento web de Smashing Magazine: un
- viaje de estudio de caso para mejorar el rendimiento de la aplicación React por 10x
- haciendo que la nueva página de inicio de Github sea rápida y el rendimiento
- que hace Instagram.com más rápido: tamaño de código y optimización de ejecución (Parte 4)
- haciendo Instagram.com más rápido: la parte 1,
- la parte de Instagram.com más rápido: Parte 2
- haciendo Instagram.com Faster: cáster: Cachear
- Nethed La mejora del 55% en LCP al optimizar para la web de vitalidad de Core
- Nikkei
logra un nuevo nivel de calidad - y
- rendimiento con sus
- tiempos de carga de la página de PWA PWA de múltiples páginas y los tiempos de
- navegación
- de
- PWA
- acaba Performance Fixes on Airbnb Listing Pages
- REI: FCP and LCP improvements
- Speed Matters, But It Isn't Everything
- Spotify Performance Profiling
- The Impact of Web Performance
- The Road to Great Product Performance: The First Steps
- Treebo: A React PWA Performance Case Study
- Twitter Lite and High Performance React Progressive Web Apps at Scale
- Web dev: Case Study
- Web performance case study: Wikipedia page previews
- Web Performance Regression Detection (Part 1 of 3)
- Web Performance Regression Detection (Part 2 de 3)
- detección de regresión de rendimiento web (parte 3 de 3)
- Zillow: más grande, más rápido y más atractivo, mientras que en un presupuesto presupuestado
planeta perfromance Community
- Performance
- Web
- Performance Rendimiento web Grupo de trabajo
Libros
de - trabajo
- Javascript Javascript High Performance
- High
- Performance
- Browser Netina
- de alto rendimiento
- El Tiempo
- de
- Optimización de la Opción de Optimización
- de la Opción de Optimización de la Opción de Optimización
- Modernización
- de High
Performance - Rendimiento web
- utilizando
- el navegador web WebTest Ingeniería de la ingeniería
- de la web en
los blogs
de acción - Tk
- Harry Roberts
- Alex Russell
- Smashing Magazine - Performance
- Fershad Irani
- Devtools modernos
- Eugenia Zigisova
- Ivan Akulov
- Perf PerfR
- Barry Pollard
- Simon Hearne
- Medhat Dawoud Dawoud
Conferencias & Meetups
- Conffab - Performance
- New York Performance Group
- Perfut ahora
Confuess
- ? Rendimiento Web I: Otimizando o front-end
- ? Rendimiento Web II: Ruta crítica, HTTP/2 E RECURSE SUGERS
- ? React: OTIMIZANDO Un
- navegador de rendimiento Optimización de renderizado
- JavaScript y DOM
- modern DevTools
- que configuran DevTools para pruebas de rendimiento
- El React MasterClass Master Classass
- Web MasterClass
- Sitio web Optimización de rendimiento
de - la optimización de rendimiento del
sitio
web Los podcasts
- de
- rendimiento
- de
- rendimiento
- de rendimiento
de rendimiento
web
- . Pregúntame cualquier cosa: ¿Core Web Vitals
- ? ¿Descifrar INP y Core Web Vitals
- ? ¿Explorando el futuro de Core Web Vitals
- ? ¿VISIÓN DE CORE WEB VITALS del equipo de la plataforma Chrome
- ? ¿Lecciones aprendidas del monitoreo del rendimiento en Chrome (diapositivas)
- ? ¿Medir vital de la web central
- ? ¿Optimizar los vitales de la web central
- ? ¿Optimizar los vitales de la web central
- ? ¿El impacto comercial de los vitales web centrales
- ? Rendimiento del sitio web y vital de web central
- ? ¿Qué hay de nuevo en Web Vitals,
- un flujo de trabajo centrado en el rendimiento basado en las herramientas de Google,
- una guía en profundidad para medir la web vitalidad de
- la web para analizar la web vital con la webpageTest
- Mejores prácticas para medir los vitales de la web en el campo
- impacto
- de la red de campo de las optimizaciones
- vitales
- de
- las banners de cookies
- de la web vitalidad? Herramienta)
- El seguimiento de los vitales web centrales a través de GA4, BigQuery y Google Data Studio Studio
- CSS para Web Vitals
- CWV se convertirá en un factor de clasificación de escritorio en febrero de 2022
- depuración de la web vital en el campo
- Definición de los umbrales de métodos de vitalidad centrales
- Tiempo de elementos: una verdadera métrica para gobernarlos a todos?
- Evaluar la experiencia de la página para una mejor web
- todo lo que sabemos sobre los vitales web básicos y SEO
- Todo lo que sabemos sobre la web vitales centrales y
- las cargas de página más rápidas de SEO usando el tiempo de pensamiento del servidor con los primeros consejos
- de retroalimentación deseada: ¿Un método de respuesta experimental
- con las nuevas métricas de capacidad de respuesta
- tiene vitales de web centrales que hicieron la web más rápido?
- Cómo las arquitecturas de spa afectan a Core Web Vitals
Cómo - crear
un - tablero
- de análisis competitivo para Core Web Vitals utilizando Google Data Studio
- Cómo
- obtener su página
- Core
- Web Vitals
- de
- la
API Crux - La experiencia de la página actualiza
- más tiempo, herramientas y detalles sobre la actualización de la página de la página ACTUALIZACIÓN
- Optimización de vital web Core
- Web Vitals en Spas Optimización de los vitales web utilizando Lighthouse
- nuestras recomendaciones de vital web principales para 2023
- Envíe comentarios al equipo de Google Core
Web - Vitals
que - simula
- a los usuarios reales en el laboratorio para depurar CLS Problemas
- de DO y no es decir,
- los
- vitales de la web de la red
- . Patrones
- Web Vitals Patrones
- ¿Qué implica hacer una nueva métrica vital web
- por qué los datos de laboratorio y de campo pueden ser diferentes (y qué hacer al respecto)
cambio de diseño acumulativo (CLS)
- ? Understanding Cumulative Layout Shift
- CLS at BuzzFeed — Part 1: Raising The Floor
- CLS at BuzzFeed — Part 2: Getting Help From Real Users
- CLS at BuzzFeed — Part 3: Dealing with the unpredictable
- Cumulative Layout Shift in Practice
- Cumulative Layout Shift in Practice
- Cumulative Layout Shift in the Real World
- Cumulative Layout Shift in the Real World
- Cumulative Layout Shift Study of Over 1 Million Websites
- Cumulative Layout Cambio: mida y evite la inestabilidad visual
- de la depuración de la depuración de los cambios
de depuración - de la depuración
- CLS
que se dividen en el nuevo diseño acumulativo desplazamiento - evolucionando la métrica de los cls
- cómo eliminé el desplazamiento de diseño del sitio web utilizando un script de predeploy
cómo arreglar el desplazamiento - acumulativo
- de diseño (CLS
- )
cómo arreglar el cambio de - desplazamiento
- acumulativo de diseño
(CLS). - ¿Barras de desplazamiento con la propiedad CSS de cepillo de barra de desplazamiento,
- la guía casi completa para el diseño acumulativo, desplaza
la pintura contentful más grande (LCP)
- ? ¿Cómo arreglar la pintura contentful más grande
- ? ¿Cómo mejorar la pintura contenta más grande para una mejor experiencia de página
- ? Investigación de LCP: ¿pintura contentful más grande
- ? Esta es su LCP en las imágenes
- de estudio de caso Vodafone: una mejora del 31% en LCP aumentó las ventas en un 8%
- de prioridad dinámica de LCP: aprendiendo de visitas pasadas
- cómo optimizar la pintura contenida más grande (LCP) en el lado del cliente
Mejora la pintura contentful más grande - (
- LCP) mediante la transición de la imagen de la imagen
de - la pintura de la pintura
- más grande
- de la pintura de la pintura
más grande - . API
- Priority Sugeres y optimizar
- la punta de LCP: use fetchPriority = alto para cargar su imagen de héroe LCP antes que
- entendiendo cómo los navegadores identifican el elemento LCP
- ¿Qué puede decirnos el archivo HTTP sobre la pintura contentful más grande?
Primer retraso de entrada (FID) ¡
- Primer retraso de entrada (FID)
- inactivo hasta que
- mejore urgente la capacidad de respuesta en
la interacción de entradas de texto a la siguiente pintura (INP)
- ? ¿Desglosando tareas largas
- ? ¿Debugir INP
- ? ¿Cavar en la interacción a la siguiente pintura
- ? ¿Cavar en la interacción a la siguiente pintura
- ? ¿Cómo mejorar la interacción a la siguiente pintura (INP)
- ? ¿Cómo optimizar la capacidad de respuesta web con la interacción a la siguiente pintura
- ? ¿Interacción a la siguiente pintura y otros vitales de la web [Blinkon 16]
- ? Interacción a la siguiente pintura revelada: ¿5 verdades que acelerarán su sitio
- ? ¿Interacción a la siguiente pintura
- ? ¿Nuevas ideas de campo para la depuración INP
- ? Optimización de INP: ¿Una inmersión profunda
- ? El estado de capacidad de respuesta en la web
- ? Comprensión y optimización de la interacción para la siguiente pintura (INP)
- 7 formas de minimizar
- el análisis de trabajo de hilo principal del rendimiento de INP utilizando datos de rumVision del mundo real
- evite diseños grandes y complejos y de diseño que
- rompa tareas largas
- de la reproducción del lado del cliente de HTML e interactividad
- de depuración de interacción interacción a la siguiente pintura (INP)
- INP: Inp: Nuevas herramientas y las insumos accionables
- en el campo Interacciones en el campo CHOGE
- CHOGE CHOCEMES CHOGETs. Desglose Loaf + INP
- Cómo funcionan los marcos modernos en la nueva métrica INP
- Cómo los grandes tamaños de DOM afectan la interactividad, y lo que puede hacer al respecto sobre
- cómo mejorar el INP: los patrones de rendimiento
- de cómo mejorar la interacción a
- la próxima pintura (INP) cómo resolver la interacción
a la - interacción a continuación de
la interacción a continuación de - la interacción
- a la
- siguiente
- pintura (INP)
. - Siguiente rendimiento de INP de INP de pintura (INP)
- : el elefante en la habitación
- optimiza la interacción para la próxima pintura
- optimizar tareas largas
- que se preparan para la interacción a la siguiente pintura, un nuevo núcleo web vital
- reduce el alcance y la complejidad de los cálculos de estilo
- reducen el alcance y la complejidad de los
- cálculos
de estilo - evaluación de scripts y tareas largas
tareas lentos: las páginas de categorías tienen - la
- peor respuesta (INP) en las sitios electrónicas de los sitios.
- The Main Thread
- Use web workers to run JavaScript off the browser's main thread
- Web Performance Experts Guide to Mastering Interaction to Next Paint
Total Blocking Time
- Total Blocking Time: A Short and Sweet Guide for Happier Users
CSS
- Airbnb's Trip to Linaria
- Benchmarking the performance of CSS @property
- CSS-in-JS to Tailwind: 36% better web vitals
- Future of runtime CSS-in-JS
- Inlining critical CSS
- Loading CSS-
- Comparación de rendimiento de la hoja de trucos de rendimiento de las bibliotecas CSS-in-JS
- PURGECSS
- Real World CSS vs. CSS-in-JS Performance Comparison
- Reduce el tamaño del paquete a través de CSS ClassName Strategy Strategy
- Staty Performance y concurrente Rendiendo
- la verdad Rendimiento del selector CSS
- ¿Por qué estamos rompiendo con
las
fuentes
CSS-In-Jonts las herramientas de WOFF2 Fonts sobre las herramientas de
WOFT2 - ? Ardilla de fuente
- ? Glyphhanger
- ? Fuentes de Google
- ? ¿Fuentes variables
generales
- ? ¿Errores comunes que degradan el rendimiento del frontend
- ? ¿Se sumerge profundo en el rendimiento de terceros
- ?
¿ - Desmystificando las herramientas de velocidad
- ? Fantásticos trucos de rendimiento frontend y ¿por qué los hacemos
- ? ¿Desde carga rápida hasta carga instantánea
- ? ¿Mejorando el rendimiento de la página en aplicaciones web modernas
- ? ¿Mejorando el rendimiento de la página en aplicaciones web modernas
- ? ¿El diseño inclusivo es rápido de forma predeterminada
- ? Rendimiento web de siguiente nivel
- ? Speed Essentials: ¿técnicas clave para sitios web rápidos
- ? Estado del rendimiento web de agosto de 2022
- ? ¿El futuro brillante del rendimiento web
- ? El camino hacia el rendimiento
- ? La psicología de la velocidad
- ? ¿El peso insoportable de JavaScript masivo
- ? ¿Los 10 mejores dificultades de rendimiento
- ? ¿Optimizaciones de rendimiento web para las condiciones duras
- ? WebBundles: ¿entrega JS sin las compensaciones
- ? ¿Cuándo JavaScript bytes
- ? ¿Cuándo JavaScript bytes
- ? Por qué el rendimiento es difícil a escala
- 3PERF Guías
- 5 errores comunes que cometen los equipos de los equipos al rastrear
- un modelo de vencimiento de la gestión para el rendimiento
- Matriz de vencimiento de rendimiento
- Una teoría unificada del rendimiento web
- Un modelo mental HTML primero
- ¿sus tareas javascript son usuarios frustrantes?
- Las mejores prácticas para las etiquetas y los gerentes de etiquetas
- que construyen el DOM más rápido: análisis especulativo, async, diferir y precargar
- la construcción del DOM,
las definiciones - de herramientas de pintura de pintura de DOM Chrome
- de las experiencias de terminología web
- . Web. marcos. futuro. a mí.
- Tiempos de carga rápidos
- Tiempos de carga rápidos
- arreglando regresiones de rendimiento antes de que ocurran
- gráficos
- de llama
- desde
- el desarrollo hasta usuarios reales: cómo crear una
- lista
- de
- verificación de rendimiento delantera de
- la
- historia de
- rendimiento
- web
- .
- Hoja
- Tal vez no necesite óxido y WASM para acelerar su JS
- monitoreando
- sus
- métricas
- vitales
- (
- rendimiento)
- de
- la
- web
- central
- .
- Rendimiento de la aplicación web moderna
- La guía definitiva para optimizar JavaScript para la página rápida Carga
- el por qué de optimización del sitio web: mejor clasificación de búsqueda
- El por qué de la optimización del sitio web: mejor experiencia del usuario
- El por qué de la optimización del sitio web: ayudar al planeta
- el por qué de la optimización del sitio web: aumentar las conversiones del sitio
- ¿Por qué de la optimización del sitio web: reducir los costos operativos
- 5 recomendaciones de rendimiento de los 5 mejores rendimientos
- web de
- rendimiento web: tendencias e influencias de 4 mejores expertos de rendimiento de rendimiento
- ?
- Por qué su JavaScript almacenado en caché sigue siendo lento y incurre en la sobrecarga de rendimiento
por qué importa
- cómo medir el consumo de energía de su aplicación frontend
- relacionando la velocidad del sitio y las métricas comerciales
- ¿Qué es la velocidad del sitio y por qué debería importarme?
¿Por qué el repositorio de imágenes
- para recopilar las mejores prácticas para imágenes web
- ?
¿ - Una actualización de WebP
- ? Tiempos de carga más rápidos con imágenes AVIF | Taller
- ? ¿Compresión de imagen Dive Deep
- ? Optimización de imágenes | Performance.now () 2018
- ? ¿Las imágenes se disparan a la velocidad de Jamstack
- ? JPEG 'Archivos' y color (JPEG PT1)
- ? JPEG DCT, transformación de coseno discreto (JPEG PT2)
- ? JPEG XL: ¿Una actualización
- ? Imagen perfecta
- ? ¿Imágenes receptivas para la web
- ? El formato de imagen AVIF
- ? WebP, AvIF y más: estadísticas de adopción de imágenes
- ¿
- Puedo usar Avif?
- ¿
- Puedo
- usar JPEG-XL
<img>- Y srcset
- La mejor guía para la optimización de imágenes
- ¿Qué hace realmente el atributo de decodificación de imágenes?
¿ Herramientas de imágenes
- ?
¿ - Cloudinary
- ? ¿Compress-o-defie
- ? ImagePtim
- ? Optimización
- ? ¿Squoosh
- ? Webponize
Infraestructura
- ? Rendimiento móvil de la radio UP: 4G Architecture y sus implicaciones
- Computación en la nube sin contenedores
- Redes de entrega de contenido (CDN)
JavaScript
- ? JavaScript de múltiples múltiples consejos de JavaScript 17 JavaScript pasados, presentes y futuros
- para escribir más rápido y mejor optimizado JavaScript
- 17 JavaScript Optimización de optimización para saber en 2021
- cómo funciona JavaScript: una descripción general del motor, el tiempo de ejecución y el apilamiento de llamadas
- cómo funciona JavaScript: bucle de eventos y el aumento de la programación ASYNC + 5 formas de codificar con async/await
- cómo funciona: Sobre cómo escribir código optimizado
- cómo funciona JavaScript: Memory Management + Cómo manejar 4 Fugas de memoria Común
- JavaScript Técnicas de optimización del compilador: ¿solo para expertos
que miden el rendimiento
- ? ¿Analizar y mejorar el rendimiento web utilizando DevTools & WebPagetest
- ? ¿Herramientas de alerta de rendimiento
- ? Desde milisegundos hasta millones: ¿los números que impulsan el perf
- ? ¿Cómo dar sentido a las métricas reales de rendimiento del usuario (RUM)
- ? ¿Cómo está el UX en la web, realmente?
- ? Convirtamos el análisis real de datos del usuario en una ciencia
- ? ¿Medir el rendimiento con SpeedCurve y WPT
- ? ¿Medir el rendimiento real del usuario en el navegador
- ? ¿Observabilidad para el perf
- ? Un número, múltiples métricas
- ? ¿Performación de perfil con Harry Roberts
- ? Rendimiento en la web Auditar
- una guía paso a paso para monitorear la competencia con el informe Chrome UX
- Una introducción al Archivo de Rum
- Analice
- la evaluación comparativa de rendimiento de tiempo de ejecución, el perfil y la optimización de las bibliotecas de JavaScript
- Guía completa para comprender y medir el rendimiento de su sitio web
- Dashboard de la web Vitals en Google Analytics
- creando el rendimiento de la página de Airbnb para
- obtener rápido, permanezca rápido: ¿Cómo monitorear el rendimiento de la
- ganancia de su sitio?
- How to read a WebPageTest Connection View chart
- How to read a WebPageTest Waterfall View chart
- How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks
- Identifying, Auditing, and Discussing Third Parties
- Introducing RAIL: A User-Centric Model For Performance
- Make sense of flame charts in Performance Tab by example
- Measure What You Impact, Not What You Influence
- Measuring the performance of Wikipedia visitors' devices
- Measuring web performance, How fast is ¿rápido?
- Mi flujo de trabajo de auditoría de rendimiento
- cancelando ron
- react react perfilamiento de la optimización de optimización
- tiempos de respuesta: los 3 límites importantes
- me
- muestran el dinero: justificar las mejoras de rendimiento utilizando Google Analytics
- Inicie
- las
- pruebas
- de rendimiento
- de
- su
- navegador
- . Sus recursos con un
- calendario de rendimiento web gratuito de Treemap Tool se reúnen con ron,
- ¿por qué los datos de Crux son diferentes de mis datos de ron?
- Wikipedia's Worldwide Web:
¿Rendimiento de tiempo de ejecución
de Benchmark de CPU - ? ¿Pruebas de rendimiento con dramaturgo
- ?
¿ - Una colección de herramientas de rendimiento
DevTools
- ? Chrome Devtools: ¿Pestaña de rendimiento
- ? ¿Explorando el rendimiento frontend del sitio web de National Rail con Chrome Devtools
- ? ¿Mejorando el rendimiento de la página con Chrome DevTools
- ? ¿Haciendo imágenes de carga perezosa con Chrome Devtools
- ?
¿ - Clasta magistral de gestión de memoria
- ? ¿Ejecutar un perfil de rendimiento en el cuadro de búsqueda de YouTube
- ? Comprensión del rendimiento de la pintura con
- la guía completa de Chrome Devtools para el análisis de rendimiento de JavaScript utilizando Chrome Devtools
- CPU Gráficos de llama
- de red de red en Chrome DevTools
¿Cómo métricas
- Visualizaciones de datos más rápidas
- cómo métricas
- cómo leer un histograma de ron
- sintético versus
- monitoreo real de los usuarios? Rum explicó
Benchmark
- ? Aventuras en microbenchmarking
- ? react benchmark
- ? Tacómetro
- ?
¿Recetas de rendimiento web Medido Medido
- con titiritero
- ? boomerang
- ? Perfsee: ¿Un conjunto de herramientas para medir y depurar el rendimiento de las aplicaciones frontend
- ? Speedscope
- ? Treo
Memory Management
- ¿Un curso de bloqueo en
- experimentos de gestión de memoria con el
presupuesto de rendimiento
del recolector de basura de JavaScript - ? Core Web Vitals - Medir ¿Qué importa
- ? El costo de
- la herramienta de parpadeo de pintura de JavaScript Chrome
- operacionalizando el rendimiento con los presupuestos de rendimiento
- que optimizan los presupuestos de rendimiento de rendimiento de la startación
- 101
- presupuestos
- de
- rendimiento
- ,
- diseño de
- rendimiento de rendimiento
pragmático - en un presupuesto
de
presupuesto de rendimiento
- .
¿ - Calorías del navegador
- ? Calculadora de presupuesto de rendimiento
- ? ¿Calculadora de presupuesto de rendimiento
previa
- ? El arte del prefetch predictivo
<link rel=”prefetch/preload”> en- la carga de página instantánea y consistente de la página web a través de la precarga
- , la pre-captación y las prioridades en Chrome
- acelera las navegaciones de la próxima página con
- los módulos previos a la reducción de la preparación web
- .
¿ Herramientas previas a la captura de
- pre-captación de pre-Webpack-Plugin
- ? ¿Las cargas de página posteriores más rápidas mediante la satisfacción de los enlaces en Viewport durante el tiempo inactivo,
los marcos web
reaccionan
- ? Dom como ciudadano de segunda clase
- ? Reaccionar 18 concurrencia, explicada
- ? React Performance Depuring MasterClass
- 21 Técnicas de optimización del rendimiento para React Apps
- Death Por mil usecallbacks
- ¿Cómo funciona React 18 Inside?
- Cómo escribir aplicaciones React React con contexto
- Cómo escribir Código React de Performante: Reglas, Patrones, Do y No se debe
hacer - cómo escribir Código React React: Reglas, Patrones, Do y
- No
- se
- debe
- hacer
- mejor
- . En Next.js
- Progressive React
- React React Concurrence, explicó
- React Hooks y consejos para evitar el renderizado de componentes inútiles aplicados en las listas
- React Rendimiento: 13 formas de optimizar el rendimiento de su aplicación React
- InsoSa: ¿Compañero de prueba de rendimiento para React
- SSR, transmisión y actualización de CSS-In-JS
- React
- en Etsy
- ?
¿ Reaccionamiento
- de reaccionamiento de reaccion-PERF de Eslint-Plugin-
react - ? ¿Una introducción de dibujos animados a la fibra
- ? ¿Obtener datos con componentes del servidor React
- ? ¿Buceo profundo en React concurrente
- ? Fibra interior: ¿La descripción en profundidad que querías
- ? React Fiber Deep Dive
- en profundidad Explicación del estado y la actualización de los accesorios en React
- Inside Fiber: descripción general en profundidad del nuevo algoritmo de reconciliación en
- el aprendizaje React El algoritmo de reconciliación React con medidas de rendimiento
- React Rendimiento: ¿Cómo evitar la guía de reaccionamientos
- de
- reaccionistas
- redundantes
- ?
- Señal que aumenta
- el futuro de la representación en React
- ¿Por qué reaccionar los reaccionadores de reaccionamiento
de la medición de reacción
- ? How to use the React Profiler to find and fix Performance Problems
- ? Profiling React Apps like a Pro
- ? React Performance with React Dev Tools
- Get Fast, Stay Fast: How To Monitor React Render Performance
- Measuring JS code performance. Part I: using react-benchmark
- Measuring JS code performance. Part II: interaction speed
- Measuring React app performance
- Performance Profiling a Redux App
- Profiling & Optimizing the runtime performance with the DevTools Performance tab
- Profiling React.js Performance
Sustainability
- Core Web Vitals meets sustainability
- How Improving Website Performance Can Help Save The Planet
- Web Performance + Ecological Impact
- Website performance and the planet
Tweets
- Another reason for not declaring React components inside other components
- Blank page with an embedded tweet. How bad can it be?
- Check out the new Priority Hints
- ChromeDevTools Long Tasks
- Compile Code — Profiling
- CSS Selector Performance
- Frontend performance tips to keep top of mind
- Google Search Console warning the INP
- How can I optimize my frontend for the fastest page load times?
- How I typically test performance
- How Wix improved TTFB with 103 Early Hints
- Image performance cheatsheet
- img fetchpriority="high": LCP improvement of ~150ms
- Investigating Core Web Vital issues
- mobile performance for sites built with Next.js
- Optimize head and body separately
- Optimizing LCP
- Performance Insights by Builder.io
- React 18 Concurrency, Explained
- React 18 Concurrency
- React Perf: Causal Case Study
- React Time Slicing
- Signals — Reactivity + UI
- Spotify Performance Profiling
- The difference between "On Load" and "Document Complete" in WebPageTest
- The most important problems in Web Perf
- Things I found in a slow React website today
- Tool: quantify what will make a real difference
- Use Map over object
- useCallback and useMemo: no perf effect
- Video Compression
- Web Performance at Slack
- React & Redux performance at Slack
- Performance Budget
UX
- ? Adaptive Loading - Improving web performance on slow devices
- ? Building The Web
- ? Design Principles For The Web
- ? Measuring User Perceived Performance to Prioritize Product Work
- ? Perceived Performance: The only kind that really matters
- ? Stephanie Walter on Cheating The UX When There Is Nothing More To Optimize
- ? The Layers of the Web
- A Bone to Pick with Skeleton Screens
- A Designer's Guide to Perceived Performance
- An experimental responsiveness metric
- Designing for Performance
- Hands On with the new Responsiveness Metrics
- How Much Faster is Fast Enough? User Perception of Latency & Latency Improvements in Direct and Indirect Touch
- How to Improve Perceived Performance in Mobile Apps
- Improving Perceived Performance
- Optimistic UI Patterns for Improved Perceived Performance
- Performance Design: Designing for the illusion of speed
- Performance perception: Correlation to RUM metrics
- Performance perception: How satisfied are Wikipedia users?
- Performance perception: The effect of late-loading banners
- Resilient web design
- The Art of UI Skeletons
- Towards an animation smoothness metric
- True Lies Of Optimistic User Interfaces
Web APIs
- Every Transition is a Page Transition?
- Speed Up Resource Loading with Priority Hints and fetchpriority
- Tracking CPU with Long Tasks API
- Web Performance APIs Appreciation Post
License
MIT © TK
