20 meilleurs sites portfolio en 2026, vérifiés en direct et testés en vitesse

Voici 20 des meilleurs sites portfolio en ligne en ce moment : des designers, des développeurs, un photographe et un architecte présentant leurs propres travaux, des studios et agences présentant les leurs, plus quelques sites de projets tels qu'un livre de marque et un rapport industriel. Le goût n'a pas décidé la liste. J'ai tiré les 20 au hasard parmi 23 sites portfolio en direct, vérifiés à la main, j'ai vérifié que chacun se charge, je l'ai mesuré sur un téléphone et j'ai enregistré ce que vous pourriez adapter pour votre propre site. La surprise : aucun des 8 sites avec suffisamment de données de vrais visiteurs n'obtient les trois Core Web Vitals de Google, et le score Lighthouse mobile médian est 61,5. C'est le rayon portfolio de 64 beaux sites web, vérifiés en direct et testés en vitesse.

Comment ces 20 sites ont été sélectionnés et testés

La plupart des listes des meilleurs sites portfolio sont des favoris organisés. Cela ne dit rien sur ce que ces choix coûtent en temps de chargement, donc j'ai utilisé un tirage au hasard à la place.

• Le pool : 23 sites portfolio en direct d'une base de données de conception organisée que je maintiens. Chacun a été examiné à la main, dispose de captures de bureau et mobiles, et a réussi une vérification de disponibilité au cours des 30 derniers jours.
• Le tirage : 20 sites dans un ordre aléatoire fixe, avec pas plus de deux d'un même studio. Aucun n'a eu besoin d'être échangé. Rien ici n'est mon travail client, et personne n'a payé pour être inclus.
• La vérification en direct : chaque site a été ouvert dans un navigateur (Chromium) le 31 octobre 2026 et a chargé le même site pour lequel il était répertorié.
• Le test en laboratoire : une exécution Lighthouse mobile par site entre le 12 et le 20 octobre 2026, enregistrant le score de performance, le Largest Contentful Paint et le poids de la page.
• Les données de vrais visiteurs : les chiffres du Chrome UX Report pour les téléphones, que Google collecte auprès de vrais utilisateurs de Chrome. Une page n'apparaît une fois qu'elle a suffisamment de visiteurs (Chrome UX Report), ce que de nombreux portfolios personnels ne réussissent jamais, donc 11 des 20 affichent « aucune donnée ».
• Pas un classement : l'ordre ci-dessous est l'ordre du tirage.

Ce que 20 sites portfolio coûtent en vitesse

Google marque une page comme bonne quand son Largest Contentful Paint (LCP) est 2,5 secondes ou moins, son Interaction to Next Paint (INP) est 200 millisecondes ou moins et son Cumulative Layout Shift (CLS) est 0,1 ou moins, mesuré au 75e percentile des chargements de page. Une page obtient les Core Web Vitals seulement si elle satisfait aux trois critères (web.dev).

À titre de comparaison, le rapport Chrome UX de septembre 2026 de Google indique que 55,9 % des origines ont de bons Core Web Vitals sur 18 376 044 origines (notes de publication du Chrome UX Report). Aucun des 8 portfolios évalués ici ne réussit. Parmi ces 8, 7 ne respectent pas l'objectif LCP de 2,5 secondes, 5 répondent trop lentement aux appuis et 2 décalent trop leur mise en page.

Une page légère ne garantit pas un bon score, et une page lourde ne garantit pas un mauvais score. Le portfolio de Karl Barnard pèse 0,7 Mo mais obtient 37 en labo, où le test a enregistré 908 ms de temps de blocage pendant l'exécution des scripts. Glitch&Grit pèse 47,4 Mo et obtient 66. La plus petite page du tirage, GØDN.studio à 0,2 Mo, est aussi la seule à obtenir 90 ou plus.

Le labo et les vrais visiteurs sont aussi en désaccord ici. Gionatan Nese obtient 37 en labo, mais les vrais visiteurs voient le contenu principal en 1,2 secondes ; le site échoue uniquement sur la réactivité, à 232 ms par rapport à la ligne de 200 ms de Google. Lighthouse est une seule exécution sur un téléphone émulé, et lorsqu'il entre en conflit avec le rapport Chrome UX, web.dev dit que les données des vrais visiteurs sont probablement la vue la plus précise (web.dev).

