Bonjour à tous !

Je viens vous demander encore un nouveau conseil quant au chargement de la première page de mon site. Les images et la mise en page se chargeaient trop lentement, ce qui laissait apparaître les "dessous" de mon design.

J'ai donc opté pour un preloader et trouvé le meta refresh qui permet de rester en full CSS et a priori de ne rien perdre en référencement google... La balise meta refresh est donc placée sur ma page index.htm à la racine du site, charge les 2 ou 3 images les plus lourdes et avec un content à 0, renvoie vers ma page où j'ai le contenu (http://chambreshotesjolivet.fr/intro.htm).

Le problème est survenu avec Facebook qui ne prend pas les infos de intro.htm lorsque je propose d'envoyer le lien de base de mon site : www.chambreshotesjolivet.fr mais il prend les infos de index.htm où il n'y a rien...

J'ai résolu le problème en duplicant ce que je voulais que facebook voit mais je crains d'avoir d'autres soucis avec cette méthode. Plus je lis sur le sujet et plus je me dis que c'est une mauvaise idée, même si aujourd'hui le rendu me plait !!! Smiley ohwell

Qu'en pensez-vous et quels seraient les autres moyens disponibles (à part la réduction du poids des images qui a déjà été optimisé) pour éviter ce chargement disgracieux ?
Images optimisées ?
Tu as un .png qui fait 426 Ko, ta page entière fait 1mo, beaucoup trop gros.
Il y a même un Bitmap sur la page ...

Regarde du côté de Google Page Speed, ou des milliers d'outils existants. Mais rien n'est optimisé.
Bonjour,
jojoledemago a écrit :
à part la réduction du poids des images qui a déjà été optimisé

Il y'a plus de 850 Ko avec seulement deux images, plus un format BMP à proscrire immédiatement. Convertissez vos images en réduisant la qualité, la définition, et travaillez impérativement la méthode d'intégration ... (découpe d'images, repeat CSS éventuel, etc.).
Bon d'accord, nous n'avons pas les mêmes repères !
Je me rappelle surtout avoir réduit le fond central, j'étais passé un peu vite sur les photos, je vais retravailler ça !
Je vais tenter de réduire un peu tout ça mais je ne veux pas voir de pixels sur un écran 30 pouces alors, je ne peux pas descendre à 40ko c'est sure.
Pour le reste, même si les photos se chargent plus vite, elle vont toujours se charger dans le même ordre. Y aurait-il moyen par exemple d'afficher le fond central (en jaune) avant les photos de derrière pour qu'on ne voit pas ces photos qui se montent dessus ?
Et vous pensez que mon ajax preloader est une mauvaise idée ou pas ? Parce que je me répète mais en tant qu'utilisateur, j'apprécie beaucoup cet espèce de suspens sur fond noir (quand il n'est pas trop long bien sure...) pour ensuite avoir une page toute nette qui saute aux yeux !!!
Bonjour !
J'ai effectué les modifications que vous m'avez conseillé. Par contre, je n'arrive pas à réduire mont fichier fondmotif18.png sans perdre la qualité du dégradé de transparence. Actuellement, il est en PNG8 256 couleurs et fait 135ko avec transparence Alpha contre 437ko en PNG32. Je n'arrive pas à faire un truc entre les 2, mon logiciel (Fireworks) ne me propose pas de transparence pour le PNG24.
Pour savoir si je dois garder cette page de chargement ou non, il vaut peut-être mieux que je poste dans "Accessibilité du web" ?
Comme dit plus haut, il faut également utiliser les fonction de répétitions css.

Pour tes transparences, tu peux utiliser pour chaque coté une image de 1px de hauteur que tu répètes sur toute la hauteur, pour l'image centrale du coup tu peux l'enregistrer en jpg compressé et on ne verra pas la différence. Par contre, tu diminueras significativement la taille des fichiers !!

Quand je vois à quoi ressemble la page, je me demande réellement où sont les 750ko utilisés, c'est facilement réalisable avec 300ko max je dirais
Super idée ces répétitions CSS pour les transparences !!!!! Je pensais que vous parliez de répéter mes photos de fond, ce qui serait assez disgracieux !!!
Par contre pour la réalisation, dites moi si ça convient ! Je pense qu'il n'est pas possible de faire plusieurs background (en tous cas si on veut que notre site soit accessible sur les navigateurs encore utilisés) donc je pense créer 3 div en absolute, celles des côtés auraient un dégradé de 1pixel de haut qui se répetterait sur l'axe des y et celle du milieu aurait mon fond en .jpg divisé par 10 en largeur (pour ne pas trop "casser" le motif) et répété sur l'axe des x.
Dites moi si c'est bon avant que je me lance s'il vous plait ?
Il y aura quand même un effet bien moyen je pense, à cause du fait que mon fond possède un dégradé (plus clair en haut, dégradé vers le bas), ou alors je dis au-revoir à mon dégradé !!!
Merci pour votre aide, ça fait du bien !
jojo
En absolu c'est pas top du tout vu que tu ne pourras pas gérer la hauteur de tes blocs en fonction de ton contenu...

Ce que tu peux faire c'est 2 div imbriqués, le parent possède un background composé de ton image transparente d'1px de haut (image sur toute la largeur de ton contenu histoire de n'avoir qu'une image pour les 2 cotés à la fois). Ensuite, le bloc enfant tu lui met des marges gauche et droite de la largeur de tes bords transparents et tu met en fond l'image de fond du contenu.

Je sais pas si c'est très clair... Smiley lol
WAOUH !!!!!!!!
C'est génial ça !!!
Bon je regarde tout ça mieux demain mais vous avez vraiment de trop bonnes idées !!!
Merci beaucoup, je reviens pour vous montrer ce que ça donne, je n'ai pas beaucoup de temps et l'amateur que je suis a souvent besoin de plusieurs heures pour un tout petit problème alors ne vous impatientez pas...
Merci encore !!!
jojo
Bon, désolé jb_gfx, je m'étais un petit peu emballé... En fait, en voyant ton lien, j'ai cru que tu avais juste pensé à retarder le chargement des 2 photos de fond alors que je crois que c'est le contraire que tu as fais !!! Aussi, je préfèrerais rester en full CSS. Mais vraiment merci quand même puisque tu as allumé une petite lumière !

Du coup, dites moi ce que vous pensez de ça :
http://www.chambreshotesjolivet.fr/intro_essai.htm

Ce que j'ai fait :
1. dessiné un rectangle blanc sur toute la hauteur de mon image de fond et toute la largeur moins 30px, ce qui correspond à la taille de mon dégradé. Exporté en PNG32 le fichier fait une centaine de ko contre plus de 400 !
2. effacé le carré blanc.
3. découpé un rectangle de 67px (au pif !!!) de large et toute la hauteur (il sera répété sur l'axe des x). Exporté en JPG -> 8ko !!!
4. suivi les conseils de pixelb pour la disposition

Pour info, mon fond pourrait être facilement 2 fois moins haut si on vivait dans un monde sans ie...
Alors, je peux mettre en ligne pour de vrai et sans l'ajax? ou je peux encore nettement améliorer tout ça ?

Petit bémol, je chargeais aussi mon sprite dans le preload, sprite qui me fait mes vignettes pour le reste du site que je n'ai pas réussi (et je viens de vérifier cette fois ci avant de parler trop vite !...) à réduire plus bas que 170ko. Du coup, sans le preload, on a bien le temps de voir les vignettes vides avant qu'elles ne se remplissent... Après, ça ne me paraît pas vraiment gênant, ça fait juste moins propre je trouve lorsqu'on voit les éléments se charger...
Il y a encore de nombreuses choses que tu peux faire pour accélérer l'affichage de la page...
A commencer par enregistrer tes images à la taille où elles sont affichées et à les optimiser ! Je parle là des images routard, gites de france,... qui sont mises à l'échelle dans ta page. Autant les enregistrer directement à la bonne taille et compressées. D'après google speed tu gagneras près de 100ko !

Tu peux aussi minifier tes fichiers css.

Enfin, est ce que ton dégradé sur l'arrière plan du contenu est réellement utile ? A première vue je trouve que ça passerait de la même manière sans lui, du coup ça te permettrait de réduire significativement les dimensions de tes images d'arrière plan et encore de faire gagner (beaucoup) d'octets
Bien compris pour les images de taille fixe, c'est logique, encore faut-il y penser !
Pour le dégradé, je m'attendais un peu à la question, j'y réfléchis, moi je préfère nettement avec et je ne veux pas gâcher le rendu pour gagner 100ko... A méditer...

Moi je ne peux pas utiliser google speed, j'ai essayé de l'installer mais il faut un XP pro, je suis sous XP home... Vous connaissez un autre logiciel qui ferait la même chose ?

Merci encore à vous !
jojo
J'oubliais, pour les CSS, je vais probablement avoir à travailler dessus régulièrement donc je préfère les conserver avec une "mise en forme" lisible. A moins qu'il existe des moyens comme conserver une version lisible et la "compresser" avec un log lorsqu'on la met en ligne...
Personne pour se prononcer sur les + et - de la page de chargement ??? Smiley sweatdrop

Pour le reste, j'ai optimisé mes petites photos cette fois-ci comme tu me l'as conseillé pixelb, j'ai en effet gagné au minimum 70ko et j'ai mis tout ça en ligne (même lien que le précédent sans intro_essai.htm)

Pour le fond, j'ai réessayé sans le dégradé et cette fois c'est sure, je garde le dégradé ! J'ai tenté de répéter le dégradé transparent sur la hauteur mais c'est vraiment laid à cause du dégradé vertical. Il y a peut-être une solution du côté des SVG, je crois que c'est reconnu par tous les navigateurs actuels et on peut "fabriquer" son image, moi, il me faudrait un filtre qui reproduise mon dégradé vertical (jaune clair en haut, foncé en bas).

Mais pour l'instant, j'en reste là, je pense qu'il y a plus urgent : les différents bugs reportés, améliorer la sémantique, la taille des images dans les autres pages du site et surtout le référencement !!! De quoi occuper les longues soirées d'hiver...

J'attends vos réponses pour les avantages et inconvénients de cette page de chargement ! Smiley biggrin
A+
tu as un plugin jquery nommé imagepreloder très effiocace ...

sur la ferme !!

http://www.lafermeduweb.net/billet/imagepreloader-un-plugin-jquery-pour-precharger-vos-images-1120.html

l'implémentation est la suivante

le script contient 2 méthode
une pour charger tes images nommées
une autre pour charger celles contenues dans ton css

et toutes les deux ont un callback

l'idée est de faire apparaitre une image type loading et la faire disparaitre dans le callback

un chti exemple


$(function() {
//on cache l'entrée au site	
	$('.box_to_enter').hide();
on écrit une image qu'on place dans le conteneur de la page
	  $('<img />').attr({
		  	src:'web/images/loader.gif',
		  	id:'loader'
		  }).appendTo('#conteneur');

	var domaine="http://ledricholivier.com/itineraire_consulting/web/img/";
//lancement de la méthode
	$.preLoadImages(
		     [
		          domaine+'BanniereGraphisme.jpg',
		          domaine+'BanniereLogo.jpg',
		          domaine+'BgAccueil.jpg',
		          domaine+'BgMission.jpg',
		          domaine+'BgPrestation.jpg',
		          domaine+'Bgqui.jpg',
		          domaine+'BtnPrestation01.jpg',
		          domaine+'BtnPrestation02.jpg',
		          domaine+'BtnPrestation03.jpg',		          
		          domaine+'BtnPrestation04.jpg',
		          domaine+'BtnPrestationOver01.jpg',
		          domaine+'BtnPrestationOver02.jpg',
		          domaine+'BtnPrestationOver03.jpg',
		          domaine+'BtnPrestationOver04.jpg',
		          domaine+'BtnRetour.png',
		          domaine+'BtnRetourOver.png',
		          domaine+'BtnContact.png',
		          domaine+'BtnContactOver.png'
		     ],function(){
//calback ici
on vire l'image
		    	 $('#loader').remove();
//on affiche ce qu'on veut
		    	 $('.box_to_enter').slideDown('slow'); 
		     }
		);

Bonsoir phpCbien !
Dans ton exemple, peux-tu me confirmer que lorsque javascript est désactivé, la seule différence c'est que les images ne sont pas préchargée ?
Question idiote probablement mais je préfère être certain... Smiley cligne