Publié lundi 30 janvier 2012 00:52 par Arnault Nouvel

[SharePoint 2010] Site internet et performances : poids et nombre des ressources

Microsoft SharePoint Server 2010

Un site internet hébergé sur SharePoint 2010, c’est bien. Si il s’affiche vite, c’est mieux!

Introduction

Lorsque l’on travaille sur les performances dans le cadre d’une application web, SharePoint ou non, il y a 3 phases à prendre en compte :

  • Le temps que les pages mettent à être générées côté serveur
  • Le temps mis par le navigateur pour télécharger la page (html) et les ressources qui y sont référencées (css, js, images..)
  • Le temps mis par le navigateur pour afficher la page et exécuter les éventuels scripts d’initialisation

A l’heure où la mamie du cantal découvre les joies du surf sur son Smartphone, le développeur doit s’assurer que son site internet s’affichera avec des performances acceptables malgré d’éventuels problèmes de bande passante.

Nous allons aujourd’hui faire un focus sur l’optimisation des performances d’un site internet SharePoint 2010 vis à vis de la 2ème phase, le téléchargement des ressources. Les 2 facteurs principaux sont le poids, mais aussi et surtout le nombre de fichiers référencés.
Nous allons donc voir comment réduire le poids et le nombre des fichiers ressources référencés dans nos pages.

1. Réduire le poids des ressources

Page et ViewState

Dans la plupart des cas le poids de la page est négligeable comparé au poids des ressources.
Par exemple la page d’accueil du site http://www.ca-ifcam.fr pèse 17Ko, pour un total de 660Ko si on ajoute les images, scripts et autres ressources qu’elle référence.

Attention toutefois au ViewState ASP.NET qui est activé par défaut sur tous les contrôles de la page. Il peut faire grossir considérablement le poids des pages si on n’y prête pas attention.
Sur un site internet, il n’y a en principe pas ou peu de raison de faire des retours serveur (PostBack), et donc pas de raison de laisser le ViewState activé.
Pour désactiver le ViewState sur les contrôles où il n’est pas nécessaire, on utilisera l’attribut EnableViewState.

image

Pour plus d’information sur le ViewState, je vous redirige vers la MSDN : Understanding ASP.NET View State

Compression des ressources CSS et JavaScript

Une optimisation incontournable est la compression des fichiers référencés, en particulier les fichiers CSS et JavaScript.

Dans le cadre du site internet IFCAM, nous avons utilisé la librairie YUI Compressor de Yahoo ou plutôt son portage en .NET que l’on peut télécharger librement sur CodePlex : Yahoo! UI Library: YUI Compressor for .Net.
Cette implémentation propose notamment des tâches MSBuild permettant d’automatiser la compression des fichiers lors des builds.

YUI Compressor réduit le poids des CSS et des fichiers JavaScript en supprimant les espaces, commentaires, en réduisant le nombre de caractère des noms de variables, et en faisant d’autres optimisations issues de l’analyse de chaque fichier.
Le gain est significatif :

image

image

Dans notre solution Visual Studio, tous les fichiers css et js existent en version originale (*.debug.css et *.debug.js) et en version compressée (*.css et *.js). On régénère les versions compressées à partir des versions originales avant chaque compilation en mode release.
Pour travailler confortablement, nous avons développé un contrôle spécifique pour référencer les feuilles de style css. Il référence dynamiquement la version debug ou compressée d’un fichier en fonction de la variable de compilation DEBUG.

Code source du contrôle épuré pour meilleure lisibilité :

image

On le positionne dans la balise head de la master page :

image

Cela permet de travailler normalement durant la phase de développement (fichiers originaux debug.css), et d’être sûr que c’est la version compressée qui sera référencée sur l’environnement de production, puisque nous livrons toujours des packages compilés en mode release..

Pour le référencement des fichiers JavaScript, pas besoin de développement spécifique. Il est possible d’utiliser le contrôle ScriptLink de l’API SharePoint qui fonctionne selon le même principe.
Je vous invite à consulter le post de Wictor Wilen qui détaille bien cette approche : http://www.wictorwilen.se/Post/Minifying-custom-JavaScript-files-in-SharePoint-2010.aspx

2. Réduire le nombre des ressources

D’un point de vue expérience utilisateur, l’optimisation la plus significative est de limiter le nombre de fichiers référencés. Le navigateur fera moins d’allers-retours avec le serveur, et affichera donc la page plus vite. Nous allons voir deux méthodes pour réduire le nombre de fichiers référencés : une qui est valable pour toutes les applications web puisqu’elle concerne les images, et une autre spécifique à SharePoint..

Regroupement des images avec CSS Sprites

Le concept de CSS Sprites consiste à mettre plusieurs images côte à côte dans un seul fichier image. On réutilise alors cette image sur tous les boutons de la page et pour chacun d’entre eux on utilise le positionnement CSS pour afficher la partie de l’image qui lui correspond. On notera que ce concept est déjà utilisé par SharePoint pour regrouper dans une seule image toutes les icônes des boutons du ruban.

Pour l’exemple, voici une image construite en CSS Sprite qui regroupe une vingtaine d’images (cliquez pour agrandir) :

