optimisation chargement page

[omelhor]

Bonjour,

Je cherche a optimiser le temps de chargement de mes pages, j'ai vue que l'on pouvait "cacher" les images, fichiers CSS, javascript
Savez-vous comment faire ?

Merci beaucoup

 

[nervusdm]

Il existe pas mal de règles pour tout optimiser, pas toujours indispensable, en fonction de la taille du site ( et de ses visiteurs^^).
Il faut déjà compressé au maximum les lignes css et javascript par exemple.
Mais "cacher" du CSS, je ne comprend pas. Si tu le cache, ben forcément, il va pas se charger.
Sinon pour les images, ça se fait en jquery, si tu parle du chargement des images en fonction du scrolling du visiteur.

 

[Writer]

S'il s'agit d'un site dynamique, la gestion du cache (coté client + coté serveur) est indispensable à part ça il suffit d'activer gzip..

 

[Bigb06]

Les meilleurs liens pour améliorer le temps de chargement de son site:
http://performance.survol.fr/
https://developers.google.com/speed/docs/best-practices/rules_intro?hl=fr
http://developer.yahoo.com/performance/rules.html

Concernant la mise en cache, j'imagine que vous parlez de la partie client, il faut donc :
1 - désactiver les etags
2 - appliquer des règles d'expiration pour le contenu statique avec des dates très lointaines. Par exemple :

ExpiresByType image/gif "modification plus 5 years"
ExpiresByType image/png "modification plus 5 years"
ExpiresByType image/jpeg "modification plus 5 years"
ExpiresByType image/jpg "modification plus 5 years"
ExpiresByType application/x-javascript "modification plus 5 years"
ExpiresByType text/css "modification plus 5 years"

3 - a chaque changement dans un fichier ou modification d'image, il faut veiller à RENOMMER le fichier, sinon la navigateur ne sera pas averti des changements!
de mon coté je renomme automatiquement via un script ant les fichiers javascript avec le md5 du fichier, mais on peut aussi faire :
script-v1.js
script-v2.js
...

 

[1eB]

Pour la partie "désactiver les etags" je ne suis pas d'accord, bien utilisé les etags sont très bien pour gérer le cache justement.
Ceci évite justement d'avoir à changer le nom d'un fichier lors d'une mise à jour et de retrouver toutes les références à ce fichier dans le code du site.

Le problème avec les etag ne se retrouve que si le site est hébergé sur plusieurs serveurs ce qui est rarement le cas pour les sites de petite et moyenne fréquentation.

Et sinon il "suffit" de surcharger la façon de générer le etag pour résoudre ce problème.

Pour les css et js, il existe plusieurs sites qui proposent de les compresser en optimisant le code, en renommant les variables avec des lettres, etc.
Gardez la version non compressée pour vos développement puis utilisez la version compressée pour la mise en production.

Pour les images il existe aussi des logiciels qui optimise la compression, PNGGauntlet par exemple.

Une autre façon d'optimiser votre page est de supprimer tous les espaces, tabulations et retour à la ligne surnuméraires.
Mais là vous êtes vraiment dans l'optimisation à l’octet prêt !
Personnellement, j'ai développé un outil spécifique à nos template qui exécute quelques expressions régulières pour nettoyer le code html de ces espaces en trop pour la mise en production, les espaces et retour à la ligne permette quand même de développer plus facilement.

 

[Bigb06]

Oui pour les etags c'est valable seulement pour les sites tournant sur plusieurs serveur désolé, et encore on peut contourner le problème comme vous le soulignez.

 

[anemone-clown]

@omelhor : quel est l'indice de rapidité indiqué par l'outil Speed sur la plupart des pages?

Il ne faut pas confondre temps de chargement des pages et délai de service de la page : le premier dépend du contenu, le second du serveur.

Par exemple, dans mon cas, si on prend une page type du site, comme http://www.aquaportail.com/definition-12225-nepeta.html le score PageSpeed est de 95/100 (serveur statique, accélérateur php, sql sur serveur... etc) mais quand je regarde le temps de chargement de la page, c'est mauvais et pas bon selon les critères googoliens : mais avec une image principale de 240 ko pour illustrer cette page, c'est logique.

Bref le score PageSpeed est excellent (serveur et optimisation technique des pages), mais le temps de chargement est long.

 

[cupidonbe]

Je recommande:

http://www.websiteoptimization.com/services/analyze/ pour bien démarrer
Yahoo slow pour bien continuer
http://www.webpagetest.org/ pour bien se motiver

Tout est là dedans !

 

[cupidonbe]

J ajouterais:

http://nontroppo.org/tools/gziptest/

 

[zeb]

Personnellement, j'ai développé un outil spécifique à nos template qui exécute quelques expressions régulières pour nettoyer le code html de ces espaces en trop pour la mise en production, les espaces et retour à la ligne permette quand même de développer plus facilement.

Idem, j'ai donc en sortie une page minifiée, a ceci près, et il me semble ne pas avoir vue de propos a ce sujet, que ce code minifié est chez moi uniquement dans le cache du site (la version que renvoie le serveur à la seconde consultation d'une page pour un utilisateur Lambda).
Le script de Fandecine, remixé par mes soins pour l'adapter à mon CMS divise le temps de fabrication d'une page par 4 en allégeant la charge de calcul et SQL du serveur de façon énorme et renvoie ensuite une version statique minifiée ce qui allège d'autant le temps de chargement de cette même page.

 

