A propos des performances des pages

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par e-archi, 23 Janvier 2018.

  1. e-archi
    e-archi Nouveau WRInaute
    Inscrit:
    8 Janvier 2013
    Messages:
    18
    J'aime reçus:
    0
    Bonjour à tous,

    Je reçois beaucoup de messages qui expliquent que la performance des pages Web est très importantes pour le référencement sur GSM.

    J'ai passé mon site (www.e-architecte.com) dans divers outils (notamment Dareboost).

    Tous me disent que j'ai un SPOF (Single Point of Failure) au niveau de l'appel de la police Google.
    voir source : ligne 18 :
    <link href='https://fonts.googleapis.com/css?family=Titillium Web' rel='stylesheet' type='text/css'>

    J'ai compris que les fichiers JS doivent être à la fin, après </BODY> et c'est fait.
    Mais je ne vois pas comment on peut mettre cette ligne de code à la fin.

    Quelqu'un peut m'éclairer ?

    Merci.

    Hervé
     
  2. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 061
    J'aime reçus:
    108
    Non, la "solution" est de mettre les fichiers de la police en local, au lieu de faire un lien distant, car je pense que le souci ici est que ça fait appel à un 2ème fichier CSS, donc à un 2ème point blocant (la page s'affichant après que les fichiers CSS soient chargés).
    Les polices se chargent en asynchrone de nos jours, ça fait un effet flash si elles sont longues à charger, mais ne bloquent pas les pages, c'est le css qui les appelle qui bloque (un peu).
    Mais les serveurs de Google étant très rapides, c'est discutable de devoir faire la modif dont je parle, on peut zapper l'avertissement des sites, il y a un blocage OK, mais si au total le chargement est plus rapide que de charger la police de votre serveur, ça y gagne.
     
  3. e-archi
    e-archi Nouveau WRInaute
    Inscrit:
    8 Janvier 2013
    Messages:
    18
    J'aime reçus:
    0
    Merci beaucoup Rick, WRInaute impliqué, pour cet avis éclairé.
    je ne vais donc zapper cet avertissement.
    A bientôt
     
  4. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 727
    J'aime reçus:
    232
  5. e-archi
    e-archi Nouveau WRInaute
    Inscrit:
    8 Janvier 2013
    Messages:
    18
    J'aime reçus:
    0
    Merci à tous pour ces réponse, et aussi à Olivier Duffez pour ce site et ses précieux conseils en référencement.
    Depuis 5 ans que notre société existe, nos prospects nous ont trouvés quasiment exclusivement via Google (ou un autre moteur).
    Forcément, être trouvé ne suffit pas à vendre car il faut un bon produit.
    Mais un bon produit inconnu ne sert à rien.

    Bonne journée à tous.
     
  6. Supermaury
    Supermaury WRInaute discret
    Inscrit:
    25 Mars 2009
    Messages:
    143
    J'aime reçus:
    4
    Bonjour.

    J'ai pas mal galéré pour obtenir un 100/100 sur PageSpeed sur mon e-commerce (environ 15000 pages).

    Alors concernant ta question, voici comment la solutionner (même si ça risque de faire hurler les puristes) :

    1. Tu injectes ton css directement dans ton <head> avec un include (ce que fait par exemple Leroy Merlin qui est 5ème dans le classement WebPerf du Journal du Net),
    2. Tu places ta balise <link href="https://fonts.googleapis.com/css?family=Titillium Web" rel="stylesheet" type="text/css"> juste avant </body> (et donc juste après tes JS).

    Et là ton score va s'envoler et ça ne pose pas de problème de compatibilité avec les navigateurs (IE6 inclus, c'est dire).

    Bonne journée !
     
    WebRankInfo apprécie ceci.
  7. e-archi
    e-archi Nouveau WRInaute
    Inscrit:
    8 Janvier 2013
    Messages:
    18
    J'aime reçus:
    0
    Merci Supermaury,

    J'ai comme tu m'as conseillé, mis la police google à la fin, juste avant </BODY>
    Un test sur testmysite.withgoogle.com me fait passer de 7 secondes à 5 secondes.

    En revanche, je ne comprends pas très bien ce que tu veux dire par
    "Tu injectes ton css directement dans ton <head> avec un include"
    J'ai aujourd'hui :
    <link rel="stylesheet" type="text/css" href="e-architecte.css" media="screen" />

    Que dois-je mettre à la place ?

    Pour mémoire, le site est www.e-architecte.com

    Merci.
    Hervé
     
  8. Supermaury
    Supermaury WRInaute discret
    Inscrit:
    25 Mars 2009
    Messages:
    143
    J'aime reçus:
    4
    (re)Bonjour Hervé.

    En fait il faut intégrer en dur le contenu de ton fichier e-architecte.css dans ton HTML (en faisant un include par exemple).

    Du coup au lieu d'avoir :

    Code:
    <link rel="stylesheet" type="text/css" href="e-architecte.css" media="screen" />
    Tu te retrouves avec :

    Code:
    <style>... tout le contenu de ton fichier css ...</style>
    C'est tout bête mais curieux de voir la note qui tu obtiendras. En plus pour toi c'est super simple vu que tu n'as qu'un seul fichier.

    @++
     
  9. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 727
    J'aime reçus:
    232
    La doc W3C dit que ça doit être dans le <head>: https://www.w3.org/TR/2011/WD-html5-author-20110705/the-link-element.html

    Attention que pagespeed n'a pas la science infuse non plus, un moment on pouvait mettre tous les JS et CSS après le </html> comme ça ce n'était pas pris en compte par leur parseur.
     
    Madrileño apprécie ceci.
  10. e-archi
    e-archi Nouveau WRInaute
    Inscrit:
    8 Janvier 2013
    Messages:
    18
    J'aime reçus:
    0
    Supermaury,

    j'ai fait comme tu m'as dit, et j'ai aussi 5 sec de temps de réponse sur test my site with Google.
    Du coup, je reviens en arrière.
    C'est tout de même plus pratique d'avoir un CSS externe.

    Merci.
     
  11. kv69
    kv69 Nouveau WRInaute
    Inscrit:
    15 Avril 2005
    Messages:
    32
    J'aime reçus:
    0
    Bonjour à tous,
    Pour la question du css inline ou pas, Google dit bien qu'il faut le mettre directement dans le document ... seulement s'il n'est pas très important.
    Du coup on sait pas à quelle limite il faut s'arreter pour mettre dans le head !
    Moi j'ai toujours ce blocage sur page speed et ça me rend fou j'avoue ^^

    J'ai essayé de le charger en asynchrone ave un Js (dans la propriété onload du body), c'est de ça dont tu parlais @rick38 quand tu parlais de css asynchrone ou y'aurait une autre technique ?
     
  12. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    3 630
    J'aime reçus:
    65
    Tout le css n'est pas bon à mettre en dur dans le head car si un internaute visite 100 pages il va se manger 100 fois le css alors qu'en fichier externe il le charge une fois seulement. Donc la vitesse sera meilleure avec le css externe quand on visite plusieurs pages.
    Mais parfois c'est nécessaire car certains css, s'ils ne sont pas chargés, cassent complètement l'aspect de la page. Sur mon site j'ai par exemple des timeline très stylées qui ne ressemblent plus à rien sans css. Donc pour l'ux c'est mieux de l'avoir bien stylée dès le premier affichage et j'ai mis seulement cette partie en dur dans le head. On peut voir ce que ça donne avec css ici : http://www.dramatic.fr/sectes-philosophiques-p900.html
    Je vous laisse imaginer la même page sans les css chargées, elle est illisible
     
Chargement...
Similar Threads - propos performances Forum Date
Google qui me propose les résultats de Bing Le café de WebRankInfo Hier à 21:04
Pourquoi mon patron me protège-t-il à propos de la recherche par mot clé? Demandes d'avis et de conseils sur vos sites 20 Juillet 2019
à propos de la commande site:www.monsite.fr Référencement Google 22 Juin 2019
Questions à propos d'AMP et du carrousel Référencement Google 27 Mai 2019
Structure titre pour les Commentaires / A propos de l'auteur / Article similaires Débuter en référencement 5 Mai 2019
Pourquoi Google ne propose pas la balise titre que je lui indique ? Problèmes de référencement spécifiques à vos sites 10 Avril 2019
Est-il intéressant de proposer les articles en version PDF ? Référencement Google 8 Janvier 2019
A propos du diaporama Problèmes de référencement spécifiques à vos sites 15 Mai 2018
Quelques question à propos de Taboola Monétisation d'un site web 12 Décembre 2017
Google propose des locations de vacances Google : l'entreprise, les sites web, les services 25 Juillet 2017
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice