Une page de journal numérique est une grande image : 2 000 pixels sur le grand côté, remplie de petits caractères. Un lecteur en feuillette dix ou vingt, souvent sur un téléphone avec une connexion instable. En construisant la version 1.1 d’Inkfold, notre plateforme d’édition numérique auto-hébergée, la vitesse des pages a été le premier chantier.
Enregistrer chaque page trois fois
À l’envoi, chaque page est réencodée avec GD en trois fichiers : la page complète, une version moyenne d’environ 1 100 pixels de large et une vignette pour la bande de pages. Le format est choisi une fois par serveur : WebP quand PHP le prend en charge, JPEG sinon. Sur nos éditions de test, WebP a réduit le poids des pages d’environ un tiers à qualité égale, ce qui compte plus que toute autre optimisation sur un site rempli de pages.
Le réencodage supprime aussi ce que personne n’a demandé, comme les profils colorimétriques et les métadonnées d’appareil photo, et aplatit la transparence sur du blanc pour qu’un export PNG du logiciel de mise en page n’affiche jamais un fond noir.
La taille moyenne d’abord, la pleine taille seulement si nécessaire
La liseuse affiche par défaut l’image moyenne. À taille normale, elle ne se distingue pas de l’original et ne pèse qu’une fraction. Quand le lecteur zoome, le script compare la largeur affichée, multipliée par la densité de pixels de l’appareil, à la largeur réelle de l’image. Dès que la page s’affiche nettement plus grande que ce que le fichier moyen permet, il charge en arrière-plan l’image complète et la substitue à son arrivée.
Le lecteur qui ne zoome jamais ne télécharge jamais la page complète. Celui qui zoome obtient une page nette sans attendre, car l’image moyenne reste à l’écran jusqu’à ce que la grande soit prête. Les pages suivantes de l’édition sont préchargées en taille moyenne : tourner la page est instantané.
Découper les articles une fois, puis les mettre en cache
Chaque zone d’article peut s’ouvrir comme une image à part, pour la fenêtre de lecture et le partage. Ces découpes étaient produites à chaque requête. Désormais, la première requête découpe la zone et l’enregistre sur le disque des médias sous un nom qui contient une empreinte de la zone et de l’image de la page : une zone redessinée ou une page remplacée obtient donc automatiquement un nouveau fichier. Les réponses portent un en-tête de cache d’une semaine.
Des médias sur n’importe quel disque ou derrière un CDN
Tous les accès aux fichiers passent par une seule fonction au lieu d’un disque local figé. Avec INKFOLD_DISK=s3, les pages, les PDF et les découpes partent sur Amazon S3, Cloudflare R2 ou DigitalOcean Spaces. Pour garder les fichiers en local, INKFOLD_MEDIA_URL fait passer les URL d’images par un CDN de type pull, comme Cloudflare ou Bunny, avec le site pour origine. Les noms de fichiers conservent une partie aléatoire de 20 caractères : les pages premium restent impossibles à deviner, quel que soit le stockage.
À retenir
- Encoder une seule fois à l’envoi, en trois tailles, et choisir WebP quand le serveur le permet.
- Afficher d’abord une image moyenne ; ne charger la pleine taille que lorsque le zoom rend la différence visible.
- Mettre en cache les découpes avec une clé qui change quand la source change.
- Faire passer tous les accès aux fichiers par une abstraction, pour que S3 ou un CDN ne soit que de la configuration.
Prochain article de la série : une liseuse en double page qui aligne la hauteur des deux pages. Tout ce qui est décrit ici est visible dans la démo en ligne d’Inkfold, et le logiciel est disponible sur Charming Theme.
Vous publiez un journal ou un magazine en ligne et vos pages sont lentes ? Parlons-en — ArtinTech Solution conçoit et optimise précisément ce type de logiciel d’édition.