Oxygen - une bouffée d'air frais pour votre site

Dans le monde des constructeurs de page, Oxygen est un outsider, loin des poids lourds du marché. Et pourtant… il ne manque pas d'atouts pour séduire.

Cet article prend 8 minutes à lire et comporte 1872 mots.

Il y a quelques années déjà que j’ai décou­vert Oxygen, le construc­teur de page qui, de fait, est plus un thème vierge qu’un construc­teur de page. Son approche assez austère m’avait rebuté. Et puis il y avait Elementor et sa licence annuelle à 199€ pour 1 000 instal­la­tions. Ce n’est pas cher en soi, mais chaque année, il faut renouveler.

Alors, quand Elementor a revu sa poli­tique tari­faire à la hausse, j’ai comparé les fonc­tion­na­li­tés et les tarifs des construc­teurs de page pour WordPress. Dont Oxygen. J’ai décidé de tenter l’ex­pé­rience, vu que je n’avais pas grand chose à perdre, si ce n’est un peu de temps.

Je ne vais pas présen­ter de manière détaillée Oxygen, cet article n’est qu’une présen­ta­tion géné­rale du construc­teur de page et de ses performances.

Nous allons commen­cer par une présen­ta­tion du produit…

Le constructeur de page Oxygen

Si l’homme est une femme comme les autres… Oxygen n’est pas un construc­teur de page (ou page buil­der, en anglais) comme les autres. Pour être exact, c’est un construc­teur pour WordPress. Constructeur de page effec­ti­ve­ment, mais pas que. Constructeur de thème égale­ment. Vu que lorsque vous acti­vez Oxygen, vous désac­ti­vez de facto les thèmes.

Donc un frame­work, plus proche dans sa philo­so­phie de Genesis que d’Elementor ou de Gutenberg. Un Genesis WYSIWYG (très) amélioré. Qui permet d’ha­biller un site ET de créer un modèle de page ou d’ar­ticle, au-delà de ses capa­ci­tés effec­tives à créer une page en mode construc­teur de page « à la » Elementor dont il n’est déci­dé­ment proche ni dans l’es­prit, ni dans le mode opératoire.

À noter qu’il n’existe pas de version lite d’Oxygen. On passe à la caisse, direc­te­ment. Mais la doulou­reuse ne l’est fina­le­ment pas tant que ça, vu qu’il s’agit d’une licence life­time (à vie) pour un nombre illi­mité d’ins­tal­la­tions et qu’il n’y a pas besoin d’in­ves­tir dans un thème en sus du construc­teur de page. De 99 à 249$, en fonc­tion de vos besoins. Moins lors d’opé­ra­tions promotionnelles.

L’interface d’Oxygen

Pour accé­der à un modèle (nommé template) on passe d’abord par un écran clas­sique, un peu « à la » Elementor – sauf que dans le cas présent, on n’est pas sous Gutenberg mais dans une inter­face qui n’est pas sans rappe­ler l’an­cien éditeur par défaut.

De là, on accède à l’édi­teur WYSIWYG. Pas de la construc­tion en front, mais on s’en approche.

Les modules internes d’Oxygen

Il y a large­ment de quoi créer une page, de quoi créer un site… sections, colonnes, titres, textes, liens, contenu dyna­mique (titre, contenu du post – page ou article – résumé, image à la une, etc.). On est dans le correct, sans plus, un peu du niveau d’Elementor en version gratuite. Avec des modules pour la créa­tion d’en-tête, de sliders, d’ar­chives… en fait il ne manque rien d’es­sen­tiel. Il y a quelques modules que je consi­dè­re­rais comme super­flus, mais mieux vaut trop que pas assez.

Les addons Oxygen

Oxygen n’est pas Elementor, il n’y a pas une liste infi­nie d’ex­ten­sions dédiées à ce construc­teur de page. C’est bien le diable si on atteint la dizaine dans le dépôt offi­ciel WordPress (j’en ai trouvé pour ma part moins de cinq), et la dizaine en exten­sions payantes.

Les exten­sions gratuites, très honnê­te­ment, ne valent pas vrai­ment le dépla­ce­ment, à l’ex­cep­tion de Oxygen Mobile Submenu qui permet au menu mobile de se contrac­ter / déplier, de WPDevDesign – Oxygen – Navigator qui permet un accès faci­lité aux modèles Oxygen depuis la barre d’ad­mi­nis­tra­tion de WordPress, et de WPDevDesign – Oxygen – Rank Math Integration qui analyse les pages créées avec Oxygen pour le score Rank Math. 

À noter que les deux dernières exten­sions viennent de WPDevDesign, qui nous offre égale­ment tout un stock de tuto­riels (en anglais) sur Oxygen.

Par contre, la plupart des exten­sions payantes sont de grande qualité et à jour. Et, pour ne rien gâcher, les licences sont lifetime… 

Les performances d’Oxygen

Là, quand on parle perfor­mances, on aborde LE sujet sensible. Et pour tester en condi­tions réelles d’uti­li­sa­tion, j’ai répli­qué mon site, j’ai installé Oxygen, j’ai repro­duit le design des articles. Et j’ai lancé toute une batte­rie de tests. Tests empi­riques d’abord (ai-je vrai­ment le design que je veux, l’ex­pé­rience utili­sa­teur est-elle iden­tique au niveau visuel et au niveau des fonc­tion­na­li­tés…) puis tests avec Pagespeed Insights et GTmetrix. Résultat sans appel. J’en ai profité pour reloo­ker (légè­re­ment) le blog. Exit la barre laté­rale, exit quelques exten­sions assez gour­mandes en ressources… le gain est assez inté­res­sant. On verra dans la durée si ce lifting a un impact signi­fi­ca­tif sur la fréquen­ta­tion du blog et sur le clas­se­ment dans les pages Google.

Mais pour les besoins de l’ar­ticle, je n’ai pas utilisé les résul­tats de mon blog, vu que j’ai changé un certain nombre de composants.

En premier lieu, un test brut, pour avoir une idée avec une instal­la­tion vierge, et Oxygen comme seule exten­sion acti­vée… confi­gu­ra­tion tota­le­ment irréa­liste mais qui donne le ton, avec le nombre mini­mal de requêtes, le poids mini­mal des pages sans mise en cache, le temps de char­ge­ment incom­pres­sible. Et honnê­te­ment, c’est bien, sans être extra­or­di­naire : on est au niveau de Suki (pour infor­ma­tion 0,6s, 28,5Ko et 6 requêtes dans sa dernière version, la 1.2.13 au moment du test), qui déjà place la barre très haut. 364ms, 34,6Ko et 5 requêtes.

Difficile de faire vrai­ment mieux. Si Suki intègre un design de base, ce que Oxygen ne fait pas, Oxygen remplace a minima Elementor, qui génè­re­rait davan­tage de requêtes.

À titre d’exemple, j’ai testé les deux confi­gu­ra­tions : la page d’exemple stan­dard avec Suki + Elementor, puis avec Oxygen. Les résul­tats se passent de commen­taires : 20 requêtes, 200Ko et 0,5s en plus pour le duo Suki / Elementor, contre toujours 5 requêtes, 0,9Ko et à peine 57ms de plus pour Oxygen. Le poids lourd des construc­teurs de page mérite bien son statut 😐

Mais je l’ai dit, cette confi­gu­ra­tion n’est de toute façon pas réaliste, c’est une confi­gu­ra­tion de base pour un test a minima.

Pour avoir une base inté­res­sante, j’ai comme toujours commencé par une instal­la­tion neuve de WordPress (deux dans le cas présent). Même VPS, même base d’ex­ten­sions, même confi­gu­ra­tion. J’ai ensuite créé un site one page, avec Elementor et le thème Hello, et avec Oxygen, sans thème. J’ai tenté de créer des pages aussi proches que possible visuel­le­ment, même si ce n’est pas forcé­ment évident.

Voici les deux pages :

Deux pages a priori simi­laires. Une première section en pleine page, quelques sections, un menu fixe trans­pa­rent et un pied de page. Quelques effets (paral­lax et smooth scrol­ling prin­ci­pa­le­ment). Je ne me suis pas préoc­cupé des hauteurs de sections ou des réglages exacts des marges ou de ce type de détails sans inté­rêt : une marge de 75px et une de 3em ne sont pas simi­laires, mais ne prennent pas plus de temps à char­ger l’une ou l’autre.

Mais les tests, eux, ne disent pas la même chose : la ressem­blance s’ar­rête où les tests commencent…

Tests GTmetrix

Il y a deux parties inté­res­santes dans les tests GTmetrix : 

• en premier lieu, le rapport Web Vitals qui concerne le rendu visible
• et Page Details, qui, au-delà du temps de char­ge­ment total, est un peu plus tech­nique : taille de la page avec les prin­ci­paux compo­sants, et nombre de requêtes

