Migration site PHP vers Gatsby : quelques questions

bioweb59 · 22 Août 2019

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 · 22 Août 2019

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 · 22 Août 2019

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 · 22 Août 2019

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 · 22 Août 2019

@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 · 22 Août 2019

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 · 22 Août 2019

@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 · 22 Août 2019

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 · 23 Août 2019

@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 · 23 Août 2019

bioweb59 a dit: ↑

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

Sauf si vous avez fait le mauvais choix ;-)

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

colonies · 24 Août 2019

bioweb59 a dit: ↑

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

Ç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.
Code:
<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 · 24 Août 2019

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

bioweb59 · 26 Août 2019

@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 · 26 Août 2019

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

Similar Threads - Migration PHP Gatsby	Forum	Date
Quelle solution de forum utiliser pour migration phpbbseo ?	Demandes d'avis et de conseils sur vos sites	11 Mars 2018
Migration forum phpbb vers vanilla 2	URL Rewriting et .htaccess	15 Février 2016
Migration PHP	Développement d'un site Web ou d'une appli mobile	25 Août 2015
Migration php 5,5 à 5,6 = accents tronqués	Développement d'un site Web ou d'une appli mobile	5 Mars 2015
En vue d'une migration sous PHP 6	Développement d'un site Web ou d'une appli mobile	17 Février 2010
Migration vers PHP4 à PHP5	Développement d'un site Web ou d'une appli mobile	9 Avril 2009
Migration Prestashop vers UEESHOP même domaine.	Demandes d'avis et de conseils sur vos sites	20 Décembre 2019
WordPress Migration de localhost vers nom de domaine + hébergement OVH	Demandes d'avis et de conseils sur vos sites	28 Novembre 2019
Search Console Migration Google Search Console	Référencement Google	24 Novembre 2019
Mysql migration utf8->utf8mb4	Développement d'un site Web ou d'une appli mobile	17 Août 2019