Fasterize vous permet de définir simplement les règles d’optimisations que vous souhaitez activer et d’établir les éventuelles exceptions applicables. Cet article explique, règle par règle, comment procéder.

Pour chaque règle, il est possible de définir une liste de pages blacklistées (la règle ne s’appliquera pas à ces urls) ou whitelistées (cette règle s’applique uniquement à ces url).

Réduction de la taille des ressources

La taille des ressources peut être réduite à la volée par la minification des fichiers JS, CSS et HTML et l’optimisation des images.

La minification permet de compacter les fichiers en retirant à la volée les caractères superflus (espaces, commentaires…). Cette optimisation permet de gagner plusieurs Ko ce qui a un impact direct sur le temps de chargement et la bande passante.

Minification des fichiers JavaScript, CSS et HTML

Cette règle est très pertinente et sans risque pour les fichiers JavaScript. Il existe quelques cas où des exceptions peuvent être pertinentes.

Commentaires contenant des informations importantes

Les commentaires sont parfois utilisés pour des sondes de monitoring ou des scripts de récupération de données dans les pages.

Dans ce cas, il est possible de conserver les commentaires lors de la minification en cochant une case. Cette option apparaît en cliquant sur la clé à molette « plus d’options ».

Optimisation des images PNG, JPEG, GIF et SVG

Optimisation de la mise en cache

Ajouter une version à chaque ressource statique

L’ajout de version sur les resources statiques permet d’obtenir une nouvelle URL unique pour chaque resource lors d’un flush en ajoutant un paramètre de version. Lors d’une navigation future, le navigateur télécharge la nouvelle URL présente dans la page. Le référencement de la nouvelle URL provoque une mise à jour de tous les caches (CDN, navigateur, …)

Mettre en cache les pages non cachables pour les utilisateurs anonymes

Cette règle est utile pour le cas des utilisateurs sans session. Fasterize sert la page générique depuis son cache qui ne contient pas de personnalisation propre à la session. Dès qu’une session est établie, ce système est inactif.

Enlever les paramètres des ressources statiques

Les paramètres aléatoires sur les ressources statiques empêchent une mise en cache efficace

Spécifiez les paramètres qui seront supprimés (un par ligne). Laissez vide pour supprimer tous les paramètres

Réduction du nombre de requêtes

Cette règle permet de combiner les scripts JavaScript et les fichiers CSS externes en le moins de fichiers possible. Ainsi, le nombre de requêtes total se trouve réduit.

Il existe des cas où cette optimisation n’est pas pertinente.

Fichier déjà très gros

Quand un fichier JS ou CSS, même minifié, est encore très gros, il devient superflu de le concaténer avec d’autres fichiers : il peut être plus intéressant de faire plusieurs requêtes que de faire des requêtes trop grosses. Dans ce cas, le fichier trop gros peut être mis en blacklist.

Optimisation du rendu de la page

CSS first

Cette règle permet d’optimiser les performances d’affichage sur le navigateur en déplaçant les déclarations de feuilles de styles en haut de page.

Chargement différé des fichiers JavaScript

Différer le chargement des fichiers JavaScript (qui ne sont pas appelés au lancement) réduit la taille du téléchargement initial et permet d’accélérer le rendu de la page.

Le chargement différé des Javascript est la règle la plus agressive et la plus susceptible de casser la page, particulièrement si les pages se reposent sur du Javascript pour de la mise en page. Dans ce cas, vous pouvez exclure un script particulier pour que son chargement ne soit pas différé :

• en l’ajoutant dans les règles d’exclusion par URL (blacklist)
• en ajoutant l’attribut nodefer dans la balise script

Deux paramètres permettent d’affiner la règle de chargement différé des fichiers JS, ils sont accessibles derrière la clé à molette.

Limiter le chargement différé aux domaines externes

Le chargement différé des fichiers JavaScript ne sera appliqué que sur les fichiers provenant de domaines externes au domaine de la page (widgets, tags, …)

Préchargement des scripts différés

Ajoute une balise link rel=preload pour chaque script différé

Inlining

Inclusions des petites images dans les pages web

Cette règle inclut les petites images directement dans le code HTML et permet donc de gagner le temps des requêtes faites pour chaque image. C’est particulièrement important pour les sites mobiles.

Chargement différé des images non visibles

Télécharger seulement les images visibles permet d’économiser de la bande passante, des requêtes et de ne pas bloquer le rendu de la page.

Chargement en parallèle

Parallélisation des chargements sur plusieurs domaines sans cookie

Les navigateurs n’ouvrent qu’un nombre limité de requêtes simultanées sur un même domaine. Utiliser plusieurs domaines contourne cette limite. Aucun cookie n’est placé sur les nouveaux domaines.

Sharding

Permet de lever une limite de HTTP 1.1

Objectif : Augmenter la possibilité de téléchargement de resources en parallèle en contournant les limites des navigateurs (en HTTP 1.1, 6 à 8 ressources peuvent être appelées en parallèle selon le navigateur).

On répartit les ressources sur plusieurs domaines (de type s0.frz.io et s1.frz.io).

Avantages à utiliser ces domaines :

• ce sont des domaines sans cookie, ce qui permet d’économiser l’envoie du cookie à chaque requête
• on peut résoudre ces noms de domaine sur le CDN de Fasterize ou celui du client sans avoir à faire de configuration complexe

La sur-utilisation du sharding peut provoquer un nombre trop important de résolutions DNS, ce qui a un coût au chargement de la page.

Unsharding

Objectif : réduire le nombre de domaines utilisés afin de profiter de la connexion unique de HTTP 2 = réduire le nombre résolutions DNS et de négociations TLS.

• Moins de résolutions DNS
• Moins de connexions à établir
• Moins de « négociations » HTTPS

Réécrit les URL en utilisant le domaine de la page

Les URL des ressources ‘unshardées’ seront réécritent en utilisant le domaine de la page pour minimiser le nombre de résolutions DNS ou pour réutiliser le CDN du site web pour des ressources externes.

Balises HTML personnalisées

Optimisation des images dont la source est située dans une balise HTML personnalisée

Etendre les optimisations des images aux balises HTML personnalisées

Si une page est cassée

Désactivation des règles

Il est possible de désactiver des règles pour une page donnée en ajoutant un paramètre spécifique à l’url : ?frz-[règle]=true|false

[règle] est à remplacer par la dénomination correcte. La liste des dénominations des règles est disponible ici.

Si une page est cassée à cause d’une règle, il est possible

• soit de désactiver la règle pour cette page (blacklist)
• soit d’exclure la page de toutes optimisations
• soit de désactiver la règle pour toutes les pages

Les règles le plus susceptible de casser les pages sont dans l’ordre :

• DeferJS : si du Javascript est utilisé pour construire la mise en page
• Concaténation : si une erreur de syntaxe JS ou CSS se situant à la fin d’un fichier unique (et étant du coup masquée) se retrouve en milieu de fichier via la concaténation
• Minification : cas rares où du code HTML non valide provoque des erreurs
• Lazyloading : cas rares où du lazyloading existe déjà mais n’a pas été détecté par Fasterize

En cas de vrai souci, il y a un bouton on/off sur le dashboard qui permet d’arrêter instantanément les optimisations (mais le trafic passe tout de même par la plateforme).

Plus de détails sur cette page.