Optimiser la rapidité d'affichage d'une page

Version imprimable

21/07/2013, 13h20
PatSan

Optimiser la rapidité d'affichage d'une page

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.
21/07/2013, 14h35
rodolphebrd

Vous avez entre autre :

Citation:

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
21/07/2013, 15h38
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.
21/07/2013, 17h06
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:

<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
21/07/2013, 18h02
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>.
21/07/2013, 21h01
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
22/07/2013, 10h28
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.

Citation:

Envoyé par livaneti

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

Non.

Citation:

Envoyé par livaneti

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

Non.
22/07/2013, 13h05
PatSan

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

Citation:

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...

Citation:

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 ?
22/07/2013, 13h59
Bisûnûrs

Citation:

Envoyé par PatSan

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

Citation:

Envoyé par PatSan

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.
22/07/2013, 14h14
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 :)
22/07/2013, 14h27
rodolphebrd

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

Citation:

Envoyé par livaneti

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 ?
22/07/2013, 14h30
Bisûnûrs

Alors :

Citation:

Envoyé par livaneti

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.

Citation:

Envoyé par livaneti

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.

Citation:

Envoyé par livaneti

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.

Citation:

Envoyé par livaneti

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 :

Citation:

Différer l'analyse du code JavaScript
22/07/2013, 17h20
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) !?
22/07/2013, 17h27
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.
22/07/2013, 17h40
PatSan

Tout est dit !
22/07/2013, 20h13
livaneti

Citation:

Envoyé par 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.

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
03/08/2013, 18h04
dev14

Sprite tes images
03/08/2013, 18h39
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 !