août 20, 2018

Optimisation de l'image de Sitefinity à l'aide de Kraken.io

Il est facile d'optimiser la taille de la page Web et le temps de chargement avec Sitefinity. Dans cet article, vous apprendrez comment intégrer un outil comme Kraken.io avec Sitefinity pour une optimisation simple des images.

TL; DR Le code présenté ci-dessous dans cet article est disponible ici . Vous pouvez commencer à l'utiliser immédiatement en téléchargeant le module complémentaire et en l'installant dans votre projet Progress Sitefinity .

Taille de l'image au fil des ans

Les sites Web ont beaucoup évolué depuis 1991 Au fur et à mesure que la technologie progressait, nous l'avons progressivement poussé à devenir plus attrayant visuellement. La page Web moderne doit fournir des informations, mais d'une manière intéressante pour l'utilisateur et qui retiendra son attention. Ainsi, pris dans une compétition féroce, les sites Web ont de plus en plus recours aux images et aux vidéos en tant que contenu. Cela a bien sûr abouti à des pages de plus en plus grandes au fil des ans. En fait, sur la base des informations fournies par httparchive.org la taille moyenne des pages Web était de 702 kb en 2010, contre 3545 kb en 2018.

Nous sommes tous très conscients des raisons pour lesquelles nous devons optimiser la taille de la page Web et le temps de chargement, mais nous devons fournir des résultats exceptionnels. Il se peut donc que des difficultés s’opposent entre les créateurs de contenu qui ajoutent plus de médias aux pages et les développeurs Web qui tentent de les optimiser – du moins, c’est ce qui s’est passé sur les sites Web de notre entreprise chez Progress. un article de blog contenant plus de 10 images, chacune d'une taille de plusieurs Mo. Lors de l'utilisation d'un CMS, les créateurs de contenu prêtent rarement attention à la taille des images ou à l'optimisation du chargement des pages en général.

Alors, comment pouvons-nous améliorer le CMS pour rendre le la vie des éditeurs de contenu et des développeurs est-elle plus facile? Construisons un module d'optimisation d'image!

Kraken.io à la rescousse

Il existe des services disponibles, tels que Kraken.io qui compressent la taille de l'image tout en conservant la même qualité d'image. L'idée est d'utiliser ces services et de réduire la taille des images avant qu'elles ne soient enregistrées dans Sitefinity. Heureusement, Sitefinity fournit un mécanisme pour se connecter au flux de traitement des fichiers . L'objectif est d'intégrer notre logique d'optimisation dans le flux de traitement des fichiers, afin que les utilisateurs n'aient rien d'autre à faire que télécharger leur image.

Pour être juste, il existe un projet open source qui offre une intégration de Kraken.io avec Sitefinity, mais qui a été construite il y a 4 ans et en raison de la admin réinvention elle ne sera pas compatible avec les nouvelles versions. Cet article de blog se concentre sur une approche plus simple et plus facile à configurer.

Implémentation de la solution Kraken.io et Sitefinity

Implémentation de Kraken.io et Sitefinity "title =" Implémentation de Kraken.io et Sitefinity " data-method = "ResizeFitToAreaArguments" data-customsizemethodproperties = "{" MaxWidth ":" 275 "," MaxHeight ":" "," ScaleUp ": false," Qualité ":" Elevé "}" data-openoriginalimageonclick = "true" align = "right" /> </a data-recalc-dims= Créez une nouvelle solution Sitefinity, contenant un projet d'application Web. Ajoutez un projet distinct qui stockera notre logique. L'idée est de créer ensuite un package NuGet pour faciliter l'installation et la réutilisation. Le code complet est disponible ici vous pouvez donc aller le chercher, et je fournirai aussi des liens Gist avec le code pour chaque étape.

D'abord, créez une classe de base appelée ImageOptimizationProcessorBase qui étend ProcessorBase et implémente IInstallableFileProcessor . Le but de la classe de base est de fournir des fonctionnalités communes pouvant être réutilisées par les processeurs de fichiers d'optimisation d'image.

Gist: https://gist.github.com/yasen-yankov/0441e7554d05ca042a9b20bea67995df

Le but de IInstallableFileProcessor est de créer un contrat pour que nous puissions installer automatiquement tous les processeurs de fichiers d'optimisation d'image au démarrage du projet.

Gist: https : //gist.github.com/yasen-yankov/becf25976289dc16b86d4e5ab3d8ac6c

Ensuite, nous allons construire notre processeur d'optimisation d'image Kraken.io. Pour ce faire, nous devons installer le package NuGet "kraken-net". Après cela, nous allons créer une nouvelle classe appelée KrakenImageOptimizationProcessor qui étend ImageOptimizationProcessorBase .

Gist: https://gist.github.com/ yasen-yankov / 9b3689b810d5410ff89aab8c8b1bffa8

Ajoutons une classe de démarrage qui gérera l'enregistrement de tous les processeurs d'optimisation d'image. Nous avons actuellement un seul processeur pour Kraken.io, mais l'idée est qu'il peut y avoir différents processeurs de fichiers pour différents services d'optimisation d'image. Nous voulons fournir une logique pour l’enregistrement automatique pour chacun d’entre eux et permettre à l’utilisateur de choisir celui à configurer. Nous automatisons fondamentalement l'enregistrement du processeur de fichiers décrit dans la documentation de Sitefinity .

Gist: https://gist.github.com/yasen-yankov/80c84f3492829181954d3783f553ca7f [19659002] Démarrez notre site Web et configurez notre processeur d'optimisation d'image Kraken. Nous pouvons voir que dans les paramètres avancés, sous Bibliothèques, nous avons ajouté une nouvelle configuration pour «Kraken IO Image Optimization». Nous devons définir les valeurs pour les paramètres ApiKey et ApiSecret. Vous pouvez les obtenir depuis votre compte Kraken dans la section API Credentials .