• Accueil
  • Info
  • Publicité
  • Privacy & Policy
  • Nous Contacter
No Result
View All Result
Technique de pointe
  • Actualité
  • Technologies
  • Jeu vidéo
  • Mobile
  • Astuces
  • HTML5 / CSS
  • Java Script
  • PHP
  • Article Sponsorisé
  • Astuces
  • Jeu vidéo
  • Nous Contacter
MYCAMER
  • Actualité
  • Mobile
  • Jeu vidéo
    Qui est Todd Grisham ?  L’annonceur et la voix du jeu de boxe incontesté continuent de monter de la WWE, ESPN, DAZN

    Qui est Todd Grisham ? L’annonceur et la voix du jeu de boxe incontesté continuent de monter de la WWE, ESPN, DAZN

    Le sketch Mario SNL de Pedro Pascal est l’adaptation du jeu vidéo dont nous avons plus que jamais besoin

    Le sketch Mario SNL de Pedro Pascal est l’adaptation du jeu vidéo dont nous avons plus que jamais besoin

    Mario Kart Sketch de Pedro Pascal est votre nouvelle série préférée

    Mario Kart Sketch de Pedro Pascal est votre nouvelle série préférée

    Microsoft va ruiner Master Chief entre ‘Halo Infinite’ et Paramount si ce n’est pas prudent

    Microsoft va ruiner Master Chief entre ‘Halo Infinite’ et Paramount si ce n’est pas prudent

    Concentrez votre énergie : les stocks de jeux vidéo en 2023

    Concentrez votre énergie : les stocks de jeux vidéo en 2023

    Quelle est la durée idéale d’un jeu vidéo ?  –

    Quelle est la durée idéale d’un jeu vidéo ? –

    Une plateforme de jeu vidéo pour améliorer la fonction exécutive

    Une plateforme de jeu vidéo pour améliorer la fonction exécutive

    10 tropes de jeux vidéo qui n’ont aucun sens

    10 tropes de jeux vidéo qui n’ont aucun sens

    Dead Space Remake – Dans le vide (Chapitre 7)

    Dead Space Remake – Dans le vide (Chapitre 7)

  • Developpement web
    • All
    • Java Script
    • Language HTML5
    Comment ajouter un sélecteur de couleurs à votre application React

    Comment ajouter un sélecteur de couleurs à votre application React

    L’industrie écossaise du jeu vidéo renforce le potentiel des jeux

    Rencontrez les régulateurs : les normes de sécurité pour les enfants auront de nouveaux régulateurs à partir de 2023

    Wesfarmers supprime 100 emplois chez Catch

    Wesfarmers supprime 100 emplois chez Catch

    Arrêtez d’appeler les langages de programmation HTML et CSS |  de Christophe Lam |  L’Albatros FOSS |  février 2023

    Arrêtez d’appeler les langages de programmation HTML et CSS | de Christophe Lam | L’Albatros FOSS | février 2023

    Vous voulez devenir UI/UX Designer ?  Consulter la liste des stages

    Vous voulez devenir UI/UX Designer ? Consulter la liste des stages

    Techids : un événement inspirant pour les jeunes passionnés de technologie

    Techids : un événement inspirant pour les jeunes passionnés de technologie

    Un couple ouvre un centre d’apprentissage Code Wiz à FishHawk Ranch

    Un couple ouvre un centre d’apprentissage Code Wiz à FishHawk Ranch

    Codecademy élargit ses offres avec des fonctionnalités améliorées pour les demandeurs d’emploi, un nouveau produit pour les upskillers

    Codecademy élargit ses offres avec des fonctionnalités améliorées pour les demandeurs d’emploi, un nouveau produit pour les upskillers

    L’Etat demande au centre de livrer 14 bateaux agréés pour la sécurité côtière |  Nouvelles de Bombay

    L’Etat demande au centre de livrer 14 bateaux agréés pour la sécurité côtière | Nouvelles de Bombay

  • Astuces
    5 articles que vous pouvez trouver en solde pour la Saint-Valentin

    5 articles que vous pouvez trouver en solde pour la Saint-Valentin

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    4 villes en plein essor en 2023 à considérer pour une vie abordable

    4 villes en plein essor en 2023 à considérer pour une vie abordable

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    10 meilleurs sites Web GPL pour télécharger des plugins de thèmes GPL 2023

    10 meilleurs sites Web GPL pour télécharger des plugins de thèmes GPL 2023

    Ukraine à J+341 : Killnet frappe les hôpitaux américains.

    Ukraine à J+341 : Killnet frappe les hôpitaux américains.

    6 Best WordPress SEO Plugins for 2023

    6 Best WordPress SEO Plugins for 2023

    Amorcer un document Quarto {ojs} avec un bloc-notes observable

    WordPress Password Protection – A Complete Guide

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

  • Nous contacter
