Comprendre le temps de chargement d'une page

[e-kiwi]

Bonjour,

J'ai un site assez lourd (Google donne un temps de chargement moyen de 6.2sec)
j'essaye de comprendre ce qui prend le plus de temps, j'ai des appels vers 5-6 domaines (domaine de média, domaine pour la pub, domaine pour analytics / Xiti, Facebook, ...)

avec la developer toolbarr, je n'arrive pas bien à comprendre le temps de chargement de chacun. par exemple je veux savoir combien de "secondes" prend les publicités à charger, et si ça fait ralentir le reste du site. je vais avoir pour un élément "300ms d'attente" avant "100ms de chargement". comment dois-je interpréter ça ? il faut juste additionner le temps de chargement ? prendre en compte l'attente ? cet outil est pourrie et il vaut mieux utiliser autre chose ?

merci de votre aide !

 

[Alaindeloin]

Ca serait logique que le temps pour chaque soit attente + chargement

 

[lambi521]

Le temps d'attente c'est le temps de réponse du serveur interrogé, et le temps de chargement c'est le temps que l'élément reçu soit affiché, enfin je crois !

Par exemple moi j'ai un temps de chargement hyper rapide, ma page fait 35Ko, 97/100 sur PageSpeed, j'ai essayé de pas mal l'optimisé, mais le temps que mon serveur de BDD renvoie les réponses aux requêtes SQL, ben je perds beaucoup de temps !

Du coup j'étais justement en train de voir pour mettre mes pages en cache HTML sur mon serveur pour éviter ces temps de requêtes/réponses, c'est la meilleure solution

 

[e-kiwi]

oui je suis 100% en cache déjà mais si je regarde les éléments pour un même domaine, ils se chargent à la suite, donc si j'ai 10 images qui prennent 100ms, la première aura

attente chargement
0 100
100 100
200 100
300 100
...

je ne vais pas additionner tous les temps d'attente, car c'est juste que cela se charge l'une après l'autre, non ?

 

[UsagiYojimbo]

Utilises plutôt Firebug pour ce genre de chose, qui te donne le détail du temps de chargement élément par élément.

 

[e-kiwi]

oui c'est lui que j'utilise en fait, mais comment j’interprète ces résultats (attente vs chargement)

 

[oweb_bilou]

Hello e-kiwi,
Je ne suis pas sûr que cela puisse aider, mais un outil oueb appelé gtmetrix propose un genre de pagespeed avec une ligne de temps mettant bout à bout les détails d'attente+chargement de chaque élément.
Après çà fait le boulot de pagespeed (avec conseils d'opti etc.)
Edit : oui donc, mon intervention était inutile :lol:

 

[lambi521]

Sinon Google Chrome > Clic droit > Inspecter l'élément > Network

Pour ce qui est de tes images, surtout si tu es en cache, je pense que c'est juste l'affichage l'une derrière l'autre oui, je suis pas certain à 100% mais ça pourrait être quoi d'autres ?

 

[e-kiwi]

moi en gros je cherche un truc qui me dise :

tps chargement total : x secondes
domaine principal : x secondes
domaine 1 : x secondes
domaine 2 : x secondes
domaine 3 : x seconde

 

[Steuveu78]

Utilise l'outil de speedtest de google qui va te décomposer le chargement de ta page et même te dire quoi améliorer : https://developers.google.com/speed/pagespeed/insights#

 

[kodoma]

En fait si je ne me trompe pas le navigateur web ne peut faire qu'un nombre limité de requêtes HTTP simultanément (peut-être 4 ou 8 je ne sais plus exactement) sur un même domaine.
De ce fait, tu peux avoir du temps d'attente lorsque tu as beaucoup de ressources à télécharger (js, image, css, etc...)
C'est pour ça que Google recommande d'utiliser des sous-domaines pour avoir la capacité de faire le plus en plus de requêtes HTTP en même temps et limité le fameux temps d'attente.

Je ne pense pas que tu puisses séparer et analyser le temps de chargement entre chaque domaine d'ailleurs ça n'a pas de sens selon moi car le navigateur télécharge séquentiellement selon l'ordre donné dans ton code HTML.

 

[patapon87]

http://www.site-perf.com devrait pouvoir te convenir

 

[patapon87]

Et effectivement http://gtmetrix.com te permet de voir en détail

 

[e-kiwi]

Et effectivement http://gtmetrix.com te permet de voir en détail

euh, je suis mal révéillé ? ou ça ?

 

[oweb_bilou]

Et effectivement http://gtmetrix.com te permet de voir en détail

euh, je suis mal révéillé ? ou ça ?

L'onglet timeline, mais elle ne diffère pas plus de ce que peut t'apporter les autres services de ce genre.

En fait je n'arrive pas très bien à comprendre ce que tu cherches exactement, ce que tu cherches à savoir, c'est combien de temps prends chaque requête vers un domaine externe ? (genre les JS FB, XITI ou analytics ?)
Par gt metrix, je passe par la timeline,, je cherche le fichier en question et vérifier comment il s'est comporté.

 

[e-kiwi]

non, pas chaque requête, mais le total temps par domaine

en gros : les 15 requêtes vers ce serveur : 4.3s. les 19 requêtes vers ce domaine : 2.4sec, ... car chaque serveur a une seule utilité, ça me permettrait de dire : la pub , c 'est tant de temps, les médias, c'est tant de temps, etc ...

 

[oweb_bilou]

donc logiquement avec la timeline de gtmetrix, tu peux récupérer ces infos; le seul problème c'est qu'il va falloir les retraiter : en copiant le contenu (en ouvrant "view larger version") et en l'intégrant dans un excel/openoffice, tu as en 3ème colonne les appels sur le serveur ou les domaines ext. de chaque élément. En filtrant tu devrais pouvoir avoir (enfin j'espère que je suis pas à côté de la plaque) les infos que tu souhaites

 

