Lorsque je passe de temps en temps sur mon site web, j’ai remarqué que certains pages de mes articles se charge assez lentement, surtout ceux qui ont plus d’images. Et j’ai trouvé que ce problème pourrait-être un bon sujet d’article car des pages contenant beaucoup d’images est quelque chose que tout développeur aura surement à gérer dans sa carrière.
Contexte actuel
Avant d’aller plus loin, nous allons établir le contexte actuel et voir les chiffres à laquelle on doit encore travailler.
J’ai pris un de mes pages qui prend beaucoup temps à se charger et l’analysé sur « PageSpeed Insights » :
Pour le mobile :
Comme indiquez dans le screenshot, la performance (37) de cette page est vraiment médiocre. Regarder le métrique « Largest Contentful Paint » qui prend 15 secondes en somme. C’est vraiment grave pour l’experience utilisateur et on doit régler ça. Et justement, dans l’optique d’améliorer la performance de cette page, je vais commencer par travailler sur le chargement de mes images et vous allez voir que seulement en travaillant sur nos images on gagne déjà énormément sur le niveau performance.
On va se concentrer sur le mobile car le bureau aura toujours un meilleur score lorsque qu’on fait bien les choses pour le mobile.
Néanmoins je mettrai quand même en bas un capture de la performance de la page sur un Bureau.
Pour le bureau :
Voilà les chiffres pour la partie bureau.
Passons à la résolution des problèmes
Tout se passe au niveau de la création ou l’édition d’un post. J’utilise ReactQuill comme éditeur de texte et je charge les images en utilisant le plugin d’upload natif de la bibliothèque.
Personnalisé l’handler d’upload dans ReactQuill
Lorsqu’on clique sur le bouton pour charger une image, il y a une fonction qui gère le téléchargement de l’image avant de me mettre dans notre texte en édition. Nous allons modifier ce fonction de chargement et gérer la récupération de l’image nous-même.
Pour cela, nous allons faire deux choses :
- Créer un custom handler pour l’upload des images sur ReactQuill
- Utiliser l’api ImageKit.io pour l’optimisation des images
1. Création d’un custom handler
On va rajouter une fonction dans la configuration module de ReactQuill qui gérer le téléchargement d’image.
handlers: {
image: imageHandler,
},
Voilà à quoi ressemble le code final de la fonction « imageHandler » :
async function imageHandler() {
const input = document.createElement('input')
input.setAttribute('type', 'file')
input.setAttribute('accept', 'image/*')
input.click()
input.onchange = async () => {
if (!input.files) return
const cursorPosition =
this.quill.selection.cursor.selection.lastRange.index
// upload your file here
const result = await uploadImagKit(input.files[0])
this.quill.editor.insertEmbed(cursorPosition, 'image', result.url)
}
}
2. Utilisation de l’API imagekit.io
Nous allons passer à l’implémentation de la partie optimisation sur imagekit.io. Je viens de faire mon inscription sur imagekit.io, j’ai mis « afdev » comme ID à mon compte et sur l’url des images que je sauvegarderais sur la plateforme.
Installation du package imageKit :
yarn add imagekit-javascript
Initialisation du SDK :
Initialisation du package et configuration de notre imageKit :
import ImageKit from "imagekit-javascript"
var imagekit = new ImageKit({
publicKey: 'public_Oww/isOccKOmg3nnmqCTiEy5TVw=',
urlEndpoint: 'https://ik.imagekit.io/afdev',
authenticationEndpoint: 'http://www.yourserver.com/auth',
})
Vous devez implémenter le « authentificationEndpoint » sur votre propre serveur. Voici un tutoriel pour savoir comment le faire https://docs.imagekit.io/api-reference/upload-file-api/client-side-file-upload#how-to-implement-authenticationendpoint-endpoint.
Création d’un dossier spécial pour mes images
Dans mon espace de stockage chez imageKit, je vais créer un dossier nommé « posts » pour stocker spécifiquement les images de post.
Rendez-vous sur « Media library » dans votre tableau de bord :
Et puis cliquez sur le bouton « New »:
La partie sur la plateforme ImageKit est maintenant prête, passons à l’implémentation sur Next. Créons un fichier où mettre nos codes pour uploader les images sur ImageKit et finalement on est parvenu à ça:
import ImageKit from 'imagekit-javascript'
import { deploymentUrl } from '../config'
var imagekit = new ImageKit({
publicKey: 'public_Oww/isOccKOmg3nnmqCTiEy5TVw=',
urlEndpoint: 'https://ik.imagekit.io/afdev',
authenticationEndpoint: deploymentUrl + 'api/imageKitAuthEndpoint',
})
export async function uploadImagKit(file) {
try {
const result = await imagekit.upload({
file: file,
fileName: file.name,
tags: ['posts'],
folder: 'posts',
})
return result
} catch (error) {
throw error
}
}
Résultat obtenu
Il y a une date sur ces captures d’écrans, j’ai terminé l’implémentions tard le soir et j’ai continué le lendemain car je devais me réveiller tôt le matin.
Jusqu’ici on a touché que sur les images et voyons cela à donner au niveau des chiffres. J’ai refait l’analyse sur « PageSpeed Insight » et voilà ce que ça a donné :
On part de :
- « Performance » : 37 à 68
- « Largest Contentful Paint » : 15,1 secondes à 4,8 secondes
C’est une énorme évolution en termes de performance et là on a travaillé que sur les images. Image jusqu’où on peut arriver si on travaillait sur tout l’aspect de la page css, js etc.
Je remets ici-bas les chiffres qu’on a obtenus pour la partie bureau :
Et ici on part de :
- « Performance » : 56 à 90
- « Largest Contentful Paint » : 6,5 secondes à 1,2 secondes
Et on peut encore essayer d’améliorer tout cela en travaillant sur ce métrique « Largest Contentful Paint ».
Conclusion
Les images jouent un rôle très important dans l’optimisation ou le ralentissement d’une page. Par le biais de cet article, je voulais vous montrer de façon concrète tout cela. Et rien qu’en optimisant un peu la façon dont on charge nos images, on obtient déjà une amélioration signifiante.
Rappelez-vous-en lorsque vous implémenterez vos images dans vos projets à l’avenir. Les images peuvent optimiser ou ralentir la performance de votre page.
