cedricAbonnel/folio
1
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases Wiki Activity

Perf : lazy loading des images dans les articles et la liste #21

New Issue
Closed
opened 2026-05-13 22:09:35 +00:00 by cedricAbonnel · 0 comments
cedricAbonnel commented 2026-05-13 22:09:35 +00:00
Owner
Copy Link
Copy Source

Problème

Toutes les images (couvertures, images dans le contenu Markdown, pièces jointes) se chargent immédiatement au rendu de la page, même celles hors viewport. Sur un article avec plusieurs images ou une liste longue, cela génère des requêtes inutiles au chargement initial.

Localisation

  • templates/post_view.php — couverture (ligne 22) et pièces jointes (ligne 60)
  • templates/post_list.php — images de couverture des vignettes
  • Parsedown génère des balises img sans loading=lazy pour les images dans le contenu

Solution proposée

1. Images statiques dans les templates

Ajouter loading="lazy" sur les images hors première image visible.

La couverture en tête darticle (premier élément visible) garde loading="eager" fetchpriority="high" pour ne pas dégrader le LCP. Pièces jointes et images de liste : loading="lazy".

2. Images générées par Parsedown

Post-traiter le HTML rendu pour injecter loading="lazy" sur les balises img du contenu Markdown.

3. Images de la liste darticles

Première vignette : loading="eager". Les suivantes : loading="lazy".

Critères dacceptation

  • Les images hors viewport se chargent en lazy
  • La première image de couverture conserve loading="eager" (pas de régression LCP)
  • Les images dans le contenu Markdown ont loading="lazy"
  • Vérifié dans DevTools (onglet Network : les images lazy ne se chargent pas au page load)

Migré depuis varlog#32

## Problème Toutes les images (couvertures, images dans le contenu Markdown, pièces jointes) se chargent immédiatement au rendu de la page, même celles hors viewport. Sur un article avec plusieurs images ou une liste longue, cela génère des requêtes inutiles au chargement initial. ## Localisation - `templates/post_view.php` — couverture (ligne 22) et pièces jointes (ligne 60) - `templates/post_list.php` — images de couverture des vignettes - Parsedown génère des balises `img` sans `loading=lazy` pour les images dans le contenu ## Solution proposée ### 1. Images statiques dans les templates Ajouter `loading="lazy"` sur les images hors première image visible. La couverture en tête darticle (premier élément visible) garde `loading="eager" fetchpriority="high"` pour ne pas dégrader le LCP. Pièces jointes et images de liste : `loading="lazy"`. ### 2. Images générées par Parsedown Post-traiter le HTML rendu pour injecter `loading="lazy"` sur les balises `img` du contenu Markdown. ### 3. Images de la liste darticles Première vignette : `loading="eager"`. Les suivantes : `loading="lazy"`. ## Critères dacceptation - [ ] Les images hors viewport se chargent en lazy - [ ] La première image de couverture conserve `loading="eager"` (pas de régression LCP) - [ ] Les images dans le contenu Markdown ont `loading="lazy"` - [ ] Vérifié dans DevTools (onglet Network : les images lazy ne se chargent pas au page load) --- *Migré depuis [varlog#32](https://git.abonnel.fr/cedricAbonnel/varlog/issues/32)*
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
cedricAbonnel (Cédric Abonnel)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: cedricAbonnel/folio#21
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?