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 Oxy­gen, le con­struc­teur de page qui, de fait, est plus un thème vierge qu’un con­struc­teur de page. Son approche assez austère m’avait rebuté. Et puis il y avait Ele­men­tor et sa licence annuelle à 199€ pour 1 000 instal­la­tions. Ce n’est pas cher en soi, mais chaque année, il faut renou­vel­er.

Alors, quand Ele­men­tor a revu sa poli­tique tar­i­faire à la hausse, j’ai com­paré les fonc­tion­nal­ités et les tar­ifs des con­struc­teurs de page pour Word­Press. Dont Oxy­gen. J’ai décidé de ten­ter l’ex­péri­ence, vu que je n’avais pas grand chose à per­dre, si ce n’est un peu de temps.

Je ne vais pas présen­ter de manière détail­lée Oxy­gen, cet arti­cle n’est qu’une présen­ta­tion générale du con­struc­teur de page et de ses per­for­mances.

Nous allons com­mencer par une présen­ta­tion du pro­duit…

Le constructeur de page Oxygen

Si l’homme est une femme comme les autres… Oxy­genn’est pas un con­struc­teur de page (ou page builder, en anglais) comme les autres. Pour être exact, c’est un con­struc­teur pour Word­Press. Con­struc­teur de page effec­tive­ment, mais pas que. Con­struc­teur de thème égale­ment. Vu que lorsque vous activez Oxy­gen, vous dés­ac­tivez de fac­to les thèmes.

Donc un frame­work, plus proche dans sa philoso­phie de Gen­e­sis que d’Ele­men­tor ou de Guten­berg. Un Gen­e­sis WYSIWYG (très) amélioré. Qui per­met d’ha­biller un site ET de créer un mod­èle de page ou d’ar­ti­cle, au-delà de ses capac­ités effec­tives à créer une page en mode con­struc­teur de page “à la” Ele­men­tor dont il n’est décidé­ment proche ni dans l’e­sprit, ni dans le mode opéra­toire.

À not­er qu’il n’ex­iste pas de ver­sion lite d’Oxy­gen. On passe à la caisse, directe­ment. Mais la douloureuse ne l’est finale­ment pas tant que ça, vu qu’il s’ag­it d’une licence life­time (à vie) pour un nom­bre illim­ité d’in­stal­la­tions et qu’il n’y a pas besoin d’in­ve­stir dans un thème en sus du con­struc­teur de page. De 99 à 249$, en fonc­tion de vos besoins. Moins lors d’opéra­tions pro­mo­tion­nelles.

L’interface d’Oxygen

Pour accéder à un mod­èle (nom­mé tem­plate) on passe d’abord par un écran clas­sique, un peu “à la” Ele­men­tor — sauf que dans le cas présent, on n’est pas sous Guten­berg mais dans une inter­face qui n’est pas sans rap­pel­er l’an­cien édi­teur par défaut.

De là, on accède à l’édi­teur WYSIWYG. Pas de la con­struc­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… sec­tions, colonnes, titres, textes, liens, con­tenu dynamique (titre, con­tenu du post — page ou arti­cle — résumé, image à la une, etc.). On est dans le cor­rect, sans plus, un peu du niveau d’Ele­men­tor en ver­sion gra­tu­ite. Avec des mod­ules pour la créa­tion d’en-tête, de slid­ers, d’archives… en fait il ne manque rien d’essen­tiel. Il y a quelques mod­ules que je con­sid­èr­erais comme super­flus, mais mieux vaut trop que pas assez.

Les addons Oxygen

Oxy­gen n’est pas Ele­men­tor, il n’y a pas une liste infinie d’ex­ten­sions dédiées à ce con­struc­teur de page. C’est bien le dia­ble si on atteint la dizaine dans le dépôt offi­ciel Word­Press (j’en ai trou­vé pour ma part moins de cinq), et la dizaine en exten­sions payantes.

Les exten­sions gra­tu­ites, très hon­nête­ment, ne valent pas vrai­ment le déplace­ment, à l’ex­cep­tion de Oxy­gen Mobile Sub­menu qui per­met au menu mobile de se con­tracter / dépli­er, de WPDe­vDe­sign — Oxy­gen — Nav­i­ga­tor qui per­met un accès facil­ité aux mod­èles Oxy­gen depuis la barre d’ad­min­is­tra­tion de Word­Press, et de WPDe­vDe­sign – Oxy­gen – Rank Math Inte­gra­tion qui analyse les pages créées avec Oxy­gen pour le score Rank Math.

