Migration site PHP vers Gatsby : quelques questions

Discussion dans 'Problèmes de référencement spécifiques à vos sites' créé par bioweb59, 22 Août 2019.

Tags:
  1. bioweb59
    bioweb59 Nouveau WRInaute
    Inscrit:
    27 Janvier 2007
    Messages:
    6
    J'aime reçus:
    0
    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 !
     
    #1 bioweb59, 22 Août 2019
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 077
    J'aime reçus:
    295
    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.
     
    #2 spout, 22 Août 2019
    bioweb59 apprécie ceci.
  3. bioweb59
    bioweb59 Nouveau WRInaute
    Inscrit:
    27 Janvier 2007
    Messages:
    6
    J'aime reçus:
    0
    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 ?
     
    #3 bioweb59, 22 Août 2019
  4. NicolasH
    NicolasH WRInaute occasionnel
    Inscrit:
    4 Mai 2016
    Messages:
    312
    J'aime reçus:
    22
    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 ?!
     
    #4 NicolasH, 22 Août 2019
  5. bioweb59
    bioweb59 Nouveau WRInaute
    Inscrit:
    27 Janvier 2007
    Messages:
    6
    J'aime reçus:
    0
    @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 !).
     
    #5 bioweb59, 22 Août 2019
  6. passion
    passion WRInaute accro
    Inscrit:
    6 Janvier 2006
    Messages:
    3 816
    J'aime reçus:
    154
    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.
     
    #6 passion, 22 Août 2019
  7. bioweb59
    bioweb59 Nouveau WRInaute
    Inscrit:
    27 Janvier 2007
    Messages:
    6
    J'aime reçus:
    0
    @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...).
     
    #7 bioweb59, 22 Août 2019
  8. passion
    passion WRInaute accro
    Inscrit:
    6 Janvier 2006
    Messages:
    3 816
    J'aime reçus:
    154
    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é.
     
    #8 passion, 22 Août 2019
  9. bioweb59
    bioweb59 Nouveau WRInaute
    Inscrit:
    27 Janvier 2007
    Messages:
    6
    J'aime reçus:
    0
    @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 :)
     
    #9 bioweb59, 23 Août 2019
  10. NicolasH
    NicolasH WRInaute occasionnel
    Inscrit:
    4 Mai 2016
    Messages:
    312
    J'aime reçus:
    22
    Sauf si vous avez fait le mauvais choix ;-)

    Tu as un exemple de code avec le css embarqué ?
     
    #10 NicolasH, 23 Août 2019
  11. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    560
    J'aime reçus:
    68
    Ç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.
     
    #11 colonies, 24 Août 2019
  12. passion
    passion WRInaute accro
    Inscrit:
    6 Janvier 2006
    Messages:
    3 816
    J'aime reçus:
    154
    @colonies merci. C'est très intéressant
     
    #12 passion, 24 Août 2019
  13. bioweb59
    bioweb59 Nouveau WRInaute
    Inscrit:
    27 Janvier 2007
    Messages:
    6
    J'aime reçus:
    0
    @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 ;)
     
    #13 bioweb59, 26 Août 2019
    Dernière édition: 26 Août 2019
  14. NicolasH
    NicolasH WRInaute occasionnel
    Inscrit:
    4 Mai 2016
    Messages:
    312
    J'aime reçus:
    22
    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 :)
     
    #14 NicolasH, 26 Août 2019
(Vous devez vous identifier ou vous inscrire pour poster ici.)
Chargement...
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 *.fr vers le *.com Administration d'un site Web 22 Juillet 2020
Problème migration site vistaprint vers wordpress.com Débuter en référencement 3 Juillet 2020
Problèmes migration NDD Crawl et indexation Google, sitemaps 21 Février 2020
Comment faire la migration de mes PNG en WEBP ? YouTube, Google Images et Google Maps 16 Février 2020
Migration Prestashop vers UEESHOP même domaine. Demandes d'avis et de conseils sur vos sites 20 Décembre 2019