l’intégrateur, ce héros – 24 jours de web

/performance-web-lintegrateur-ce-heros

  • @jeanmarie
    jeanmarie CC BY-NC-SA
    1
    @spip
    1

    Performance #web : l’intégrateur, ce héros

    J’ai envie de pousser un concept absolument nouveau : l’amélioration progressive (ah pardon on me dit que ça date de 2003). Au minimum c’est la clé d’un premier affichage éclair car on peut se passer de #JavaScript quelques secondes.
    Puis abordons le gros sujet des images : comment les charger rapidement, sans toucher aux fichiers eux-même ? Il y a eu quelques nouveautés ces deux dernières années, mais on va voir que même sur des choses que l’on peut croire acquises comme le lazy loading, il y a quelques pièges qui peuvent être contre-productifs.
    Enfin terminons avec un petit résumé sur les polices : elles tapent dans l’œil mais il faut en garder le contrôle si l’on veut un bon CLS (une des métriques Google dont on va reparler).

    Article intéressant sur les optimisations au moment de l’#intégration web. Ça parle (un peu) performance mais surtout #UX, #ergonomie, #HTML, #CSS, #javascript...

    ▻https://www.24joursdeweb.fr/2021/performance-web-lintegrateur-ce-heros

    https://media.24joursdeweb.fr/2021/12/no-preload-all-network.png

    jeanmarie CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos CC BY-NC

      Ya des gens qui trouvent ça enthousiasmant, comme plein de techniciens qui sont à fond dans leur petite spécialité technique, mais moi ça me terrifie, ça devrait pas exister du temps à passer sur ça :D

      Et surtout encore moins devoir s’en préoccuper à chaque intégration (plutôt que ce soit les gens qui font le CMS, langage de template, plugins de lazy, etc, et qu’ensuite pour un site précis à intégrer on n’y pense presque plus).

      RastaPopoulos CC BY-NC
    • @jeanmarie
      jeanmarie CC BY-NC-SA

      Oui, l’article est intéressant en tant que ressources, pour choisir les plugins qu’on utilise (par ex Adaptive images qui gère le WebP et le lazy loading nativement), faire ses boilerplates persos (préchargement des polices et font-display: swap;), les optimisations côté CMS (chargement JS en asynchrone)... etc, évidemment dans l’idée d’automatiser au maximum.

      Et aussi, se rendre compte que #SPIP gère une bonne partie de tout ça <3

      jeanmarie CC BY-NC-SA
    Écrire un commentaire