À not­er que les deux dernières exten­sions vien­nent de WPDe­vDe­sign, qui nous offre égale­ment tout un stock de tuto­riels (en anglais) sur Oxy­gen.

Par con­tre, la plu­part des exten­sions payantes sont de grande qual­ité et à jour. Et, pour ne rien gâch­er, les licences sont life­time…

Les performances d’Oxygen

Là, quand on par­le per­for­mances, on abor­de LE sujet sen­si­ble. Et pour tester en con­di­tions réelles d’u­til­i­sa­tion, j’ai répliqué mon site, j’ai instal­lé Oxy­gen, j’ai repro­duit le design des arti­cles. Et j’ai lancé toute une bat­terie de tests. Tests empiriques d’abord (ai-je vrai­ment le design que je veux, l’ex­péri­ence util­isa­teur est-elle iden­tique au niveau visuel et au niveau des fonc­tion­nal­ités…) puis tests avec Page­speed Insights et GTmetrix. Résul­tat sans appel. J’en ai prof­ité pour relook­er (légère­ment) le blog. Exit la barre latérale, exit quelques exten­sions assez gour­man­des en ressources… le gain est assez intéres­sant. On ver­ra dans la durée si ce lift­ing a un impact sig­ni­fi­catif sur la fréquen­ta­tion du blog et sur le classe­ment dans les pages Google.

Mais pour les besoins de l’ar­ti­cle, je n’ai pas util­isé les résul­tats de mon blog, vu que j’ai changé un cer­tain nom­bre de com­posants.

En pre­mier lieu, un test brut, pour avoir une idée avec une instal­la­tion vierge, et Oxy­gen comme seule exten­sion activée… con­fig­u­ra­tion totale­ment irréal­iste mais qui donne le ton, avec le nom­bre min­i­mal de requêtes, le poids min­i­mal des pages sans mise en cache, le temps de charge­ment incom­press­ible. 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 derniè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.

Dif­fi­cile de faire vrai­ment mieux. Si Suki intè­gre un design de base, ce que Oxy­gen ne fait pas, Oxy­gen rem­place a min­i­ma Ele­men­tor, qui génèr­erait davan­tage de requêtes.

À titre d’ex­em­ple, j’ai testé les deux con­fig­u­ra­tions : la page d’ex­em­ple stan­dard avec Suki + Ele­men­tor, puis avec Oxy­gen. Les résul­tats se passent de com­men­taires : 20 requêtes, 200Ko et 0,5s en plus pour le duo Suki / Ele­men­tor, con­tre tou­jours 5 requêtes, 0,9Ko et à peine 57ms de plus pour Oxy­gen. Le poids lourd des con­struc­teurs de page mérite bien son statut 😐

Mais je l’ai dit, cette con­fig­u­ra­tion n’est de toute façon pas réal­iste, c’est une con­fig­u­ra­tion de base pour un test a min­i­ma.

Pour avoir une base intéres­sante, j’ai comme tou­jours com­mencé par une instal­la­tion neuve de Word­Press (deux dans le cas présent). Même VPS, même base d’ex­ten­sions, même con­fig­u­ra­tion. J’ai ensuite créé un site one page, avec Ele­men­tor et le thème Hel­lo, et avec Oxy­gen, sans thème. J’ai ten­té de créer des pages aus­si proches que pos­si­ble visuelle­ment, même si ce n’est pas for­cé­ment évi­dent.

Voici les deux pages :

Deux pages a pri­ori sim­i­laires. Une pre­mière sec­tion en pleine page, quelques sec­tions, un menu fixe trans­par­ent et un pied de page. Quelques effets (par­al­lax et smooth scrolling prin­ci­pale­ment). Je ne me suis pas préoc­cupé 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 sim­i­laires, mais ne pren­nent pas plus de temps à charg­er l’une ou l’autre.

Mais les tests, eux, ne dis­ent pas la même chose : la ressem­blance s’ar­rête où les tests com­men­cent…

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 con­cerne le ren­du vis­i­ble
• et Page Details, qui, au-delà du temps de charge­ment total, est un peu plus tech­nique : taille de la page avec les prin­ci­paux com­posants, et nom­bre de requêtes

