Actualités hebdomadaires de la plate-forme: décalages de mise en page, vidéos à haut bitrate bloqué, captures d'écran dans Firefox

Les nouvelles de la plate-forme Web de cette semaine couvrent le débogage de la mise en page, les problèmes vidéo à haut bitrate et une nouvelle fonctionnalité de capture d'écran Firefox. Plongeons-nous!

Diagnostic des changements de mise en page avec webpagest

WebPageTest aide désormais à identifier les déplacements de mise en page pendant le chargement de la page. Voici comment:

Étape 1: Ajouter une métrique personnalisée

Dans les "paramètres avancés" de WebPageTest (onglet personnalisé ), collez ce code dans le champ "Metrics personnalisés". Assurez-vous que Chrome est sélectionné comme navigateur.

 <code>[LayoutShifts] return new Promise(resolve => { new PerformanceObserver(list => { resolve(JSON.stringify(list.getEntries().filter(entry => !entry.hadRecentInput))); }).observe({type: "layout-shift", buffered: true}); });</code>

Étape 2: Examiner les résultats

Après le test, vérifiez les entrées "LayoutShifts" sur la page "Métriques personnalisées" (liée à partir de la section "Détails").

Étape 3: Analyse du film

Utilisez les données "Starmtime" et "Value" pour localiser les changements dans le film de film WebPageTest et identifier leurs causes.

(via Rick Viscomi)

Vidéos de débit élevés et lecture 3G

Les vidéos auto-hébergées avec des débits supérieurs à 1,5 Mbps peuvent provoquer des stands de lecture sur les réseaux 3G. Des outils comme FFMPEG et StreamClarity.com peuvent aider à surveiller le débit binaire. Une étude a révélé que plus de la moitié des vidéos ont des débits supérieurs à des vitesses de téléchargement de 3G, conduisant à des retards de lecture et à des stands.

(via Doug Sillars)

Commande de capture d'écran améliorée de Firefox

Firefox Devtools propose désormais une commande puissante :screenshot . Il reflète la fonctionnalité de Chrome (élément, fenêtre, captures d'écran pleine page), mais ajoute un rapport de pixel de périphérique et des options de retard.

 <code>// Full-page screenshot at 2x DPR :screenshot --fullpage --dpr 2 // Viewport screenshot with 5-second delay :screenshot --delay 5</code>

(via reddit)

Pour plus de nouvelles sur la plate-forme Web, abonnez-vous à la newsletter e-mail hebdomadaire du dimanche, livrée tous les lundis matin.

Actualités de la plate-forme Web: numéro du dimanche →

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!