Entetes et SEO

Bonjour Vanilla,

En terme SEO, le temps de chargement est très important pour un bon référencement. Lorsque le robot indexe votre site Internet, il démarre par un point d'entrée, il charge la page (qui n'est pas toujours la page d'accueil) et il crawle (il visite). Si à chaque changement de page, l'ensemble du contenu doit se charger à nouveau, la structure, le menu, les barres latérales, le pied de page, l'entête, cela ralenti considérablement la visite du robot et il indexera moins bien votre site.

En fait, selon moi, mais je peux me tromper, cela peut aussi réduire le niveau de circulation pour vos visiteurs.

Mais bon, on parle de combien de temps de chargement à la base ? Est-ce que vous avez fait un test en amont ? En dessous d'une seconde pour une connection standard, je serais d'avis de ne pas vous casser la tête.

N'hésitez pas à attendre d'autres avis, comme dirait ma grand mère : "Chacun a sa carte du monde"

A bientôt

Kévin

 

De toute façon a chaque page il chargera toute la page (pas le choix) donc les partie d'une page que tu donne en exemple (voir le gras) ne sont pas adaptées à la question ... les scripts qui peuvent potentiellement "séparer" ces zones de pages sont côté serveur et ne sont jamais sollicités autrement que dans le cadre d'une page complète (sauf triturage d'url).

Ensuite ce que le code présenté ici sous entend :

PHP:

<span class="syntaxdefault">   header</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'Pragma: no-cache'</span><span class="syntaxkeyword">);</span><span class="syntaxdefault">     <br />   header</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'Expires: 0'</span><span class="syntaxkeyword">);</span><span class="syntaxdefault">   <br />   header</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'Last-Modified: '</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">.</span><span class="syntaxdefault"> gmdate</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'D, d M Y H:i:s'</span><span class="syntaxkeyword">)</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">.</span><span class="syntaxdefault"> </span><span class="syntaxstring">' GMT'</span><span class="syntaxkeyword">);</span><span class="syntaxdefault">   <br />   header</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'Cache-Control: no-cache, must-revalidate'</span><span class="syntaxkeyword">);</span><span class="syntaxdefault">  </span>

c'est que le navigateur est obligé de recharger chaque document de la page (CSS, JS, images, ... (si ils ont le même type de header)) Bref ça n'impacte pas les robots qui eux s'en contrefichent royalement (ils ne cherchent pas forcement a opérer un rendu surtout pour de l'analyse textuel, sémantique), ça impacte juste l'utilisateur qui se vois dans l'obligation de recharger tout a chaque page.

J'ajoute que les cas sont rares ou il faut vraiment imposer un cache court ... quoi qu'il en soit dans cet exemple ça impacte surtout le html (via php ou asp par exemple) mais pas le CSS, le JS et autres fariboles qui sont plus "statiques" donc qui peuvent bénéficier d'un header cache long.

Pour ce qui est de l'impact SEO, ils tiens juste dans la vitesse de rendu des pages. CAD le temps entre la requête initiale et le moment ou la page est consultable et formée. Hors ce qui peut influencer est l’expérience utilisateur a ce niveau. SI la page est trop longue a se former car il faut charger a chaque page une tonne de code divers l'utilisateur va dégager plus facilement et ainsi impacter la crédibilité du site.

