Niveau -1 Les Dessous du portfolio

Best ★ practices WIX

​

⚡ ANIMATIONS WIX​

 

L'option "Fixer la position"

​

1. La Boîte conteneur ⬛ peut être fixée dans toutes les zones

​

2. Pas 1 texte 🚫

​

Donc si tu veux fixer la position d'1 texte au centre bord gauche ou droit, tu devras les joindre à (intégrer dans) 1 boîte conteneur.

 

Optimise la performance mobile 📱

​

📊 Sur ton Tableau de bord\Données analytiques & Rapports\Vitesse du site :

 

✔ tu peux tester les performances basiques de ton site Wix

​

✔ Desktop + mobile📱

​

✔ Google Lighthouse intégré

​

Pour + de détails et des indications pour t'aider à améliorer le temps de chargement, il existe d'autres sites, comme GTMetrix https://gtmetrix.com/

​

1. Configure & réduis les animations

 

⏱ < 1 s sur mobile 📱

​

pour avoir le meilleur score possible sur GTMetrix par exemple (99 à 100 %)

​

2. ❌ N'active pas l'écran de bienvenue mobile📱qui te permet un splash screen avec ton logo/ta photo, 1 effet ouverture de porte, etc.

​

- tu perds facilement 1 seconde en temps de chargement et donc en performance Light House et GTMetrix

​

- surtout si cet écran n'est pas simplement 1 écran d'accueil mobile📱, mais 1 mire à CHAQUE RECHARGEMENT DE TOUTE PAGE COURANTE

​

- Je trouvais l'effet sympa, mais j'ai vite déchanté. Tant pis, pas (trop) de regret

​

▶️ VIDEOS MP4
 

1. Compresse avec MP4Compress https://www.mp4compress.com/
 

🆒 particulièrement soigné pour les vidéos en Mode Sombre

​

+ difficiles à traiter que le mode clair pour conserver 1 contraste lisible

 

2. Télécharge les versions accélérées des vidéos (ex ⏱ X 2 ou X 4), quand l’auteur propose le choix

​

3. Configure les vidéos dans Wix vitesse accélérée ⏱ X 2 (max)

 

4. Coupe ✂️ou accélère les vidéos

 

✔ pour descendre à ⏱ 3 s

     (pas 10 s ni 12 s)

​

✔ J'ai utilisé 1 vidéo de ⏱ 10 s pour le Niveau -1 parce que c'était moins important

​

5. Tu peux activer la vidéo en Boucle 🔁, cela ne gâche pas ton score de performance GTMetrix

 

​

💡SAUVEGARDE SANS PUBLIER
 

✅ Sauvegarde sans publier pour gagner du temps⌚

​

Pour mon portfolio, cela m'évite

 

- de modifier tous les liens 🔗

​

- à chaque étage (ascenseur + verticale gauche)

 

⚠️ SECTIONS : GARE AUX TRAÎTRESSES !
 

✋🏻A chaque ajout de section, peu importe comment tu le fais et où tu laisses ta souris au moment de la création d'1 nouvelle section

 

👁 vérifie systématiquement dans l’éditeur mobile qu’elle n’est pas devenue sous-section, avant de continuer.

​

Sinon, c’est le chaos 🤦🏻

​

- Et si tu te dis, pas la peine d’être parano, tu finis toutes tes sections, et tu ne vérifies qu’à la fin.

 

Tant mieux pour toi si tu as de la chance.

​

Si par hasard ce bug est corrigé d’ici-là.

​

- Moi, au 04/11/22, j'ai dû pour cette page Niveau -1

 

- recommencer au moins 5 fois 🤦🏻

- avant que Wix accepte de créer 1 puis 2 sections indépendantes.

​

 

⚠️ CALQUES : LES RECADRER
 

Non, mais, sans blague.

​

🛑 Vérifie dans les calques qu’aucun élément n’est sorti du cadre

 

=> ils sont signalés par 1 icône ⚠️

​

Cela se produit souvent lorsque j’ai fixé des éléments et que Wix me prévient qu’ils seront peut-être masqués du mobile

​

Affiche-les à nouveau

 

- change les coordonnées en pixels depuis la palette d’outils

​

- supprime + masque + déplace

​

=> Cela supprime aussi les grands espaces vides de sections qui restaient bloquées à cause d’éléments invisibles

​

BUG : MAIS POURQUOI UN BAS DE PAGE BLANC, ALORS QUE TOUT TON FOND EST NOIR, INCLUS SECTION ET BANDE ???

​

Pour supprimer/limiter les bas de page blancs

​

=> sur Tablettes Samsung Galaxy (anomalie constatée),

​

- la hauteur totale de toutes les sections doit être

 

🙅‍♀️ non pas 1280

✔ mais 1500

✔ avec 1 fond de section noir

​

- Pas besoin de bande

​

- Mais Le fond de page noir ne suffit pas

 

MOBILE📱

MARGES

​

✔ 20 px de marge gauche et droite sur mobile

​

✔ pour être sûre de ne rien couper sur certains modèles (comme les Samsung Galaxy)

 