Ce avec quoi ces 20 sont construits

Next.js alimente 6 des 20. Nuxt et Webflow en alimentent 2 chacun, et Framer, SvelteKit et WordPress en alimentent un chacun. Pour les 7 autres, la pile n'a pas pu être lue à partir du HTML. Le portfolio de photographie de Félix Péault sur SvelteKit obtient 76 sur une page de 1,4 Mo. Si vous choisissez un framework pour votre propre site, Astro vs Next.js couvre le compromis.

Ce que les 20 ont en commun

Chaque site de la base de données reçoit des balises de style lors de l'examen, et la pile est détectée à partir du HTML en direct, ce sont donc des décomptes, pas des impressions.

• Les gros caractères sont la signature. 11 des 20 affichent un nom ou un titre en très gros caractères, la balise la plus commune du groupe. Sur un portfolio, le nom est souvent tout le premier écran.
• Interaction plutôt que décoration. 7 sont étiquetés interactifs, plus que tout autre style : scènes 3D, arrière-plans qui réagissent au curseur et anneaux de projet que vous pouvez réorganiser. Minimaliste et typographique viennent ensuite avec 6 chacun.
• Le travail fait la vente. 9 commencent par la photographie et 8 par l'illustration, et les meilleurs d'entre eux montrent une pièce grande plutôt que dix petites.
• Le mouvement n'est pas ce qui les ralentit. 6 chargent une bibliothèque de défilement lisse ou d'animation comme GSAP ou Lenis. Leur score médian en labo est 77, contre 57,5 pour les 14 autres, donc dans ce tirage l'animation seule n'explique pas les scores lents.

Les 20 sites portfolios

Les 20 apparaissent ci-dessous dans l'ordre du tirage, avec les mesures d'abord, puis un examen plus approfondi de chacun avec une capture de la page d'accueil, le motif à emprunter et le compromis à comprendre. Les chiffres des vrais visiteurs proviennent des téléphones ; « pas de données » signifie que Google avait trop peu de visiteurs pour les rapporter. Pour votre propre site, voir portfolio web design.

1. Hobro Digital

Le nom est inscrit dans une sans-serif très lourde et large, en blanc, étirée presque d'un bord à l'autre sur un visage flou, recadré serré, en rouge profond et ambre. La couleur chaude reste dans une même famille, de sorte que les lettres blanches se lisent d'emblée. Une petite ligne en espacement fixe dessous donne le descriptif de l'agence et le lieu, et le contraste entre le caractère d'affichage épais et le texte léger de style machine à écrire maintient la hiérarchie claire.

Inspirez-vous de ceci : Inscrivez le nom de votre studio dans un seul caractère d'affichage lourd à pleine largeur sur une photographie floue ou un arrêt sur image en tons chauds, et associez-le à une petite ligne de descriptif en espacement fixe.

Attention : La page est plus lourde que la moyenne et obtient un score intermédiaire dans les résultats du labo. Les vrais visiteurs voient également un chargement lent du contenu principal et une réactivité molle aux appuis et aux clics, ce qui convient à un arrière-plan plein écran avec animation scripturée.

Conçu en interne. Visitez hobro.digital.

2. Valentin Gassend

Le nom fait le travail. Une sans-serif condensée, lourde et haute s'empile en un bloc serré, et le G et le N final deviennent un script à pinceau vert, ce qui donne une marque verbale ordinaire une certaine personnalité. De fines lignes de grille verte divisent le fond rose pâle en cellules, tandis que de petites légendes en majuscules s'assoient aux coins et laissent le centre libre.

Inspirez-vous de ceci : Inscrivez votre nom à une taille énorme dans un seul caractère lourd, remplacez quelques lettres par un caractère script dans une couleur d'accent, et répétez cette couleur en fines lignes de grille derrière.

Attention : Le test du labo a classé la page comme lente malgré son poids léger, et Google dispose de trop peu de données de vrais visiteurs pour confirmer ses performances pour les utilisateurs réels.

Conçu en interne. Visitez valentingassend.com.

3. Vivien's Creative

