Conseils pour accélérer le temps de chargement - html +JS

[paikan06]

Bonjour à tous,

J’essaye de faire un gros travail de référencement sur un site.
http://www.hotel-goldstar-nice.com/

Aujourd’hui mon sujet de travail est l’accélération du temps de chargement de mes pages sur les navigateurs.
-Le site est construit en html, css, javascript
-Je suis sur un serveur dédié, IIS 7.5
-Mes pages font en moyenne 10ko
-Les photos font en moyenne 50-60 ko

J’ai fait une analyse du site sur Google Page Speed Online ! Suite à ce teste il en ressort plusieurs points :

-Spécifier une date d’expiration pour profiter de la mise en cache : Je vois bien que la procédure est simple si on possède un fichier .htaccess mais dans mon cas sous IIS, j’ai du mal à trouver la correspondance.

-Utiliser la fonction « defer » avant la fermeture des balises JS : Avez-vous déjà utilisé cette option ?
Avez-vous un retour d’expérience ?

-Pensez-vous que le fait de supprimer quelques photos du diaporama présent en index.htlm peut accélérer le temps de chargement ?

-Quel est d’après vous le temps de chargement optimal d’une page pour un bon référencement ?

Si vous avez la moindre question, j'y répond avec plaisir le plus vite possible.
Je vous remercie d’avance pour votre aide, tous conseils ou retours d’expérience est pris avec plaisir.

 

[UsagiYojimbo]

-Spécifier une date d’expiration pour profiter de la mise en cache : Je vois bien que la procédure est simple si on possède un fichier .htaccess mais dans mon cas sous IIS, j’ai du mal à trouver la correspondance.

Isapi Rewrite ?

 

[marc.teyssier]

Bonjour,

Je ne suis pas un spécialiste des serveurs IIS, par contre je travaille pour une société qui fait du web.

-Utiliser la fonction « defer » avant la fermeture des balises JS : Avez-vous déjà utilisé cette option ?
Avez-vous un retour d’expérience ?

Cette fonction permet d'informer le navigateur que le script peut-être lu après le chargement complet du HTML. Il faut donc faire attention si vous utilisez du Javascript pour le design. Cette fonction n'est pas prise en compte par tous les navigateurs.
Il s'utilise comme ça en XHTML :
<script src="fichier.js" type="text/javascript" defer="defer"></script>

-Pensez-vous que le fait de supprimer quelques photos du diaporama présent en index.htlm peut accélérer le temps de chargement ?

Oui forcément. Toutes les images qui sont dans le HTML sont chargées (pas en css !). Moins vous avez d'image et plus le site répond vite.
Pour information, il existe une technique, le sprite, qui regroupe plusieurs images d'un thème en une image pour gagner du temps à l'affichage.

Quel est d’après vous le temps de chargement optimal d’une page pour un bon référencement ?

Le temps optimal est le plus court... mais on peut estimé qu'un site s'affichant sous les 4 secondes est très performant.
Note : En fonction de la localisation de votre serveur, les temps sont plus long dans certain pays/ville. Donc si votre site est international, il peut s'afficher lentement dans certain pays.

J'espère vous avoir aidez, n'hésitez pas à me demander si vous voulez des précisions.

 

[paikan06]

Merci énormément pour vos réponses, c'est exactement le type d'aide qui me permet d'avancer, je vais effectuer des testes et je reviens vous donner des news.

Si d'autre personnes ont des avis ou des conseils c'est avec grand plaisir !!

 

[paikan06]

Bonjour à tous,

Suite à vos conseils, j'ai fais quelques petites modifications.
J'ai supprimé qlq photos du diaporama et j'ai essayé de réduire le poids de certaines photos.
Apparemment cela à réduis le temps de téléchargement, je pense également avoir gagné qlq place sur google.
Je continu mes investigations et je reviens vous donner des nouvelles.

Depuis le début du post, j'ai une augmentation de clic +1Google sur mon site, si c'est vous, je vous remercie très sincèrement, ça m'aide beaucoup..

 

[marc.teyssier]

Bonjour,

J'ai refait une étude rapide de votre site. J'utilise un plugin Firefox, nommé FireBug pour regarder les temps de chargement d'une page (onglet réseau).
Votre site fait actuellement 59 requêtes sur le serveur dont:
- 14 Js : 11 sur votre serveur et 3 sur google.
- 6 css
- 31 images

Le temps pour aller chercher un fichier sur un serveur est assez long. Ce n'est pas le temps de téléchargement, mais le temps de connexion au serveur qui est long. C'est pourquoi réduire le nombre de fichier est très important.
Mes premier conseils :
- Il y a 2 fois la librairie jQuery et jQuery ui chargé, supprimer le doublon.
- Si possible, mutualisé les css en 1 ou 2. (il y a un test2.css qui n'est pas forcément utile vu ce qu'il contient).
- Technique plus poussée : faire un sprite des images qui n'ont pas besoin d'être référencé par Google comme les petits drapeaux par exemple. Il y a de très bon tutoriel pour ça sur internet.

En espérant vous faire avancer.

 

[paikan06]

Bonjour a tous,

merci, merci beaucoup pour votre réponse marc.teyssier, votre analyse est très constructive pour moi, je travaille sur les différents éléments que vous avez pointé et je reviens vous donner des nouvelles.

 

[zeb]

- 14 Js : 11 sur votre serveur et 3 sur google.

Héberger chez vous les 3 JS chez google éviterait une résolution DNS donc du temps (si possible).

<meta name="Keywords" content="h0tel à n1ce, (...), prom3nade d3s ang1ais" />

manifestement sur optimisé même si ça ne permet pas de gagner grand chose.

beaucoup de saut de ligne dans le code HTML qui n'est pas minyfié.

Note : chez moi tous les éléments les plus lents viennent de chez google ... cherchez l'erreur

 

[marc.teyssier]

Comme Zeb j'ai remarqué que Google était plus lent.
Le Js bloquant est le plusone.js.
Normalement, google analytics se charge en asynchrone et donc ne ralenti l'affiche de la page.