Optimiser le temps de chargement d'un site web "RESOLU"

Bonjour,

Je viens de finir mon second site web Youpi!!
Seul Hic, je trouve qu'il met un peu de temps pour s'ouvrir, c'est assez gênant quand on à une faible connexion Internet. Qu'en pensez vous ?

Comment pourrais optimiser le temps de chargement de ce site ?

Merci pour votre aide

Cordialement
Modifié par dreadstock (02 Dec 2009 - 14:11)

Bonjour,

dreadstock a écrit :
Comment pourrais optimiser le temps de chargement de ce site ?

Dans ton cas précis, je conseillerais de diminuer le poids des images (là j'ai pas d'outils pour tester le poids total de la page (Yslow) mais il y a beaucoup trop à chager pour une page d'accueil).

Après dans les techniques avancées, il y a l'utilisation de Gzip.

Salut,

Une image qui parle d'elle même :
http://forum.alsacreations.com/upload/3681-balcon.jpg

Il faudrait songer à réduire le poids des tes images par 10 au moins !
1.7mo pour la page, c'est bien trop.

Même le poids de ta page d'accueil me semble un peu lourd vu le peu d'informations qu'elle contient. Il y a notamment beaucoup d'identifiants dans ton code, des attributs titles pas forcément utiles (surtout lorsqu'ils n'apportent pas plus d'information).

Mais déja alléger les images considérablement est la première des priorités.
Modifié par Mikachu (27 Nov 2009 - 13:46)

La 2ième priorité est à mon avis de diminuer le nombre de requête (http).
Tu as beaucoup de fichier chargé pour une page.
Renseigne toi sur la technique de CSS sprites (qui consite à rassembler plusieurs images décoratives (icones puces background etc...) en une seul et à jouer avec les background position)
Voici quelques liens pour découvrir cette méthode :
http://www.seodenver.com/googles-sprite-image-is-a-thing-of-beauty/
http://www.scribd.com/doc/14283426/CSS-Sprites

Merci pour vos réponse, en effet, je vais déjà commencer par diminuer la taille des images.

J'espère ne pas trop perdre en qualité

Exemple : Un JPEG pour le web enregistrer en qualité 60 ou 70 (paramètre toshop) ou 100, la différence est tellement minume visuellement, qu'il est domage de se priver du gain de poids réalisé.

Mikachu, pourrais tu m'indiquer le logiciel qui ta permis de connaitre le poids de ma page ?

Merci, cela me permettra de faire des tests

Bonjour dreadstock,

Tu peux installer Firefox avec la Web Developer Toolbar. Il y a un outil Informations > View Document Size.

Cette barre est tout simplement un incontournable dans le développement Web.
Modifié par Tony Monast (27 Nov 2009 - 15:57)

Super, je connaissais firebug, mais pas celui là !!

Tu peux aussi installer YSlow pour t'aider à optimiser.

Extra web developper toolbar. Un outil formidable !!!!

Bonjour,

en plus des nombreux conseils judicieux fournis dans les réponses précédentes, tu peux aussi gagner en temps de chargement en compactant tes fichiers .css et .js (technique que j'utilise sur mon propre site: tous les fichiers .css et .js sont regroupés en un seul fichier .css et un seul fichier .js et compactés en supprimant tous les espaces inutiles et les commentaires: affiche la source d'une de mes pages et clique sur le fichier .css pour voir à quoi il ressemble.)

J'ai vu quelqu'un mentionner la compression gzip mais ça ne soulage pas vraiment le temps de chargement: ça économise la bande passante et ça soulage le serveur (ce qui est intéressant pour toi) mais à l'autre bout, le navigateur doit décompresser (quand il en est capable ) et donc le gain de temps pour le visiteur n'est pas évident.

Mais bon, c'est de l'optimisation poussée et pas prioritaire par rapport au poids des images auquel tu dois t'intéresser en premier lieu.
Modifié par Kairos (27 Nov 2009 - 16:56)

Y'a cette excellent plugin made by Google http://code.google.com/speed/page-speed/
Incontournable, il te compressera tout ce qui est possible et te fera des remarques pertinentes dès que possible. Il s'intègre dans Firebug (pas encore dans Chrome :s)

Bonsoir.

en vrac :

- mod_deflate pour gzip le xhtml/css/js
- optimise tes images car elles en ont besoins ....
- minimise et compacte tes css et js en un seul fichier (jsmin, css tidy ...).
- met en cache les éléments static (js, css ..) avec mod_expire

Et ça sera déjà un bon début, car 54 requêtes http pour la page ...
Modifié par Benjamin-Ds (27 Nov 2009 - 23:16)

ça y' est, j'ai diminué la qualité de mes photos. Je suis passé de 1578 ko d'images à 769 ko.
Ca à l'air beaucoup mieux. merci

C'est toujours énorme

Pour une page d'accueil, il est préférable de ne pas avoir trop à charger.

Bonjour,
tu dois commencer à apprendre à optimiser tes images et utiliser les bons formats:

Exemple: cette image : /img/desc_p1.png
en PNG TrueColor (32bits ici) à 74 Ko c'est pas très judicieux. Les PNG 32 de grande surface ont toujours un poids élevé comparativement à un JPEG ou un PNG paletted (1 à 8bits soit 2 à 256 couleurs).
Pour cette image par exemple, tu devrais isoler les photos, les enregistrer en JPEG, enregistrer
si nécessaire (si le bloc doit être affiché sur d'autres couleurs de fond) les 2 coins arrondis en PNG 32 (> sinon en PNG paletted) et enfin enregistrer une image de fond de 1px X 400px (si le bloc faisait 400 poc de haut) inséré via un background CSS que tu répètes sur l'axe des x.

Cette image : /img/nos-appartements.jpg 26 Ko! ne devrait pas dépasser 1 ko et devrait être enregistrée en PNG 3 ou 4 bits (8/16 couleurs), le JPEG étant plus approprié pour les image photographiques.

Ensuite les photo en fondu enchainé devrait être intégrées dans une anim flash avec barre de préchargement.
Modifié par Florent V. (02 Dec 2009 - 11:52)

Merci pour les conseils, je vais arranger tout cela

Hermann a écrit :
tu dois commencer à apprendre à optimiser tes images et utiliser les bons formats

En effet. En l'état, ce n'est pas une intégration web de niveau professionnel.
Bon apprentissage.
Modifié par Florent V. (01 Dec 2009 - 13:30)

Merci pour votre aide
Modifié par dreadstock (02 Dec 2009 - 14:11)