Une photographie en pleine hauteur de dunes pâles remplit l'écran, avec deux marcheurs en manteaux sombres de petite taille sur le sable, ce qui donne à la page l'échelle et le calme. L'introduction s'inscrit dans un serif léger et savant sur le ciel gris-vert, tandis que le nom ci-dessous utilise une sans-serif énorme et lourde en blanc qui s'étend d'un bord à l'autre. Les petits liens de menu en majuscules restent à l'écart, de sorte que l'image et le nom portent l'écran d'ouverture.

Inspirez-vous de ceci : Associez une photographie en pleine hauteur à une marque verbale surdimensionnée recadrée au bord inférieur et une brève introduction serif au-dessus, afin qu'un petit studio obtienne un premier écran confiant d'une bonne image et d'une paire de caractères.

Attention : La page est légère, mais le résultat du labo n'est que moyen, et Google ne dispose pas de suffisamment de données de vrais visiteurs pour juger de ses performances pour les vraies personnes.

Créée par Christopher Doyle & Co.. Visitez vivienscreative.com.au.

4. Oimachi

Le titre présente une grande grotesque ordinaire par rapport à un seul mot en serif italique, ce qui donne à la page une voix claire avant que quiconque ne lise la copie du corps. Un fond gris pâle, des marges serrées et un grand panneau sombre avec deux formes arrondies crème maintiennent la palette discrète, tandis qu'une colonne étroite de cartes postales à droite ajoute de la photographie et un accent orange. Sur mobile, le même titre s'empile proprement au-dessus d'une grille d'icônes noires en gras dessinées sur des grilles de construction faibles.

Inspirez-vous de ceci : Associez un titre sans-serif ordinaire à un seul mot en serif italique pour donner une voix reconnaissable à un héros basé sur du texte, puis montrez le travail de processus tel que des icônes sur des grilles de construction faibles.

Attention : Le test du labo a trouvé la page lente et très lourde, avec mouvement GSAP détecté aux côtés de Webflow, et il n'y avait pas assez de données de vrais visiteurs de Google pour dire comment elle fonctionne pour les utilisateurs réels.

Conçu en interne. Visitez oimachi.co.

5. Squarespace Foundations

Un champ quasi noir contient une brève affirmation centrée dans une sans-serif propre et équilibrée, et rien d'autre ne la contredit. De petites tuiles d'images, inclinées en tilt isométrique, s'assoient autour des bords comme une orbite lâche, mélangeant une marque de logo blanche, une cruche en céramique en ombre chaude et une bande métallique pâle. La retenue et l'espacement large rendent la page calme et assurée, et les tuiles inclinées suggèrent un mouvement.

À retenir : Associez une courte phrase unique dans une sans-serif épurée avec quelques tuiles d'image inclinées sur un fond plat sombre, qui ne demande que quelques images recadrées et une transformation CSS.

Attention : Il s'agit d'un livre de marque immersif plutôt qu'une page de vente, et ses images créent un téléchargement volumineux : les vrais visiteurs attendent plus longtemps que les objectifs de Google pour le contenu principal et pour que les clics répondent.

Créé par Resn. Visitez brand.squarespace.com.

6. AI in Design Report 2026

Une photographie de fleur inversée et délavée en gris et pêche se tient derrière une dispersion de cartes dégradées granuleuses en orange, lilas et vert. Chaque carte porte une minuscule étiquette en espacement monospace nommant un rôle professionnel, donnant au collage un ordre éditorial discret. Le panneau central noir avec un lourd wordmark géométrique sans-serif blanc ancre la composition, et la vue mobile conserve la palette avec un bloc logo noir à côté d'une barre de menu orange vif.

À retenir : Associez un grand titre sans-serif à espacement serré avec de petites étiquettes monospace, et construisez le collage hero à partir de quelques images dégradées granuleuses en couches sur une seule photographie teintée.

Attention : La page est plus lourde que la moyenne, et les vrais visiteurs voient un chargement lent du contenu principal et un certain décalage de mise en page, donc le grand collage est la première chose à inspecter.

Créé par ++hellohello. Visitez stateofaidesign.com.

7. Julia Stafi

La page est presque entièrement un espace blanc, avec un wordmark centré dans une serif haute contraste et une brève introduction en serif texte plus léger. Les lignes d'intro s'étalent sur la page selon un motif décalé et diagonal, donnant du mouvement à un simple paragraphe sans décoration. En dessous, un grand portrait de l'architecte en noir contre un mur usé et tacheté ajoute le seul ton fort, donc l'image sombre et la page pâle se maintiennent en équilibre.

