IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Chroniqueur Actualités

    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    mars 2013
    Messages
    5 984
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Administrateur de base de données

    Informations forums :
    Inscription : mars 2013
    Messages : 5 984
    Points : 147 975
    Points
    147 975
    Par défaut Après Chrome, c'est au tour de Firefox d'apporter le lazy loading d'images en natif dans son navigateur
    Après Chrome, c'est au tour de Firefox d'apporter le lazy loading d'images en natif dans son navigateur,
    la fonctionnalité est disponible sur la build Canary

    Le lazy loading, ou chargement différé, est un modèle de conception couramment utilisé pour différer l'initialisation d'un objet jusqu'au moment où il est nécessaire. Il peut contribuer à l'efficacité du fonctionnement du programme s'il est utilisé correctement et de manière appropriée. L'objectif de cette technique est d’accélérer le fonctionnement global du système, tout en induisant un temps d’attente lors de la sollicitation d’un composant non préalablement chargé. Dans les systèmes d'exploitation comme Windows par exemple, le lazy loading peut consister à ne charger que les programmes fréquemment utilisés par l’utilisateur au démarrage du système afin d’économiser de la mémoire vive.

    Le lazy loading s'applique également très bien aux sites Web où la vitesse d'affichage est déterminante pour encourager les utilisateurs à continuer leur visite et éventuellement revenir une prochaine fois. Par défaut, lorsqu'un internaute demande à un navigateur d’afficher une page web, ce dernier charge toutes les ressources (et donc toutes les images). Une situation qui n'est pas toujours optimale, par exemple les images situées en bas d’un site ne sont pas nécessaires dès le chargement. Pour améliorer les performances web et réduire la consommation de bande passante, les développeurs peuvent mettre en place le lazy-loading sur leurs pages. Pour les sites Web, le lazy loading consiste notamment à :
    • décaler le chargement de divers scripts de la page web, afin de favoriser un affichage rapide des composants visibles. On agit ainsi sur la vitesse d’affichage ;
    • ne charger que les images situées au-dessus de la ligne de flottaison (ligne virtuelle qui est la limite inférieure de l’espace vu par l’internaute qui consulte une page web sans effectuer un défilement - scroll). Les autres images sont chargées au fur et à mesure que l’utilisateur effectue le défilement. On améliore ainsi le temps de chargement initial de la page.


    Auparavant, les sites Web pouvaient utiliser le chargement différé à l'aide de JavaScript. Mais Google a commencé à l'intégrer en natif dans Chrome Canary 70, promettant des améliorations de 18 % à 35 % de la vitesse de chargement des pages Web. Les pages se chargeraient plus rapidement et réduiraient la consommation de la bande passante pour les utilisateurs, en particulier sur les connexions mobiles.

    Nom : lazy.png
