Comment transformer une page Elementor en simple HTML et CSS

Une page construite avec Elementor est assemblée par WordPress et PHP à chaque visite, mais ce qui arrive dans le navigateur, c'est du HTML, du CSS et du JavaScript ordinaires. C'est précisément ce qui rend une copie statique possible : vous gardez le résultat et vous abandonnez la machinerie qui l'a produit. On le fait pour héberger n'importe où une landing page terminée, pour ne plus entretenir une installation WordPress pour un site qui ne change jamais, ou pour accélérer le chargement d'une page lourde.

Elementor n'a pas de bouton pour cela. Son propre export produit un fichier de template au format JSON, destiné à être réimporté dans Elementor, et non du HTML que l'on peut héberger. Le travail se fait donc en trois étapes : enregistrer la page rendue, réduire le CSS à ce qu'elle utilise réellement, et remplacer les parties qui dépendaient de WordPress.

Ce qui survit au passage, et ce qui ne survit pas

Si la page se résume surtout aux deux premières lignes, une copie statique est un gain facile. Si elle repose sur des formulaires, des listes de boutique ou un fil de blog, gardez-la dans WordPress et accélérez-la plutôt sur place.

Étape 1 : enregistrer la page rendue

Déconnectez-vous d'abord de WordPress, ou ouvrez la page dans une fenêtre de navigation privée. Une visite connectée ajoute au HTML la barre d'administration et ses styles, et vous ne voulez ni l'une ni les autres dans la copie.

Une seule page : l'enregistrer depuis le navigateur

1. Ouvrez la page dans Chrome, en étant déconnecté.
2. Appuyez sur Ctrl+S (Cmd+S sur Mac) et choisissez Webpage, Complete (Page Web complète).
3. Vous obtenez un fichier HTML et, à côté, un dossier contenant les images, feuilles de style et scripts chargés par la page.

Un site entier : utiliser une extension d'export statique

Au-delà de quelques pages, une extension de site statique comme Simply Static parcourt le site WordPress et écrit chaque page avec ses ressources dans un dossier ou un fichier ZIP. Elle réécrit aussi les liens internes, ce qui est fastidieux à la main. Vérifiez tout de même le résultat page par page : les extensions peuvent manquer des fichiers que seul JavaScript demande.

Étape 2 : réduire le CSS à ce que la page utilise

Une page Elementor typique charge la feuille de style du thème, le CSS frontend d'Elementor, un fichier CSS par type de widget, un fichier généré pour la page elle-même et souvent un ou deux fichiers de police. La plupart de ces règles mettent en forme des widgets absents de la page. La façon la plus fiable de trouver celles qui servent est de laisser Chrome les enregistrer.

1. Ouvrez la page en ligne, en étant déconnecté, et ouvrez les DevTools.
2. Ouvrez le menu aux trois points, puis More tools (Plus d'outils), puis Coverage (Couverture), et cliquez sur son bouton de rechargement.
3. Utilisez la page : ouvrez le menu mobile, parcourez les onglets et les accordéons, et redimensionnez la fenêtre aux largeurs de votre téléphone et de votre tablette.
4. Cliquez sur Export (Exporter) dans le panneau Coverage et enregistrez le fichier JSON.
5. Déposez ce fichier sur la page Coverage JSON en CSS et cliquez sur Extraire le CSS utilisé.
6. Enregistrez le résultat en une seule feuille de style, remplacez les balises <link rel="stylesheet"> de la page par un unique lien vers elle, et gardez les fichiers de police auxquels elle fait référence.

L'outil de suppression du CSS inutilisé réécrit chaque règle dans son propre bloc @media, ce qui compte ici : Elementor range ses règles tablette et mobile dans des media queries, et un outil qui les perd fait s'appliquer la mise en page mobile sur ordinateur aussi. Il conserve également @font-face et @keyframes en entier.

Si vous préférez partir des fichiers enregistrés, l'onglet HTML + CSS du même outil prend à la place le HTML et les feuilles de style. Elementor et ses modules complémentaires ajoutent certaines classes par JavaScript après le chargement de la page : mettez donc leurs préfixes dans Toujours conserver, par exemple /^elementor-/ et /^e-/, et comparez le résultat avec la page d'origine avant de vous y fier.

Étape 3 : remplacer ce qui dépendait de WordPress

Animations d'entrée et widgets cachés

Un widget doté d'une animation d'entrée porte la classe elementor-invisible, et le JavaScript d'Elementor la retire quand le widget arrive à l'écran au défilement. Dans une copie sans ce script, la classe ne disparaît jamais et le widget reste invisible. Gardez les scripts frontend d'Elementor, ou retirez elementor-invisible du HTML et laissez les widgets apparaître sans l'animation.

Formulaires

Un formulaire Elementor envoie ses données à WordPress, qui n'est plus là. Remplacez-le par un service de formulaires qui accepte un simple formulaire HTML, ou par un simple lien qui ouvre un e-mail.

Liens et restes

• Vérifiez chaque lien interne : les adresses WordPress comme /about/ ont besoin d'un dossier correspondant avec un index.html, ou d'une réécriture sur le nouvel hébergeur.
• Retirez les scripts WordPress dont la page n'a plus besoin, comme le script des emojis, ainsi que les numéros ?ver= dans les noms de fichiers si vous renommez des fichiers.
• Gardez les images srcset vers lesquelles pointe le HTML, sinon les téléphones chargeront l'image en taille réelle.

Vérifier avant de basculer

1. Ouvrez la copie statique et l'original côte à côte, en largeur ordinateur, tablette et téléphone.
2. Ouvrez chaque menu, onglet et accordéon, et faites défiler toute la page pour repérer les widgets cachés.
3. Passez les deux dans un test de vitesse et comparez la quantité de CSS chargée.
4. Gardez le site WordPress et les fichiers CSS complets jusqu'à ce que la copie statique soit en ligne depuis un moment.