À retenir : Décalez les lignes de votre introduction sur la page avec de simples retraits à gauche, et appariez-les avec un grand portrait sur un fond blanc pur.

Attention : La page est plus lourde que la moyenne et seulement moyenne aux tests de laboratoire, ce qui convient à une mise en page construite autour d'une grande photographie, et il n'y a pas assez de données de vrais visiteurs de Google pour dire comment elle fonctionne pour les utilisateurs réels.

Créé par Sasha Khudova. Visitez juliastafi.com.

8. Studio K95

Un bleu plat et saturé remplit l'écran, et une rose pixélisée construite à partir de blocs pâles ressemblant à du verre se tient au milieu sans rien en compétition. De petites cartes de projet dérivent autour d'elle en anneaux, et les affiches rouges et crème ressortent sur le bleu en vue mobile. La navigation utilise une minuscule sans-serif majuscule en blanc, donc l'œuvre d'art mène et l'interface reste discrète.

À retenir : Utilisez un bloc plat de couleur forte comme scène et ajoutez une petite bascule de style Anneaux et Spirale qui réorganise vos vignettes de projet, afin que le même travail puisse être consulté dans une mise en page différente.

Attention : La page en elle-même est légère, mais le test de laboratoire n'est que moyen et les vrais visiteurs voient un chargement lent du contenu principal et une réponse lente aux clics, donc la scène 3D est la première chose à vérifier.

Conçue en interne. Visitez k95.it.

9. Direct Design

Un feu tricolore brillant et rendu repose sur un dégradé jaune doux, avec une lampe smiley verte et un panneau de losange qui transforment l'idée directionnelle de l'agence en une seule image. Le titre utilise un grand sans-serif grotesque serré en noir sur blanc, pour qu'il se lise d'un coup à côté de l'image. Une barre de navigation arrondie noire et un petit bouton de contact jaune gardent la palette au noir, blanc, jaune et vert.

Empruntez ceci : associez un seul objet rendu sur mesure à un titre très grand, puis reportez ses couleurs dans la barre de menu et le bouton pour que la page se sente marquée sans avoir besoin de nombreux éléments.

Attention à : la page est plus lourde que la moyenne et obtient un score moyen aux tests en laboratoire, ce qui correspond aux images rendues et aux bibliothèques d'animation détectées, et il n'y a pas assez de données de vrais visiteurs de Google pour dire comment elle fonctionne pour les utilisateurs réels.

Créé par COSMOFLOW Agency. Visitez wearedirect.co.

10. House of Honey

Le logo s'étend d'un bout à l'autre dans un sans-serif noir lourd et large, avec un fin "of" italique en serif le coupant en contraste. Posé sur un rose poudré plat en brun chocolat foncé, il se lit d'un coup et se sent chaleureux. Le slogan se tient en petit majuscule serif à chaque coin, et la photographie en pleine bleed en dessous répète les roses et les oranges de la palette.

Empruntez ceci : associez un très lourd logo en sans-serif à un seul mot italique fin en serif, puis gardez la palette sur une couleur de fond plat et une encre foncée pour que la photographie porte tout le reste.

Attention à : la page elle-même est légère, mais les vrais visiteurs voient un chargement lent du contenu principal (LCP), un coût courant quand une grande photographie en pleine bleed est la première chose à l'écran, et le résultat en laboratoire n'est que moyen.

Créé par Edoardo Lunardi. Visitez houseofhoney.com.

11. Félix Péault

La page n'est guère plus qu'un dégradé passant du bleu profond par un vert clair vers un blanc cassé chaud, et ce dernier gère toute la couleur. Une paire de lettres surdimensionnées sombres, un F et un P, s'assoient dans les coins comme un monogramme, tandis qu'un sans-serif condensé haut porte le slogan et le petit menu. Sur mobile, une photographie de gens vue de haut, avec de longues ombres, ajoute la seule image.

Empruntez ceci : placez vos initiales sous forme de lettres surdimensionnées aux coins opposés et remplissez l'arrière-plan avec un dégradé doux, pour que la page ait une identité sans imagerie lourde.

Attention à : le test en laboratoire a eu un résultat moyen, bien que la page elle-même soit légère, et il n'y a pas assez de données de vrais visiteurs de Google pour dire comment elle fonctionne pour les utilisateurs réels.