Si GTmetrix les met dans un mou­choir de poche, avec un très lèger avan­tage à Oxy­gen, on remar­quera quand même que le poids de la page, et que le nom­bre de requêtes sont net­te­ment en faveur d’Oxy­gen.

Tests PageSpeed Insights

Si Oxy­gen n’est pas au top :

Page­Speed n’est pas ten­dre avec Ele­men­tor 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 lab­o­ra­toire ne lais­sent aucune place au doute :

Claire­ment, Oxy­gen est plus léger et per­met de gag­n­er en rapid­ité de manière sig­ni­fica­tive. Et ce type de gain, c’est un gain ines­timable 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 con­clu­sion du para­graphe précé­dent, Oxy­gen per­met d’obtenir des pages plus légères, qui se char­gent plus rapi­de­ment et per­me­t­tent d’obtenir un meilleur score sur Page­Speed Insights — et qui dit meilleur score dit meilleur référence­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 longtemps déjà) et rapi­de à charg­er. Et c’est égale­ment val­able pour tous les autres moteurs de recherche, qui, s’ils ne drainent pas autant de traf­ic que Google, ont quand même leur util­ité et vous font gag­n­er une part de votre audi­ence.

Il ne faut pas oubli­er non plus l’ex­péri­ence util­isa­teur (UX pour les intimes) qui prof­ite de cette rapid­ité. Le taux de rebond devrait sen­si­ble­ment baiss­er, et c’est un autre point qui améliore le classe­ment Google. Et c’est nor­mal : un site sur lequel l’u­til­isa­teur passe du temps est cen­sé être plus intéres­sant qu’un site dont les util­isa­teur repar­tent avant même d’avoir eu la page affichée dans son inté­gral­ité — et vu que notre ami Google se préoc­cupe énor­mé­ment du ressen­ti de ses vis­i­teurs… même si ce n’est pas par pure bon­té d’âme 😉

Du point de vue du développeur pour finir, Oxy­gen per­met de struc­tur­er le con­tenu du site et des pages. Si le con­tenu des arti­cles reste le pré car­ré de Guten­berg, son inté­gra­tion dans un mod­èle Oxy­gen lui donne déjà une struc­ture générale. Et le HTML pro­duit par Guten­berg est plutôt de bonne fac­ture - il n’y a pas de code vrai­ment inutile, il est (comme celui d’Oxy­gen) con­forme aux recom­man­da­tions du W3C. Pas de balis­es inutiles, juste ce dont on a besoin pour con­stru­ire sa page.

Vais-je passer à Oxygen ?

La ques­tion… Oxy­gen n’est pas aus­si sou­ple d’u­til­i­sa­tion que d’autres con­struc­teurs de pages, Ele­men­tor en tête. Per­son­nelle­ment, il va me fal­loir réus­sir à l’ap­privois­er. Pas sim­ple…

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

Sa philoso­phie est dif­férente elle aus­si, même si Ele­men­tor Pro per­met lui aus­si de créer un site de A à Ζ — mais en prenant un thème pour sup­port.

un (tout petit) point négatif, Oxy­gen ne sem­ble pas com­pat­i­ble PHP8. J’ai dû repass­er mon héberge­ment en PHP 7.4, hélas ????

Ceci-dit, au vu des per­for­mances, et de la facil­ité à con­stru­ire un site com­plet avec l’édi­teur… je n’ai pas pu m’empêcher de pass­er mon blog sous Oxy­gen, avec des per­for­mances vrai­ment meilleures qu’au­par­a­vant, dont des temps de charge­ment de la page et d’af­fichage du con­tenu prin­ci­pal divisés par deux, au moins.

Je vais cer­taine­ment le réu­tilis­er, en fonc­tion des pro­jets que j’au­rai à men­er. Mais je n’ai fait qu’­ef­fleur­er les capac­ités de ce con­struc­teur de page qui me réserve, j’en suis cer­tain, bien des sur­pris­es.

Et vous, quel con­struc­teur de page utilisez-vous ? Oxy­gen, Ele­men­tor, Beaver Builder ? Ou tout sim­ple­ment le très promet­teur Guten­berg ?