[patapon87]

donc logiquement avec la timeline de gtmetrix, tu peux récupérer ces infos; le seul problème c'est qu'il va falloir les retraiter : en copiant le contenu (en ouvrant "view larger version") et en l'intégrant dans un excel/openoffice, tu as en 3ème colonne les appels sur le serveur ou les domaines ext. de chaque élément. En filtrant tu devrais pouvoir avoir (enfin j'espère que je suis pas à côté de la plaque) les infos que tu souhaites

C'est ce que je pensais oui. Tu ne l'as pas directement mais en recoupant les infos tu y arriverais.

Alors c'est sûr faut pas le faire pour 100 pages différentes mais pour deux ou trois ça doit pouvoir se gérer

 

[e-kiwi]

Oui mais en fait ça donne la même chose que firebug, c'est juste que ça te permet d'ignorer certaines "pertes" du à une mauvaise connexion chez soi ^^

merci !

 

[patapon87]

Je viens de faire un test : tu peux te servir d'http watch pour faire des tests par domaine

 

[contact449]

Bonjour,
j'ai un soucis du meme ordre, suis en train d'optimiser ma page d'index, apres recherches, j'en ai fini par élaborer un htaccess validé par mon hébergeur. Ce document htaccess m'a divisé mon Page Load Speed par 3! Cependant, pour des raisons qui m'échappent complètement, le gzipping n'a pas l'air de se faire complètement. Donc : gtmetrix me donne un temps / 3 mais continue de me renvoyer des infos comme quoi le gzipping ne se fait pas sur tous les dossiers - info confirmé par les statistiques google developers.google.com/speed/pagespeed/insights.
Bref, ci-dessos le code htaccess en question :

Suis preneur de toute insight!

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

# les proxies ne doivent pas décompresser le contenu à la place de l'internaute
Header append Vary "User-Agent env=!dont-vary"


<ifModule mod_rewrite.c>
RewriteEngine on
RewriteRule ^(.*\.(js|css))$ jsmart/load.php?file=$1
</ifModule>

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
</ifModule>

<ifModule mod_headers.c>
<filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
Header set Connection keep-alive
</filesMatch>
<filesMatch "\\.(css)$">
Header set Cache-Control "max-age=604800, public"
Header set Connection keep-alive
</filesMatch>
<filesMatch "\\.(js)$">
Header set Cache-Control "max-age=216000, private"
Header set Connection keep-alive
</filesMatch>
<filesMatch "\\.(xml|txt)$">
Header set Cache-Control "max-age=216000, public, must-revalidate"
Header set Connection keep-alive
</filesMatch>
<filesMatch "\\.(html|htm|php)$">
Header set Cache-Control "max-age=1, private, must-revalidate"
Header set Connection keep-alive
</filesMatch>
</ifModule>

<ifModule mod_headers.c>
Header unset ETag
</ifModule>
FileETag None

<ifModule mod_headers.c>
Header unset Last-Modified