Conçu en interne. Visitez felixpeault.com.

12. Karl Barnard

Le titre utilise un serif à haut contraste, avec un mot changé en italique vert qui porte tout l'accent. Tout le reste reste discret : fond blanc cassé chaud, fines lignes de grille, et petit visage monospaced pour les étiquettes. Le portrait est construit à partir de caractères tapés, de sorte que l'image reprend la typographie et la page se sent comme une seule idée plutôt qu'un tas de parties.

Empruntez ceci : choisissez un mot dans votre titre, réglez-le en italique et en une seule couleur d'accent, et laissez le reste de la palette à des tons neutres.

Attention à : le test en laboratoire a noté la page comme lente même si la page elle-même est légère, et il n'y avait pas assez de données de vrais visiteurs de Google pour dire comment elle se sent pour les utilisateurs réels.

Conçu en interne. Visitez karlbarnard.co.za.

13. Gionatan Nese

Une page blanche, un petit groupe de photos de produits, affiches et objets arrangés en une bague lâche, et presque rien d'autre. Le minuscule menu en haut associe un sans-serif simple pour les initiales à un serif raffiné pour Creative Space, assis dans de légers onglets gris, donnant un contraste discret. Les images se chevauchent à différentes tailles, de sorte que l'œil se déplace autour du cercle, et les marges blanches vides font que chaque vignette se sent comme une exposition.

Inspirez-vous de ceci : Disposez un petit ensemble de vos meilleures vignettes de projets en anneau lâche sur une page blanche unie, avec des chevauchements et des tailles variées, afin que le travail parle de lui-même sans image principale ou titre.

À surveiller : Le test de laboratoire a révélé une page lente et très lourde, et les vrais visiteurs constatent des réponses lentes aux appuis (INP), bien que le contenu principal lui-même arrive rapidement.

Conçu en interne. Visitez gionatannese.com.

14. SUSO Digital

Le héros reste sur un champ blanc calme avec une lueur dégradée unique et douce de pêche, lilas et bleu pâle derrière une fine forme filaire blanche. Le titre utilise un sans serif propre et régulier à grande taille, avec un petit label monospatialisé au-dessus et deux boutons pilule clairs en dessous. L'espacement est généreux, donc la page se lit rapidement et le graphique unique fait la décoration.

Inspirez-vous de ceci : Associez un titre sans serif épuré avec de petits labels monospatialisés et des boutons, puis placez un graphique dégradé doux derrière le texte pour que la page paraisse design sans nécessiter de photographie.

À surveiller : La page est légère, mais les vrais visiteurs constatent des problèmes avec la rapidité du chargement du contenu principal (LCP), et le grand graphique dégradé du héros est un élément à vérifier en priorité.

Réalisé par Fhoke. Visitez susodigital.com.

15. Nordpixel

Une photographie de montagne brumeuse et sombre remplit l'écran entier, avec une cabine à façade vitrée faiblement éclairée en bas à droite. Le logotype est situé au centre en majuscules géométriques gras largement espacées, se terminant par un point bleu qui se répète dans le logo et les boutons. Une barre de menu arrondie blanche flotte au-dessus de l'image, donc l'accent bleu et les lettres pâles fournissent tout le contraste.

Inspirez-vous de ceci : Associez une photographie bord à bord, assombrie avec une superposition, à un logotype en gras largement espacé et une seule couleur d'accent utilisée uniquement pour le point et les boutons.

À surveiller : La page est plus lourde que la moyenne et seulement moyenne au test de laboratoire, ce que coûte généralement une photographie plein écran, et il n'y a pas assez de données de vrais visiteurs de Google pour dire comment elle fonctionne pour les utilisateurs réels.

Créé par Michael Schnyder. Visitez nordpixel.ch.

16. Alvara House

Une photographie bord à bord d'une maison à toit plat au crépuscule est placée sous un énorme logotype sans serif blanc largement espacé, et le mot HOUSE passe semi-transparent sur la ligne de toit pour que le texte et le bâtiment se lisent comme une seule image. Le ciel bleu offre un espace propre et calme pour de petits labels de coin, et la lueur chaude des fenêtres contraste avec le fond frais. Un bouton pilule et une carte givrée sont les seuls éléments concurrents.

