Discussion :

[PatSan]

Bonjour à tous !
J'aurais besoin des connaissances d'un dieu de l'optimisation de site.
Il faudrait que je gagne une 1/2 seconde pour l'affichage de mon site www.o-naturel.ca. Actuellement, j'en suis à 2.5 secondes.
J'ai déjà optimisé au maximum sur les recommandations de google chrome pagespeed. J'obtiens une note de 99/100.
Au niveau des CDN, j'ai utilisé Google App Engine Launcher.
La compression des js, jpg et png est effective
Je n'ai par contre aucun jpg progressif mais je pense que cela ne joue pas dans la rapidité d'affichage. Selon moi, c'est juste un confort visuel...
J'utilise http://www.webpagetest.org pour analyser le tout.
La seule chose que je pourrais voir est démarrer le rappatriement des jpg avant tout css ou tout js. Est-ce que cela est possible ?
Je pourrais peut-être aussi utiliser un autre CDN pour les plus grosses images mais je ne sais pas si cela donnerait plus de parallélisme...
Qu'en pensez-vous ?
Merci d'avance pour vos réponses.

[rodolphebrd]

Vous avez entre autre :

Spécifier les dimensions des images

En spécifiant une largeur et une hauteur pour toutes vos images, la page se chargera plus vite, car l'exécution des commandes reflow() et repaint() ne sera pas nécessaire.
En savoir plus

Suggestions pour cette page

Les images suivantes ne sont associées à aucun attribut de largeur et/ou de hauteur.
http://o-naturel.appspot.com/.../photo_1.jpg
http://o-naturel.appspot.com/.../photo_2.jpg
http://o-naturel.appspot.com/.../photo_3.jpg
http://o-naturel.appspot.com/.../photo_4.jpg
http://o-naturel.appspot.com/.../left_up_export.png
http://o-naturel.appspot.com/.../right_up_export.png

[PatSan]