Certaines data présentes dans GWT (stat sur l'exploration, vitesse de chargement) qui ne sont pas clairment explicitées quand a leur méthode (chargement de la page complète (html + CSS + ....) ou seulement le "html") peuvent aussi être une source de "pénalisation" SEO.

Moi aussi j'ai envie de dire surtout a l'accueil qui est un reflet du turnover de tout le site que je gère (environ 300 000 sujets), Quoi qu'il en soit j'impose un cache long et j'ai jamais de souci, ni même mes visiteurs. il semble en fait que ce genre de directive serveurs soit surtout intéressante pour les équipements, les navigateur semblant gérer le truc a leur sauce de toute façon.

Perso j'ai tendance a prescrire une mise en cache très longue pour le contenu statique (CSS, JS, photos) et une plus courte pour les pages très dynamiques. Je n'ai jamais rencontré de cas vraiment efficient pour du rechargement systématique.

 

Je ne comprends pas la réponse que tu donnes a blueviseo, car ce sont souvent les menus, structure and co qui ont le plus de requêtes coté serveur donc les mettre en cache c'est bien non ?

Je connais la compression avec cette ligne de code que l'on met dans le .htaccess

Code:

AddOutputFilterByType DEFLATE text/html text/xml application/xhtml+xml text/plain application/javascript text/css application/vnd.google-earth.kml+xml application/rdf+xml

mais je ne savais pas que l'on pouvait mettre des fichiers JS et CSS en cache, tu procèdes comment stp ?

 

Oui côté serveur c'est une bonne option si tu ne peux pas mettre toute la page en cache ce qui est encore mieux mais la le script présenté :

PHP:

<span class="syntaxdefault">   header</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'Pragma: no-cache'</span><span class="syntaxkeyword">);</span><span class="syntaxdefault">     <br />   header</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'Expires: 0'</span><span class="syntaxkeyword">);</span><span class="syntaxdefault">   <br />   header</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'Last-Modified: '</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">.</span><span class="syntaxdefault"> gmdate</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'D, d M Y H:i:s'</span><span class="syntaxkeyword">)</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">.</span><span class="syntaxdefault"> </span><span class="syntaxstring">' GMT'</span><span class="syntaxkeyword">);</span><span class="syntaxdefault">   <br />   header</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'Cache-Control: no-cache, must-revalidate'</span><span class="syntaxkeyword">);</span><span class="syntaxdefault">   </span>

Montre bien que la notion de cache exposée est celle d'apache destiné aux proxys, navigateurs et autre équipements (cache http/réseau) donc pas le cache que tu peux manipuler au niveau "CMS" (cache logiciel). Partant de là les fonctions header() présentées n'influent en rien les parties de la page mais influent sur toute la page (c'est un document qui renvoie une entête http de ce type, pas individuellement les scripts qui fabriquent la page).

de la même façon que pour les pages html ou php, il faut que ton serveur renvoie une durée de validité de la page plus importante ce qui indiquera aux équipements divers ou navigateur qu'il n'est pas nécessaire de recharger un JS ou un CSS.

Chez moi je configure le serveur pour que php execute les JS et CSS :

Code:

	AddType x-mapp-php5 .js
	AddType x-mapp-php5 .css

Ensuite j'inclus le code suivant en tête de script JS ou CSS (cas de l'exemple) pour une validité de 30 jours :

PHP:

<span class="syntaxdefault"><?php<br />    session_start</span><span class="syntaxkeyword">();<br /></span><span class="syntaxdefault">    ob_start</span><span class="syntaxkeyword">(</span><span class="syntaxstring">"ob_gzhandler"</span><span class="syntaxkeyword">);<br /></span><span class="syntaxdefault">    </span><span class="syntaxcomment">// calc an offset of 24 heures * 30 jours<br /></span><span class="syntaxdefault">    $offset </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> 3600 </span><span class="syntaxkeyword">*</span><span class="syntaxdefault"> 24 </span><span class="syntaxkeyword">*</span><span class="syntaxdefault"> 30</span><span class="syntaxkeyword">;<br /><br /></span><span class="syntaxdefault">    </span><span class="syntaxcomment">// calc the string in GMT not localtime and add the offset<br /></span><span class="syntaxdefault">    $expire </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> </span><span class="syntaxstring">'Expires: '</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">gmdate</span><span class="syntaxkeyword">(</span><span class="syntaxstring">"D, d M Y H:i:s"</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> time</span><span class="syntaxkeyword">()</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">+</span><span class="syntaxdefault"> $offset</span><span class="syntaxkeyword">).</span><span class="syntaxstring">' GMT'</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">    <br />    </span><span class="syntaxcomment">//output the HTTP header<br /></span><span class="syntaxdefault">    header</span><span class="syntaxkeyword">(</span><span class="syntaxstring">"Last-Modified: "</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">.</span><span class="syntaxdefault"> gmdate</span><span class="syntaxkeyword">(</span><span class="syntaxstring">"D, d M Y H:i:s"</span><span class="syntaxkeyword">)</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">.</span><span class="syntaxdefault"> </span><span class="syntaxstring">" GMT"</span><span class="syntaxkeyword">);<br /></span><span class="syntaxdefault">    header</span><span class="syntaxkeyword">(</span><span class="syntaxstring">"Cache-Control: max-age=$offset, public"</span><span class="syntaxkeyword">);<br /></span><span class="syntaxdefault">    header</span><span class="syntaxkeyword">(</span><span class="syntaxstring">"expires: "</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">$expire</span><span class="syntaxkeyword">);<br /></span><span class="syntaxdefault">    header</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'Content-Type: text/css;'</span><span class="syntaxkeyword">);<br /></span><span class="syntaxdefault">?></span>