Inspirez-vous de ceci : Associez une photographie forte à un logotype surdimensionné qui chevauche le sujet, et gardez chaque autre élément petit et tassé dans les coins.

À surveiller : Le test de laboratoire a donné un résultat moyen même si la page est légère, donc la grande photographie du héros est l'endroit le plus probable à chercher pour des gains, et il n'y avait pas assez de données de vrais visiteurs de Google pour dire comment cela se ressent en pratique.

Réalisé par Visuvate Studio. Visitez alvara.visuvate.com.

17. Haoqi Wen

Une inscription en script bleu brillant et gonflé disant hello repose sur un champ bleu pâle, et c'est l'unique objet doux sur une page par ailleurs régie par des lignes de grille fines et de petites marques de visée. Le gros titre sans serif noir et large ancre le coin inférieur gauche, tandis qu'une police monospace gère la navigation et la bio. Ce contraste entre le ludique et le technique convient à un design engineer.

À emprunter: associez un objet rendu et tactile à une grille de cheveux stricts et une seule police monospace pour le petit texte, de sorte qu'un site personnel se sente à la fois chaleureux et précis.

Attention: le test de labo a trouvé la page lente et très lourde, et les vrais visiteurs constatent des problèmes de chargement, de réactivité et de stabilité de mise en page, ce qui est le prix habituel d'un grand hero rendu et de détails en direct.

Conçu en interne. Visitez haoqi.design.

18. Warm & Fuzzy

Un arrêt net, un photogramme légèrement flou remplit tout l'écran, et ses roses bonbon, jaunes moutarde et verts feuillus portent l'ouverture. Le lettrage bulle brillant repose au centre, tandis que la petite navigation reste discrète dans une police sans serif ordinaire. Un slogan grotesque audacieux sur le bord inférieur ancre la page et donne un ton amical et confiant.

À emprunter: utilisez une image mobile plein écran comme seule ouverture, puis gardez le logo, quelques liens courts et une seule ligne de texte audacieuse comme seul mobilier par-dessus.

Attention: le test de labo a donné des résultats mitigés bien que la page elle-même soit légère, donc le fond mobile plein écran est le coût probable, et il n'y a pas assez de données de vrais visiteurs de Google pour dire comment cela se sent pour les utilisateurs réels.

Construit par Neutral Studio. Visitez warmnfuzzy.tv.

19. Glitch&Grit

La page divise l'écran au milieu, avec une moitié noire plate à gauche portant une grande silhouette de fleur grise et une moitié charbon légèrement plus claire à droite. Par-dessus les deux se dresse un énorme titre dans un sans serif audacieux et ouvert en vert citron doux, qui reste lisible sur le gris et le noir. La navigation et le nom du studio reposent en petites capitales blanches nichées dans les coins, de sorte que le centre reste clair.

À emprunter: associez un énorme titre dans une seule couleur d'accent avec un arrière-plan plat fractionné et une forme découpée, de sorte que la page se sente distinctive sans budget de photographie.

Attention: la page est très lourde et seulement mitigée au test de labo, et Google n'a pas assez de données de vrais visiteurs pour dire comment cela se sent en pratique, donc les visuels volumineux sont le premier endroit où chercher des économies.

Visitez glitchandgrit.com.

20. GØDN.studio

Un champ presque noir porte une énorme déclaration en grotesque majuscule lourde et serrée, et le dernier mot bascule en serif italique léger qui change aussitôt la voix. Une marque grenue et mouchetée repose derrière le type comme du statique, ajoutant de la profondeur sans photographie. De petites étiquettes monospace largement espacées restent discrètes autour, de sorte que le titre est lu en premier.

À emprunter: associez un titre sans serif lourd à un seul mot en serif italique léger, et gardez tout le reste en petites capitales monospace espacées sur un fond sombre.

Attention: la page a testé rapidement au labo et est légère, ce qui est bon étant donné qu'elle exécute GSAP et Three.js, mais il n'y avait pas assez de données de vrais visiteurs de Google pour dire comment elle se comporte pour les utilisateurs réels.

Construit par Bruno Godinho. Visitez studio.godn.pt.

Comment créer un portfolio à la fois beau et rapide

Les 20 ci-dessus montrent qu'un portfolio peut se démarquer sur presque n'importe quelle pile technologique. Les plus rapides se différencient des plus lents par la façon dont ils chargent le travail lui-même.