Affichages : 35977
Taille : 59,4 Ko

    L'éditeur est revenu à la charge pendant le Chrome Dev Summit 2019 où il a déclaré : « Nous pensons que le Web est destiné à tout le monde, quel que soit leur type d'appareil, leur vitesse Internet ou leur pouvoir d'achat. Pour nous assurer que la plateforme reste accessible à tous, nous investissons dans des améliorations de la mémoire et des performances du navigateur, notamment en apportant de nouvelles fonctionnalités telles que Image Lazy Loading, désormais disponible pour les utilisateurs de Chrome Lite par défaut, et Paint Holding, qui sera bientôt déployé dans Chrome ».

    Au cours des derniers jours, Mozilla a fermé un rapport de bogue sur Bugzilla qui appelle à l'ajout d'un support natif de lazy loading. Les utilisateurs de Firefox 75 Nightly peuvent désormais basculer la fonction qui est désactivée par défaut. Il n'est pas clair si elle sera activée au moment où Firefox 75 atteindra la branche stable, mais selon les commentaires sur le thread Bugzilla, il s'agit d'une fonction très demandée. Cette implémentation de Firefox, qui vient après celle dans Chrome, peut être activée si vous utilisez la dernière version Nightly de Firefox. Si vous le souhaitez, vous pouvez effectuer vos tests sur une page conçue à cet effet. Pour l'activer, il vous suffit de :
    • vous rendre à about:config ;
    • faire une recherche avec le mot clé "lazy" ;
    • définissez dom.image-lazy-loading.enabled sur true ;
    • après avoir relancé le navigateur, rendez-vous sur le site de test pour voir le lazy loading paresseux en action.

    Au cours des derniers jours, WHATWG a ajouté l'implémentation à ses spécifications, ce qui permettra à d'autres navigateurs et responsables de sites Web d'implémenter la fonctionnalité selon certaines normes.

    Se rendre à la page de test

    Source : Bugzilla

    Et vous ?

    Que pensez-vous du lazy loading dans le domaine du développement web ?
    Y avez-vous déjà eu recours avec JavaScript ?
    Que pensez-vous de la possibilité d'y avoir recours en natif ?
    Contribuez au club : Corrections, suggestions, critiques, ... : Contactez le service news et Rédigez des actualités

  2. #2
    Membre régulier
    Homme Profil pro
    Développeur informatique
    Inscrit en
    juin 2013
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 27
    Localisation : France, Maine et Loire (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2013
    Messages : 22
    Points : 95
    Points
    95
    Par défaut
    Que pensez-vous du lazy loading dans le domaine du développement web ?
    J'en pense qu'il était temps, les sites ont de plus en plus d'images, et de plus en plus lourdes.
    L'intérêt est de l'offrir à porter de code... qui n'a jamais pesté contre un thème PrestaShop ou Wordpress ? de beaux thèmes « vendables », mais souvent une cata côté performances.

    Y avez-vous déjà eu recours avec JavaScript ?
    Oui, bien que pas systématiquement.
    Je l'applique surtout aux sites souffrant de problèmes de perfs ou avec beaucoup d'images (des CMS principalement).


    Que pensez-vous de la possibilité d'y avoir recours en natif ?
    Ça fera gagner quelques minutes et une lib en moins à installer.
    Ça incitera ceux qui ne le faisais pas à le mettre en place (moi le premier qui ne le généralise peut-être pas encore assez), mais peut-être que je suis naïf.

  3. #3
    Membre émérite

    Profil pro
    activité : oui
    Inscrit en
    janvier 2014
    Messages
    1 104
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : activité : oui

    Informations forums :
    Inscription : janvier 2014
    Messages : 1 104
    Points : 2 891
    Points
    2 891
    Par défaut
    PS: le +1, c'est pas pour la naïveté. x)

    Un autre point qui serait bien de voir enfin en "natif" dans les réglages de Firefox --> bloquer les rechargements "périodiques" et afficher un popup à la place (à l'image des redirections automatiques de page).
    Pensez à utiliser les pouces d’appréciation, pour participer à la visibilité de l'apport d'un propos, ou l'intérêt que vous y prêtez... qu'il soit positif ou négatif.

  4. #4
    Membre chevronné

    Homme Profil pro
    Développeur informatique
    Inscrit en
    octobre 2013
    Messages
    867
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Conseil

    Informations forums :
    Inscription : octobre 2013
    Messages : 867
    Points : 2 162
    Points
    2 162
    Par défaut
    En matière d'optimisation, est-ce possible de désactiver l'images dans les vidéos et de garder seulement le son ?
    Pour les utilisateurs de lecteurs d'écrans comme moi qui n'en ont pas besoin.
    Ca gagnerai de la bande passante.
    Consultez mes articles sur l'accessibilité numérique :

    Comment rendre son application SWING accessible aux non voyants
    Créer des applications web accessibles à tous

    YES WE CAN BLANCHE !!!

    Rappelez-vous que Google est le plus grand aveugle d'Internet...
    Plus c'est accessible pour nous, plus c'est accessible pour lui,
    et meilleur sera votre score de référencement !

  5. #5
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur .NET
    Inscrit en
    juillet 2019
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : juillet 2019
    Messages : 1
    Points : 1
    Points
    1
    Par défaut Faux Firefox supporte très mal lazy loading
    D'expérience il ne le supporte plus.

    Suite à une MAJ du logiciel, il va jusqu'à désactiver l'affichage des images, gros BUG.
    Ultra null.

    Avant on avait Chrome Firefox contre IE et Safari.
    Maintenant on a Chrome + Microsoft Edge + Chromium contre Firefox et Safari.

    Il faudrait à un moment accorder les violons.

Discussions similaires

  1. Réponses: 0
    Dernier message: 19/12/2018, 08h07
  2. Réponses: 3
    Dernier message: 13/11/2018, 18h16
  3. Réponses: 0
    Dernier message: 25/10/2018, 19h12
  4. Réponses: 2
    Dernier message: 06/09/2018, 14h17
  5. Réponses: 24
    Dernier message: 19/05/2010, 15h35

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo