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 aus­tère m’a­vait rebu­té. Et puis il y avait Elementor et sa licence annuelle à 199€ pour 1 000 ins­tal­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 com­pa­ré les fonc­tion­na­li­tés et les tarifs des construc­teurs de page pour WordPress. Dont Oxygen. J’ai déci­dé de ten­ter l’ex­pé­rience, vu que je n’a­vais 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 com­men­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 éga­le­ment. Vu que lorsque vous acti­vez Oxygen, vous désac­ti­vez de fac­to les thèmes.

Donc un fra­me­work, plus proche dans sa phi­lo­so­phie de Genesis que d’Elementor ou de Gutenberg. Un Genesis WYSIWYG (très) amé­lio­ré. Qui per­met 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 ver­sion lite d’Oxygen. On passe à la caisse, direc­te­ment. Mais la dou­lou­reuse ne l’est fina­le­ment pas tant que ça, vu qu’il s’a­git d’une licence life­time (à vie) pour un nombre illi­mi­té 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’o­pé­ra­tions promotionnelles.

L’interface d’Oxygen

Pour accé­der à un modèle (nom­mé tem­plate) on passe d’a­bord 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 rap­pe­ler l’an­cien édi­teur 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 lar­ge­ment de quoi créer une page, de quoi créer un site… sec­tions, colonnes, titres, textes, liens, conte­nu dyna­mique (titre, conte­nu du post — page ou article — résu­mé, image à la une, etc.). On est dans le cor­rect, sans plus, un peu du niveau d’Elementor en ver­sion gra­tuite. Avec des modules pour la créa­tion d’en-tête, de sli­ders, 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 trou­vé pour ma part moins de cinq), et la dizaine en exten­sions payantes.

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

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

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

Les performances d’Oxygen

Là, quand on parle per­for­mances, on aborde LE sujet sen­sible. Et pour tes­ter en condi­tions réelles d’u­ti­li­sa­tion, j’ai répli­qué mon site, j’ai ins­tal­lé Oxygen, j’ai repro­duit le desi­gn des articles. Et j’ai lan­cé toute une bat­te­rie de tests. Tests empi­riques d’a­bord (ai-je vrai­ment le desi­gn que je veux, l’ex­pé­rience uti­li­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 pro­fi­té pour reloo­ker (légè­re­ment) le blog. Exit la barre laté­rale, exit quelques exten­sions assez gour­mandes en res­sources… le gain est assez inté­res­sant. On ver­ra dans la durée si ce lif­ting 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 uti­li­sé les résul­tats de mon blog, vu que j’ai chan­gé un cer­tain nombre de composants.

En pre­mier lieu, un test brut, pour avoir une idée avec une ins­tal­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 hon­nê­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 der­nière ver­sion, 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 desi­gn de base, ce que Oxygen ne fait pas, Oxygen rem­place a mini­ma Elementor, qui génè­re­rait davan­tage de requêtes.

À titre d’exemple, j’ai tes­té 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 com­men­taires : 20 requêtes, 200Ko et 0,5s en plus pour le duo Suki / Elementor, contre tou­jours 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éa­liste, c’est une confi­gu­ra­tion de base pour un test a minima.

Pour avoir une base inté­res­sante, j’ai comme tou­jours com­men­cé par une ins­tal­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 ten­té de créer des pages aus­si proches que pos­sible visuel­le­ment, même si ce n’est pas for­cé­ment évident.

Voici les deux pages :

Deux pages a prio­ri simi­laires. Une pre­mière sec­tion en pleine page, quelques sec­tions, 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­cu­pé des hau­teurs de sec­tions 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 res­sem­blance s’ar­rête où les tests commencent…

Tests GTmetrix

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

• en pre­mier lieu, le rap­port Web Vitals qui concerne le ren­du 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 com­po­sants, et nombre de requêtes

Si GTmetrix les met dans un mou­choir de poche, avec un très lèger avan­tage à Oxygen, on remar­que­ra quand même que le poids de la page, et que le nombre de requêtes sont net­te­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 ren­du sur un ordi­na­teur, les résul­tats sont à nou­veau sans appel :

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

Clairement, Oxygen est plus léger et per­met de gagner en rapi­di­té 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’a­vons 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 per­met d’ob­te­nir des pages plus légères, qui se chargent plus rapi­de­ment et per­mettent 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 res­pon­sive (mais ce point est acquis depuis long­temps déjà) et rapide à char­ger. Et c’est éga­le­ment valable pour tous les autres moteurs de recherche, qui, s’ils ne drainent pas autant de tra­fic que Google, ont quand même leur uti­li­té et vous font gagner une part de votre audience.

Il ne faut pas oublier non plus l’ex­pé­rience uti­li­sa­teur (UX pour les intimes) qui pro­fite de cette rapi­di­té. Le taux de rebond devrait sen­si­ble­ment bais­ser, et c’est un autre point qui amé­liore le clas­se­ment Google. Et c’est nor­mal : un site sur lequel l’u­ti­li­sa­teur passe du temps est cen­sé être plus inté­res­sant qu’un site dont les uti­li­sa­teur repartent avant même d’a­voir eu la page affi­chée dans son inté­gra­li­té — et vu que notre ami Google se pré­oc­cupe énor­mé­ment du res­sen­ti de ses visi­teurs… même si ce n’est pas par pure bon­té d’âme 😉

Du point de vue du déve­lop­peur pour finir, Oxygen per­met de struc­tu­rer le conte­nu du site et des pages. Si le conte­nu des articles reste le pré car­ré de Gutenberg, son inté­gra­tion dans un modèle Oxygen lui donne déjà une struc­ture géné­rale. Et le HTML pro­duit par Gutenberg est plu­tôt de bonne fac­ture - 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 aus­si souple d’u­ti­li­sa­tion que d’autres construc­teurs de pages, Elementor en tête. Personnellement, il va me fal­loir 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 évi­dem­ment plus que pour Brizzy qui n’en a aucun à l’heure actuelle.

Sa phi­lo­so­phie est dif­fé­rente elle aus­si, même si Elementor Pro per­met lui aus­si de créer un site de A à Ζ — mais en pre­nant un thème pour support.

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

Ceci-dit, au vu des per­for­mances, et de la faci­li­té à construire un site com­plet avec l’é­di­teur… je n’ai pas pu m’empêcher de pas­ser mon blog sous Oxygen, avec des per­for­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 conte­nu prin­ci­pal divi­sés par deux, au moins.

Je vais cer­tai­ne­ment le réuti­li­ser, en fonc­tion des pro­jets 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 cer­tain, bien des surprises.

Et vous, quel construc­teur de page uti­li­sez-vous ? Oxygen, Elementor, Beaver Builder ? Ou tout sim­ple­ment le très pro­met­teur Gutenberg ?