A propos des performances des pages

e-archi · 23 Janvier 2018

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é

rick38 · 23 Janvier 2018

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.

e-archi · 23 Janvier 2018

Merci beaucoup Rick, WRInaute impliqué, pour cet avis éclairé.
je ne vais donc zapper cet avertissement.
A bientôt

spout · 23 Janvier 2018

e-archi a dit:
J'ai compris que les fichiers JS doivent être à la fin, après </BODY> et c'est fait.

Non juste avant </body>
Cfr: https://dev.w3.org/html5/spec-preview/the-script-element.html

Donc comme tu as fait, c'est good.

e-archi · 24 Janvier 2018

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.

Supermaury · 24 Janvier 2018

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 !

e-archi · 24 Janvier 2018

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é

Supermaury · 24 Janvier 2018

(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.

@++

spout · 24 Janvier 2018

Supermaury a dit:
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).

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.

e-archi · 24 Janvier 2018

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.

kv69 · 25 Janvier 2018

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 ?

indigene · 8 Juillet 2019

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