Recherche sur les performances Web
Ce référentiel est une compilation de ressources que j'ai consommées au fil du temps pour acquérir des connaissances et faire mes propres recherches sur les performances Web.
Table des matières
- Recherche de performance Web
- Table des matières
- Architecture
- Backend
- Browser
- Service Des travailleurs / travailleurs
- Rendre des moteurs
- Création d'outils
- Cache et de la mémoire
- de cas de
- carrière
- Blogs
- Blogs
- Blogs et Meetups
- Cours
- Podcasts
- Core Web Vitals
- Cumulative Cumulative Layout Shift (CLS)
Temps - de peinture complémentaire
- (CLS)
- Time
- Timets Toral CSSS Toral CSSS Time Timets Toral CSSS Toral CSSS Toral
- Toral
- CSS
- Infrastructure
- JavaScript
- Mesure Performances
- Performances Runtime Performances
- Devtools
- Comment
- les outils
- de référence de
métrique - Gestion de la mémoire
- Performance Performance
- Budget Budget Budget Outils
- Préfecture Préfecture
- Web Frameworks
- React
- READ Rendre le rendu
- Mesurer React
- Sustainability
- Tweets
- UX
- Web API
- Licence
Architecture
de licence - ? Modèles de rendu avancés
- ? Rendre sur le Web: implications de performances de l'architecture d'application
- ? Diffusez l'attente
- ? Streaming dans Next.js
- ? Ce qui se passe avant l'hydratation
- 2023 Web Framework Performance Rapport
- Une vision moderne de la coupe de la moutarde
- applique
- un chargement instantané avec le motif PRPL
- comparant
- les spas à SSG et SSR
- en mode concurrent et hydratation partielle dans
- une
- réaction
- à haute performance
- .
- Hydratation partielle dans React
- Instant Loading Applications Web avec une application
- Architecture d'
architecture Shell - Next.js: La feuille de triche ultime sur le rendu des pages
- Rendu Fundamentals
- Rendu sur le rendu du Web
: comment résumé de l'hydratation - des modèles de rendu
- statique
: - Théorie des épreuves de la théorie: la théorie des avantages est la théorie des Versus Théorie de la théorie de la théorie de la théorie de la théorie de la théorie de la théorie de la théorie de la théorie des Versus Versus dans la réaction des avantages à l'égard du serveur-Gitté:
Théorie - des Versus Versus Versus Versus
- Versus Versus Consigne dans la réaction
- des avantages à la fin du serveur:
- Théorie de la théorie:
Versus Théorie des Versus Théorie des Versu - Rendu sur le côté client rendant
- le cas de l'hydratation partielle (avec le prochain et le pré-préact)
- l'avenir (et le passé) du Web est le rendu de
- la compréhension de la compréhension progressive
- de la compréhension progressive dans les
- modèles de rendu Web de
Jamstack - Qu'est-ce que l'hydratation partielle et pourquoi tout le monde en parle?
- Pourquoi l'hydratation efficace dans les cadres JavaScript est-il si difficile
que
- tout ce que vous savez sur la latence est un mauvais
navigateur
- ? Une introduction au rendu du navigateur
- ? Contrôle du cache
- ? Cache vos polices, images et pages - déballage de la boîte de travail
- ? Chemin de rendu critique - Course accidentel sur les performances du Web
- ? Livrer 60 ips dans le navigateur
- ? Livrer 60 ips dans le navigateur
- ? Obtenez votre "tête" directement
- ? Sortir de la manière des utilisateurs: moins Jank avec les travailleurs du Web
- ? Comment nous avons utilisé WebAssembly pour accélérer notre application Web par 20X (étude de cas)
- ? Dans la boucle - setTimeout, micro tâches, requestanimationframe, requestIdleCallback
- ? Optimiser le chemin de rendu critique pour les sites Web mobiles instantanés
- ? Planification sur et hors du fil principal
- ? Le fil principal est surmené et sous-payé
- ? Il y a un proxy côté client (travailleur-service) dans votre navigateur
- ? Webassembly En tant qu'architecture multiplateforme
- 60 ips sur le rendu mobile
- accéléré dans Chrome
- accélérer JavaScript (dans le navigateur)
- Adaptative Servant à l'aide de JavaScript et de l'API d'informations réseau
- Ajouter les indications de priorité des modifications de la spécification HTML
- Spéciel en évitant
- Exploration
- de la mise en page ne bloque pas la ponceau de la ponceuse de travailleurs
de la ponceuse de travailleurs (Office - de la lutte contre les
- services de travail
Maisant - BROWNER PRELAGE Scanner
- Dynamic Page Content avec CloudFlare Workers
- Fast est bon, instantané est meilleur!
- Fixation de la mise en page battant dans le monde réel | Matt Andrews
- Frontend Web Performance: The Essentials 0
- Frontend Web Performance: The Essentials 1
- apprenez à connaître le profileur de performances de votre navigateur
- Comment fonctionne JavaScript: une comparaison avec WebAssembly + Pourquoi dans certains cas, il est préférable de l'utiliser sur JavaScript
- comment fonctionne
- JavaScript. Utilisez-les
- comment le navigateur rend une page Web? - Dom, CSSOM et rendu
- comment éliminer les ressources de blocage des rendements
- Comment nous réduisons 99% de notre JavaScript avec Qwik + Partytown
- améliorant les mesures de peinture en supprimant les préchargements inutilisés
- présentant
des performances - de manipulation de Dom Performing Performance Performing Performance
- Javascript
- de la taille du backle
- Pagespeed Insights | Développeurs Google
- Modern Multi-Process Architecture de navigateur
- Notes sur la façon dont les navigateurs fonctionnent
- des notes sur les notes d'interprètes JavaScript
- sur le profilage de mémoire JavaScript dans Google Chrome
- maintenant c'est ce que j'appelle le travailleur de service!
- Optimisation du contenu Web dans les eaux et sites Web sur
- les pages de prérenrences iOS dans Chrome pour les navigations de pages instantanées
- empêchant la «mise en page» |
- Profilage
- de page Wilson
et optimisation des performances d'exécution avec l'onglet Performance Devtools - Proxyant les demandes d'image cloudinary avec CloudFlare Workers
- Reflows & Reprews: CSS Performance Rendre votre JavaScript?
- Rendu: repeindre, reflow / relayout, Resyle / stoyan
- rendu: repeindre, reflow / relais,
- performances de défilement de
restyle - configurant les travailleurs de cloudflare pour l'optimisation des performances Web et tester
- les charges utiles HTML plus petites avec des travailleurs de service
- , alors vous avez entendu parler des informations sur le client et vous pensez avoir du temps, non? Mauvaise
- compréhension de reflow et repeindre dans le navigateur
- utilise des travailleurs Web pour exécuter JavaScript sur le fil principal du navigateur
- en utilisant les travailleurs CloudFlare pour alimenter le CSS externe que
- nous avons passé une semaine à faire du chargement des planches Trello extrêmement rapidement. Voici comment nous l'avons fait. - Fog Creek Blog
- Brows Browser Engineering
- Web
- Webkit Architecture
- What Forces Layout / Reflow
- Qu'est-ce qui rend le Web lent? Le goulot d'étranglement du navigateur
- Quand devriez-vous utiliser des travailleurs Web?
- WilsonPage / Fastdom
Service ouvriers / travailleurs
- ? Boostez les performances de votre site avec Partytown
- ? Accélérez votre site avec des travailleurs
- Recettes de travailleurs Cloudflare pour les tests de performances frontal,
- retirez le fil principal avec un travailleur Web en ligne: un exemple
- comment Partytown élimine le ballonnement du site Web des scripts tiers
- de l'introduction à la boîte de travail et aux travailleurs de la boîte de travail et
- à la mise en œuvre du Web pour les travailleurs du service et la recherche de services de recherche sur la performance
- des
- services de service
- de travail: Boîtes de travail sur les applications sur les performances Web
- ? Partytown
Rendring moteurs
- ? Moteurs JavaScript: les bonnes parties
- ? La vie d'un pixel
- ? Rendu Performances Inside Out
- Renderingng: Le nouveau moteur de rendu de Chrome
- tout le Web au maximum FPS: Comment Webrender se débarrasser de Jank
- pourquoi les développeurs Web doivent se soucier de l'interactivité
Créer des outils
- Webpack
- Shaking
- Webpack
- Treat
- en
- train de faire des modules JavaScript
- natif
- Création avec
- les conseils d'optimisation de Metro 13 Webpacks Vous devez savoir
- trouver et réparer des doublons dans WebPack avec InspectPack
- Comment améliorer WebPack Performances
- WebPerformance et compression
- Gardez WebPack rapidement: un guide de terrain pour mieux construire des performances
- Webpack Optimizations
- Awesome WebPack perf
cache
et mémoation
- ? Love Your Cache: Optimiser pour la deuxième
carrière
de chargement - Perfwork: The Job Board for Web Performance Enthusiasts
- Full Stack Software Engineer chez Mozilla Corp
- Senior Performance Engineer chez Mozilla Corp
- Ingénieur de performance Web (W / M / D) - Remote ou Hambourg chez BAGEND
- Software Engineer (L4) - Rendu et performance de l'interface utilisateur chez Netflix
Studies
- ? Performance de construction à long terme
- ? Core Web vitals: théorie et pratique
- ? Les leçons tirées de la surveillance des performances dans Chrome
- ? Optimiser les fenêtres de prévisualisation
- ? Inscription des performances dans les applications React & Transactional avec Redux
- ? Plusieurs composants sont rendues: Performance client à l'échelle de Slack-échelle
- 300 ms plus rapidement: réduisant
- l'étude de cas de la performance
- de l'application Web progressiste
de Wikipedia - une étude de cas de performance Tinder PWA
- Agrofy: une amélioration de 70% de LCP Correled to a 76% réduction de la transition de la qualité de la qualité de la qualité Aménagement de
- la qualité de la qualité de la qualité Aménagement de la qualité de la qualité de la qualité de la qualité de la qualité de la qualité de la qualité de la qualité de la qualité de la qualité
APORIEDE ABANDE - -ABANDE AU PARTICE AU PARTIE AU PARTIE AU PARTIE AU PARTIE AU PARTICE AU PARTIE AU PARTIE AU PARTIE AU PARTIE AU PARTIE AUX AUSS
Une - étude de cas de cas Renault Group
- YouTube sur le
groupe sur le groupe Renault - : Analyser
- l'étude de cas de performance de l'application de notion: analyse de la performance du site Walmart
- pour fabriquer une interface utilisateur de télévision à haute performance en utilisant React
- Economic Times Quest pour fixer INP
- améliorant les performances Web du New York Times avec React 18,
- du développement à des utilisateurs réels: comment créer un enregistrement de performance
sur le fraîcheur de la mise au point sur le cadre - de la performance
- de Slay
- Optimisation
- comment les optimisations CLS ont augmenté Yahoo! Les pages vues de Japan News par session par 15%
- comment
- Mercado
Libre a optimisé pour - Web Vitals
- (TBT / FID
- 33,13%
- comment Redbus a amélioré l'interaction de leur site Web à la peinture suivante (INP) et a augmenté les ventes de 7%
- sur la façon dont le citoyen du dimanche a amélioré les conversions en se concentrant sur les performances
- de la façon de convaincre votre client de se concentrer sur les performances du Web: une étude de cas
- comment Trendyol a réduit InP par 50%, ce qui a résulté une hausse de 1% sur le rythme de
- clic
- . A réalisé un score de 98 phares
- comment Wix a amélioré le TTFB avec 103 astuces précoces
- Hughesnet vs Tesla: une étude de cas dans les données sur le terrain par rapport aux données de laboratoire
- améliore l'expérience utilisateur! Comment nous gérons les interprètes de base sur notre Yahoo! Japan News Site Web
- Amélioration des performances du bundle JavaScript avec une amélioration du code
- Amélioration des performances Web de Smashing Magazine: un
- parcours d'étude de cas pour améliorer les performances de l'application React par 10x
- Faire plus rapidement de la page d'accueil de Github
- (Part 4)
- Rendre Instagram.com Faster: Part 1
- Faire Instagram.com Faster: Partie 2
- Fabriquant Instagram.com Fatram Faster: Part 3 - Cache d'abord ndt ndt
- NDTVEVEVE ACHEAV Amélioration de 55% de la LCP en optimisant pour Core Web Vitals
- Nikkei atteint un nouveau niveau de qualité et de performances avec la pwa de plusieurs pages
- de chargement de page et de navigation, il a obtenu plus de temps
- d'optimisation des informations sur le Web Core sur une application Next.js
Optimisation - de l'
- application pour un site
Web réactif - sur les performances rapides
du site - Web
- Italian
- Correction de performances sur les pages de liste Airbnb
- REI: FCP et LCP Améliorations
La - vitesse
- Impats, mais ce n'est pas tout
- Spotify Performance Profilage
- L'impact des performances Web
- Twitter Lite et High Performance React Progressive Appsvebo
- Treebo
AT SCALE - WEB DEV: Étude de cas
- Web
- Performance
- Studin 2 sur 3)
- Détection de régression des performances Web (partie 3 sur 3)
- Zillow: plus grand, plus rapide et plus engageant tandis que sur une communauté de la communauté à budget
Planet
Perfromance
- Performances
- Web Performances Slack
- Performances de travail
- Mobile
- Web
- High
Performance - Responsive
- Responsive Design
- HTTP / 2 Dans l'action
- Image Optimisation
- Série
- JPEG
- Performance Web Performance Performance
- Performance
- Optimis
- Performances
- utilisant webPageTest
- Web Browser Engineering
- Web Performance In Action
Blogs
- TK
- Harry Roberts
- Alex Russell
- Smashing Magazine - Performance
- Fershad Irani
- Modern Devtools
- Eugenia Zigisova
- Ivan Akulov
- Perf perf perfa
- Pollard
- Simon Hearne Hearne
- Medhat Dawoud
Conferences & Meeps
- Conffab - Performance
- New York Performance Group
- Perf Perf Perf Courts Conf
Courts
- ? Performance Web I: Otimizando o front-end
- ?? Performance Web II: Chemin critique, HTTP / 2 E CONSEILS DES RESSOURCES
- ?? React: Otimizando un
- navigateur de performances rendant l'optimisation
- JavaScript et le Dom
- Modern Devtools
- configurant Devtools pour les performances Testing
- the React Performance MasterClass
- Performance Masterclass
- Site Web Optimization
- Site Web
Podcasts Podcasts Podcasts
- Accourage avec des performances Web
- Vacteurs Waterfalls
- Planet Performance Pudcast
- PurePerformance
- Smashing Podcast
Core Web Vitals
- ? Demandez-moi n'importe quoi - Core Web Vitals
- ? Déchiffrer INP et Core Web Vitals
- ? Explorer l'avenir des Vitals du Web de base
- ? Un aperçu de Core Web Vitals de l'équipe de la plate-forme Chrome
- ? Les leçons tirées de la surveillance des performances dans Chrome (diapositives)
- ? Mesurer les vitaux du Web de base
- ? Optimiser les vitaux du Web de base
- ? Optimiser les vitaux du Web de base
- ? L'impact commercial des Vitals du Web de base
- ? Performances du site Web et Vitals Web de base
- ? Ce qui est nouveau dans le Web vitaux
- un flux de travail axé sur les performances basé sur Google Tools
- Un guide approfondi pour mesurer les vitaux Web de base
- analysant les vitaux Web avec
- les meilleures pratiques WebPageTestes pour mesurer les vitaux du Web dans le domaine
sur le terrain - , le compte à rebours
- du Web
Core - Vital Optimizations
est un processus Web - Vitals
- Mesurable Core Factor Vitals
- Coundown Vitals et OpenLeg-Sourt-Sourt Outil)
- Core Web Vitals Suiving via GA4, BIGQUERY et Google Data Studio
- CSS pour le Web Vitals
- CWV deviendra un facteur de classement de bureau en février 2022
- Debug Web Vitals dans le domaine
- définissant les principaux informations sur les métriques du Web Vitals Sélections Séquences
- d'élément: une véritable métrique pour les régner toutes?
- L'évaluation de l'expérience de la page pour un meilleur Web
- tout ce que nous savons sur les traits Web de base et le référencement
- de tout ce que nous savons sur les traits Web de base et
- les charges de page SEO plus rapides en utilisant le temps de réflexion avec les premiers conseils
- recherchés par la rétroaction: une réactivité expérimentale
- sur la main avec les nouvelles métriques de réactivité
- a-t-il des vitaux de base de base.
- Comment les architectures de spa affectent les vitaux du Web de base
- Comment créer un tableau de bord d'analyse compétitif pour les vitaux de base de Google Data Studio
- Comment
- obtenir
- votre
- page Core Web Vitals à partir de l'API Crux
- Comment améliorer les vitaux du Web Core
- Comment améliorer l'amélioration de l'
- amélioration
- du Web Vital
- L'expérience de la page met à jour
- plus de temps, d'outils et de détails sur l'expérience de la page Mise à jour de l'
- optimisation des traits Web de base sur les spas
- Optimisation des vitaux Web à l'aide de Lighthouse
- Nos top Core
- Web Vitals Recommandations pour 2023 Envoyez des commentaires à l'équipe Google Core
- Web Vitals
- simulant
- les utilisateurs réels dans le laboratoire pour déboguer les émissions
- de la réactivité
- pour
- un site
- Web de Do's and Don't of Core. Modèles
- Web Vitals Modèles Qu'est
- -ce qui se passe dans la fabrication d'une nouvelle métrique Web Vital
- Pourquoi les données de laboratoire et de terrain peuvent être différentes (et que faire à ce sujet)
Cumulative Dispose Shift (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 Shift: Measure et éviter l'instabilité visuelle
- de débogage de débogage décalage
- de débogage CLS
- plongeant dans le nouveau décalage de disposition cumulatif
- évoluant la métrique CLS
- comment
- j'ai supprimé le décalage de disposition du site Web à l'aide d'un script préalable
- comment résoudre les
- problèmes de
disposition de - disposition cumulative
- .
- Crèche avec la propriété CSS-Gutter de la barre de défilement
- Le guide presque complet sur la mise en page cumulative Shift
la plus grande peinture de contenu (LCP)
- ? Comment réparer la plus grande peinture contente
- ? Comment améliorer la plus grande peinture contenu pour une meilleure expérience de page
- ? Enquêter sur LCP: la plus grande peinture contente
- ? This Is Your LCP On Images
- Case Study Vodafone: A 31% improvement in LCP increased sales by 8%
- Dynamic LCP Priority: Learning from Past Visits
- How to optimize largest contentful paint (LCP) on client side
- Improve Largest Contentful Paint (LCP) by removing image transitions
- LCP(FE)
- Measuring Largest Contentful Paint
- Optimising Largest Contentful Paint
- Optimize Largest Contentful Paint
- Optimizing resource loading with the Fetch Priority API
- Priority Ashets and Optimizing LCP
- Tip - Utilisez FetchPriority = High pour charger votre image de héros LCP en
- comprenant plus tôt comment les navigateurs identifient l'élément LCP
- Que peut-il nous dire l'archive HTTP sur la plus grande peinture contenu?
Premier retard d'entrée (FID)
- First d'entrée de retard (FID)
- inactif jusqu'à ce que l'urgence
- d'améliorer la réactivité dans
l'interaction des entrées de texte à la peinture suivante (INP)
- ? Briser les longues tâches
- ? Débogage inp
- ? Creuser dans l'interaction à la peinture suivante
- ? Creuser dans l'interaction à la peinture suivante
- ? Comment améliorer l'interaction à la peinture suivante (INP)
- ? Comment optimiser la réactivité Web avec l'interaction à la peinture suivante
- ? Interaction à la peinture suivante et autres vitaux Web [Blinkon 16]
- ? Interaction à la peinture suivante révélée: 5 vérités qui accéléreront votre site
- ? Interaction à la peinture suivante
- ? Nouvelles informations sur le terrain pour le débogage de l'INP
- ? Optimiser INP: une plongée profonde
- ? L'état de réactivité sur le Web
- ? Comprendre et optimiser l'interaction à la peinture suivante (INP)
- 7 façons de minimiser
- l'analyse du travail des threads principaux des performances INP en utilisant les données de Rumvision du monde réel
- éviter les dispositions importantes et complexes et la disposition de disposition
- des tâches longues
- de la peinture suivante (INP) démystification de la peinture (INP)
- Demystification
- de l'inp: les nouveaux outils et les invitations accessibles
- trouvent des interactions lentes dans le domaine
- du domaine sur le site Web. Loaf + INP Breakdown
- Comment les cadres modernes fonctionnent-ils sur la nouvelle métrique INP
comment les grandes tailles de DOM affectent - -
- elles l'interactivité, et ce que vous pouvez faire à
- ce
- sujet
- comment
- améliorer
- l'
- INP
- .
- À la prochaine peinture (INP)
- Performance mobile InP: l'éléphant dans la pièce
- optimiser l'interaction à la peinture suivante
- optimiser les longues tâches
- en
- préparant l'interaction à la peinture suivante, un nouveau noyau Web vital
- réduisez la portée et la complexité des calculs de style
- :
- les pages catégories de la portée ont la pire réactivité (INP
- )
- La lutte pour le fil principal
- utilise des travailleurs Web pour exécuter JavaScript hors du fil principal du par discussion
- des experts en performance Web pour la maîtrise de l'interaction à la prochaine peinture
Temps de blocage total
- Temps de blocage total: un guide court et doux pour les utilisateurs plus heureux
CSS CSS
- Airbnb's Trip to Linaria
- Benchmarking the Performance of CSS @Property
- CSS-in-js to tailwind: 36%
- web
- vital CSS
- Chargement CSS - Performance Cheatheet
- Performance Comparaison des bibliothèques CSS-in-JS
- Purgecss
- réel CSS par rapport aux performances
- de la stratégie de classe CSS-in-JS réduisent la taille du bundle via la
- performance
- du sélecteur CSS à une lettre Performances
- pourquoi nous ruptures avec
fonds
de
CSS - ? Écureuil de police
- ? Glyphhanger
- ? Google Fonts
- ? Les polices variables
générales
- ? Des erreurs courantes qui dégradent les performances du frontend
- ? Plongeon profonde dans la performance tierce
- ? Démystifier l'outillage de vitesse
- ? Astuces de performances fantastiques et pourquoi les faisons-nous
- ? De la charge rapide au chargement instantané
- ? Améliorer les performances de la page dans les applications Web modernes
- ? Améliorer les performances de la page dans les applications Web modernes
- ? La conception inclusive est rapide par défaut
- ? Performances Web de niveau supérieur
- ? Speed Essentials: Techniques clés pour les sites Web rapides
- ? État de performance Web août 2022
- ? L'avenir brillant des performances Web
- ? Le chemin vers la performance
- ? La psychologie de la vitesse
- ? Le poids insupportable de JavaScript massif
- ? Top 10 des pièges de performance
- ? Optimisations de performances Web pour les conditions difficiles
- ? Webbundles - livraison JS sans compromis
- ? Quand JavaScript octets
- ? Quand JavaScript octets
- ? Pourquoi les performances sont difficiles à grande échelle
- 3Perf Guides
- 5 erreurs courantes communiquez-vous lors du suivi des performances
- Un modèle de maturité de gestion pour les performances
- A Matrice de maturité des performances
- Une théorie unifiée des performances Web
- Un modèle mental HTML-First
- est-il vos tâches longues javascript?
- Meilleures pratiques pour les étiquettes et les gestionnaires de balises
- construisant le DOM plus rapidement: analyse spéculative, asynchrone, différée et précharge
- de construction du Dom
les définitions - de l'outil de clignotement de peinture du chrome
plus rapide - des expériences de terminologie Web
- . Web. frameworks. avenir. moi.
- Temps de chargement rapide
- Temps de chargement rapides
- Fixation des régressions de performances Avant qu'ils ne se produisent
- des graphiques de flamme
du développement - aux
- vrais utilisateurs
- : comment créer une histoire de performances
de performances - sur les performances Web Front-end Liste 2021
- GANTRIE: Slack Front-Booting Frontend Framework
- pour démarrer avec les performances du Web
- Comment
- éliminer les ressources de blocage des rendements:
- Performances de
- réaction Reaging Performances Performances Performances Performances Performances Performances Performances
- Performances
- Dee Need Rust and WasM pour accélérer votre JS
- sur la surveillance de vos principales mesures
de - la
communauté du - bundle
- Spa pour le chargement
- de la communauté de performances Web
Optimiser la taille du bundle Spa pour accélérer - les petits pages de
- script
, - les performances
- Web
- suivantes
- du chargement des applications.
- Le guide ultime pour
- optimiser
- JavaScript
- pour
- les
- charges
- rapides
- des
- pages
- .
- Pourquoi votre JavaScript en cache est toujours lent et entraîne des frais de performance,
pourquoi il est important
- de mesurer la consommation d'énergie de votre application frontale
- relative la vitesse du site et les mesures commerciales
- Qu'est-ce que la vitesse du site et pourquoi devrais-je s'en soucier?
Pourquoi le référentiel d'images
- pour collecter les meilleures pratiques pour les images Web
- ? Une mise à jour WebP
- ? Temps de chargement plus rapides avec des images AVIF | Atelier
- ? Compression d'image en profondeur
- ? Optimisation d'image | Performance.now () 2018
- ? Les images s'éteignent à la vitesse de Jamstack
- ? JPEG 'Files' & Color (JPEG PT1)
- ? JPEG DCT, transformée de cosinus discrète (JPEG PT2)
- ? JPEG XL: une mise à jour
- ? Image parfaite
- ? Images réactives pour le Web
- ? Le format d'image AVIF
- ? Webp, avif & More: Statistiques d'adoption d'images
- puis-je utiliser avif
- puis-je utiliser jpeg-xl
- puis-je utiliser
- des images parfaites de l'image Webp avec l'élément
<img> moderne - réduit les tailles d'image en supprimant
- les images réactives des métadonnées bien faites: un guide de Et srcset
- Le guide ultime de l'optimisation de l'image
- Que fait réellement l'attribut de décodage d'image?
Outils d'images
- ? Cloudinary
- ? Compress-or-die
- ? ImageOptim
- ? Optimage
- ? Squoosh
- ? WebPoniser
l'infrastructure
- ? Performances mobiles de la radio UP: 4G Architecture et ses implications
- Cloud Computing sans conteneurs
- Networks de livraison de contenu (CDN)
JavaScript
- ? Javascript multicore: passé, présent et futur
13 conseils pour écrire - des conseils d'optimisation
- JavaScript 17 plus rapidement optimisés
17 pour savoir en 2021 - comment fonctionne JavaScript: un aperçu du moteur, de l'exécution et de la pile d'appels
- comment
- JavaScript fonctionne Sur la façon d'écrire un code optimisé
- comment fonctionne JavaScript: Management de la mémoire + comment gérer 4 fuites de mémoire communes
- JavaScript des techniques d'optimisation du compilateur - uniquement pour les experts
mesurant les performances
- ? Analyser et améliorer les performances Web à l'aide de Devtools et WebPageTest
- ? Création d'outils d'alerte de performances
- ? De la milliseconde à des millions: les chiffres conduisant le web perf
- ? Comment donner un sens aux véritables métriques des performances des utilisateurs (RUM)
- ? Comment est vraiment l'UX sur le Web?
- ? Transformons l'analyse réelle des données des utilisateurs en science
- ? Mesurer les performances avec SpeedCurve et WPT
- ? Mesurer les performances réelles de l'utilisateur dans le navigateur
- ? Observabilité pour le web perf
- ? Un numéro, plusieurs mesures
- ? Performance de profilage avec Harry Roberts
- ? Performances Web Audit
- un guide étape par étape pour surveiller la concurrence avec le rapport Chrome UX
- Une introduction aux archives du rhum
- Analyser les performances d'exécution
- des performances d'analyse comparative, le profilage et l'optimisation des bibliothèques JavaScript
- complètes pour comprendre et mesurer les performances de votre site
- Web Web Vitalsboard sur Google Analytics
Créer une vitesse à laquelle votre site devrait être - le score
- de performance
- de votre site?
- Comment lire un tableau de vue de connexion WebPageTest
- Comment lire un tableau de vue WebPageTest Waterfall
- Comment utiliser Google Crux pour analyser et comparer les performances des frameworks JS
- identifiant, audit et discutez des tiers
- introduisant le rail: un modèle centré sur l'utilisateur pour les performances,
- c'est le sens des tableaux de flammes dans les performances de la performance By Exemple
- Mesurez sur les performances, la mesure des performances des performances de Wikicedia visiteurs 'visiteurs
- ' Disvices 'Disvices' Disvices 'Mesure les performances de la performance des performances de Wikicedia visiteurs' visiteurs '' Disvices 'Disvices' Disvices 'Disvices' Performance Performance of the Washing of
Performances of Wikiced visitors 'visiteurs - ' 'Disvices' Mesure les performances. rapide?
- Mon flux de travail d'audit de travail
- de travail du bruit de rhum
- réagit
- des temps de réponse à l'optimisation du profilage des performances: les 3 limites importantes
- me montrent l'argent: justifier les améliorations des performances à l'aide de Google Analytics
- Start Performance Tests Test de la barre d'adresse de votre navigateur
- Test
- de stress du site
- Test des performances Une page Web avec Pagespeed Insights
- Test de la troisième partie de la troisième partie
- de
- l'armée de la
- base
Swiss Army - Les scores
- visualisent vos ressources avec un
- calendrier de performances Web Treemap Tool Free Rum Rum
- Pourquoi les données Crux sont-elles différentes de mes données de rhum?
- Wikipedia's Worldwide Web: CPU Benchmark
Runtime Performance
- ? Test de performance à l'aide du dramaturge
- ? Une collection d'outils de performance
Devtools
- ? Chrome Devtools: Onglet Performance
- ? Explorer les performances frontales du site Web National Rail avec Chrome Devtools
- ? Améliorer les performances de la page avec Chrome Devtools
- ? Faire des images Charger paresseux avec Chrome Devtools
- ? Masterclass de gestion de la mémoire
- ? Exécuter un profil de performance sur la zone de recherche YouTube
- ? Comprendre les performances de la peinture avec Chrome Devtools
- Comprehensive Guide de l'analyse des performances JavaScript à l'aide de Chrome Devtools
- CPU Flame Graphs
- Network Brottling in Chrome Devtools
Comment métrique
- des visualisations de données plus rapides
- Comment métrique
- comment lire un histogramme de rhum
- synthétique vs surveillance réelle des utilisateurs
- Qu'est-ce que la surveillance réelle de l'utilisateur? Rum a expliqué
la référence
- ? Aventures en microbanque
- ? react-benchmark
- ? Tachymètre
- ? Tinybench
Mesure des outils de performances
- Web Recettes de performances avec marionnettiste
- ? Boomerang
- ? Perfsee: un ensemble d'outils pour mesurer et déboguer les performances des applications de frontend
- ? SpeedScope
- ? Treo
Memory Management
- Un cours intensif dans la gestion de la mémoire
- expérimente le
budget de performance
du collecteur de déchets JavaScript - ? Core Web Vitals - Mesurez ce qui compte
- ? Le coût de
- l'outil de clignotement de peinture de JavaScript Chrome
- opérationnalisant les performances avec les budgets de performance
- Optimisant
- les budgets de performance des performances de démarrage 101
- Budgets de performance,
- conception de manière pragmatique sur un budget
- établissant un budget de performance
- Démarrer la budgétisation des performances
- Le coût de
- JavaScript
- dans
les outils budgétaires de performance de la performance de la performance
des seules seuils - ? Calories du navigateur
- ? Calculateur de budget de performance
- ? Calculatrice du budget de performance
Prédécture
- ? L'art de la pré-feste prédictive
<link rel=”prefetch/preload”> dans webpack- Instant et cohérent charge de page par précharge
- , pré-feste et priorités en chrome
- accélérer les navigations à prochaine pages avec
- des modules de pré-feste / préchargement de la préfecture
- ?
Outils de prélecture
Les charges de page ultérieures plus rapides en préfectant les liens In-Viewport pendant les frameworks Web
réagissent
- ? Dom en tant que citoyen de deuxième classe
- ? Réagir 18 concurrence, expliquée
- ? React Performance Debugging Masterclass
- 21 Techniques d'optimisation des performances pour React Apps
- Death par mille USECALLBACKS
- Comment réagit-elle que fonctionne à l'intérieur?
- Comment rédiger des applications React Performan avec contexte
- Comment écrire du code réactif Perforvant: Rules, modèles, faire et ne pas faire
- comment
- écrire des
performances de chargement de la page - Perforvant
- Performance
- avec
- des performances mobiles de Chunking Granular de
- Next.js. Chargement
- dans
- la
- concurrence
- réactive
- de
- réaction
- progressive
- .
-
- Eslint-Plugin-React-Perf
React Rendering
- ? Une introduction de dessins animés à la fibre
- ? Récupération des données avec les composants React Server
- ? Plongée profonde sur la réaction simultanée
- ? Inside Fibre: L'aperçu approfondi que vous vouliez
- ? React Fibre Deep Dive
- Entrelante EXPLICATION DE L'ÉTAT ET LES PROPS MISE À JOUR DANS REACT
- DU FIBRE À l'intérieur: Présentation approfondie du nouvel algorithme de réconciliation dans React
- Leactez l'algorithme de réconciliation React REACT
- REACT REACT REACT
- READ-READ-READERS: Tout, tout, à la fois, tout à fait
réactif - réagir
- le serveur
d'ordre de réaction - .
- Signal Boosting
- The future of rendering in React
- Why React Re-Renders
Measuring React
- ? 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