Oui je sais, ce sont les seules images dont les dimensions ne sont pas spécifiées.
Au niveau des photos : si je le fais, le javascript du rotator principal ne fonctionne plus au niveau du redimensionnement de la page (c'est l'inconvénient de reprendre un script que l'on écrit pas).
A niveau des flèches, elles font aussi partie d'un rotator (secondaire) utilisant le jscript et je ne peux pas spécifier leur taille.
Merci pour ton commentaire rodolphebrd.

[livaneti]

Salut, voici quelques conseils :

- Pourquoi tu met pas ton code css dans un fichier de Style... Cela permettras un affichage plus rapide de ton site....

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" type="text/css" href="style.css" />

- Ses Scripts, tu peux les Mettre en Pied de la page, juste Avant </body> :

le Script : // Gestion des cookies // et le Google Analytics...

Bonne chance

[PatSan]

Bonjour livaneti,
En fait, les styles css sont intégrés dans la page html pour éviter une requête supplémentaire au serveur... Cela fait partie du processus d'optimisation.
Pour le script du Google Analytic, Google préconise de le mettre avant le </head>.

[livaneti]

Il faut noter que ton Style ajouter comme ça sur la page est "Oldies" ancient... pour chaque Website Speed Optimization il est conseillé d'ajouter toutes les déclarations CSS et Javascript dans des Fichier (.CSS et .JS) et il est conseillé d'ajouter tous les Javascripts Code Facultatif avant la /body... c'est le Cas de Google Analytic et celui des Cookies...

Bonne Chance

[Bisûnûrs]

A la limite pour les images tu peux paralléliser les chargements en utilisant un sous-domaine différent (static1, static2, etc).

Tu peux aussi ajouter un cache serveur sous forme de reverse proxy (ex : Varnish) pour éviter de nombreux appels Apache.

il est conseillé d'ajouter toutes les déclarations CSS et Javascript dans des Fichier (.CSS et .JS)

Non.

il est conseillé d'ajouter tous les Javascripts Code Facultatif avant la /body

Non.

[PatSan]

D'accord avec toi Bisûnûrs concernant les remarques de livaneti.

A la limite pour les images tu peux paralléliser les chargements en utilisant un sous-domaine différent (static1, static2, etc).

Je n'y avais pas pensé... Très intéressant, je vais me pencher sur la question...

Tu peux aussi ajouter un cache serveur sous forme de reverse proxy (ex : Varnish) pour éviter de nombreux appels Apache.

Je ne connais pas cette manipulation mais je vais me documenter...
Est-ce un intervention à faire directement sur le serveur ? Auquel cas, mon hébergeur sera sûrement contre...

Merci beaucoup Bisûnûrs pour ces remarques constructives...

Note à rodolphebrd : j'ai pu modifier le code jscript pour spécifier la taille des flèches left_up_export.png et right_up_export.png, c'était assez intuitif mais pas pour les photos 1 à 4...

Petite question : existe-t-il un autre CDN gratuit comme Google App Engine Launcher aussi facile à utiliser ?

[Bisûnûrs]

Je n'y avais pas pensé... Très intéressant, je vais me pencher sur la question...

Tu peux à la limite utiliser la parallélisation pour tous les fichiers statiques que tu peux avoir, comme les fichiers JS et CSS.

Pour ces fichiers là, tu peux aussi utiliser un minifier, comme Minify, ça te permet :
1. de regrouper tous tes fichiers CSS et tous tes fichiers JS en un seul fichier (séparé, entendons-nous)
2. de supprimer tous les caractères inutiles pour compresser le contenu au maximum et ainsi réduire le volume du fichier
3. de gérer le cache des fichiers CSS et JS

Je ne connais pas cette manipulation mais je vais me documenter...
Est-ce un intervention à faire directement sur le serveur ? Auquel cas, mon hébergeur sera sûrement contre...

Oui, ça s'installe sur le serveur. Si tu es en mutualisé, il y a de grandes chances que tu ne puisses pas y avoir droit.

[livaneti]

Peut être vous êtes des experts et vous savez ce que vous dites.. mais je vous invite à lire cette article par google : Lien En anglais bien sure... ou il est bien clair d'éviter CSS et Javascript EXPRESSIONS.. l'article parle aussi de Minify que j'avais oublier de préciser.

2013 c'est l'année des Page Speed, l'optimisation de code source... alors tous les Javascripts codes doivent être en FOOTER.. comme ça la page s'affiche en attendant que ses scripts s’exécute. Logique

[rodolphebrd]

Que viennent faire les expressions CSS dans le sujet ou alors quelque chose m'a échappé

2013 c'est l'année des Page Speed, l'optimisation de code source... alors tous les Javascripts codes doivent être en FOOTER

Bisûnûrs vous a répondu que non et il y a une raison à cela. Que faites-vous de Jquery ?

[Bisûnûrs]

Alors :

Peut être vous êtes des experts et vous savez ce que vous dites..

Je ne me qualifierais pas forcément d'expert, mais oui, en général je sais ce que je dis.

mais je vous invite à lire cette article par google : Lien En anglais bien sure...

Merci, je connaissais, je le consulte très régulièrement.

ou il est bien clair d'éviter CSS et Javascript EXPRESSIONS..

C'est exact. Sauf que les expressions en CSS est un moyen d'exécuter du Javascript dans une feuille de style et uniquement sur IE. Donc je ne vois pas ce que vient faire cette partie là dans le fait de mettre un fichier CSS ou le CSS directement dans le document HTML.

alors tous les Javascripts codes doivent être en FOOTER.. comme ça la page s'affiche en attendant que ses scripts s’exécute. Logique

Oui. Mais non. Ca c'était en 2011. Depuis, on met le Javascript dans le head et on le charge en différé.
PageSpeed nous dit bien :

Différer l'analyse du code JavaScript

[livaneti]

Alors d'après toi tous le style et Javascript codes de n'importe quelle site doivent être ajouter directement, l'utilisation de fichiers .CSS et .JS réduiras la vitesse l'affichage de la page web (Page Speed) !?

[Bisûnûrs]

Ben ça dépend. Si le fichier est petit, mieux vaut le mettre directement dans le code du document HTML pour éviter d'avoir une requête HTTP supplémentaire pour un volume de fichier ridicule. Si le fichier est gros, on préfèrera le garder dans un fichier externe et ainsi bénéficier du cache qu'on aura mis en place ou grâce à Minify.

Comme tu peux le voir, il n'y a pas une problématique, une et une seule solution immuable. Il y a une problématique et diverses solutions sous condition. C'est ça qui fait qu'on optimise une page.

[PatSan]

Tout est dit !

[livaneti]

Ben ça dépend. Si le fichier est petit, mieux vaut le mettre directement dans le code du document HTML pour éviter d'avoir une requête HTTP supplémentaire pour un volume de fichier ridicule. Si le fichier est gros, on préfèrera le garder dans un fichier externe et ainsi bénéficier du cache qu'on aura mis en place ou grâce à Minify.

Comme tu peux le voir, il n'y a pas une problématique, une et une seule solution immuable. Il y a une problématique et diverses solutions sous condition. C'est ça qui fait qu'on optimise une page.

la on est bien d'accord... c'est sure que c'est pour chaque problème y a une solution c'est juste que petit ou grand l'optimisation ça se fait au code source...

Goodluck

[dev14]

Sprite tes images

[PatSan]

Bonjour dev14,
Les petites images sont déjà 'spritées'...
Spriter les images plus grosses m'évitera des accès serveurs mais cela ne résoudra pas le problème de leur taille.
Connais-tu un site qui offre un service CDN ? J'utilise déjà celui de Google via Google App Engine Launcher mais je voudrais en utiliser un autre, histoire de paralléliser un max.

OVH était gratuit mais ne l'est plus...
CloudFlare demande un changement de nom de serveur mais mon provider ne l'autorise pas...

Merci !