• Présentez trois à cinq projets correctement. L'enquête du Nielsen Norman Group auprès de 204 professionnels UX qui recrutent recommande de choisir 3 à 5 projets en tant qu'études de cas détaillées, la qualité plutôt que la quantité (NN/g).
• Rendez-le facile à scanner. La même recherche a montré que les responsables du recrutement liront très rarement un portfolio en entier de bout en bout (NN/g), placez donc le problème, votre rôle et le résultat où le regard qui scanne s'arrête.
• Chargez la première image tôt. Ne définissez jamais loading="lazy" sur l'image qui remplit le premier écran, gardez-la dans le HTML de la page plutôt que de l'ajouter avec JavaScript, et donnez-lui fetchpriority="high" (web.dev).
• Chargez en différé tout ce qui se trouve en dessous, avec des dimensions définies. Utilisez loading="lazy" uniquement pour les images en dehors du premier écran, et ajoutez width et height à chaque image pour que la mise en page ne saute pas (web.dev).
• Surveillez le total. Au 90e percentile, les sites envoient déjà plus de 5 Mo d'images (web.dev), et 5 de ces 20 portfolios pèsent plus de 10 Mo au total.
• Mesurez les vrais visiteurs vous-même. Un petit portfolio n'aura peut-être jamais assez de trafic pour apparaître dans le Chrome UX Report, et web.dev recommande vivement de mettre en place votre propre suivi utilisateur réel (web.dev).

Si vous voulez un portfolio qui remporte du travail et non seulement avoir bonne apparence, la conception de portfolio web est comme je les construis : rapides, trouvables en recherche et écrites autour du travail. Si votre site actuel a simplement besoin d'un nouveau look et d'un premier écran plus rapide, une refonte de site web est le point de départ.

Questions que les gens posent

Qu'est-ce qu'un bon portfolio web ?

Montrez le travail en grand et tôt, avec suffisamment de contexte pour l'expliquer. Sur ces 20, les premiers écrans les plus forts font une chose : un nom en très grand type, un seul projet ou une seule photographie. La recherche du Nielsen Norman Group ajoute la partie qui remporte des emplois : quelques projets écrits sous forme d'études de cas, pas un mur d'images finies (NN/g).

Combien de projets un portfolio doit-il présenter ?

Le Nielsen Norman Group recommande de choisir 3 à 5 projets en tant qu'études de cas détaillées, la qualité plutôt que la quantité (NN/g). Moins de projets, mais plus profonds, signifie aussi moins de grandes images sur la page.

Quelle est la meilleure plateforme pour un portfolio web ?

Ces données ne donnent pas une victoire à une pile technologique. Next.js exécute 6 des 20, Nuxt et Webflow 2 chacun, et Framer, SvelteKit et WordPress un chacun, tandis que 7 sont construits de façons qui n'ont pas pu être détectées. Next.js seul contient à la fois un 79 et un 37 ici, donc choisissez celui que vous pouvez maintenir à jour et concentrez vos efforts sur la façon dont vos images se chargent.

Pourquoi mon portfolio web est-il lent ?

La cause est généralement le travail lui-même : les images et vidéos en taille réelle sur le premier écran, ou une première image qui se charge tard parce qu'elle est chargée en différé ou ajoutée par JavaScript (web.dev). Dans ce classement, 7 des 8 portfolios évalués par Google ne respectent pas l'objectif LCP de 2,5 secondes.

Pourquoi mon portfolio n'a-t-il pas de données Core Web Vitals ?

Le Chrome UX Report n'inclut que les pages et les sites ayant suffisamment de visiteurs pour former un échantillon statistiquement significatif (Chrome UX Report). 11 de ces 20 portfolios n'ont aucune donnée de visiteurs réels du tout. Utilisez un test de laboratoire tel que Lighthouse en attendant, et ajoutez votre propre suivi utilisateur réel si vous voulez des chiffres de terrain.

Où puis-je voir davantage de beaux sites web ?

Le pilier 64 beaux sites web couvre huit catégories avec les mêmes tests. Pour les restaurants et les marques alimentaires, consultez les 20 meilleurs sites web de restaurants et d'aliments, et pour les galeries à parcourir, le résumé des sites d'inspiration en matière de conception web.