Le poids des mots, le choc des photos… ou serait-ce l’inverse?
La taille des images.
Lorsque l’on développe un site web, il est crucial de limiter la taille des images, celle-ci pouvant malheureusement jouer sur la vitesse de chargement. La plateforme Kentico permet de contrôler les dimensions des images (soit dans un « attachment » de page ou encore dans la bibliothèque média), limitant ainsi leur taille maximale.
Toutefois, même si l’on peut contrôler ses paramètres, il est parfois impossible d’obtenir l’affichage recherché. Dans le cas où vous souhaiteriez afficher une version plus petite d’une image en particulier, Kentico offre un « handler » qui permet de la récupérer et d’y appliquer un paramètre de dimensionnement (largeur et/ou hauteur) afin de limiter sa taille. Vous éviterez ainsi que le navigateur ne charge une version de l’image plus lourde que nécessaire.
Le format des images.
C’est également un paramètre important. Pour notre part, on préférera utiliser des fichiers .SVG à la place de .PNG pour les icônes. Ce format est plus facile d’utilisation et peut s’adapter à toutes les tailles sans augmenter le poids du fichier contrairement aux .PNG qui pèsent plus lourds une fois agrandis. En optant pour du SVG, nous contrôlons les dimensions des icônes, sans augmenter leur poids mais tout en gardant un affichage de qualité. Autre point positif ; l’utilisation d’un même visuel .SVG pour plusieurs formats permet d’éviter un dédoublement des icônes.
L’optimisation d’un site Kentico, un jeu de cache-cache?
- L’optimisation d’un site Kentico passe avant tout par la configuration de la plateforme. Elle nous offre plusieurs options de cache et de minimisation. En premier lieu, n’oubliez pas de désactiver le mode « debug » dans le panneau de configuration du même nom. Cela réduira l’utilisation des ressources du site, ce qui augmentera sa rapidité. Garder cette option lors du développement uniquement.
- Ensuite, notez que plusieurs des options ne fonctionnent que lorsque l’on utilise les fonctionnalités propres de Kentico. Par exemple, lorsque nous utilisons le SASS, nous n’insérons pas directement notre CSS dans l’interface via la section « CSS Stylesheets ». Kentico n’est donc pas en mesure de compresser nos fichiers CSS automatiquement. Mieux vaut alors opter pour l’utilisation du « handler GetResource.ashx » mis à notre disposition. Il faut donc l’appeler pour toutes les ressources statiques tels que les Javascript et les CSS.
Kentico offre également plusieurs fonctionnalités utiles pour la gestion du cache dans les paramètres « Performance » (cache client, cache serveur, durées respectives, compression des pages).
Pour plus d’informations sur la configuration du cache, visitez https://docs.kentico.com/k10/configuring-kentico/optimizing-website-performance/configuring-caching.
Qu’en est-t-il de la configuration du serveur?
Qui dit configuration du cache dit avant tout configuration du serveur. Par défaut, seule la configuration de compression statique est activée sur un serveur.
»»»» Pour améliorer la performance, la compression dynamique doit être activée!
En l’occurrence il suffit juste d’installer et d’activer le module dans Internet Information Services, plus connu sous l’acronyme « IIS ». Une fois le module configuré, le cache dynamique est actif.
Toujours dans l’optique d’amélioration des performances, pensez à ajouter la compression sur les fichiers statiques et dynamiques. Il vous faudra mettre à jour votre fichier « Web.config » (fichier de configuration du site web) afin d’ajouter les types de fichiers qui devront être compressés, séparés entre fichiers statiques et dynamiques, incluant les fichiers SVG, Javascript, CSS, etc. Pour inclure les fichiers SVG dans la compression, ajoutez des entrées dans le fichier « applicationHost » du serveur, puis redémarrer IIS. L’activation de la compression GZIP est essentielle à la performance d’un site web Kentico.
Pour plus d’informations sur l’activation de la compression HTTP, visitez https://docs.microsoft.com/en-us/iis/configuration/system.webServer/httpCompression/#003
De plus, pour plus d’informations pour ajouter les SVG à la compression, visitez https://stackoverflow.com/questions/14410331/cant-get-iis7-to-gzip-font-face-font-files/23940235#23940235
Trucs et astuces additionnels
Voici deux astuces supplémentaires afin d’optimiser votre site web.
- Utilisez les ressources communes et les librairies directement d’un CDN plutôt que de les télécharger et de les inclure dans votre projet. Ceci inclut vos fichiers « Bootstrap », « jQuery » et autres plugins javascript et/ou CSS développés à l’extérieur du projet.
- Placez tous vos fichiers Javascript à la fin de votre HTML (plutôt qu’au début). Cela permet à votre page de se télécharger en majorité, incluant votre CSS, avant les fichiers Javascript qui peuvent bloquer le chargement du site.
En conclusion.
Quand on parle d’optimisation de site web, plusieurs solutions existent. Celles présentées ci-dessus ne sont qu’un fragment des possibilités offertes par la plateforme Kentico. En espérant que ces informations vous donne une bonne direction pour vos optimisations.