[1eB]

Je fais tourner mes sites en asp.Net sur IIS donc j'utilise un module serveur.
Je l'ai a peine modifié par rapport à cette version codeproject.

Ça et un traitement en amont me permettent de couvrir la plus part des recommandations d'optimisations.
Je perd quelques millisecondes à la création de la page, je verrais plus tard pour améliorer encore le processus mais bon l'optimisation à la milliseconde prêt c'est plus pour jouer que par véritable intérêt pour le client et le référencement.

 

[omelhor]

@omelhor : quel est l'indice de rapidité indiqué par l'outil Speed sur la plupart des pages?

Il ne faut pas confondre temps de chargement des pages et délai de service de la page : le premier dépend du contenu, le second du serveur.

Par exemple, dans mon cas, si on prend une page type du site, comme http://www.aquaportail.com/definition-12225-nepeta.html le score PageSpeed est de 95/100 (serveur statique, accélérateur php, sql sur serveur... etc) mais quand je regarde le temps de chargement de la page, c'est mauvais et pas bon selon les critères googoliens : mais avec une image principale de 240 ko pour illustrer cette page, c'est logique.

Bref le score PageSpeed est excellent (serveur et optimisation technique des pages), mais le temps de chargement est long.

J'ai fait un test avec l'outil Speed de google, la note va de 73 a 85, ça n'a pas l'air terrible !! , a savoir que j'ai beaucoup d'images de site extérieurs.

 

[omelhor]

Je fais tourner mes sites en asp.Net sur IIS donc j'utilise un module serveur.
Je l'ai a peine modifié par rapport à cette version codeproject.

Ça et un traitement en amont me permettent de couvrir la plus part des recommandations d'optimisations.
Je perd quelques millisecondes à la création de la page, je verrais plus tard pour améliorer encore le processus mais bon l'optimisation à la milliseconde prêt c'est plus pour jouer que par véritable intérêt pour le client et le référencement.

Je suis sur un serveur apache, a priori cela ne marche que pour IIS c'est bien ça ?

 

[omelhor]

J'ai fait un petit résumé des url que vous m'avez fournir, de bons outils et une bonne lecture en perspective



https://developers.google.com/speed/docs/best-practices/rules_intro?hl=fr
http://developer.yahoo.com/performance/rules.html
http://www.rural-geek.fr/article21.html
http://performance.survol.fr/
http://nontroppo.org/tools/gziptest/
http://www.webpagetest.org/
http://www.websiteoptimization.com/services/analyze/
https://www.webrankinfo.com/forum/t/script-mise-en-cache-des-pages-php.28614/
http://www.massassi.com/php/articles/template_engines/
http://www.codeproject.com/Articles/125159/Package-that-speeds-up-load ... ript-CSS-a

Merci beaucoup

 

[cupidonbe]

http://www.palmerwebmarketing.com/blog/25-ways-to-speed-up-your-website/
http://www.showslow.com

y a vraiment beaucoup sur ce sujet. Mais comme dirait Matt Cutts, c est un truc lancé en l air comme ca pour que les webmaster cessent de chercher a manipuler les résultats et s occupent plus intelligement et il n a pas tort

 

[cupidonbe]

voilà je viens de repasser une heure a optimiser. En fait j avais migré de serveur ( passé de IIS6.0 a 7.0) et j avais oublié qq trucs, et je refais souvent la page d accueil mais sans garder l optimisation en tête. C est en retombant sur ce sujet que j'ai réalisé. Comme quoi je vous conseille de repasser tous les 6 mois pour bien optimiser. Là je suis content j'ai un score Pagespeed de 96/100, mon concurrent 91 et deux de mes concurrents 51 et 26

 

[omelhor]

J'ai une question page speed de google me renvoie ceci comme résultat :

Si vous compressez http://static.addinto.com/ai/ai2css.css, vous pourriez libérer 5 Ko (réduction de 76 %).
Si vous compressez http://optimized-by.rubiconproject.com/.../38154-2.js?..., vous pourriez libérer 2,3 Ko (réduction de 59 %).
Si vous compressez http://3bxgob28ox.b.ad6media.fr/?..., vous pourriez libérer 1,2 Ko (réduction de 65 %).

Peut'on compresser des scripts qui n'appartiennent pas a nos sites ? Se sont des liens publicitaires de régies que j'ai mise en place sur mon site ?

 

[zeb]

Non tu ne peut pas mais tu peut minimiser les ressources externes a ton site et ainsi gagner au passage des résolutions DNS.

 

[omelhor]

Je suis tombé sur cet article :

http://www.deldie.net/blog/optimiser-temps-de-chargement-de-son-site

# Mise en cache pendant 45 jours
<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf|doc)$">
Header set Cache-Control "max-age=3888000"
</FilesMatch>

Est-ce que cela va s'appliquer uniquement a mon propre site, ou bien également aux fichier externes (css,js etc... ) de mes régies que mon site importe ?

José

 

[cupidonbe]

uniquement a ton propre site