Minimisation et groupement dans SharePoint Online

Cet article décrit comment utiliser les techniques de minimisation et de groupement avec Web Essentials pour réduire le nombre de demandes HTTP et le temps de chargement des pages dans SharePoint Online.

Lorsque vous personnalisez votre site web, il peut arriver que vous finissiez pas ajouter un grand nombre de fichiers au serveur pour prendre en charge la personnalisation. L’ajout de fichiers JavaScript, CSS et image augmente le nombre de demandes HTTP adressées au serveur, qui allongent à leur tour le temps nécessaire pour afficher une page web. Si vous avez plusieurs fichiers du même type, vous pouvez les regrouper pour accélérer leur téléchargement.

Pour les fichiers JavaScript et CSS, vous pouvez également adopter une approche appelée minimisation consistant à réduire la taille totale des fichiers en supprimant des espaces blancs et d’autres caractères superflus.

Minimisation et groupement de fichiers JavaScript et CSS avec Web Essentials

Vous pouvez utiliser des logiciels tiers tels que Web Essentials pour regrouper des fichiers CSS et JavaScript.

Important : Web Essentials est un projet tiers, open source, communautaire. Le logiciel est une extension de Visual Studio 2012 et Visual Studio 2013, et ne bénéfice pas du support technique Microsoft. Pour télécharger Web Essentials, visitez le site web http://vswebessentials.com/download.

Web Essentials propose deux formes de groupement :

  • .bundle : pour les fichiers CSS et JavaScript ;

  • .sprite : pour les images (disponible uniquement dans Visual Studio 2013).

Vous pouvez utiliser Web Essentials si vous disposez d’une fonctionnalité comportant des éléments de la marque qui sont référencés à l’intérieur d’une page maître personnalisée, par exemple :

Capture d’écran de l’élément de marque dans la page maître personnalisée

Pour créer un groupement TE000127218 et CSS dans Web Essentials

  1. Dans Visual Studio, dans l’Explorateur de solutions, sélectionnez les fichiers à inclure dans le groupement.

  2. Cliquez avec le bouton droit sur les fichiers sélectionnés, puis, dans le menu contextuel, choisissez Web Essentials > Créer un fichier de groupement JavaScript. Par exemple :

    Capture d’écran montrant les options du menu Web Essentials

Affichage des résultats d’un groupement de fichiers JavaScript CSS

Lorsque vous créez un groupement JavaScript et CSS, Web Essentials crée un fichier XML nommé fichier de recette qui identifie les fichiers JavaScript et CSS, ainsi que d’autres informations de configuration :

Capture d’écran d’un fichier de recette JavaScript et CSS

En outre, si l’indicateur minify est défini sur true dans la recette de groupement, les fichiers sont groupés et leur taille réduite. Cela signifie que de nouvelles versions réduites des fichiers JavaScript sont créées, que vous pouvez référencer dans votre page maître.

Capture d’écran de l’indicateur minify défini sur true

Lorsque vous chargez une page de votre site web, vous pouvez utiliser les outils de développement de votre navigateur web, par exemple Internet Explorer 11, pour voir le nombre de demandes envoyées au serveur et le temps nécessaire au chargement de chaque fichier.

La figure suivante illustre le résultat du chargement des fichiers JavaScript et CSS avant leur minimisation.

Capture d’écran montrant 80 éléments en cours de téléchargement

Une fois les fichier CSS et JavaScript groupés, le nombre de demandes ignorées à chuté à 74, et le téléchargement de chaque fichier n’a duré qu’un peu plus longtemps que celui des fichiers d’origine :

Capture d’écran montrant 74 éléments en cours de téléchargement

Après groupement, la taille du fichier de groupement JavaScript a sensiblement diminué, passant de 815 à 365 Ko :

Capture d’écran montrant une taille de téléchargement réduite

Groupement d’images par création de sprite

Tout comme vous groupez des fichiers JavaScript et CSS, vous pouvez combiner de nombreuses petites icônes et autres images communes dans une feuille sprite de taille supérieure, puis utiliser le fichier CSS pour afficher les images individuelles. Au lieu de télécharger chaque image séparément, le navigateur web de l’utilisateur télécharge une fois la feuille sprite et la met en cache sur l’ordinateur local. Cela améliore les performances de chargement des pages en réduisant le nombre de téléchargements et les échanges avec le serveur web.

Pour créer un sprite d’images dans Web Essentials

  1. Dans Visual Studio, dans l’Explorateur de solutions, sélectionnez les fichiers à inclure dans le groupement.

  2. Cliquez sur les fichiers sélectionnés, puis, dans le menu contextuel, choisissez Web Essentials > Créer un fichier sprite d’images. Par exemple :

    Capture d’écran montrant comment créer un sprite d’images
  3. Choisissez l’emplacement où enregistrer le fichier sprite. Le fichier .sprite est un fichier XML qui décrit les paramètres et fichiers que le sprite contient. Les figures suivantes présentent un exemple de fichier sprite de format PNG et le fichier XML .sprite correspondant.

    Capture d’écran d’un fichier de sprite

    Capture d’écran d’un fichier XML de sprite

Développez vos compétences
Découvrez des formations
Accédez aux nouvelles fonctionnalités en avant-première
Rejoignez le programme Office Insider

Ces informations vous ont-elles été utiles ?

Nous vous remercions pour vos commentaires.

Merci pour vos commentaires. Il serait vraisemblablement utile pour vous de contacter l’un de nos agents du support Office.

×