Migration site PHP vers Gatsby : quelques questions

[bioweb59]

Bonjour,

Je souhaiterais avoir un retour d'expérience de personnes connaissant React JS / Gatsby. En effet, notre équipe technique s'apprête à passer d'un site développé en PHP à un site utilisant React JS / Gatsby, et j'ai quelques questions à ce sujet :

- le code source des pages générées par défaut me semble un peu crade (l'ensemble du CSS, y compris celui qui concerne Bootstrap, apparaît directement dans le code source, et en tout premier) : notre lead dev indique que ça a permis d'accélérer le chargement des pages de 5 points sur PageSpeed, mais est-ce un argument suffisant pour ne pas externaliser ce code (j'ai toujours pensé que c'était crade d'avoir des styles dans le code source et que Google n'aimait pas trop ça) ? Selon vous, à quoi doit ressembler le code source idéal pour un site fonctionnant sous Gatsby / React JS (y a-t-il des données à externaliser ? faut-il modifier l'ordre des éléments ?) ?

- avez-vous des recos SEO particulières à me donner concernant l'utilisation de ce type de techno (hormis le fait de s'assurer que le contenu est bien visible / crawlable par Google) ?

Merci d'avance pour votre aide !

 

[spout]

100% du CSS en inline c'est crade à mort, d'une page à l'autre tout ce CSS est re-transféré.
Uniquement 5 points PageSpeed pour ça ? Il y a moyen d'avoir 100 avec des ressources externes.

 

[bioweb59]

Salut Sprout,

Merci pour ta réponse. En fait, le dev me disait qu'en affichant le CSS (et d'autres données) directement dans le code source, ça évitait d'ajouter des requêtes supplémentaires pour accéder à ces données, donc de facto ça accélérait le temps de chargement des pages...

T'as déjà été confronté à ce type de problématique sur un site sous React ou techno similaire ?

D'autres retours d'expérience, sinon ?

 

[NicolasH]

Salut bioweb59,

Comme tu le dis dans ton 1er message il faut s'assurer que le code est bien visible par moteur (enfin par Google ^^).
C'est le 1er test important à faire.

Mais j'ai des doutes sur le résultat car les technos utilisées génèrent du code dans le DOM or celui-ci n'est pas pris en compte par les moteurs. Après il y a p-e une combine ?!

 

[bioweb59]

@NicolasH : Apparemment, les pages générées via ce framework n'ont aucun souci pour se faire crawler et indexer par Google. Ce sont bien des fichiers HTML qui sont générés, avec tout le contenu textuel. Le seul problème, selon moi (mais je me trompe peut-être), est le fait que le code généré inclue les styles (ce qui représente a minima la moitié du code source !).

 

[passion]

Je ne connais pas gatsby et je ne connais votre besoin pour passer là-dessus simplement pour améliorer les perfs, je doute que cela soit bien réfléchi.
Et vous n'avez aucune assurance que ça va améliorer votre visibilité dans les serps. Parce qu'après tout, c'est ça le plus important.

 

[bioweb59]

@passion C'est surtout une décision technique pour simplifier l'infra actuelle, qui, par la même occasion, est censée améliorer les perfs du site (notamment grâce à la génération de pages statiques disponibles quasi-instantanément pour le user, et le chargement des photos en "lazy loading" - car chaque page du site contient pas mal de photos...).

 

[passion]

Mais si l'infra est bien pensé en php, tu peux être très rapide.
Ce n'est pas le php en faute.
Le CSS embarqué, compresser les images, passer par une couche effectivement de lazyload, passer ton serveur en HTTP2 (chargement asynchrone), un serveur puissant, utilisé un système de cache, etc... ce n'est pas les méthodes qui manquent pour réduire considérablement le poids de tes pages. Ce n'est pas le PHP qui est incriminé.

 

[bioweb59]

@passion Le reste de l'infra (back-office et autres) était déjà en JS, du coup je pense que ça les saoulait aussi d'avoir plusieurs technos en parallèle... On est déjà en HTTP2, serveur de cache, etc. Enfin, quoi qu'il arrive, tout est déjà développé et prêt à être migré, donc la question n'est plus de savoir si PHP peut être aussi bien ou pas... En tout cas, merci pour tes remarques et conseils

 

[NicolasH]

donc la question n'est plus de savoir si PHP peut être aussi bien ou pas...

Sauf si vous avez fait le mauvais choix ;-)

Tu as un exemple de code avec le css embarqué ?

 

[colonies]

@passionet le chargement des photos en "lazy loading" - car chaque page du site contient pas mal de photos...).

Ça, ça n'a pas de rapport avec la techno utilisé coté serveur. Mais j'en profite pour rappeler la récente apparition de l'attribut loading pour les tags img, seulement pour Chrome 76 pour le moment (ce qui fait déjà pas mal de monde !), mais tous les autres navigateurs sont en train de s'y mettre.

<img loading="lazy" ...>

Il y a aussi loading="eager" pour indiquer qu'on veut au contraire que l'image soit téléchargée en priorité.
Démo : https://mathiasbynens.be/demo/img-loading-lazy

C'est une excellente solution, qui ne repose pas sur Javascript et évite les bidouilles, mais en plus je le trouve très bien équilibré : il charge suffisamment en avance pour éviter qu'on voit les images apparaitre.
De plus, comme c'est natif, le navigateur peut optimiser au mieux, puisqu'il gère toutes les connexions/téléchargements.

Note : ça fonctionne aussi avec les iframes.

Inconvénients éventuels : ça ne fonctionne pas avec les images en background-image, et ça ne se base que sur le facteur vertical.

Et sinon, effectivement les CSS injectées dans le HTML ne sont quasiment jamais une bonne solution. Ça m'étonnerait qu'un framework impose ça, c'est probablement réglable.

 

[passion]

@colonies merci. C'est très intéressant

 

[bioweb59]

@NicolasH C'est surtout que je ne suis pas décideur sur ce sujet Voici un exemple de site utilisant Gatsby, avec le CSS dans le code source : https://api-platform.com

@colonies Merci pour cette info intéressante. Apparemment, c'est en fait de la façon que tu décris que le lazy loading est implémenté sur le futur site. Donc, en effet, rien à voir avec la techno

 

[NicolasH]

Merci bioweb59 !
Ok je vois ^^ ! Donc c'est bien généré coté serveur par contre le code html est crade pour reprendre l'expression de @spout !

Quoi te dire ? à part qu'il ne faut pas faire comme ça