No Result
View All Result
MYCAMER
No Result
View All Result
Home Developpement web Language HTML5

Premier délai d’entrée – Une explication simple

Caleb by Caleb
mars 13, 2021
in Language HTML5
0
0
Premier délai d’entrée – Une explication simple
333
SHARES
2k
VIEWS
Share on FacebookShare on TwitterRedditLinkedinWhatsappTelegram


  1. Définition du premier délai d’entrée
  2. La cause du premier retard d’entrée
  3. Comment corriger la latence d’entrée
  4. Pourquoi les navigateurs ne répondent plus
  5. Ne perdez pas de sommeil avec un code tiers
  6. Impact de JavaScript sur le premier délai d’entrée
  7. Attributs Defer et Async
  8. La latence d’entrée est différente pour tous les utilisateurs
  9. Pourquoi la plupart des sites échouent au FID
  10. Il est maintenant temps de corriger le premier délai d’entrée
  11. Citations

Le premier délai d’entrée (FID) est une mesure de l’expérience utilisateur que Google a introduite et qu’elle utilisera bientôt comme petit facteur de classement. Cet article offre un aperçu facile à comprendre de FID afin d’aider à donner un sens au sujet.

Le premier délai d’entrée est plus que d’essayer de plaire à Google. Les améliorations des performances du site entraînent généralement une augmentation des ventes, des revenus publicitaires et des prospects.

Définition du premier délai d’entrée

Le FID est la mesure du temps nécessaire à un navigateur pour répondre à la première interaction d’un visiteur du site avec le site pendant le chargement du site. Ceci est parfois appelé latence d’entrée.

Une interaction peut être en appuyant sur un bouton, un lien ou une touche et la réponse donnée en réponse. Les zones de saisie de texte, les listes déroulantes et les cases à cocher sont d’autres types de points d’interaction que FID mesurera.

Publicité

Continuer la lecture ci-dessous

Le défilement ou le zoom ne comptent pas comme des interactions car aucune réponse n’est attendue du site lui-même.

L’objectif de FID est de mesurer la réactivité d’un site pendant son chargement.

La cause du premier retard d’entrée

Le premier délai d’entrée est généralement causé par des images et des scripts qui se téléchargent de manière désordonnée. Ce codage désordonné provoque une pause excessive du téléchargement de la page Web, puis un démarrage puis une pause. Cela provoque un comportement insensible pour les visiteurs du site qui tentent d’interagir avec la page Web.

C’est comme un embouteillage provoqué par un free for all où il n’y a pas de feux de circulation, ce qui provoque des accidents et des ralentissements. Le réparer, c’est mettre de l’ordre dans le trafic.

Google décrit le cause de latence d’entrée comme ça:

«En général, le retard d’entrée (c’est-à-dire la latence d’entrée) se produit parce que le thread principal du navigateur est occupé à faire autre chose, il ne peut donc pas (encore) répondre à l’utilisateur. Cela peut souvent se produire parce que le navigateur est occupé à analyser et à exécuter un gros fichier JavaScript chargé par votre application. Pendant ce temps, il ne peut pas exécuter d’écouteurs d’événements car le JavaScript qu’il charge peut lui dire de faire autre chose. »

Publicité

Continuer la lecture ci-dessous

Comment corriger la latence d’entrée

Étant donné que la cause première du premier délai d’entrée est le téléchargement désorganisé des scripts et des images, le moyen de résoudre le problème est de mettre de l’ordre dans la façon dont ces scripts et images sont présentés au navigateur pour téléchargement.

La résolution du problème du FID consiste généralement à utiliser des attributs HTML pour contrôler le téléchargement des scripts, à optimiser les images (le HTML et les images) et à omettre judicieusement les scripts inutiles. L’objectif est d’optimiser ce qui est téléchargé pour éliminer la pause typique et démarrer le téléchargement de pages Web non organisées.

Pourquoi les navigateurs ne répondent plus

