Options d'optimisation de la performance

Bloat Eliminator

Pour accéder aux réglages de Bloat Eliminator : depuis l'écran d’administration de WordPress, sélectionnez Oxygen > Settings puis l’onglet Bloat Eliminator.

Ces paramètres vous permettent de désactiver certains scripts et fonctionnalités tiers qui ne sont pas nécessaires sur chaque site, ce qui vous permet d’optimiser davantage les performance de votre site Oxygen.

• Disable WP Emojis : Désactive JavaScript natif dans WordPress en charge du rendu des émoticones.
• Disable jQuery Migrate : Désactive la prise en charge de la compatibilité avec d’anciennes versions de jQuery.
• Disable Embeds : Désactive l’incorporation automatique de certains contenus tels que les vidéos YouTube, les Tweets, etc. lors de l’insertion d’une URL dans les articles de blog.
• Disable Google Fonts : Désactive complètement Google Fonts pour votre site.
• Disable Webfont.js : Oblige Google Font à être inclus en utilisant une méthode CSS plutôt que Webfont.js.

Image srcset

Srcset est un attribut d’image permettant au navigateur de charger intelligemment la taille d’image la plus appropriée à afficher, en fonction de la taille de la fenêtre. Pour utiliser srcset, vous devez utiliser un élément Image via +Add > Basics.

1. Sélectionnez l’élément Image
2. Dans le panneau Propriétés, choisissez Media Library.
3. Dans le champs ID, cliquez sur le bouton Browse.
4. Téléversez ou choisissez l’image que vous souhaitez utiliser et cliquez sur Select Image.
5. Utilisez ensuite le menu déroulant Size pour choisir la taille d’image que vous souhaitez utiliser.

En chargeant l’image de cette manière, tant que vous n’avez pas choisi la plus petite taille dans la liste déroulante Size, l’image utilisera l’attribut srcset pour déterminer quelle version charger en fonction de la taille de la fenêtre d’affichage, ce qui améliorera les temps de chargement des pages.

Plus d’informations: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Sélecteur de poids des Polices Google Fonts

Par défaut, si vous utilisez une police Google dans Oxygen, toutes les épaisseurs de police sont disponibles et sont chargées tant qu’elles sont utilisées quelque part sur la page ou l’article que vous consultez.

Le nouveau sélecteur de Google Fonts vous permet de spécifier précisément les épaisseurs et italiques que vous souhaitez utiliser afin de ne charger que ces épaisseurs. Et ce, quelles que soient les épaisseurs définies pour les textes de votre site.

1. Allez à Manage > Settings > Global Styles > Fonts
2. Choisissez une Police Google parmi celles existantes en option ou ajoutez en une.
3. Lorsque vous avez choisi une Police Google, cliquez sur le lien Weights » en dessous du menu déroulant.
4. Cochez la case pour chaque épaisseur/italic que vous souhaitez charger sur votre site.

En cochant ces cases, vous demandez à Oxygen de charger uniquement les épaisseurs sélectionnées.

Ainsi, si un élément de texte a été défini sur 400, mais que vous n’avez sélectionné que 300 et 700 dans le sélecteur des polices de Google, le navigateur chargera l’épaisseur disponible la plus proche (pour cet exemple, 300) pour cet élément de texte.

De plus, en choisissant l’italique dans le sélecteur, votre site chargera la véritable italique de Google. Si vous ne sélectionnez pas d'italiques, le navigateur affichera les textes en italique (voir dans Advanced -> Typography) avec de fausses italiques, se contentant d’incliner la police en question.

Greg C. / Ph. Reskator