Si GTmetrix les met dans un mouchoir de poche, avec un très lèger avan­tage à Oxygen, on remar­quera quand même que le poids de la page, et que le nombre de requêtes sont nette­ment en faveur d’Oxygen.

Tests PageSpeed Insights

Si Oxygen n’est pas au top :

PageSpeed n’est pas tendre avec Elementor Pro :

Et pour le rendu sur un ordi­na­teur, les résul­tats sont à nouveau sans appel :

Les données de labo­ra­toire ne laissent aucune place au doute :

Clairement, Oxygen est plus léger et permet de gagner en rapi­dité de manière signi­fi­ca­tive. Et ce type de gain, c’est un gain ines­ti­mable côté SEO.

Quel intérêt à passer à Oxygen ?

Nous l’avons vu au fil des tests dans le para­graphe précé­dent, et c’est même la conclu­sion du para­graphe précé­dent, Oxygen permet d’ob­te­nir des pages plus légères, qui se chargent plus rapi­de­ment et permettent d’ob­te­nir un meilleur score sur PageSpeed Insights – et qui dit meilleur score dit meilleur réfé­ren­ce­ment. Même si le poids des pages ne fait pas tout, n’ou­bliez pas que Google indexe en mode mobile first. Donc un site respon­sive (mais ce point est acquis depuis long­temps déjà) et rapide à char­ger. Et c’est égale­ment valable pour tous les autres moteurs de recherche, qui, s’ils ne drainent pas autant de trafic que Google, ont quand même leur utilité et vous font gagner une part de votre audience.

Il ne faut pas oublier non plus l’ex­pé­rience utili­sa­teur (UX pour les intimes) qui profite de cette rapi­dité. Le taux de rebond devrait sensi­ble­ment bais­ser, et c’est un autre point qui améliore le clas­se­ment Google. Et c’est normal : un site sur lequel l’uti­li­sa­teur passe du temps est censé être plus inté­res­sant qu’un site dont les utili­sa­teur repartent avant même d’avoir eu la page affi­chée dans son inté­gra­lité – et vu que notre ami Google se préoc­cupe énor­mé­ment du ressenti de ses visi­teurs… même si ce n’est pas par pure bonté d’âme 😉

Du point de vue du déve­lop­peur pour finir, Oxygen permet de struc­tu­rer le contenu du site et des pages. Si le contenu des articles reste le pré carré de Gutenberg, son inté­gra­tion dans un modèle Oxygen lui donne déjà une struc­ture géné­rale. Et le HTML produit par Gutenberg est plutôt de bonne facture - il n’y a pas de code vrai­ment inutile, il est (comme celui d’Oxygen) conforme aux recom­man­da­tions du W3C. Pas de balises inutiles, juste ce dont on a besoin pour construire sa page.

Vais-je passer à Oxygen ?

La ques­tion… Oxygen n’est pas aussi souple d’uti­li­sa­tion que d’autres construc­teurs de pages, Elementor en tête. Personnellement, il va me falloir réus­sir à l’ap­pri­voi­ser. Pas simple…

Il n’y a pas autant d’ad­dons que pour Elementor ou que pour Beaver Builder, mais bien évidem­ment plus que pour Brizzy qui n’en a aucun à l’heure actuelle.

Sa philo­so­phie est diffé­rente elle aussi, même si Elementor Pro permet lui aussi de créer un site de A à Ζ – mais en prenant un thème pour support.

un (tout petit) point néga­tif, Oxygen ne semble pas compa­tible PHP8. J’ai dû repas­ser mon héber­ge­ment en PHP 7.4, hélas 😭

Ceci-dit, au vu des perfor­mances, et de la faci­lité à construire un site complet avec l’édi­teur… je n’ai pas pu m’empêcher de passer mon blog sous Oxygen, avec des perfor­mances vrai­ment meilleures qu’au­pa­ra­vant, dont des temps de char­ge­ment de la page et d’af­fi­chage du contenu prin­ci­pal divi­sés par deux, au moins.

Je vais certai­ne­ment le réuti­li­ser, en fonc­tion des projets que j’au­rai à mener. Mais je n’ai fait qu’ef­fleu­rer les capa­ci­tés de ce construc­teur de page qui me réserve, j’en suis certain, bien des surprises.

Et vous, quel construc­teur de page utilisez-vous ? Oxygen, Elementor, Beaver Builder ? Ou tout simple­ment le très promet­teur Gutenberg ?