Les navigateurs sont des logiciels qui effectuent des tâches pour afficher une page Web. Les tâches consistent à télécharger du code, des images, des polices, des informations de style et des scripts, puis à exécuter (exécuter) les scripts et à créer la page Web selon les instructions HTML.

Ce processus s’appelle le rendu. Le mot rendre signifie faire et c’est ce que fait un navigateur en assemblant le code et les images pour rendre une page Web.

Les tâches de rendu individuelles sont appelées threads. Le mot thread est l’abréviation de «thread d’exécution», ce qui signifie une séquence d’action individuelle (dans ce cas, les nombreuses tâches individuelles effectuées pour rendre une page Web).

Dans un navigateur, il existe un thread qui s’appelle un thread principal. Le fil principal est responsable de la création (du rendu) de la page Web que voit un visiteur du site.

Le fil principal peut être visualisé comme une autoroute dans laquelle les voitures symbolisent les images et les scripts qui sont téléchargés et exécutés lorsqu’une personne visite un site Web.

Certains codes sont volumineux et lents. Cela provoque l’arrêt des autres tâches et attend que le code volumineux et lent quitte l’autoroute (fin du téléchargement et de l’exécution).

Le but est de coder la page Web d’une manière qui optimise quel code est téléchargé en premier, lorsque le code est exécuté, d’une manière ordonnée afin que la page Web se télécharge de la manière la plus rapide possible.

Publicité

Continuer la lecture ci-dessous

Ne perdez pas de sommeil avec un code tiers

En ce qui concerne les Web Vitals de base et en particulier avec le premier délai d’entrée, il existe un code sur lequel il n’y a pas grand-chose à faire. Cependant, c’est probablement le cas de vos concurrents.

Par exemple, si votre entreprise dépend de Google AdSense (un gros script de blocage de rendu), le problème sera le même pour votre concurrent.

Dans de nombreux cas, il peut suffire de faire de votre mieux car vos concurrents peuvent ne pas être en mesure de faire mieux non plus.

Donc, dans ces cas, il est préférable de prendre vos gains là où vous pouvez les trouver et de ne pas transpirer les pertes où vous ne pouvez pas faire de changement.

Impact de JavaScript sur le premier délai d’entrée

JavaScript est comme un petit moteur qui fait bouger les choses. Lorsqu’un nom est entré dans un formulaire, un code JavaScript peut être présent pour s’assurer que le prénom et le nom sont entrés. Lorsqu’un bouton est enfoncé, un JavaScript peut être là pour indiquer au navigateur de générer un message de remerciement dans une fenêtre contextuelle.

Publicité

Continuer la lecture ci-dessous

Le problème avec JavaScript est qu’il doit non seulement télécharger mais aussi s’exécuter (exécuter). Ce sont donc deux choses qui contribuent à la latence d’entrée.

Si un gros fichier JavaScript est situé près du haut de la page, alors ce fichier va empêcher le reste de la page en dessous de s’afficher (devenir visible et interactif) jusqu’à ce que le téléchargement et l’exécution du script soient terminés.

C’est ce qu’on appelle le blocage de la page.

La solution évidente est de déplacer ces types de scripts du haut de la page et de les placer en bas de la page afin qu’ils n’interfèrent pas avec tous les autres éléments de la page en attente de rendu.

Mais cela peut être un problème si, par exemple, il est placé à la fin d’une très longue page Web. La raison en est qu’une fois que la grande page est chargée et que l’utilisateur est prêt à interagir avec elle, le navigateur signalera toujours qu’elle est en cours de téléchargement (car le gros fichier JavaScript est en retard à la fin). La page peut se télécharger plus rapidement mais se bloquer en attendant que le JavaScript s’exécute.

Publicité

Continuer la lecture ci-dessous

Il y a une solution pour ça!

Attributs Defer et Async

Les attributs HTML Defer et Async sont comme des signaux de trafic qui contrôlent le début et l’arrêt du téléchargement et de l’exécution de JavaScript.

Un attribut HTML est quelque chose qui transforme un élément HTML, un peu comme l’extension de l’objectif ou du comportement de l’élément.

C’est comme si vous appreniez une compétence, cette compétence devient un attribut de qui vous êtes.

Dans ce cas, les attributs Defer et Async modifient le comportement d’un fichier JavaScript.

L’un des changements importants est qu’ils indiquent au navigateur de ne pas interrompre le JavaScript. Ces attributs indiquent au navigateur de maintenir le fil de discussion principal.