OPTIMISE LE CHARGEMENT "SOUS LE PLI"

​

Décale les vidéos, images, galeries, animations "sous le pli", soit le 1er écran mobile avant de scroller.

​

Pour que le chargement du reste de la page se fasse uniquement si l’utilisateur le décide

​

IMAGES
Seules ou dans les galeries

​

Officiellement, Wix recommande le format JPG ou ✔ WEBP (transparence possible pour ce dernier)

 

& non PNG, même compressé.

​

💡Moi, j'opte pour le WEBP compressé, car si WIX n'a pas besoin de les convertir, j'estime que j'économise sa charge et améliore la performance de mon portfolio

 

✔ Convertis direct en WEBP & compresse-les

​

✔ Images + lisses et tailles réduites qu'en JPG

​

Exemple d'outils gratuits en ligne & sans compte :

​

AnyWEBP https://anywebp.com/convert-to-webp.html
 

✔ pour convertir 1 liste d’images (JPG/PNG/GIF/SVG/iCO/BMP) en WEBP

​

✔ puis compresse ta liste  (1 fois les WEBP téléchargés & dézippés via AnyWebp)

​

avec TinyPNG (qui compresse bien les WEBP malgré son nom)

https://tinypng.com/

​

✔ Redimensionne les images

​

✔ au strict minimum affiché si possible (la + grande des 2 affichages desktop & mobile)

​

✔ pour réduire leur taille de stockage et temps de chargement

​

​

PAGES

​

LE ➖ POSSIBLE

​

✔ Ne garde sur ton site que les pages utiles, même pas les pages de tests.

​

✔ J'ai économisé 17 pages en virant

​

- les fenêtres pop-up &

​

- les pages dépendantes

 

✔ pour tout organiser en sections sur chaque Page de Niveau.

​

➖ il y a de Pages à charger pour Wix, ➕ ton site est performant

​

Résultat

 

✔ Mon score desktop en vitesse ⏱ est passé de 1,5 à 1,4 s, puis… 0,8 s

 

✔ Soit presque ⏱ 2 X + rapide !

​

GTMetrix
 

Le plan gratuit avec 1 compte de GTMetrix a changé

 

🚫 on ne peut plus choisir Paris

 

❗London donne des résultats désastreux !

​

😅 Je reste sur Vancouver 🇨🇦

​

🚫 Le plan gratuit ne permet plus de tester les mobiles non plus

​

Juste mon Chrome desktop

​

🚫 Le nb de tests n’est pas illimité

 

Fichiers PDFs

​

✔ Stockage Drive 🆚 Wix : remplace les liens PDF stockés sur Wix vers Google Drive

​

🤦🏻Car Wix ignore ton nom de fichier pour le remplacer par 1 suite de chiffres

​

🙎🏻Pas rassurante pour l’utilisateur

​

Exige 1 effort de sa part pour renommer le PDF (si ton user le fait)

 

Imagine ton CV avec ce nom de fichier

 

"35ce93_550439b8778148c5a6cbfb9ddbcc3cf4.pdf”

​

Tu aurais envie de le télécharger ? 🤨

 

Voir l’article https://www.picklewix.com/retaining-filenames-of-pdfs-in-wix

​

❌ Inutile d’installer l’appli PDF Viewer

(pour tenter de visualiser sur mobile sans télécharger)

​

❗️Risque d’autoriser le upload, et donc qu'on puisse te remplacer tes PDF

​

❗️Et aussi de te faire perdre des points en performance Google (GTMetrix, LightHouse…)

​

❗️Car cela charge 1 appli tierce

​

SEO 🔍

​

Astuce balises H1 et H2
 

🆘 Problème H2

 

Wix force par défaut le style

​

Ce qui est pénible si on a 3 alignements différents pour 1 même texte

​

💡Solution

 

✔ clique sur l’icône “annuler” ↩

​

- qui annule la mise en page forcée

​

- mais conserve la balise H2

​

- et voilà !
 

Note : normalement, on a droit à 1 balise H1 & plusieurs H2. Or, j’ai testé plusieurs H1, ça marche.

​

🤷‍♀️ Mais j’ignore si c’est pris en compte vraiment en SEO

​

 

⚠️ TEXTE

avec formatage multiple pour la même zone
 

BUG

 

Si Wix t’empêche de modifier ton texte dans toutes tes zones de texte (pas de curseur en I).

​

Que faire ? 🤦

 

- enregistre sans publier

- travaille sur autre chose, d’autres pages si possible

- enregistre

- n’oublie pas

- et retente 😅

​

Sinon, obligation de recharger (d’où l’intérêt d’enregistrer avant plantage éventuel)

​

🆗 Pas de pb a priori dans les sections condensables, puisque le texte s’édite dans la boîte de dialogue et non dans la page directement.

 

Copier-coller depuis 1 source extérieure à Wix

​

1. Ajoute d'abord 1 zone de texte

​

2. Colle ensuite le texte copié dedans

​

Sinon, il arrive que

 

🚫 tu ne colles que le dernier éléments copié dans Wix

​

🚫 et non le contenu du presse-papier de ton appareil

​