Tu peux aussi réaliser ça avec htaccess si le mod concerné est actif :

Code:

	# Expiration des pages au bout d'une semaine = 60x60x24x7 = 604800 sec
	ExpiresActive On
	ExpiresByType text/css A604800
	ExpiresByType application/javascript A604800
	ExpiresByType text/js A604800
	ExpiresByType text/javascript A604800
	ExpiresByType application/x-javascript A604800
	ExpiresByType application/x-shockwave-flash A604800
	ExpiresByType image/png A604800
	ExpiresByType image/gif A604800
	ExpiresByType image/jpg A604800

au même titre que tu dois gérer la compression en sortie de serveur :

Code:

  # compress text, html, javascript, css, xml:
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript

Le type de cache dont il est question ici avec header() qui permet d'indiquer des durées est par exemple utile pour les CDN qui savent donc qu'il est inutile de venir voir si une version nouvelle est dispo sur le serveur d'origine.

Pourquoi j'impose des durées différentes ; car si une page html a des chances de changer chez moi (comme pour un wiki), le CSS et le JS dépendant du CMS et de la charte graphique est largement moins changeant (je veille a la rétrocompatibilité en plus) et les photos sont de toutes façon "définitives", donc a chaque type de ressource sa durée pour un max d'économie.

En fait il y a plein de niveau de cache qui impacte le site, si je met de côté les caches hardware (CPU, Hdd, divers tampons de data, ...) tu as aussi les caches logiciels (SQL, image, Output html, objet (certains objets php ont du cache chez moi si ils usent de fonctions récursives par exemple), ...), et les caches réseaux que tu n’implémente pas directement mais que tu peux influencer au travers de tes entêtes http.

 

Merci pour tous ces bouts de codes

Avec le AddType x-mapp-php5 .css
le problème est que les style="" ne fonctionnent plus :?

Je connaissais les autres codes... Mais ce n'est pas pour autant que je les utilise systématiquement.. a tord

 

Regarde la feuille de style en chargeant l'url directement dans la barre d'adresse, parfois certains serveurs n'acceptent pas cette directive notamment chez OVH (ça passe chez 1&1), du coup la feuille de style comprend du code php non exécuté et ça peut faire tout "planter".

Chez OVH j'utilise un subterfuge de réécriture :

Code:

	RewriteRule   (.*).css$   $1.php  [L]

Ensuite je transforme ma feuille de style "style.css" en "style.php" et le tour est joué tu peux y inclure ce que tu veux comme code actif. Au niveau HTML je garde mes extensions ".css" est tout le monde y voit que du feux.

Pour ce genre de manip il est préférable d'agir avec un htaccess situé dans le dossier où se trouve les feuilles de style afin que la règle ne soit pas évaluée a chaque document demandé au serveur (donc pas à la racine). :wink:

Tu peux aussi te servir de cette astuce pour mettre des portions de CSS sous des conditions php dépendantes d'une variable serveur (mais bon attention a ce que voient les bots) ...