Les fichiers JavaScript seront téléchargés et traités indépendamment du fil de discussion principal, permettant au navigateur de rendre la page Web plus rapide.

Attribut asynchrone

Les fichiers JavaScript avec l’attribut Async seront téléchargés puis exécutés dès qu’ils seront téléchargés. Quand il commence à s’exécuter, c’est le moment où le fichier JavaScript bloque le thread principal.

Publicité

Continuer la lecture ci-dessous

Normalement, le fichier bloque le thread principal lorsqu’il commence à se télécharger. Mais pas avec l’attribut async.

C’est ce qu’on appelle un téléchargement asynchrone, où il se télécharge indépendamment du thread principal et en parallèle avec lui.

L’attribut async est utile pour les fichiers JavaScript tiers tels que la publicité et le partage social, des fichiers dans lesquels l’ordre dans lequel ils sont exécutés n’a pas d’importance.

Attribut différé

Fichiers JavaScript avec le “reporterL’attribut ”sera également téléchargé de manière asynchrone.

Mais le fichier JavaScript différé ne s’exécutera pas tant que la page entière n’aura pas été téléchargée et rendue. Les scripts différés s’exécutent également dans l’ordre dans lequel ils se trouvent sur une page Web.

Les scripts avec l’attribut defer sont utiles pour les fichiers JavaScript qui dépendent des éléments de page en cours de chargement et du moment où l’ordre dans lequel ils sont exécutés est important.

En général, utilisez l’attribut defer pour les scripts qui ne sont pas essentiels au rendu de la page elle-même.

La latence d’entrée est différente pour tous les utilisateurs

Il est important de savoir que les scores du premier délai d’entrée sont variables et incohérents. Les scores varient d’un visiteur à l’autre.

Publicité

Continuer la lecture ci-dessous

La variance des scores est inévitable car le score dépend des interactions propres à l’individu visitant un site.

Certains visiteurs peuvent être distraits et ne pas interagir jusqu’à un moment où tous les actifs sont chargés et prêts à être utilisés.

Voici comment Google le décrit:

«Tous les utilisateurs n’interagiront pas avec votre site à chaque visite. Et toutes les interactions ne sont pas pertinentes pour le FID…

De plus, les premières interactions de certains utilisateurs se produiront à des moments difficiles (lorsque le thread principal est occupé pendant une période prolongée), et les premières interactions de certains utilisateurs auront lieu à de bons moments (lorsque le thread principal est complètement inactif).

Cela signifie que certains utilisateurs n’auront aucune valeur FID, certains utilisateurs auront des valeurs FID faibles et certains utilisateurs auront probablement des valeurs FID élevées. »

Pourquoi la plupart des sites échouent au FID

Malheureusement, de nombreux systèmes de gestion de contenu, thèmes et plugins n’ont pas été conçus pour se conformer à cette métrique relativement nouvelle.
C’est la raison pour laquelle tant d’éditeurs sont consternés de découvrir que leurs sites ne passent pas le test du premier délai d’entrée.

Publicité

Continuer la lecture ci-dessous

Mais c’est quelque chose qui est en train de changer à mesure que la communauté de développement de logiciels Web répond aux demandes de normes de codage différentes de la communauté de l’édition.

Et ce n’est pas que les développeurs de logiciels qui créent des systèmes de gestion de contenu sont responsables de la production de produits qui ne sont pas à la hauteur de ces mesures.

Par exemple, WordPress a corrigé une lacune de l’éditeur de site Web Gutenberg qui lui faisait moins bien marquer qu’il ne le pouvait.

Gutenberg est un moyen visuel de créer des sites en utilisant l’interface ou la métaphore des blocs. Il y a un bloc de widgets, un bloc de formulaire de contact et un bloc de pied de page, etc.

Ainsi, le processus de création d’une page Web est plus visuel et se fait à travers la métaphore des blocs de construction, construisant littéralement une page avec différents blocs.

Il existe différents types de blocs qui se présentent et se comportent de différentes manières. Chaque bloc individuel a un code de style (CSS) correspondant, dont une grande partie est spécifique et unique à ce bloc individuel.

Publicité

Continuer la lecture ci-dessous

La méthode standard de codage de ces styles consiste à créer une feuille de style contenant les styles propres à chaque bloc. Il est logique de le faire de cette façon car vous avez un emplacement central où tout le code spécifique aux blocs existe.