bg-blocks

Et la voici utilisée sur la page d’accueil du site IFCAM :

image

Grâce à ce système, on fait l’économie d’une vingtaine d’allers-retours serveur ce qui permet un affichage bien plus rapide de la page dans le navigateur. Cela n’économise pas de bande passante, mais permet d’éviter au navigateur d’établir une connexion par image, ce qui prendrait un temps significatif et potentiellement plus long que les téléchargements eux-mêmes. On notera d’ailleurs que les navigateurs ne doivent pas établir plus de 2 connexions simultanées avec un même serveur (RFC 2616), ce qui empêche de télécharger toutes les images d’une page en parallèle. Sans CSS sprite, les images doivent donc être téléchargées les unes après les autres ce qui ralentit l’affichage.

Un autre avantage du CSS sprite c’est que si l’image “mouse over” d’un bouton est inclue dans la même image que l’originale, il suffit de jouer sur le positionnement en conservant la même image lors du survol de la souris, ce qui est instantané.

A première vue, cela parait complexe à mettre en œuvre mais en utilisant un bon outil, c’est facile.
On en trouve beaucoup sur internet, mais j’ai une préférence Sprite Me qui permet de générer les images et les css à l’aide d’un bookmarklet.
Je vous invite à essayer la démo sur le site http://spriteme.org, l’essayer c’est l’adopter.

Déréférencement des fichiers spécifiques SharePoint

Voici maintenant une méthode spécifique SharePoint. Par défaut dans SharePoint 2010, un grand nombre de fichiers JavaScript et CSS sont référencés. Ceux-ci n’ont pas tous d’intérêt dans le cadre d’un site internet, comme par exemple ceux qui permettent le fonctionnement du ruban. En effet sur un site internet, on n’affiche pas le ruban. On notera aussi que ces fichiers sont particulièrement volumineux.

Dans le cas du site IFCAM, nous souhaitions que pour les internautes, le ruban ne soient pas affiché. Dans ce cas, nous ne voulions pas non plus référencer les CSS systèmes de SharePoint ni les fichiers JavaScript du ruban.

La solution que nous avons retenu est implémentée en 2 parties.

Premièrement nous avons encapsulé certaines références explicites dans notre contrôle spécifique AuthenticatedUserPlaceHolder dont j’avais parlé dans le billet SharePoint 2010 : Masquer le ruban sur un site internet. Ainsi si l’utilisateur est anonyme, les CSS "système" de SharePoint ne seront pas référencées.

image

Lors de l’affichage de la page d’accueil du site IFCAM en anonyme, cette méthode permet d’économiser le téléchargement de controls.css (10Ko) et de corev4.css (30Ko).

Deuxièmement, nous souhaitions nous débarrasser de certains fichiers JavaScript inutiles pour un site internet tels que cui.js, core.js, et SP.Ribbon.js. Ces fichiers ont la particularité d’être référencés dynamiquement via une technique de lazy loading.
Malheureusement jusqu’à peu, la seule méthode connue pour empêcher leur référencement dans les pages consistait en une méthode peu esthétique et non supportée à base de System.Reflection, Celle-ci est détaillée dans le billet de Chris O’Brien : Eliminating large JS files to optimize SharePoint 2010 internet sites.

Il y a quelques jours, les ingénieurs de l’équipe produit de SharePoint ont révélé une manière supportée de parvenir au même résultat, Il suffit d’utiliser une méthode JavaScript non documentée prévue à cet effet.
Merci à Pierrick pour le lien : Supported way of eliminating (large) JS files for SharePoint 2010
L’astuce consiste à enregistrer cette petite instruction JavaScript en bas de page pour que les fichiers JavaScript en question ne soient pas téléchargés :

<script type='text/javascript'>SP.SOD.set_prefetch(0);</script>

Simple, et tout aussi efficace. En pratique, on l’encapsulera bien sur dans un contrôle serveur pour qu’elle ne soit exécutée que dans les cas où on n’a pas besoin des fichiers JavaScript qu’elle empêche de télécharger.

Ci-dessous les métriques pour la page d’accueil prises à l’instant dans ma machine virtuelle de développement.

Sans l’instruction JavaScript :

image

Avec l’instruction JavaScript:

image

On observe une différence de 15 fichiers, représentant 140Ko.

Conclusion

Nous avons vu dans ce billet comment le développeur peut améliorer les performances d’un site internet SharePoint en réduisant le poids des fichiers référencés ainsi que leur nombre.
Pour des performances optimales, l’administrateur aura aussi son rôle à jouer : n’oubliez pas de configurer le BlobCache et le cache de sortie.


Arnault Nouvel
MVP SharePoint Server
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

# re: [SharePoint 2010] Site internet et performances : poids et nombre des ressources @ mardi 31 janvier 2012 11:02

Très intéressant.

Pour ceux qui sont sous SharePoint 2007 (valable aussi sous 2010 pour certains), je vous invite à regarder ici aussi :

- http://blogs.developpeur.org/fabrice69/archive/tags/Performance/default.aspx

Romelard Fabrice [MVP]

ROMELARD Fabrice


Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01