[{"data":1,"prerenderedAt":2750},["ShallowReactive",2],{"articles":3},[4,743,1035,2087,2432],{"id":5,"title":6,"body":7,"date":729,"description":730,"draft":731,"extension":732,"meta":733,"navigation":734,"path":735,"seo":736,"slug":737,"stem":738,"tags":739,"thumbnail":741,"__hash__":742},"articles\u002Farticles\u002FComment vérifier performance site web.md","Comment vérifier si votre site web est performant (checklist SEO, UX, vitesse)",{"type":8,"value":9,"toc":660},"minimark",[10,15,19,22,29,32,36,43,56,59,63,70,74,88,92,105,109,112,116,119,123,126,130,134,137,141,154,158,161,165,176,180,186,194,198,201,205,211,214,218,225,233,236,242,246,249,253,260,263,267,270,286,290,293,297,300,304,307,311,314,318,321,325,328,332,339,342,346,349,353,367,371,374,378,381,385,393,397,400,404,407,411,418,421,425,432,436,439,443,446,450,453,457,460,469,473,480,483,487,490,494,497,501,504,508,511,515,518,522,533,537,540,543,546,556,560,563,567,586,590,602,606,613,617,629,633,640,644],[11,12,14],"h2",{"id":13},"pourquoi-vérifier-la-qualité-de-son-site-web","Pourquoi vérifier la qualité de son site web ?",[16,17,18],"p",{},"Un site peut être beau, mais cela ne veut pas dire qu'il est efficace !",[16,20,21],{},"S'il est lent, mal structuré ou difficile à utiliser, les visiteurs vont vite partir. Côté référencement, ce n'est pas mieux : des moteurs de recherche comme Google prennent en compte la performance et l'expérience utilisateur pour classer les sites.",[16,23,24,28],{},[25,26,27],"strong",{},"Résultat : un site mal optimisé sera moins visible, même avec un bon contenu",".",[16,30,31],{},"Le problème, c'est que beaucoup de défauts ne se voient pas du premier coup d'œil. Heureusement, il existe des vérifications simples que vous pouvez faire vous-même. Voici une checklist pour analyser votre site web et identifier les points à améliorer.",[11,33,35],{"id":34},"_1-vérifier-la-performance-de-votre-site-vitesse-de-chargement","1. Vérifier la performance de votre site (vitesse de chargement)",[16,37,38],{},[39,40],"img",{"alt":41,"src":42,"title":41},"Google PageSpeed sur mon site","img\u002Farticles\u002Fperformances-site-web\u002FPageSpeed-Insights.png",[44,45,47,48],"h3",{"id":46},"tester-avec-google-pagespeed-insights","Tester avec ",[49,50,55],"a",{":target":51,"href":52,"rel":53},"_blank","https:\u002F\u002Fpagespeed.web.dev\u002F",[54],"nofollow","Google PageSpeed Insights",[16,57,58],{},"C'est l'outil le plus simple pour avoir un aperçu rapide. Il donne un score et met en avant les principaux problèmes.",[44,60,62],{"id":61},"comprendre-les-core-web-vitals-lcp-cls-inp","Comprendre les Core Web Vitals (LCP, CLS, INP)",[16,64,65,66,28],{},"Ce sont les indicateurs utilisés par Google pour mesurer la performance réelle d'un site (chargement, stabilité, réactivité).\nPlus d'infos : ",[49,67,68],{":target":51,"href":68,"rel":69},"https:\u002F\u002Fweb.dev\u002Fvitals\u002F",[54],[44,71,73],{"id":72},"vérifier-le-poids-total-de-la-page","Vérifier le poids total de la page",[16,75,76,77,82,83,28],{},"Une page trop lourde mettra plus de temps à charger, surtout sur mobile. Vous pouvez utiliser PageSpeed ou des outils comme\n",[49,78,81],{":target":51,"href":79,"rel":80},"https:\u002F\u002Fgtmetrix.com\u002F",[54],"GTmetrix"," ou\n",[49,84,87],{":target":51,"href":85,"rel":86},"https:\u002F\u002Fwww.webpagetest.org\u002F",[54],"WebPageTest",[44,89,91],{"id":90},"identifier-les-images-trop-lourdes","Identifier les images trop lourdes",[16,93,94,95,82,100,28],{},"Les images sont souvent la principale cause de lenteur. Vérifiez leur taille, leur format (WebP si possible) et leur compression. Vous pouvez compresser vos images avec des outils comme\n",[49,96,99],{":target":51,"href":97,"rel":98},"https:\u002F\u002Fsquoosh.app\u002F",[54],"Squoosh",[49,101,104],{":target":51,"href":102,"rel":103},"https:\u002F\u002Ftinypng.com\u002F",[54],"TinyPNG",[44,106,108],{"id":107},"vérifier-le-lazy-loading-des-images","Vérifier le lazy loading des images",[16,110,111],{},"Les images doivent se charger uniquement quand elles apparaissent à l'écran. Cela évite de charger inutilement toute la page dès le départ.",[44,113,115],{"id":114},"tester-la-version-mobile","Tester la version mobile",[16,117,118],{},"C'est souvent là que les problèmes apparaissent. PageSpeed permet de tester la version mobile par défaut.",[44,120,122],{"id":121},"vérifier-le-cache-navigateur","Vérifier le cache navigateur",[16,124,125],{},"Un bon cache permet de ne pas recharger toutes les ressources à chaque visite. C'est un point souvent oublié mais facile à améliorer côté serveur.",[11,127,129],{"id":128},"_2-vérifier-le-seo-technique","2. Vérifier le SEO technique",[44,131,133],{"id":132},"vérifier-que-chaque-page-a-une-balise-title-unique","Vérifier que chaque page a une balise title unique",[16,135,136],{},"La balise title est ce qui s'affiche dans les résultats de recherche. Chaque page doit avoir un titre unique, clair et pertinent. C'est un des critères les plus importants pour le référencement.",[44,138,140],{"id":139},"vérifier-la-présence-dune-meta-description","Vérifier la présence d'une meta description",[16,142,143,144,82,149,28],{},"La meta description ne joue pas directement sur le classement, mais elle influence le taux de clic. Elle doit donner envie et résumer le contenu de la page. Vous pouvez analyser facilement ces éléments avec des outils comme\n",[49,145,148],{":target":51,"href":146,"rel":147},"https:\u002F\u002Fahrefs.com\u002Fwebmaster-tools",[54],"Ahrefs Webmaster Tools",[49,150,153],{":target":51,"href":151,"rel":152},"https:\u002F\u002Fseranking.com\u002Ffr\u002F",[54],"SE Ranking",[44,155,157],{"id":156},"vérifier-la-structure-des-balises-hn-h1-h2","Vérifier la structure des balises Hn (h1, h2…)",[16,159,160],{},"Les titres permettent de structurer le contenu. Une page doit avoir un seul H1, puis des H2, H3… organisés de façon logique. Ça aide à la fois les utilisateurs et les moteurs de recherche.",[44,162,164],{"id":163},"sassurer-que-les-urls-sont-propres-et-lisibles","S'assurer que les URLs sont propres et lisibles",[16,166,167,168,172,173,28],{},"Une bonne URL doit être courte, compréhensible et sans paramètres inutiles. Par exemple :\n",[169,170,171],"code",{},"\u002Faudit-site-web"," est préférable à ",[169,174,175],{},"\u002Fpage?id=123",[44,177,179],{"id":178},"vérifier-la-présence-dun-sitemapxml","Vérifier la présence d'un sitemap.xml",[16,181,182,183],{},"Le sitemap permet aux moteurs de recherche de découvrir les pages de votre site plus facilement. Il doit être accessible à une URL du type :\n",[169,184,185],{},"\u002Fsitemap.xml",[16,187,188,189,28],{},"Vous pouvez tester votre sitemap avec des outils comme\n",[49,190,193],{":target":51,"href":191,"rel":192},"https:\u002F\u002Fwww.xml-sitemaps.com\u002Fvalidate-xml-sitemap.html",[54],"XML Sitemap Validator",[44,195,197],{"id":196},"vérifier-le-fichier-robotstxt","Vérifier le fichier robots.txt",[16,199,200],{},"Le fichier robots.txt indique aux moteurs de recherche quelles pages ils peuvent explorer ou non. Une mauvaise configuration peut bloquer l'indexation de tout ou partie du site.",[44,202,204],{"id":203},"sassurer-que-le-site-est-bien-indexé","S'assurer que le site est bien indexé",[16,206,207,208],{},"Vous pouvez vérifier rapidement en tapant dans Google :\n",[169,209,210],{},"site:monsite.fr",[16,212,213],{},"Si peu ou aucune page n'apparaît, il y a probablement un problème d'indexation.",[44,215,217],{"id":216},"utiliser-google-search-console","Utiliser Google Search Console",[16,219,220],{},[39,221],{"alt":222,"src":223,"title":224},"Interface Google Search Console - performances et indexation","img\u002Farticles\u002Fperformances-site-web\u002Fgoogle-search-console.png","Interface Google Search Console : URL indexées et non indexées",[16,226,227,232],{},[49,228,231],{":target":51,"href":229,"rel":230},"https:\u002F\u002Fsearch.google.com\u002Fsearch-console",[54],"Google Search Console"," est un outil gratuit qui permet de suivre l'indexation de votre site, les erreurs SEO et les performances dans les résultats de recherche.",[16,234,235],{},"C'est aussi un bon moyen de voir quelles pages sont réellement visibles sur Google, et d'identifier rapidement les problèmes techniques.",[237,238,239],"blockquote",{},[16,240,241],{},"Contrairement à des outils comme Google Analytics, il ne nécessite pas de consentement RGPD puisqu'il ne repose pas sur des cookies de suivi des utilisateurs.",[44,243,245],{"id":244},"vérifier-les-erreurs-404","Vérifier les erreurs 404",[16,247,248],{},"Les pages introuvables nuisent à l'expérience utilisateur et au SEO. Il est important de corriger les liens cassés ou de mettre en place des redirections.",[11,250,252],{"id":251},"_3-vérifier-lexpérience-utilisateur-ux","3. Vérifier l'expérience utilisateur (UX)",[16,254,255],{},[39,256],{"alt":257,"src":258,"title":259},"Responsive web design","img\u002Farticles\u002Fperformances-site-web\u002Fhal-gatewood-D-_zRKxP9Rw-unsplash.jpg","Maquettes mobile et ordinateur",[16,261,262],{},"Un site peut être rapide et bien référencé, mais rester inefficace si l'expérience utilisateur n'est pas au rendez-vous.",[44,264,266],{"id":265},"vérifier-que-la-navigation-est-simple-et-logique","Vérifier que la navigation est simple et logique",[16,268,269],{},"Un visiteur doit comprendre rapidement comment se déplacer sur votre site. Si la navigation est confuse, il partira sans chercher plus loin.",[237,271,272],{},[16,273,274,275,280,281,285],{},"Pour aller plus loin, des outils comme\n",[49,276,279],{":target":51,"href":277,"rel":278},"https:\u002F\u002Fclarity.microsoft.com\u002F",[54],"Microsoft Clarity","\npermettent de visualiser le comportement des utilisateurs (clics, scroll…). Contrairement à ",[282,283,284],"em",{},"Hotjar",", il a le mérite d'être gratuit et respectueux de la RGPD.",[44,287,289],{"id":288},"vérifier-que-le-menu-est-clair-et-accessible","Vérifier que le menu est clair et accessible",[16,291,292],{},"Le menu doit être visible, compréhensible et présent sur toutes les pages. Évitez les intitulés trop vagues ou trop nombreux.",[44,294,296],{"id":295},"vérifier-le-temps-daccès-à-linformation","Vérifier le temps d'accès à l'information",[16,298,299],{},"L'utilisateur doit trouver ce qu'il cherche en quelques secondes. Si l'information est cachée ou trop profonde dans le site, c'est un problème.",[44,301,303],{"id":302},"vérifier-la-lisibilité-du-contenu","Vérifier la lisibilité du contenu",[16,305,306],{},"Le texte doit être facile à lire : taille suffisante, bon contraste, paragraphes aérés. Un contenu difficile à lire est souvent ignoré.",[44,308,310],{"id":309},"vérifier-que-les-boutons-sont-visibles-et-compréhensibles","Vérifier que les boutons sont visibles et compréhensibles",[16,312,313],{},"Les boutons doivent être clairement identifiables et inciter à l'action. Évitez les textes flous comme « cliquer ici ».",[44,315,317],{"id":316},"vérifier-la-version-mobile","Vérifier la version mobile",[16,319,320],{},"Une grande partie des visiteurs utilisent leur smartphone pour naviguer. Le site doit donc être agréable à utiliser depuis ce type de périphérique, sans avoir à zoomer ou à défiler latéralement.",[44,322,324],{"id":323},"éviter-les-popups-intrusifs","Éviter les popups intrusifs",[16,326,327],{},"Les popups peuvent être utiles, mais s'ils apparaissent trop tôt ou trop souvent, ils nuisent à l'expérience utilisateur et peuvent faire fuir les visiteurs.",[11,329,331],{"id":330},"_4-vérifier-la-qualité-du-contenu","4. Vérifier la qualité du contenu",[16,333,334],{},[39,335],{"alt":336,"src":337,"title":338},"WordPress Gutenberg","img\u002Farticles\u002Fperformances-site-web\u002Fgutenberg-editor.png","Éditeur WordPress Gutenberg avec différents blocs structurés",[16,340,341],{},"Un site peut être rapide et bien structuré, mais sans contenu de qualité, il ne sera pas visible longtemps.",[44,343,345],{"id":344},"vérifier-que-le-contenu-répond-à-une-vraie-question","Vérifier que le contenu répond à une vraie question",[16,347,348],{},"Chaque page doit avoir un objectif clair. Si le contenu ne répond à aucune question précise, il a peu de chances d'être utile… et donc d'être bien référencé.",[44,350,352],{"id":351},"utiliser-des-mots-clés-pertinents-sans-en-abuser","Utiliser des mots-clés pertinents (sans en abuser)",[16,354,355,356,361,362,28],{},"Les mots-clés doivent apparaître naturellement dans le contenu. Inutile de les répéter partout : un texte lisible et cohérent sera toujours plus efficace. Pour trouver des idées de mots-clés, vous pouvez utiliser\n",[49,357,360],{":target":51,"href":358,"rel":359},"https:\u002F\u002Fneilpatel.com\u002Ffr\u002Fubersuggest\u002F",[54],"Ubersuggest","\nou\n",[49,363,366],{":target":51,"href":364,"rel":365},"https:\u002F\u002Fanswerthepublic.com\u002F",[54],"Answer The Public",[44,368,370],{"id":369},"structurer-le-contenu-avec-des-titres","Structurer le contenu avec des titres",[16,372,373],{},"Un contenu bien structuré est plus facile à lire. Utilisez des titres (H2, H3…) pour organiser les idées et permettre de parcourir rapidement la page.",[44,375,377],{"id":376},"proposer-un-contenu-suffisamment-utile","Proposer un contenu suffisamment utile",[16,379,380],{},"Un contenu trop court ou trop vague apporte peu de valeur. L'objectif n'est pas d'écrire beaucoup, mais d'aller au fond du sujet.",[44,382,384],{"id":383},"éviter-le-contenu-dupliqué","Éviter le contenu dupliqué",[16,386,387,388,28],{},"Le même contenu ne doit pas être présent sur plusieurs pages. Cela peut pénaliser le référencement et rendre votre site moins pertinent. Vous pouvez vérifier cela avec des outils comme\n",[49,389,392],{":target":51,"href":390,"rel":391},"https:\u002F\u002Fwww.siteliner.com\u002F",[54],"Siteliner",[44,394,396],{"id":395},"mettre-à-jour-régulièrement-les-contenus","Mettre à jour régulièrement les contenus",[16,398,399],{},"Un contenu à jour est plus crédible. Pensez à revoir vos pages de temps en temps pour corriger ou compléter les informations.",[44,401,403],{"id":402},"ajouter-des-images-ou-des-illustrations","Ajouter des images ou des illustrations",[16,405,406],{},"Les visuels permettent d'aérer le contenu et de mieux expliquer certains points. Ils doivent être pertinents et optimisés pour ne pas ralentir le site.",[11,408,410],{"id":409},"_5-vérifier-la-sécurité-du-site","5. Vérifier la sécurité du site",[16,412,413],{},[39,414],{"alt":415,"src":416,"title":417},"SSL Checker","img\u002Farticles\u002Fperformances-site-web\u002Fssl-checker.png","Vérification du certificat SSL avec SSL Checker",[16,419,420],{},"Un site non sécurisé peut poser des problèmes bien plus graves qu'un simple souci de performance. En plus de protéger vos utilisateurs, la sécurité est aussi prise en compte par les moteurs de recherche.",[44,422,424],{"id":423},"vérifier-que-le-site-est-en-https","Vérifier que le site est en HTTPS",[16,426,427,428,28],{},"Le site doit être accessible en HTTPS avec un certificat SSL valide. C'est aujourd'hui un standard, à la fois pour la sécurité et pour le référencement. Aujourd'hui, les navigateurs affichent un avertissement sur les sites non sécurisés. Pour aller plus loin, des services proposent gratuitement d'analyser votre certificat SSL, comme ",[49,429,415],{":target":51,"href":430,"rel":431},"https:\u002F\u002Fwww.ssl.org\u002F",[54],[44,433,435],{"id":434},"mettre-à-jour-le-cms-les-plugins-et-les-dépendances","Mettre à jour le CMS, les plugins et les dépendances",[16,437,438],{},"Un site non à jour est une cible facile. Les mises à jour corrigent souvent des failles de sécurité connues. Je vous recommande de les faire régulièrement et d'avoir des sauvegardes si jamais une mise à jour venait à tout casser.",[44,440,442],{"id":441},"protéger-les-formulaires-contre-le-spam","Protéger les formulaires contre le spam",[16,444,445],{},"Les formulaires peuvent être utilisés pour envoyer du spam ou tenter des attaques. Des protections simples comme un captcha ou des champs invisibles (honeypot) suffisent souvent.",[44,447,449],{"id":448},"mettre-en-place-des-sauvegardes-régulières","Mettre en place des sauvegardes régulières",[16,451,452],{},"En cas de problème, une sauvegarde permet de restaurer rapidement le site. Sans ça, la récupération peut être compliquée.",[44,454,456],{"id":455},"vérifier-labsence-de-malware-ou-de-redirections-suspectes","Vérifier l'absence de malware ou de redirections suspectes",[16,458,459],{},"Un site piraté peut rediriger les utilisateurs vers d'autres pages ou injecter du contenu malveillant. C'est mauvais pour vos visiteurs… et pour votre référencement. Pensez à visiter votre site en navigation privée et en provenant de Google, certains malwares détectent les administrateurs du site et restent discrets dans ce cas.",[16,461,462,463,468],{},"Des outils comme\n",[49,464,467],{":target":51,"href":465,"rel":466},"https:\u002F\u002Fsitecheck.sucuri.net\u002F",[54],"Sucuri SiteCheck","\npermettent de vérifier rapidement si votre site est infecté.",[11,470,472],{"id":471},"_6-vérifier-la-conversion-le-vrai-objectif","6. Vérifier la conversion (le vrai objectif)",[16,474,475],{},[39,476],{"alt":477,"src":478,"title":479},"Conversions dashboard","img\u002Farticles\u002Fperformances-site-web\u002Fcarlos-muza-hpjSkU2UYSU-unsplash.jpg","Dashboard des conversions",[16,481,482],{},"Un site peut être rapide, bien référencé et sécurisé… mais ne servir à rien s'il ne convertit pas. L'objectif reste de transformer des visiteurs en contacts ou en clients !",[44,484,486],{"id":485},"vérifier-la-présence-dun-appel-à-laction-clair","Vérifier la présence d'un appel à l'action clair",[16,488,489],{},"Chaque page doit proposer une action à réaliser : contacter, demander un devis, s'inscrire… Sans ça, l'utilisateur ne sait pas quoi faire.",[44,491,493],{"id":492},"vérifier-quil-est-facile-de-vous-contacter","Vérifier qu'il est facile de vous contacter",[16,495,496],{},"Les informations de contact doivent être visibles et accessibles rapidement. Évitez de cacher un formulaire ou une adresse e-mail dans un coin du site.",[44,498,500],{"id":499},"vérifier-le-temps-nécessaire-pour-comprendre-votre-offre","Vérifier le temps nécessaire pour comprendre votre offre",[16,502,503],{},"Un visiteur doit comprendre en quelques secondes ce que vous proposez. Si ce n'est pas clair, il partira sans chercher plus loin.",[44,505,507],{"id":506},"vérifier-la-clarté-de-la-proposition-de-valeur","Vérifier la clarté de la proposition de valeur",[16,509,510],{},"Expliquez simplement ce que vous faites, pour qui et pourquoi vous choisir. Évitez les formulations trop vagues.",[44,512,514],{"id":513},"vérifier-la-présence-de-preuves-sociales","Vérifier la présence de preuves sociales",[16,516,517],{},"Avis clients, réalisations, références… ces éléments rassurent et donnent de la crédibilité à votre site.",[44,519,521],{"id":520},"vérifier-le-parcours-utilisateur","Vérifier le parcours utilisateur",[16,523,524,525,361,528,532],{},"Le chemin pour passer à l'action doit être simple et logique. Moins il y a d'étapes, plus il y a de chances que l'utilisateur aille jusqu'au bout. Des outils comme\n",[49,526,279],{":target":51,"href":277,"rel":527},[54],[49,529,284],{":target":51,"href":530,"rel":531},"https:\u002F\u002Fwww.hotjar.com\u002F",[54],"\npeuvent aider à comprendre le comportement des utilisateurs et améliorer la conversion.",[11,534,536],{"id":535},"conclusion","Conclusion",[16,538,539],{},"Un bon site web ne repose pas sur un seul critère. Performance, SEO et expérience utilisateur vont toujours ensemble.",[16,541,542],{},"Avec cette checklist, vous avez déjà de quoi repérer les principaux problèmes !",[16,544,545],{},"Et dans beaucoup de cas, quelques corrections simples suffisent à améliorer nettement la visibilité et l'efficacité du site.",[547,548,550,553],"cta-card",{"title":549},"Vous avez un doute sur votre site ?",[16,551,552],{},"Je peux analyser ses performances, son référencement et son expérience utilisateur, puis vous proposer des pistes d'amélioration concrètes.",[16,554,555],{},"J'ai déjà accompagné plusieurs clients sur ce type d'audit.",[11,557,559],{"id":558},"outils-recommandés","Outils recommandés",[16,561,562],{},"Voici quelques outils simples que j'utilise régulièrement ou que je recommande pour analyser un site web.",[44,564,566],{"id":565},"performance","Performance",[568,569,570,576,581],"ul",{},[571,572,573],"li",{},[49,574,55],{":target":51,"href":52,"rel":575},[54],[571,577,578],{},[49,579,81],{":target":51,"href":79,"rel":580},[54],[571,582,583],{},[49,584,99],{":target":51,"href":97,"rel":585},[54],[44,587,589],{"id":588},"seo","SEO",[568,591,592,597],{},[571,593,594],{},[49,595,231],{":target":51,"href":229,"rel":596},[54],[571,598,599],{},[49,600,148],{":target":51,"href":146,"rel":601},[54],[44,603,605],{"id":604},"expérience-utilisateur","Expérience utilisateur",[568,607,608],{},[571,609,610],{},[49,611,279],{":target":51,"href":277,"rel":612},[54],[44,614,616],{"id":615},"contenu","Contenu",[568,618,619,624],{},[571,620,621],{},[49,622,360],{":target":51,"href":358,"rel":623},[54],[571,625,626],{},[49,627,366],{":target":51,"href":364,"rel":628},[54],[44,630,632],{"id":631},"sécurité","Sécurité",[568,634,635],{},[571,636,637],{},[49,638,467],{":target":51,"href":465,"rel":639},[54],[44,641,643],{"id":642},"statistiques-rgpd-friendly","Statistiques (RGPD-friendly)",[568,645,646,653],{},[571,647,648],{},[49,649,652],{":target":51,"href":650,"rel":651},"https:\u002F\u002Fplausible.io\u002F",[54],"Plausible",[571,654,655],{},[49,656,659],{":target":51,"href":657,"rel":658},"https:\u002F\u002Fmatomo.org\u002F",[54],"Matomo",{"title":661,"searchDepth":662,"depth":662,"links":663},"",2,[664,665,676,687,696,705,712,720,721],{"id":13,"depth":662,"text":14},{"id":34,"depth":662,"text":35,"children":666},[667,670,671,672,673,674,675],{"id":46,"depth":668,"text":669},3,"Tester avec Google PageSpeed Insights",{"id":61,"depth":668,"text":62},{"id":72,"depth":668,"text":73},{"id":90,"depth":668,"text":91},{"id":107,"depth":668,"text":108},{"id":114,"depth":668,"text":115},{"id":121,"depth":668,"text":122},{"id":128,"depth":662,"text":129,"children":677},[678,679,680,681,682,683,684,685,686],{"id":132,"depth":668,"text":133},{"id":139,"depth":668,"text":140},{"id":156,"depth":668,"text":157},{"id":163,"depth":668,"text":164},{"id":178,"depth":668,"text":179},{"id":196,"depth":668,"text":197},{"id":203,"depth":668,"text":204},{"id":216,"depth":668,"text":217},{"id":244,"depth":668,"text":245},{"id":251,"depth":662,"text":252,"children":688},[689,690,691,692,693,694,695],{"id":265,"depth":668,"text":266},{"id":288,"depth":668,"text":289},{"id":295,"depth":668,"text":296},{"id":302,"depth":668,"text":303},{"id":309,"depth":668,"text":310},{"id":316,"depth":668,"text":317},{"id":323,"depth":668,"text":324},{"id":330,"depth":662,"text":331,"children":697},[698,699,700,701,702,703,704],{"id":344,"depth":668,"text":345},{"id":351,"depth":668,"text":352},{"id":369,"depth":668,"text":370},{"id":376,"depth":668,"text":377},{"id":383,"depth":668,"text":384},{"id":395,"depth":668,"text":396},{"id":402,"depth":668,"text":403},{"id":409,"depth":662,"text":410,"children":706},[707,708,709,710,711],{"id":423,"depth":668,"text":424},{"id":434,"depth":668,"text":435},{"id":441,"depth":668,"text":442},{"id":448,"depth":668,"text":449},{"id":455,"depth":668,"text":456},{"id":471,"depth":662,"text":472,"children":713},[714,715,716,717,718,719],{"id":485,"depth":668,"text":486},{"id":492,"depth":668,"text":493},{"id":499,"depth":668,"text":500},{"id":506,"depth":668,"text":507},{"id":513,"depth":668,"text":514},{"id":520,"depth":668,"text":521},{"id":535,"depth":662,"text":536},{"id":558,"depth":662,"text":559,"children":722},[723,724,725,726,727,728],{"id":565,"depth":668,"text":566},{"id":588,"depth":668,"text":589},{"id":604,"depth":668,"text":605},{"id":615,"depth":668,"text":616},{"id":631,"depth":668,"text":632},{"id":642,"depth":668,"text":643},"2026-10-04","Découvrez comment vérifier si votre site web est performant grâce à une checklist simple : SEO, vitesse, UX et conversion.",false,"md",{},true,"\u002Farticles\u002Fcomment-verifier-performance-site-web",{"title":6,"description":730},"comment-verifier-si-votre-site-web-est-performant-seo-ux-vitesse","articles\u002FComment vérifier performance site web",[589,740,566],"UX","\u002Fimg\u002Farticles\u002Fperformances-site-web\u002Fmyriam-jessier-eveI7MOcSmw-unsplash.jpg","0wFm3QoEHi-p661PC87z4yq-pk9SbRk8aNlxQ4EdKiA",{"id":744,"title":745,"body":746,"date":1024,"description":1025,"draft":731,"extension":732,"meta":1026,"navigation":734,"path":1027,"seo":1028,"slug":1029,"stem":1030,"tags":1031,"thumbnail":1033,"__hash__":1034},"articles\u002Farticles\u002FGestionnaire de mot de passe.md","Pourquoi j'utilise un gestionnaire de mots de passe (et pourquoi vous devriez aussi)",{"type":8,"value":747,"toc":1017},[748,762,776,786,793,797,807,838,857,872,876,884,895,909,915,922,928,932,942,955,965,967,973,979,982,985],[16,749,750,753,754,757,758,761],{},[25,751,752],{},"Combien de fois"," cela vous est arrivé de tenter de vous connecter à un site web pour finalement lire que ",[25,755,756],{},"vos identifiants sont incorrects"," ? On essaye alors un second mot de passe, puis un troisième, une variante avec un chiffre en plus… mais toujours rien. À ce stade, il y a ceux qui abandonnent et ceux qui vont se lancer dans la procédure de ",[25,759,760],{},"réinitialisation du mot de passe",", avec plus ou moins de succès… Que de temps perdu !",[16,763,764,765,768,769,772,773,28],{},"On est parfois tenté d'",[25,766,767],{},"utiliser partout le même mot de passe"," : un seul à retenir et fini les soucis ! Sauf que s'il venait à fuiter, les conséquences pourraient être catastrophiques… De toute façon, ce n'est pas forcément possible, chaque site ",[25,770,771],{},"impose ses propres règles"," : longueur minimale, lettres, majuscules, caractères spéciaux… ",[25,774,775],{},"et cela devient un casse-tête",[16,777,778,779,782,783,28],{},"Certaines personnes préfèrent tout noter dans ",[25,780,781],{},"un carnet à mots de passe",". Une solution pratique mais qui peut vite tourner à la catastrophe en cas de perte, de vol ou d'incendie. ",[25,784,785],{},"Bref, ce n'est pas non plus une bonne solution",[16,787,788,789,792],{},"Alors, que reste-t-il ? Je vous le donne en mille : ",[25,790,791],{},"le gestionnaire de mots de passe",". Laissez-moi vous présenter ici en quoi cela consiste ainsi que celui que j'utilise depuis des années.",[11,794,796],{"id":795},"pourquoi-utiliser-un-gestionnaire-de-mots-de-passe","Pourquoi utiliser un gestionnaire de mots de passe ?",[16,798,799,800,803,804,28],{},"La théorie est simple : il faudrait ",[25,801,802],{},"utiliser un mot de passe unique à chaque service",". Ainsi, s'il venait à fuiter, il n'y aurait pas de dégâts collatéraux. Plus un mot de passe est long et plus il est complexe, plus il est long à ",[282,805,806],{},"« cracker »",[237,808,809,816],{},[16,810,811,812,815],{},"Les pirates peuvent faire du ",[282,813,814],{},"bruteforcing"," pour tenter de deviner votre mot de passe. Ils vont tenter toutes les combinaisons une par une jusqu'à ce que ça marche. On imagine bien qu'un mot de passe limité à 4 chiffres serait trouvé en quelques instants, il n'y a que 10 000 possibilités.",[16,817,818,819,822,823,833,834,837],{},"Par contre, un mot de passe comme ",[169,820,821],{},"Az3rtY123!"," nécessite un dictionnaire avec 26 lettres minuscules, 26 majuscules, 10 chiffres et 24 caractères spéciaux",[824,825,826],"sup",{},[49,827,832],{"href":828,"ariaDescribedBy":829,"dataFootnoteRef":661,"id":831},"#user-content-fn-1",[830],"footnote-label","user-content-fnref-1","1",", ce qui fait 86 caractères. Sur un mot de 10 caractères, ça fait donc 86",[824,835,836],{},"10"," possibilités… Si l'attaquant ne connait pas la longueur du mot de passe, c'est encore pire, il doit tester d'abord les tailles inférieures !",[16,839,840,841,844,845,848,849,852,853,856],{},"Le gestionnaire de mots de passe est donc un outil qui va vous permettre de générer de manière ",[25,842,843],{},"aléatoire"," un mot de passe ",[25,846,847],{},"robuste"," et de le ",[25,850,851],{},"stocker",". Il n'y a alors plus qu'",[25,854,855],{},"un seul mot de passe à retenir"," : celui du gestionnaire.",[16,858,859,860,863,864,867,868,871],{},"L'outil permet donc de ",[25,861,862],{},"centraliser les mots de passe"," et de ",[25,865,866],{},"préremplir les formulaires de connexion"," automatiquement. Il permet généralement aussi de se ",[25,869,870],{},"synchroniser entre plusieurs machines"," : ordinateur fixe, ordinateur portable, tablette ou smartphone.",[11,873,875],{"id":874},"pourquoi-jai-choisi-celui-de-firefox","Pourquoi j'ai choisi celui de Firefox",[16,877,878,879,883],{},"Ce logiciel libre est mon navigateur de tous les jours et je vous ai déjà donné ",[49,880,882],{"href":881},"pourquoi-choisir-firefox-en-2025","plein de bonnes raisons d'adopter Firefox en 2025"," !",[16,885,886,887,890,891,894],{},"L'intégration du gestionnaire de mots de passe dans le navigateur ",[25,888,889],{},"me dispense d'installer un autre logiciel",". Grâce à ",[282,892,893],{},"Firefox Sync"," les identifiants se synchronisent entre mes différentes installations du navigateur (du PC fixe au smartphone en passant par l'ordinateur portable)",[16,896,897,898,901,902,905,906,28],{},"L'utilisation du gestionnaire de mots de passe de Firefox ",[25,899,900],{},"est très simple",", ce qui le rend tout à fait adapté à ",[25,903,904],{},"un usage personnel ou familial",". Firefox est capable de générer automatiquement un mot de passe compliqué depuis un formulaire d'inscription et propose ",[25,907,908],{},"une fonctionnalité d'alerte en cas de fuite de données",[16,910,911],{},[39,912],{"alt":913,"src":914,"title":913},"Alertes depuis le gestionnaire de mots de passe de Firefox","img\u002Farticles\u002Fgestionnaire-mots-de-passe\u002Ffirefox-fuites-de-donnees.png",[16,916,917,918,921],{},"Si un de vos mots de passe a malheureusement fuité, ",[25,919,920],{},"Firefox vous dresse également la liste de tous les comptes qui utilisent ce mot de passe",". Il ne vous reste plus qu'à vous y connecter pour y définir un nouveau mot de passe !",[16,923,924],{},[39,925],{"alt":926,"src":927,"title":926},"Mots de passe qui ont fuité","img\u002Farticles\u002Fgestionnaire-mots-de-passe\u002Ffirefox-mdp-vulnerables.png",[11,929,931],{"id":930},"ses-limites-et-pourquoi-ça-reste-suffisant-pour-moi","Ses limites (et pourquoi ça reste suffisant pour moi)",[16,933,934,935,938,939,28],{},"Sur téléphone, ",[25,936,937],{},"Firefox arrive à s'intégrer avec d'autres applications",". Il est donc possible de se connecter sur son réseau social préféré en récupérant automatiquement le mot de passe depuis le gestionnaire. ",[25,940,941],{},"Par contre, sur l'ordinateur, il ne va pas pouvoir enregistrer les mots de passe pour d'autres logiciels",[16,943,944,947,948,951,952,28],{},[25,945,946],{},"Me concernant, ce n'est pas limitant"," : bien souvent, les logiciels que j'utilise offrent aussi un accès web (Lightroom nécessite un compte Adobe, Fusion 360 un compte Autodesk, etc.). Lorsque je dois me connecter à ces outils, je vais tout simplement ",[25,949,950],{},"chercher le mot de passe"," dans le gestionnaire de mots de passe pour faire un ",[25,953,954],{},"copier-coller",[16,956,957,960,961,964],{},[25,958,959],{},"Un reproche que l'on pourrait faire à cette solution"," est de ne pas offrir une sécurité renforcée, comme une double authentification, ni de permettre de sauvegarder autre chose comme des notes. C'est tout à fait vrai, mais ",[25,962,963],{},"cet outil est léger, sans abonnement et directement intégré"," dans le navigateur open source que j'utilise quotidiennement.",[11,966,536],{"id":535},[16,968,969,970,972],{},"Pour résumer, ",[25,971,791],{}," est l'outil sur lequel se décharger pour générer des mots de passe à la fois compliqués et uniques, pour chacun des services que l'on utilise. On n'a plus qu'à retenir le mot de passe principal qui protège le gestionnaire et après, tout se fait automatiquement. On gagne à la fois en sérénité et en sécurité !",[16,974,975,976],{},"Le gestionnaire de mots de passe de Firefox est déjà intégré au navigateur, alors autant l'utiliser, d'autant plus qu'il est gratuit et qu'il couvre les besoins de la majorité des utilisateurs. Si celui-ci ne vous convient pas, il en existe plein d'autres. ",[25,977,978],{},"Le plus important, c'est d'en utiliser un !",[16,980,981],{},"Et vous, vous êtes passé au gestionnaire de mots de passe ? Lequel utilisez-vous ?",[983,984],"hr",{},[986,987,990,995],"section",{"className":988,"dataFootnotes":661},[989],"footnotes",[11,991,994],{"className":992,"id":830},[993],"sr-only","Notes",[996,997,998],"ol",{},[571,999,1001,1002,1005,1006,1009,1010],{"id":1000},"user-content-fn-1","Pour le calcul, j'ai considéré les caractères spéciaux faisables facilement sur un clavier AZERTY français. C'est clairement une hypothèse basse, parce que selon son système d'exploitation, on peut rajouter dans certains caractères comme ",[282,1003,1004],{},"« œ »",", ",[282,1007,1008],{},"« © »",", etc. ",[49,1011,1016],{"href":1012,"ariaLabel":1013,"className":1014,"dataFootnoteBackref":661},"#user-content-fnref-1","Retour à la note",[1015],"data-footnote-backref","↩",{"title":661,"searchDepth":662,"depth":662,"links":1018},[1019,1020,1021,1022,1023],{"id":795,"depth":662,"text":796},{"id":874,"depth":662,"text":875},{"id":930,"depth":662,"text":931},{"id":535,"depth":662,"text":536},{"id":830,"depth":662,"text":994},"2025-12-12","Marre de retenir tous vos mots de passe ? Voici pourquoi j'utilise celui de Firefox pour garder mes comptes en sécurité, sans effort.",{},"\u002Farticles\u002Fgestionnaire-de-mot-de-passe",{"title":745,"description":1025},"pourquoi-j-utilise-un-gestionnaire-de-mot-de-passe-et-pourquoi-vous-devriez-aussi","articles\u002FGestionnaire de mot de passe",[632,1032],"Firefox","\u002Fimg\u002Farticles\u002Fgestionnaire-mots-de-passe\u002Fglenn-carstens-peters-npxXWgQ33ZQ-unsplash.jpg","o7o8IiB-6v0JlbrUSbyqJyG3O0CqTuziqvTDq1_93yk",{"id":1036,"title":1037,"body":1038,"date":2075,"description":2076,"draft":731,"extension":732,"meta":2077,"navigation":734,"path":2078,"seo":2079,"slug":2080,"stem":2081,"tags":2082,"thumbnail":2085,"__hash__":2086},"articles\u002Farticles\u002FDéploiement site Nuxt avec Gitlab.md","Déploiement automatique d'un site Nuxt avec Gitlab",{"type":8,"value":1039,"toc":2065},[1040,1047,1051,1068,1071,1080,1084,1098,1102,1112,1122,1159,1166,1247,1250,1264,1280,1289,1300,1363,1379,1393,1397,1407,1413,1416,1442,1454,1460,1613,1617,1650,1656,1663,1667,1684,1694,1700,1708,1714,1947,1952,1984,1990,1994,2006,2011,2014,2024,2033,2037,2061],[16,1041,1042,1043,1046],{},"Vous en avez assez de déployer manuellement votre site Nuxt ? Dans cet article, je vous montre comment automatiser l'ensemble du processus grâce à GitLab CI\u002FCD, du ",[282,1044,1045],{},"commit"," jusqu'à la mise en ligne.",[11,1048,1050],{"id":1049},"rappel-technique-concernant-nuxt","Rappel technique concernant Nuxt",[16,1052,1053,1058,1059,1064,1065,28],{},[49,1054,1057],{"href":1055,":target":51,"rel":1056},"https:\u002F\u002Fnuxt.com",[54],"Nuxt est un framework JavaScript","\nque j'utilise beaucoup ces derniers temps. Il est facile à mettre en place et permet de réaliser des sites web dynamiques, ",[49,1060,1063],{"href":1061,"title":1062},"\u002Farticles\u002Fcomment-verifier-si-votre-site-web-est-performant-seo-ux-vitesse","Comment vérifier si votre site web est performant ?","rapides et performants",". J'apprécie beaucoup le fait que l'on puisse compiler le projet pour générer des fichiers statiques prêts à être déposés sur un hébergement tout simple. ",[25,1066,1067],{},"C'est ce que l'on appelle le mode SSG (Static Site Generation)",[16,1069,1070],{},"Cette façon d'utiliser Nuxt me permet de déployer des sites très rapides à charger même lorsqu'ils contiennent des images volumineuses. Les images sont automatiquement optimisées et déclinées en plusieurs tailles selon la largeur d'écran.",[237,1072,1073],{},[16,1074,1075,1076,1079],{},"Lorsque le visiteur charge le site, il récupère directement le HTML, le JS et le CSS. ",[25,1077,1078],{},"Il n'y a aucun traitement réalisé côté serveur",". C'est comme si le site était perpétuellement en cache sur le serveur.",[11,1081,1083],{"id":1082},"comment-se-passe-alors-une-mise-à-jour-de-contenu","Comment se passe alors une mise à jour de contenu ?",[16,1085,1086,1087,1090,1091,1094,1095,28],{},"Ce type de site est adapté aux projets où il y a très peu de mises à jour. Cela peut être un site vitrine, un portfolio ou un site de chambres d'hôtes. Comme il n'y a pas d'interface admin, il est donc nécessaire de toucher au code, de recompiler le site puis de redéployer le site sur le serveur. ",[25,1088,1089],{},"Cela n'est pas très pratique",", mais heureusement, il est possible d'automatiser tout cela si vous utilisez ",[282,1092,1093],{},"Git"," et notamment ",[282,1096,1097],{},"Gitlab",[11,1099,1101],{"id":1100},"découverte-et-mise-en-place-de-gitlab-ci","Découverte et mise en place de GitLab CI",[16,1103,1104,1105,1108,1109,1111],{},"Que ce soit chez GitHub ou Gitlab, le concept de ",[282,1106,1107],{},"CI"," (pour intégration continue) permet de déclencher des traitements automatiques lors d'un ",[282,1110,1045],{}," Git. Les opérations se font dans un container et peuvent être diverses et variées : vérification du code, compilation et envoi vers un serveur FTP distant par exemple. Pile-poil ce dont j'avais besoin !",[16,1113,1114,1115,1118,1119,1121],{},"Le point d'entrée de la CI chez Gitlab est le fichier ",[25,1116,1117],{},".gitlab-ci.yml",", à la racine du projet. On va décrire, au format YAML, les différentes étapes qui seront réalisées lors d'un ",[282,1120,1045],{},". Voici un premier point d'entrée :",[1123,1124,1128],"pre",{"className":1125,"code":1126,"language":1127,"meta":661,"style":661},"language-yml shiki shiki-themes github-light","stages:\n    - build\n    - deploy\n","yml",[169,1129,1130,1143,1152],{"__ignoreMap":661},[1131,1132,1135,1139],"span",{"class":1133,"line":1134},"line",1,[1131,1136,1138],{"class":1137},"shJU0","stages",[1131,1140,1142],{"class":1141},"sgsFI",":\n",[1131,1144,1145,1148],{"class":1133,"line":662},[1131,1146,1147],{"class":1141},"    - ",[1131,1149,1151],{"class":1150},"sYBdl","build\n",[1131,1153,1154,1156],{"class":1133,"line":668},[1131,1155,1147],{"class":1141},[1131,1157,1158],{"class":1150},"deploy\n",[16,1160,1161,1162,1165],{},"Ici, on a donc deux étapes qui seront réalisées les unes après les autres. Ensuite, on va pouvoir décrire chacune de ces étapes. Par exemple, l'étape du ",[169,1163,1164],{},"build"," :",[1123,1167,1169],{"className":1125,"code":1168,"language":1127,"meta":661,"style":661},"build:\n    stage: build\n    image: node:22\n    script:\n        - npm ci --cache .npm --prefer-offline\n        - npm run generate\n    artifacts:\n        paths:\n            - .output\u002Fpublic\n",[169,1170,1171,1177,1187,1197,1205,1214,1222,1230,1238],{"__ignoreMap":661},[1131,1172,1173,1175],{"class":1133,"line":1134},[1131,1174,1164],{"class":1137},[1131,1176,1142],{"class":1141},[1131,1178,1179,1182,1185],{"class":1133,"line":662},[1131,1180,1181],{"class":1137},"    stage",[1131,1183,1184],{"class":1141},": ",[1131,1186,1151],{"class":1150},[1131,1188,1189,1192,1194],{"class":1133,"line":668},[1131,1190,1191],{"class":1137},"    image",[1131,1193,1184],{"class":1141},[1131,1195,1196],{"class":1150},"node:22\n",[1131,1198,1200,1203],{"class":1133,"line":1199},4,[1131,1201,1202],{"class":1137},"    script",[1131,1204,1142],{"class":1141},[1131,1206,1208,1211],{"class":1133,"line":1207},5,[1131,1209,1210],{"class":1141},"        - ",[1131,1212,1213],{"class":1150},"npm ci --cache .npm --prefer-offline\n",[1131,1215,1217,1219],{"class":1133,"line":1216},6,[1131,1218,1210],{"class":1141},[1131,1220,1221],{"class":1150},"npm run generate\n",[1131,1223,1225,1228],{"class":1133,"line":1224},7,[1131,1226,1227],{"class":1137},"    artifacts",[1131,1229,1142],{"class":1141},[1131,1231,1233,1236],{"class":1133,"line":1232},8,[1131,1234,1235],{"class":1137},"        paths",[1131,1237,1142],{"class":1141},[1131,1239,1241,1244],{"class":1133,"line":1240},9,[1131,1242,1243],{"class":1141},"            - ",[1131,1245,1246],{"class":1150},".output\u002Fpublic\n",[16,1248,1249],{},"On utilise ici une image en Node v22 comme environnement d'exécution et on va lancer deux commandes :",[568,1251,1252,1258],{},[571,1253,1254,1257],{},[169,1255,1256],{},"npm ci"," pour installer les dépendances de notre projet ;",[571,1259,1260,1263],{},[169,1261,1262],{},"npm run generate"," pour créer la version SSG de notre application.",[237,1265,1266],{},[16,1267,1268,1269,1271,1272,1275,1276,1279],{},"Ici j'utilise ",[169,1270,1256],{}," plutôt que ",[169,1273,1274],{},"npm i",". Node utilise alors le fichier ",[282,1277,1278],{},"package-lock.json"," pour installer toutes les dépendances d'un coup. C'est le plus adapté aux environnements automatisés comme l'intégration continue.",[237,1281,1282],{},[16,1283,1284,1285,1288],{},"Les ",[282,1286,1287],{},"artifacts"," sont les données qui sont passées d'une étape à l'autre. Ici j'ai mis le dossier qui contient le site compilé.",[16,1290,1291,1292,1295,1296,1299],{},"L'étape ",[169,1293,1294],{},"deploy"," consiste donc à déployer le résultat de l'étape précédente sur un serveur distant. Pour cela, j'ai utilisé l'outil ",[169,1297,1298],{},"lftp"," qui permet de transférer les fichiers.",[1123,1301,1303],{"className":1125,"code":1302,"language":1127,"meta":661,"style":661},"deploy:\n    stage: deploy\n    timeout: 10 minutes\n    script:\n    - apt-get update -qq && apt-get install -y -qq lftp\n    - lftp -e \"set sftp:auto-confirm yes; mirror -R .\u002F.output\u002Fpublic\u002F \u002Fhome\u002Fsite\u002Fwww; quit\" -u utilisateur,m0td3p4ss3 sftp:\u002F\u002Fftp.herbergement.fr\n    only: [ master ]\n\n",[169,1304,1305,1311,1319,1329,1335,1342,1349],{"__ignoreMap":661},[1131,1306,1307,1309],{"class":1133,"line":1134},[1131,1308,1294],{"class":1137},[1131,1310,1142],{"class":1141},[1131,1312,1313,1315,1317],{"class":1133,"line":662},[1131,1314,1181],{"class":1137},[1131,1316,1184],{"class":1141},[1131,1318,1158],{"class":1150},[1131,1320,1321,1324,1326],{"class":1133,"line":668},[1131,1322,1323],{"class":1137},"    timeout",[1131,1325,1184],{"class":1141},[1131,1327,1328],{"class":1150},"10 minutes\n",[1131,1330,1331,1333],{"class":1133,"line":1199},[1131,1332,1202],{"class":1137},[1131,1334,1142],{"class":1141},[1131,1336,1337,1339],{"class":1133,"line":1207},[1131,1338,1147],{"class":1141},[1131,1340,1341],{"class":1150},"apt-get update -qq && apt-get install -y -qq lftp\n",[1131,1343,1344,1346],{"class":1133,"line":1216},[1131,1345,1147],{"class":1141},[1131,1347,1348],{"class":1150},"lftp -e \"set sftp:auto-confirm yes; mirror -R .\u002F.output\u002Fpublic\u002F \u002Fhome\u002Fsite\u002Fwww; quit\" -u utilisateur,m0td3p4ss3 sftp:\u002F\u002Fftp.herbergement.fr\n",[1131,1350,1351,1354,1357,1360],{"class":1133,"line":1224},[1131,1352,1353],{"class":1137},"    only",[1131,1355,1356],{"class":1141},": [ ",[1131,1358,1359],{"class":1150},"master",[1131,1361,1362],{"class":1141}," ]\n",[237,1364,1365],{},[16,1366,1367,1368,1371,1372,1375,1376,1378],{},"Le paramètre ",[169,1369,1370],{},"only"," permet d'indiquer que seuls les ",[282,1373,1374],{},"commits"," de la branche ",[282,1377,1359],{}," seront déployés sur le serveur distant.",[16,1380,1381,1382,1385,1386,1388,1389,1392],{},"Une alarme a sûrement sonné dans votre tête : ",[25,1383,1384],{},"les informations de connexion au serveur FTP sont en clair"," dans le fichier ",[25,1387,1117],{},". Heureusement, il est possible de les rendre invisibles via ",[282,1390,1391],{},"la gestion des secrets"," de Gitlab.",[11,1394,1396],{"id":1395},"gestion-des-secrets","Gestion des secrets",[16,1398,1399,1400,1403,1404,28],{},"Sur Gitlab, il faut se rendre dans ",[169,1401,1402],{},"Paramètres > CI\u002FCD"," puis dans la section ",[25,1405,1406],{},"Variables de projet",[16,1408,1409],{},[39,1410],{"alt":1411,"src":1412,"title":1411},"Tableau de mes variables","img\u002Farticles\u002Fgitlab\u002Fgitlab-variables.png",[16,1414,1415],{},"Dans mon cas, j'ai ajouté les variables suivantes :",[568,1417,1418,1424,1430,1436],{},[571,1419,1420,1423],{},[169,1421,1422],{},"DEPLOY_HOST"," : l'hôte du serveur FTP auquel se connecter ;",[571,1425,1426,1429],{},[169,1427,1428],{},"DEPLOY_USER"," : l'identifiant de connexion ;",[571,1431,1432,1435],{},[169,1433,1434],{},"DEPLOY_PASSWORD"," : le mot de passe de connexion ;",[571,1437,1438,1441],{},[169,1439,1440],{},"DEPLOY_PATH"," : le chemin où déposer les fichiers.",[237,1443,1444],{},[16,1445,1446,1447,1450,1451,28],{},"Pensez à protéger les variables en les ",[25,1448,1449],{},"masquant"," et en ",[25,1452,1453],{},"cachant le mot de passe",[16,1455,1456,1457,1459],{},"On peut donc mettre à jour notre fichier ",[25,1458,1117],{},". Le voici au complet à ce stade :",[1123,1461,1463],{"className":1125,"code":1462,"language":1127,"meta":661,"style":661},"stages:\n    - build\n    - deploy\n\nbuild:\n    stage: build\n    image: node:22\n    script:\n        - npm ci --cache .npm --prefer-offline\n        - npm run generate\n    artifacts:\n        paths:\n            - .output\u002Fpublic\n\ndeploy:\n    stage: deploy\n    timeout: 10 minutes\n    script:\n    - apt-get update -qq && apt-get install -y -qq lftp\n    - lftp -e \"set sftp:auto-confirm yes; mirror -R .\u002F.output\u002Fpublic\u002F $DEPLOY_PATH; quit\" -u $DEPLOY_USER,$DEPLOY_PASSWORD sftp:\u002F\u002F$DEPLOY_HOST\n    only: [ master ]\n\n",[169,1464,1465,1471,1477,1483,1488,1494,1502,1510,1516,1522,1529,1536,1543,1550,1555,1562,1571,1580,1587,1594,1602],{"__ignoreMap":661},[1131,1466,1467,1469],{"class":1133,"line":1134},[1131,1468,1138],{"class":1137},[1131,1470,1142],{"class":1141},[1131,1472,1473,1475],{"class":1133,"line":662},[1131,1474,1147],{"class":1141},[1131,1476,1151],{"class":1150},[1131,1478,1479,1481],{"class":1133,"line":668},[1131,1480,1147],{"class":1141},[1131,1482,1158],{"class":1150},[1131,1484,1485],{"class":1133,"line":1199},[1131,1486,1487],{"emptyLinePlaceholder":734},"\n",[1131,1489,1490,1492],{"class":1133,"line":1207},[1131,1491,1164],{"class":1137},[1131,1493,1142],{"class":1141},[1131,1495,1496,1498,1500],{"class":1133,"line":1216},[1131,1497,1181],{"class":1137},[1131,1499,1184],{"class":1141},[1131,1501,1151],{"class":1150},[1131,1503,1504,1506,1508],{"class":1133,"line":1224},[1131,1505,1191],{"class":1137},[1131,1507,1184],{"class":1141},[1131,1509,1196],{"class":1150},[1131,1511,1512,1514],{"class":1133,"line":1232},[1131,1513,1202],{"class":1137},[1131,1515,1142],{"class":1141},[1131,1517,1518,1520],{"class":1133,"line":1240},[1131,1519,1210],{"class":1141},[1131,1521,1213],{"class":1150},[1131,1523,1525,1527],{"class":1133,"line":1524},10,[1131,1526,1210],{"class":1141},[1131,1528,1221],{"class":1150},[1131,1530,1532,1534],{"class":1133,"line":1531},11,[1131,1533,1227],{"class":1137},[1131,1535,1142],{"class":1141},[1131,1537,1539,1541],{"class":1133,"line":1538},12,[1131,1540,1235],{"class":1137},[1131,1542,1142],{"class":1141},[1131,1544,1546,1548],{"class":1133,"line":1545},13,[1131,1547,1243],{"class":1141},[1131,1549,1246],{"class":1150},[1131,1551,1553],{"class":1133,"line":1552},14,[1131,1554,1487],{"emptyLinePlaceholder":734},[1131,1556,1558,1560],{"class":1133,"line":1557},15,[1131,1559,1294],{"class":1137},[1131,1561,1142],{"class":1141},[1131,1563,1565,1567,1569],{"class":1133,"line":1564},16,[1131,1566,1181],{"class":1137},[1131,1568,1184],{"class":1141},[1131,1570,1158],{"class":1150},[1131,1572,1574,1576,1578],{"class":1133,"line":1573},17,[1131,1575,1323],{"class":1137},[1131,1577,1184],{"class":1141},[1131,1579,1328],{"class":1150},[1131,1581,1583,1585],{"class":1133,"line":1582},18,[1131,1584,1202],{"class":1137},[1131,1586,1142],{"class":1141},[1131,1588,1590,1592],{"class":1133,"line":1589},19,[1131,1591,1147],{"class":1141},[1131,1593,1341],{"class":1150},[1131,1595,1597,1599],{"class":1133,"line":1596},20,[1131,1598,1147],{"class":1141},[1131,1600,1601],{"class":1150},"lftp -e \"set sftp:auto-confirm yes; mirror -R .\u002F.output\u002Fpublic\u002F $DEPLOY_PATH; quit\" -u $DEPLOY_USER,$DEPLOY_PASSWORD sftp:\u002F\u002F$DEPLOY_HOST\n",[1131,1603,1605,1607,1609,1611],{"class":1133,"line":1604},21,[1131,1606,1353],{"class":1137},[1131,1608,1356],{"class":1141},[1131,1610,1359],{"class":1150},[1131,1612,1362],{"class":1141},[11,1614,1616],{"id":1615},"tests-et-peaufinage","Tests et peaufinage",[16,1618,1619,1620,1622,1623,1625,1626,1629,1630,1633,1634,1637,1638,1641,1642,1644,1645,1647,1648,883],{},"C'est le moment de tester ! Commencez par ",[282,1621,1045],{}," le fichier ",[25,1624,1117],{}," puis effectuez un ",[169,1627,1628],{},"git push",". Dans Gitlab, tout ce qui concerne le déploiement continu est dans le menu ",[25,1631,1632],{},"Compilation",". On y retrouve les ",[282,1635,1636],{},"jobs"," (chaque étape définie dans le YAML), mais également les ",[282,1639,1640],{},"pipelines"," qui regroupent ces ",[282,1643,1636],{}," pour chaque ",[282,1646,1045],{},". Un éditeur de pipeline permet de modifier directement en ligne notre fichier ",[25,1649,1117],{},[16,1651,1652],{},[39,1653],{"alt":1654,"src":1655,"title":1654},"Les pipelines de Gitlab","img\u002Farticles\u002Fgitlab\u002Fgitlab-pipelines.png",[16,1657,1658,1659,1662],{},"Lorsqu'il y a une erreur, on peut consulter le détail du ",[282,1660,1661],{},"job"," concerné et observer la sortie du terminal. En général, après quelques itérations, on obtient une intégration continue fonctionnelle !",[11,1664,1666],{"id":1665},"aller-plus-loin-avec-les-environnements","Aller plus loin avec les environnements",[16,1668,1669,1670,1676,1677,1680,1681,1683],{},"Tout ceci est chouette, mais il est fréquent d'avoir plusieurs branches et plusieurs destinations où déployer son code. ",[25,1671,1672,1673],{},"Par exemple, un environnement de test \u002F pré-prod \u002F staging ne devrait se mettre à jour qu'avec le travail de la branche ",[282,1674,1675],{},"dev",", là où l'environnement de production ne devrait se mettre à jour qu'avec le code de la branche ",[282,1678,1679],{},"main"," ou ",[282,1682,1359],{},". Eh bien, c'est possible !",[16,1685,1686,1687,1690,1691,1693],{},"Dans Gitlab, on se rend dans ",[169,1688,1689],{},"Opération > Environnement"," et on crée deux environnements : dev et prod. Ensuite, dans la configuration des variables (",[169,1692,1402],{},"), on va pouvoir définir une valeur différente pour chacun des environnements.",[16,1695,1696],{},[39,1697],{"alt":1698,"src":1699,"title":1698},"Les variables selon un environnement","img\u002Farticles\u002Fgitlab\u002Fgitlab-variables-env.png",[237,1701,1702],{},[16,1703,1704,1705,1707],{},"Dans mon cas, j'ai défini un ",[169,1706,1440],{}," différent pour mes deux environnements, parce que mon environnement de développement et mon environnement de production sont sur la même machine. Rien ne vous empêche de configurer des utilisateurs, mots de passe et hôtes différents !",[16,1709,1710,1711,1713],{},"On peut ensuite adapter notre fichier ",[25,1712,1117],{}," pour tenir compte de ces environnements :",[1123,1715,1717],{"className":1125,"code":1716,"language":1127,"meta":661,"style":661},"stages:\n    - build\n    - dev\n    - prod\n\nbuild:\n    stage: build\n    image: node:22\n    script:\n        - npm ci --cache .npm --prefer-offline\n        - npm run generate\n    artifacts:\n        paths:\n            - .output\u002Fpublic\n\ndev:\n    stage: dev\n    environment: Dev\n    timeout: 10 minutes\n    script:\n    - apt-get update -qq && apt-get install -y -qq lftp\n    - lftp -e \"set sftp:auto-confirm yes; mirror -R .\u002F.output\u002Fpublic\u002F $DEPLOY_PATH; quit\" -u $DEPLOY_USER,$DEPLOY_PASSWORD sftp:\u002F\u002F$DEPLOY_HOST\n    except: [ master ]\n\nprod:\n    stage: prod\n    environment: Prod\n    timeout: 10 minutes\n    script:\n    - apt-get update -qq && apt-get install -y -qq lftp\n    - lftp -e \"set sftp:auto-confirm yes; mirror -R .\u002F.output\u002Fpublic\u002F $DEPLOY_PATH; quit\" -u $DEPLOY_USER,$DEPLOY_PASSWORD sftp:\u002F\u002F$DEPLOY_HOST\n    only: [ master ]\n",[169,1718,1719,1725,1731,1738,1745,1749,1755,1763,1771,1777,1783,1789,1795,1801,1807,1811,1817,1825,1835,1843,1849,1855,1862,1874,1879,1887,1896,1906,1915,1922,1929,1936],{"__ignoreMap":661},[1131,1720,1721,1723],{"class":1133,"line":1134},[1131,1722,1138],{"class":1137},[1131,1724,1142],{"class":1141},[1131,1726,1727,1729],{"class":1133,"line":662},[1131,1728,1147],{"class":1141},[1131,1730,1151],{"class":1150},[1131,1732,1733,1735],{"class":1133,"line":668},[1131,1734,1147],{"class":1141},[1131,1736,1737],{"class":1150},"dev\n",[1131,1739,1740,1742],{"class":1133,"line":1199},[1131,1741,1147],{"class":1141},[1131,1743,1744],{"class":1150},"prod\n",[1131,1746,1747],{"class":1133,"line":1207},[1131,1748,1487],{"emptyLinePlaceholder":734},[1131,1750,1751,1753],{"class":1133,"line":1216},[1131,1752,1164],{"class":1137},[1131,1754,1142],{"class":1141},[1131,1756,1757,1759,1761],{"class":1133,"line":1224},[1131,1758,1181],{"class":1137},[1131,1760,1184],{"class":1141},[1131,1762,1151],{"class":1150},[1131,1764,1765,1767,1769],{"class":1133,"line":1232},[1131,1766,1191],{"class":1137},[1131,1768,1184],{"class":1141},[1131,1770,1196],{"class":1150},[1131,1772,1773,1775],{"class":1133,"line":1240},[1131,1774,1202],{"class":1137},[1131,1776,1142],{"class":1141},[1131,1778,1779,1781],{"class":1133,"line":1524},[1131,1780,1210],{"class":1141},[1131,1782,1213],{"class":1150},[1131,1784,1785,1787],{"class":1133,"line":1531},[1131,1786,1210],{"class":1141},[1131,1788,1221],{"class":1150},[1131,1790,1791,1793],{"class":1133,"line":1538},[1131,1792,1227],{"class":1137},[1131,1794,1142],{"class":1141},[1131,1796,1797,1799],{"class":1133,"line":1545},[1131,1798,1235],{"class":1137},[1131,1800,1142],{"class":1141},[1131,1802,1803,1805],{"class":1133,"line":1552},[1131,1804,1243],{"class":1141},[1131,1806,1246],{"class":1150},[1131,1808,1809],{"class":1133,"line":1557},[1131,1810,1487],{"emptyLinePlaceholder":734},[1131,1812,1813,1815],{"class":1133,"line":1564},[1131,1814,1675],{"class":1137},[1131,1816,1142],{"class":1141},[1131,1818,1819,1821,1823],{"class":1133,"line":1573},[1131,1820,1181],{"class":1137},[1131,1822,1184],{"class":1141},[1131,1824,1737],{"class":1150},[1131,1826,1827,1830,1832],{"class":1133,"line":1582},[1131,1828,1829],{"class":1137},"    environment",[1131,1831,1184],{"class":1141},[1131,1833,1834],{"class":1150},"Dev\n",[1131,1836,1837,1839,1841],{"class":1133,"line":1589},[1131,1838,1323],{"class":1137},[1131,1840,1184],{"class":1141},[1131,1842,1328],{"class":1150},[1131,1844,1845,1847],{"class":1133,"line":1596},[1131,1846,1202],{"class":1137},[1131,1848,1142],{"class":1141},[1131,1850,1851,1853],{"class":1133,"line":1604},[1131,1852,1147],{"class":1141},[1131,1854,1341],{"class":1150},[1131,1856,1858,1860],{"class":1133,"line":1857},22,[1131,1859,1147],{"class":1141},[1131,1861,1601],{"class":1150},[1131,1863,1865,1868,1870,1872],{"class":1133,"line":1864},23,[1131,1866,1867],{"class":1137},"    except",[1131,1869,1356],{"class":1141},[1131,1871,1359],{"class":1150},[1131,1873,1362],{"class":1141},[1131,1875,1877],{"class":1133,"line":1876},24,[1131,1878,1487],{"emptyLinePlaceholder":734},[1131,1880,1882,1885],{"class":1133,"line":1881},25,[1131,1883,1884],{"class":1137},"prod",[1131,1886,1142],{"class":1141},[1131,1888,1890,1892,1894],{"class":1133,"line":1889},26,[1131,1891,1181],{"class":1137},[1131,1893,1184],{"class":1141},[1131,1895,1744],{"class":1150},[1131,1897,1899,1901,1903],{"class":1133,"line":1898},27,[1131,1900,1829],{"class":1137},[1131,1902,1184],{"class":1141},[1131,1904,1905],{"class":1150},"Prod\n",[1131,1907,1909,1911,1913],{"class":1133,"line":1908},28,[1131,1910,1323],{"class":1137},[1131,1912,1184],{"class":1141},[1131,1914,1328],{"class":1150},[1131,1916,1918,1920],{"class":1133,"line":1917},29,[1131,1919,1202],{"class":1137},[1131,1921,1142],{"class":1141},[1131,1923,1925,1927],{"class":1133,"line":1924},30,[1131,1926,1147],{"class":1141},[1131,1928,1341],{"class":1150},[1131,1930,1932,1934],{"class":1133,"line":1931},31,[1131,1933,1147],{"class":1141},[1131,1935,1601],{"class":1150},[1131,1937,1939,1941,1943,1945],{"class":1133,"line":1938},32,[1131,1940,1353],{"class":1137},[1131,1942,1356],{"class":1141},[1131,1944,1359],{"class":1150},[1131,1946,1362],{"class":1141},[16,1948,1949,1950,1165],{},"On a donc maintenant trois ",[282,1951,1636],{},[568,1953,1954,1959,1971],{},[571,1955,1956,1958],{},[169,1957,1164],{},", qui se charge de compiler le site ;",[571,1960,1961,1963,1964,1967,1968,1970],{},[169,1962,1675],{},", qui utilise l'environnement ",[282,1965,1966],{},"« Dev »"," pour les variables et qui sera lancé sur toutes les branches sauf ",[282,1969,1359],{}," ;",[571,1972,1973,1963,1975,1978,1979,1981,1982,28],{},[169,1974,1884],{},[282,1976,1977],{},"« Prod »"," et qui ne se déclenchera que pour les ",[282,1980,1374],{}," sur la branche ",[282,1983,1359],{},[16,1985,1986,1987,1989],{},"De cette façon, lorsque nous faisons un ",[282,1988,1045],{},", c'est automatiquement déployé sur un environnement ou l'autre.",[11,1991,1993],{"id":1992},"ce-que-ça-change-au-quotidien","Ce que ça change au quotidien",[16,1995,1996,1997,2002,2003,2005],{},"Si je prends l'exemple du site sur lequel vous lisez cet article, une bonne partie du contenu est rédigée en Markdown et affichée à l'aide du ",[49,1998,2001],{"href":1999,":target":51,"rel":2000},"https:\u002F\u002Fcontent.nuxt.com\u002F",[54],"module Nuxt Content","\n. Pour le mettre à jour, j'ai simplement besoin d'un éditeur de texte et de réaliser un ",[282,2004,1045],{},". Le reste se fait automatiquement, sans que j'aie à y penser.",[237,2007,2008],{},[16,2009,2010],{},"Bonus : il y a directement dans Gitlab un éditeur de code, je peux donc éditer mon contenu même en déplacement tant que j'ai accès à mon compte.Z",[16,2012,2013],{},"Si l'on travaille seul, mais que l'on travaille sur de multiples projets, avec des technos différentes et surtout des versions de Node différentes, cela simplifie grandement le travail : toute la procédure de déploiement est consignée dans un fichier et est exécutée automatiquement.",[16,2015,2016,2017],{},"Si l'on travaille à plusieurs, c'est aussi un avantage : on n'a pas à expliquer comment mettre à jour le site et encore moins à partager les informations de connexion. ",[25,2018,2019,2020,2023],{},"C'est aussi l'endroit parfait pour ajouter les tests unitaires, du ",[282,2021,2022],{},"linting"," et d'autres automatismes !",[547,2025,2027,2030],{"title":2026},"Vous avez besoin d'accompagnement ?",[16,2028,2029],{},"Je peux vous assister dans la mise en place d'une pipeline d'intégration et de déploiement continu pour votre projet.",[16,2031,2032],{},"N'hésitez pas à me contacter !",[11,2034,2036],{"id":2035},"ressources-utiles","Ressources utiles",[568,2038,2039,2047,2054],{},[571,2040,2041,2046],{},[49,2042,2045],{"href":2043,":target":51,"rel":2044},"https:\u002F\u002Fdocs.gitlab.com\u002Fee\u002Fci\u002F",[54],"Documentation officielle de GitLab CI\u002FCD","\n(en)",[571,2048,2049,2046],{},[49,2050,2053],{"href":2051,":target":51,"rel":2052},"https:\u002F\u002Fdocs.gitlab.com\u002Fee\u002Fci\u002Fvariables\u002F",[54],"Guide GitLab sur les variables de pipeline",[571,2055,2056,2046],{},[49,2057,2060],{"href":2058,":target":51,"rel":2059},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fgetting-started\u002Fdeployment",[54],"Documentation Nuxt sur le déploiement statique",[2062,2063,2064],"style",{},"html pre.shiki code .shJU0, html code.shiki .shJU0{--shiki-default:#22863A}html pre.shiki code .sgsFI, html code.shiki .sgsFI{--shiki-default:#24292E}html pre.shiki code .sYBdl, html code.shiki .sYBdl{--shiki-default:#032F62}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":661,"searchDepth":662,"depth":662,"links":2066},[2067,2068,2069,2070,2071,2072,2073,2074],{"id":1049,"depth":662,"text":1050},{"id":1082,"depth":662,"text":1083},{"id":1100,"depth":662,"text":1101},{"id":1395,"depth":662,"text":1396},{"id":1615,"depth":662,"text":1616},{"id":1665,"depth":662,"text":1666},{"id":1992,"depth":662,"text":1993},{"id":2035,"depth":662,"text":2036},"2025-10-15","Automatisez le déploiement de votre site Nuxt grâce à GitLab CI\u002FCD. Découvrez pas à pas comment configurer une pipeline et déployer votre site à chaque commit",{},"\u002Farticles\u002Fdeploiement-site-nuxt-avec-gitlab",{"title":1037,"description":2076},"gitlab-deployer-automatiquement-un-site-nuxt","articles\u002FDéploiement site Nuxt avec Gitlab",[1097,2083,2084],"Nuxt","CI-CD","\u002Fimg\u002Farticles\u002Fgitlab\u002Fnuxt-gitlab.png","2Rhph8l2S_nacnmG9CQvdj9rfV6z7gk23ecZWZuekxE",{"id":2088,"title":2089,"body":2090,"date":2420,"description":2421,"draft":731,"extension":732,"meta":2422,"navigation":734,"path":2423,"seo":2424,"slug":2425,"stem":2426,"tags":2427,"thumbnail":2430,"__hash__":2431},"articles\u002Farticles\u002FDifférence forfait régie.md","Quelle différence entre le forfait et la régie ?",{"type":8,"value":2091,"toc":2414},[2092,2106,2109,2113,2127,2134,2146,2150,2157,2164,2178,2186,2190,2193,2212,2219,2225,2231,2371,2375,2381,2392,2403],[16,2093,2094,2095,2098,2099,2102,2103,28],{},"Lorsqu'une entreprise fait appel à un indépendant, deux modes de travail reviennent le plus souvent : ",[25,2096,2097],{},"le forfait"," et ",[25,2100,2101],{},"la régie",". Ces termes sont couramment utilisés dans le secteur, mais leur signification et leurs implications ne sont pas toujours bien comprises. Pourtant, ",[25,2104,2105],{},"ce choix influence directement la gestion du projet, la facturation et la relation entre le client et le prestataire",[16,2107,2108],{},"Voyons ensemble en quoi ces deux approches diffèrent et ce que cela change concrètement pour vos projets !",[11,2110,2112],{"id":2111},"le-forfait-définition-et-fonctionnement","Le forfait : définition et fonctionnement",[16,2114,2115,2116,2119,2120,2123,2124,28],{},"Lorsque l'on travaille au forfait, ",[25,2117,2118],{},"on définit le périmètre des tâches",". Le freelance s'engage alors sur la durée nécessaire pour réaliser ces tâches, les livrables à produire et donc le montant de cette mission. Pour le client, c'est très sécurisant puisque ",[25,2121,2122],{},"le budget est fixé à l'avance",". Pour le freelance, c'est plus risqué : si une tâche est plus longue que prévu, ",[25,2125,2126],{},"cela impacte directement les délais et la rentabilité de la mission",[16,2128,2129,2130,2133],{},"Que ce soit du côté du client ou du côté du freelance, c'est ",[25,2131,2132],{},"un cadre un peu rigide"," : les imprévus et les évolutions des tâches, même mineures, doivent faire l'objet d'une facturation supplémentaire.",[237,2135,2136],{},[16,2137,2138,2139,2145],{},"Ce fonctionnement est adapté aux missions où il faut produire un livrable unique, comme ",[25,2140,2141,2142],{},"un logo, une landing page, ",[49,2143,2144],{"href":1061,"title":1062},"un audit","…",[11,2147,2149],{"id":2148},"la-régie-définition-et-fonctionnement","La régie : définition et fonctionnement",[16,2151,2152,2153,2156],{},"Lorsque l'on travaille en régie, ",[25,2154,2155],{},"le prestataire vend son temps",", durant lequel il travaille pour le client. Un accord est donc trouvé autour d'un volume d'heures à réaliser régulièrement. Le contrat peut représenter l'équivalent d'un temps plein (5 jours par semaine) ou un temps partiel : une journée par semaine, une journée par mois, une heure par jour, peu importe.",[16,2158,2159,2160,2163],{},"Ce mode de fonctionnement ne marche que si ",[25,2161,2162],{},"la confiance entre les intervenants est établie"," : le client a en effet un peu moins de visibilité sur le travail, mais le freelance n'a plus le risque de se faire dépasser par une difficulté technique. Dans la pratique, si tout le monde communique bien sur les tâches à réaliser et sur l'avancement de celles-ci en faisant des feedbacks réguliers, cela se passe bien.",[16,2165,2166,2167,2170,2171,2174,2175,28],{},"Le client garde également une grande ",[25,2168,2169],{},"souplesse"," : il peut collaborer avec un freelance sans devoir l'occuper à temps plein et peut ",[25,2172,2173],{},"moduler la charge de travail dans la durée",", à la hausse ou à la baisse, selon les objectifs ou l'avancement. Et si le besoin disparaît, ",[25,2176,2177],{},"le contrat peut s'arrêter très facilement",[237,2179,2180],{},[16,2181,2182,2183,28],{},"Ce fonctionnement est plutôt indiqué pour les missions continues comme ",[25,2184,2185],{},"les maintenances applicatives",[11,2187,2189],{"id":2188},"comment-choisir-entre-forfait-et-régie","Comment choisir entre forfait et régie ?",[16,2191,2192],{},"Maintenant que nous avons vu la différence entre le fonctionnement par forfait et le fonctionnement par régie, comment choisir un mode ou l'autre ? Est-ce qu'il y a un mode qui est mieux que l'autre ?",[16,2194,2195,2198,2199,2202,2203,2205,2206,2202,2209,2211],{},[25,2196,2197],{},"En réalité, cela dépend surtout de votre projet !","\nSi votre projet est ",[25,2200,2201],{},"à court terme et très clair",", alors ",[25,2204,2097],{}," est plus adapté. Au contraire, si votre projet est ",[25,2207,2208],{},"à long terme et au périmètre incertain",[25,2210,2101],{}," est indiquée.",[16,2213,2214,2215,2218],{},"La relation entre le freelance et le client peut également être un moyen de choisir : si des expériences positives ont déjà eu lieu et si ",[25,2216,2217],{},"la confiance est bien établie",", alors la régie est pertinente. Dans le cas contraire, un fonctionnement au forfait permet de se rassurer.",[16,2220,2221,2222,28],{},"Enfin, ",[25,2223,2224],{},"la régie convient particulièrement lorsque le freelance apporte une expertise, encadre une équipe ou organise le projet",[16,2226,2227],{},[39,2228],{"alt":2229,"src":2230,"title":2229},"Un chemin se sépare en deux en forêt","img\u002Farticles\u002Fforfait-vs-regie\u002Fjens-lelie-u0vgcIOQG08-unsplash.jpg",[2232,2233,2234,2250],"table",{},[2235,2236,2237],"thead",{},[2238,2239,2240,2244,2247],"tr",{},[2241,2242,2243],"th",{},"Critère",[2241,2245,2246],{},"Forfait",[2241,2248,2249],{},"Régie",[2251,2252,2253,2267,2280,2293,2306,2319,2332,2345,2358],"tbody",{},[2238,2254,2255,2261,2264],{},[2256,2257,2258],"td",{},[25,2259,2260],{},"Taille du projet",[2256,2262,2263],{},"Petits à moyens",[2256,2265,2266],{},"Moyens à grands",[2238,2268,2269,2274,2277],{},[2256,2270,2271],{},[25,2272,2273],{},"Nature du projet",[2256,2275,2276],{},"Périmètre bien défini",[2256,2278,2279],{},"Périmètre évolutif ou incertain",[2238,2281,2282,2287,2290],{},[2256,2283,2284],{},[25,2285,2286],{},"Budget",[2256,2288,2289],{},"Fixe, connu dès le départ",[2256,2291,2292],{},"Variable, la priorité est à l'avancement du projet",[2238,2294,2295,2300,2303],{},[2256,2296,2297],{},[25,2298,2299],{},"Visibilité pour le client",[2256,2301,2302],{},"Sécurité : vision claire des coûts et des livrables",[2256,2304,2305],{},"Flexibilité : visibilité sur l'avancement, mais budget et délai ouverts",[2238,2307,2308,2313,2316],{},[2256,2309,2310],{},[25,2311,2312],{},"Risque pour le freelance",[2256,2314,2315],{},"Élevé : dépassements de temps non rémunérés",[2256,2317,2318],{},"Faible : le temps passé est facturé",[2238,2320,2321,2326,2329],{},[2256,2322,2323],{},[25,2324,2325],{},"Souplesse",[2256,2327,2328],{},"Faible, nécessite avenants en cas de changements",[2256,2330,2331],{},"Forte, adaptation continue possible",[2238,2333,2334,2339,2342],{},[2256,2335,2336],{},[25,2337,2338],{},"Relation client \u002F freelance",[2256,2340,2341],{},"Plutôt transactionnelle, sécurisante au départ",[2256,2343,2344],{},"Basée sur la confiance et la communication régulière",[2238,2346,2347,2352,2355],{},[2256,2348,2349],{},[25,2350,2351],{},"Positionnement du freelance",[2256,2353,2354],{},"Exécutant d'un cahier des charges",[2256,2356,2357],{},"Expert, accompagnateur, membre intégré de l'équipe",[2238,2359,2360,2365,2368],{},[2256,2361,2362],{},[25,2363,2364],{},"Exemple typique",[2256,2366,2367],{},"Refonte d'un site vitrine",[2256,2369,2370],{},"Maintenance, accompagnement long terme ou pilotage technique",[11,2372,2374],{"id":2373},"trouver-son-équilibre","Trouver son équilibre",[16,2376,2377,2378,28],{},"Pour un freelance, ",[25,2379,2380],{},"le plus confortable est de trouver des contrats en régie sur plusieurs mois ou années",[16,2382,2383,2384,2387,2388,2391],{},"Me concernant, je réalise souvent ",[25,2385,2386],{},"le premier projet d'un client au forfait",". Cela me permet d'éditer un devis, de fixer l'enveloppe et de se mettre d'accord sur le périmètre du projet. Par contre, ",[25,2389,2390],{},"les maintenances que je propose sont sous forme de régie"," : cela me permet d'intervenir sur le projet sans faire de multiples devis pour chaque tâche.",[237,2393,2394],{},[16,2395,2396,2397,28],{},"Dans le développement web, il est courant qu'un projet soit initié au forfait et qu'il soit ensuite maintenu en régie (correctifs, évolutions…) au travers d'une ",[25,2398,2399,2402],{},[282,2400,2401],{},"tierce maintenance applicative"," (TMA)",[16,2404,2405,2406,2409,2410,2413],{},"En résumé, ",[25,2407,2408],{},"il n'y a pas un modèle meilleur que l'autre",". Le choix dépend avant tout de ",[25,2411,2412],{},"la nature du projet, de la relation entre client et freelance et du rôle que le freelance doit jouer dans le projet",". Ce que je vous conseille, c'est de tester l'un et l'autre et de voir ce qui correspond le mieux à votre activité !",{"title":661,"searchDepth":662,"depth":662,"links":2415},[2416,2417,2418,2419],{"id":2111,"depth":662,"text":2112},{"id":2148,"depth":662,"text":2149},{"id":2188,"depth":662,"text":2189},{"id":2373,"depth":662,"text":2374},"2025-08-29","Freelance : mieux vaut travailler au forfait ou en régie ? Découvrez les différences, avantages et inconvénients de chaque mode de collaboration pour choisir celui qui correspond le mieux à votre activité.",{},"\u002Farticles\u002Fdifference-forfait-regie",{"title":2089,"description":2421},"quelle-difference-entre-forfait-et-regie","articles\u002FDifférence forfait régie",[2428,2429],"Freelance","Facturation","\u002Fimg\u002Farticles\u002Fforfait-vs-regie\u002Fmaranda-vandergriff-7aakZdIl4vg-unsplash.jpg","4Jdqf_rurNSxRWzgnfdmlr8shxNnLk_Ugh34bxcbnz8",{"id":2433,"title":2434,"body":2435,"date":2740,"description":2741,"draft":731,"extension":732,"meta":2742,"navigation":734,"path":2743,"seo":2744,"slug":881,"stem":2745,"tags":2746,"thumbnail":2748,"__hash__":2749},"articles\u002Farticles\u002FPourquoi choisir Firefox.md","Pourquoi choisir Firefox en 2025 ?",{"type":8,"value":2436,"toc":2732},[2437,2450,2454,2476,2482,2485,2491,2509,2512,2516,2519,2540,2546,2555,2558,2564,2570,2579,2582,2608,2611,2615,2618,2621,2624,2628,2631,2641,2656,2658,2664,2670,2679],[16,2438,2439,2440,2445,2446,2449],{},"En 2025, Google Chrome représente plus de 65 % des parts de marchés des navigateurs",[824,2441,2442],{},[49,2443,832],{"href":828,"ariaDescribedBy":2444,"dataFootnoteRef":661,"id":831},[830],". Annoncé en 2008 par Google, il s'est rapidement imposé alors qu'il existe de nombreuses alternatives, notamment plus respectueuses de vos données personnelles. J'aimerais vous montrer pourquoi ",[25,2447,2448],{},"Mozilla Firefox"," est une meilleure alternative et qu'il mérite sa place sur votre ordinateur et votre smartphone, que vous soyez un développeur ou un utilisateur classique.",[11,2451,2453],{"id":2452},"firefox-le-navigateur-open-source","Firefox, le navigateur open source",[16,2455,2456,2457,2465,2466,2469,2470,2475],{},"Le navigateur Firefox est un logiciel libre",[824,2458,2459],{},[49,2460,2464],{"href":2461,"ariaDescribedBy":2462,"dataFootnoteRef":661,"id":2463},"#user-content-fn-2",[830],"user-content-fnref-2","2"," qui est édité par la ",[25,2467,2468],{},"fondation Mozilla"," depuis 2003. Cette fondation à but non-lucratif, respecte ",[49,2471,2474],{"href":2472,"rel":2473,":target":51},"https:\u002F\u002Fwww.mozilla.org\u002Ffr\u002Fabout\u002Fmanifesto\u002F",[54],"le manifeste Mozilla"," qui vise à conserver Internet libre et accessible, ainsi qu'à respecter la vie privée de ses utilisateurs. Je vous invite à consulter les 10 principes fondateurs, cela donne une bonne idée de la philosophie de la fondation !",[16,2477,2478],{},[39,2479],{"alt":2480,"src":2481,"title":2480},"Capture d'écran du manifeste de Firefox","img\u002Farticles\u002Ffirefox\u002Ffirefox-manifesto-fr.png",[16,2483,2484],{},"Personnellement, j'étais encore au lycée lorsque j'ai découvert ce navigateur. À l'époque, son principal concurrent était Internet Explorer édité par Microsoft. Firefox était le premier à proposer des onglets, c'était révolutionnaire ! Je l'ai rapidement adopté et plus jamais abandonné.",[16,2486,2487,2488,28],{},"Contrairement à ses concurrents, Firefox n'exploite pas vos données personnelles à des fins commerciales. ",[25,2489,2490],{},"Les utilisateurs de Firefox sont donc les clients, pas le produit",[16,2492,2493,2494,2499,2500,2508],{},"Google Chrome est sorti en 2008 en se basant sur un projet libre ",[49,2495,2498],{"href":2496,"rel":2497,":target":51},"https:\u002F\u002Fwww.chromium.org",[54],"Chromium",". À grands renforts de publicité, que ce soit sur la page du moteur de recherche, sur YouTube ou même dans le métro parisien",[824,2501,2502],{},[49,2503,2507],{"href":2504,"ariaDescribedBy":2505,"dataFootnoteRef":661,"id":2506},"#user-content-fn-3",[830],"user-content-fnref-3","3",", ils arrivent assez vite à conquérir de grandes parts de marché.",[16,2510,2511],{},"Malheureusement, Google Chrome a tendance à favoriser des technologies propriétaires au détriment des standards ouverts. Certains sites deviennent alors utilisables uniquement par Chrome, ce qui limite la diversité du web.",[11,2513,2515],{"id":2514},"firefox-respecte-votre-vie-privée","Firefox respecte votre vie privée",[16,2517,2518],{},"Nativement, ce navigateur open source dispose de plusieurs niveau de sécurité permettant de bloquer différents éléments :",[568,2520,2521,2524,2527,2534],{},[571,2522,2523],{},"Les traqueurs des réseaux sociaux (Facebook Pixel, TikTok Pixel…)",[571,2525,2526],{},"Les cookies tiers",[571,2528,2529,2530,2533],{},"Le ",[282,2531,2532],{},"cryptojacking"," (des malwares utilisant votre machine pour miner de la cryptomonnaie)",[571,2535,2529,2536,2539],{},[282,2537,2538],{},"fingerprinting"," (l'empreinte de votre navigation sur un site, unique)",[16,2541,2542],{},[39,2543],{"alt":2544,"src":2545,"title":2544},"Paramètres de vie privée de Firefox","img\u002Farticles\u002Ffirefox\u002Ffirefox-vie-privee.png",[16,2547,2548,2549,2554],{},"La politique par défaut est déjà très bien et nous pouvons en plus l'améliorer tel que je le fais avec l'extension ",[49,2550,2553],{"href":2551,"rel":2552},"https:\u002F\u002Fublockorigin.com\u002Ffr",[54],"uBlock Origin"," pour lutter contre les publicités. L'avantage est que l'on cesse d'être espionné et que l'on gagne à la fois du temps de téléchargement et de l'espace à l'écran : la priorité est au contenu, les encarts publicitaires disparaissent (même les pubs YouTube !)",[16,2556,2557],{},"Je vous laisse apprécier la différence entre un site de cuisine avec et sans l'utilisation de uBlock Origin :",[16,2559,2560],{},[39,2561],{"alt":2562,"src":2563,"title":2562},"Capture d'écran de 750g.com sans bloqueur de publicité","img\u002Farticles\u002Ffirefox\u002F750g-avec-pub.png",[16,2565,2566],{},[39,2567],{"alt":2568,"src":2569,"title":2568},"Capture d'écran de 750g.com avec bloqueur de publicité","img\u002Farticles\u002Ffirefox\u002F750g-sans-pub.png",[237,2571,2572],{},[16,2573,2574,2575,2578],{},"Depuis juin 2024, Google Chrome impose aux extensions de se conformer à une nouvelle norme ",[282,2576,2577],{},"« Manifest v3 »",". Si cette norme apporte des choses positives en termes de sécurité, elle empêche malheureusement à uBlock Origin de fonctionner correctement sur Chrome. Si vous voulez à terme une véritable protection contre les publicités, seul Firefox et ses dérivés vous l'apporterons !",[16,2580,2581],{},"La fondation Mozilla a sorti d'autres outils autour de ce domaine :",[568,2583,2584,2592,2600],{},[571,2585,2586,2591],{},[49,2587,2590],{"href":2588,"rel":2589,":target":51},"https:\u002F\u002Frelay.firefox.com\u002F",[54],"Firefox Relay"," permet de générer des alias d'adresses e-mail pour protéger la nôtre ;",[571,2593,2594,2599],{},[49,2595,2598],{"href":2596,"rel":2597,":target":51},"https:\u002F\u002Fmonitor.mozilla.org\u002F",[54],"Mozilla Monitor"," révèle toutes les fuites de données où notre adresse e-mail est présente. Pour ma part cela concerne 39 sites !",[571,2601,2602,2607],{},[49,2603,2606],{"href":2604,"rel":2605,":target":51},"https:\u002F\u002Fwww.mozilla.org\u002Ffr\u002Fproducts\u002Fvpn\u002F",[54],"Mozilla VPN"," sécurise notre connexion, par exemple lorsqu'on est en déplacement sur un réseau wifi ouvert.",[16,2609,2610],{},"La fondation Mozilla prend vraiment à cœur le respect de la vie privée, que ce soit directement dans son navigateur, via ses extensions ou via les outils satellites qu'elle propose.",[11,2612,2614],{"id":2613},"firefox-est-performant-et-hautement-personnalisable","Firefox est performant et hautement personnalisable",[16,2616,2617],{},"Côté performance, pendant longtemps Mozilla Firefox a souffert d'une image négative : on lui reprochait d'être lent et de consommer énormément de mémoire vive. Effectivement, lorsque Google Chrome est sorti, il était bien plus rapide, surtout au premier lancement.",[16,2619,2620],{},"Aujourd'hui, tous les navigateurs se valent globalement et s'il y a un écart de performance, il est vraiment si réduit qu'il en devient anecdotique.",[16,2622,2623],{},"Concernant la personnalisation, Firefox offre un mode avancé laissant la liberté à l'utilisateur d'agencer l'interface du navigateur comme il lui plaît, là où c'est bien plus limité pour Chrome.",[11,2625,2627],{"id":2626},"firefox-mobile-un-navigateur-sécurisé-pratique-pour-votre-smartphone","Firefox Mobile, un navigateur sécurisé pratique pour votre smartphone",[16,2629,2630],{},"Firefox n'est pas réservé aux ordinateurs. La version mobile propose les mêmes avantages : synchronisation des données, respect de la vie privée et extensions. Il est possible de créer un compte et d'avoir ainsi les mêmes favoris de l'ordinateur au smartphone. Les mots de passe suivent également et on peut envoyer un onglet facilement d'un appareil à l'autre.",[237,2632,2633],{},[16,2634,2635,2636,2640],{},"Concernant les mots de passe, je vous recommande chaudement d'utiliser le ",[49,2637,2639],{"href":2638},"\u002Farticles\u002Fpourquoi-j-utilise-un-gestionnaire-de-mot-de-passe-et-pourquoi-vous-devriez-aussi","gestionnaire de mots de passe intégré de Firefox",". Il permet de générer des mots de passe aléatoires pour chacun des sites et de les mémoriser, y compris pour les applications de votre téléphone. Je l'utilise régulièrement pour mes comptes sur les plateformes comme Leboncoin, Vinted, Dealabs…",[16,2642,2643,2644,2646,2647,2655],{},"À noter que ",[25,2645,2553],{}," marche aussi sur Firefox Mobile",[824,2648,2649],{},[49,2650,2654],{"href":2651,"ariaDescribedBy":2652,"dataFootnoteRef":661,"id":2653},"#user-content-fn-4",[830],"user-content-fnref-4","4",", vous pouvez donc regarder YouTube sans publicités si vous utilisez votre navigateur plutôt que l'application mobile !",[11,2657,536],{"id":535},[16,2659,2660,2661,28],{},"Si les deux navigateurs phares sont d'un point de vue fonctionnalités et performances très proches, l'utilisation de Firefox révèle un choix éthique et une certaine vision du web. ",[25,2662,2663],{},"Il est la meilleure option si vous accordez de l'importance à vos données personnelles et votre vie privée",[16,2665,2666,2667,28],{},"En 2025, choisir Firefox c'est soutenir un navigateur open source, rapide, personnalisable et respectueux de vos données personnelles. C'est une alternative sérieuse et historique aux autres navigateurs dominants du marché, dont ",[282,2668,2669],{},"Google Chrome",[16,2671,2672,2675,2676,883],{},[25,2673,2674],{},"Et si vous testiez Firefox pendant une semaine ?"," Vous pouvez même importer vos favoris et vos mots de passe directement depuis ",[282,2677,2678],{},"Chrome",[986,2680,2682,2685],{"className":2681,"dataFootnotes":661},[989],[11,2683,994],{"className":2684,"id":830},[993],[996,2686,2687,2699,2712,2724],{},[571,2688,2689,2690,2695,2696],{"id":1000},"Parts de marché à l'échelle mondiale, selon ",[49,2691,2694],{"href":2692,"rel":2693,":target":51},"https:\u002F\u002Fgs.statcounter.com\u002Fbrowser-market-share",[54],"StatCounter.com"," ",[49,2697,1016],{"href":1012,"ariaLabel":1013,"className":2698,"dataFootnoteBackref":661},[1015],[571,2700,2702,2703,2695,2708],{"id":2701},"user-content-fn-2","Un logiciel libre est un logiciel dont on peut consulter le code source pour l'étudier, l'analyser et y contribuer. ",[49,2704,2707],{"href":2705,"rel":2706,":target":51},"https:\u002F\u002Fgithub.com\u002Fmozilla-firefox\u002Ffirefox",[54],"Le code de Firefox est disponible sur Github.com",[49,2709,1016],{"href":2710,"ariaLabel":1013,"className":2711,"dataFootnoteBackref":661},"#user-content-fnref-2",[1015],[571,2713,2715,2695,2720],{"id":2714},"user-content-fn-3",[49,2716,2719],{"href":2717,"rel":2718,":target":51},"https:\u002F\u002Flareclame.fr\u002Fgoogle+chrome+metro+paris",[54],"Article La Réclame",[49,2721,1016],{"href":2722,"ariaLabel":1013,"className":2723,"dataFootnoteBackref":661},"#user-content-fnref-3",[1015],[571,2725,2727,2728],{"id":2726},"user-content-fn-4","Pour la version Android uniquement. ",[49,2729,1016],{"href":2730,"ariaLabel":1013,"className":2731,"dataFootnoteBackref":661},"#user-content-fnref-4",[1015],{"title":661,"searchDepth":662,"depth":662,"links":2733},[2734,2735,2736,2737,2738,2739],{"id":2452,"depth":662,"text":2453},{"id":2514,"depth":662,"text":2515},{"id":2613,"depth":662,"text":2614},{"id":2626,"depth":662,"text":2627},{"id":535,"depth":662,"text":536},{"id":830,"depth":662,"text":994},"2025-08-20","Découvrez pourquoi Firefox est le meilleur choix en 2025 : rapidité, respect de la vie privée et liberté d'un navigateur open source.",{},"\u002Farticles\u002Fpourquoi-choisir-firefox",{"title":2434,"description":2741},"articles\u002FPourquoi choisir Firefox",[1032,2747],"Web","\u002Fimg\u002Farticles\u002Ffirefox\u002Fmatt-salem-0vGhn5EV3dk-unsplash.jpg","oKp3lY6phBShyW-Of-EN-WG8dRUuTbwTCvm0Py4Vrk8",1778145090789]