Le résultat est que sur une page qui pourrait comprendre (disons) vingt blocs, WordPress chargerait les styles de ces blocs ainsi que tous les autres blocs qui ne sont pas utilisés.

Avant Core Web Vitals (CWV), qui était considéré comme le moyen standard de créer un package CSS.

Après l’introduction de Core Web Vitals, cette pratique est considérée comme un gonflement du code.

Ce n’est pas un reproche contre les développeurs WordPress. Ils ont fait un travail fantastique.

Ceci n’est que le reflet de la rapidité avec laquelle les normes changeantes peuvent rencontrer un goulot d’étranglement au stade du développement logiciel avant d’être intégrées dans l’écosystème de codage.

Nous avons vécu la même chose avec la transition vers la conception Web mobile first.

Publicité

Continuer la lecture ci-dessous

Gutenberg 10.1 Amélioration des performances

WordPress Gutenberg 10.1 a introduit une manière améliorée de charger les styles en ne chargeant que les styles nécessaires et en ne chargeant pas les styles de bloc qui n’allaient pas être utilisés.

C’est une énorme victoire pour WordPress, les éditeurs qui comptent sur WordPress et bien sûr les utilisateurs qui visitent les sites créés avec WordPress.

Il est maintenant temps de corriger le premier délai d’entrée

Je pense que de plus en plus de développeurs de logiciels responsables du CMS, des thèmes et des plugins passeront à des pratiques de codage conviviales pour le premier délai d’entrée.

Mais jusqu’à ce que cela se produise, il incombe à l’éditeur de prendre des mesures pour améliorer le délai de première entrée. Le comprendre est la première étape.

Citations

Rapport d’expérience utilisateur Chrome

PageSpeed ​​Insights

Phare des outils de développement Chrome

Google Search Console (rapport Core Web Vitals)

Optimiser le premier délai d’entrée

Premier délai d’entrée

Mesures de performances centrées sur l’utilisateur

Script GitHub pour mesurer les valeurs vitales du Web principal



— to www.searchenginejournal.com

Get real time update about this post categories directly on your device, subscribe now.

Unsubscribe
Caleb

Caleb

Stay Connected

  • 87k Followers
  • 172k Subscribers

Articles populaires

  • 10 problèmes courants de l’iPhone 13 et comment les résoudre

    10 problèmes courants de l’iPhone 13 et comment les résoudre

    5608 shares
    Share 2243 Tweet 1402
  • Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

    1710 shares
    Share 684 Tweet 428
  • GOLDEN FARM BIZ: earn unlimited money online

    347 shares
    Share 139 Tweet 87
  • Étapes pour installer MySQL sur Ubuntu 22.04 LTS Jammy Linux

    515 shares
    Share 206 Tweet 129
  • Comment réparer le décalage d’Instagram sur iPhone et Android

    712 shares
    Share 285 Tweet 178

Follow Our Page

Follow Us

    Go to the Customizer > JNews : Social, Like & View > Instagram Feed Setting, to connect your Instagram account.
Facebook Twitter Youtube Vimeo Instagram

Informer et distraire les internautes en toute indépendance avec un grand souci de la qualité et de contenu.

Category

  • Actualité
  • Article Sponsorisé
  • Astuces
  • Developpement web
  • Featured
  • Java Script
  • Jeu vidéo
  • Language HTML5
  • Mobile
  • portrait
  • Technologies
  • Uncategorized

Recent News

Le portrait de Margaret Thatcher sauvé des attentes de vente des pourboires

Le portrait de Margaret Thatcher sauvé des attentes de vente des pourboires

février 7, 2023
La nouvelle chaire de recherche en soins infirmiers a de grandes aspirations pour la technologie des soins de santé – USC News & Events

La nouvelle chaire de recherche en soins infirmiers a de grandes aspirations pour la technologie des soins de santé – USC News & Events

février 7, 2023

© 2023 mycamer.net - Technologies de pointe & magazine Hébergé par World-reseller.com.

No Result
View All Result
  • Actualité
  • Mobile
  • Jeu vidéo
  • Developpement web
  • Astuces
  • Nous contacter

© 2023 mycamer.net - Technologies de pointe & magazine Hébergé par World-reseller.com.

Welcome Back!

Sign In with Facebook
Sign In with Google
Sign In with Linked In
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
fr French
ar Arabiczh-CN Chinese (Simplified)en Englishfr Frenchde Germanit Italianru Russianes Spanish

Add New Playlist

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.