[Page Speed] optimisation des images des scripts des css

Il faut en effet spécifier la largeur et la hauteur de chaque image dans le code HTML.
Le fichier HTML est l'élément qui est chargé en premier. Comme précisé dans l'article : "Il est également utile de spécifier la longueur et la largeur de chaque image pour que le navigateur réserve la place nécessaire à chaque image et n’ait pas à déplacer le contenu après coup."
En fait (et en +), si tu ne spécifie pas les dimensions, le navigateur va devoir les calculer lui même, ce qui nécessite des ressources processeur.

"Sacrifier ton rangement"... hmm...
Dis toi que tes visiteurs pâtissent de ton "rangement", à chaque chargement (enfin, pas exactement puisqu'il y'a la mise en cache, donc disons à chaque visite).
D'une manière générale (ou : "le plus souvent" - ce n'est pas systématiquement le cas), 1 seul fichier à charger est + rapide que plusieurs fichiers à charger (à tailles totales égales).
Tu peux très bien organiser tes fichiers différemment, ou utiliser des scripts qui vont se charger de générer le fichier final (qui contiendra l'ensemble de tes fichiers css et qui les compressera - idem pour JavaScript), mais, effectivement, si tu cherches à améliorer le chargement de tes pages, il vaut mieux un seul fichier css et un seul fichier js.

J'suis pas sûr d'avoir tout compris (et la flemme de faire une recherche à cette heure ci, je l'avoue)...
Cependant je pense à une astuce qui pourra peut être t'aider : à chaque modif' de ton fichier css ou de ton fichier js, tu peux modifier l'adresse de celui ci, et donc faire en sorte que tes visiteurs (qui l'ont déjà en cache) rechargent le fichier.
Ex: <link rel="stylesheet" href="http://example.com/style.css?v=11012011" type="text/css" media="screen" />
Dans cet exemple, la partie "?v=11012011" sera à changer à chaque fois que tu feras une modif' sur ton fichier css.

 

Bonjour,

pour les regroupements de fichiers, c'est en fait très important, surtout si tu as un serveur dynamique (99,9% des cas) car, à chaque lecture de fichier, il y a un entête avec cookie qui est envoyé, soit environ 1,5 kio à chaque fichier; de plus, ce sont des accès disques qui ralentissent automatiquement.

Si tu regroupes tous tes fichiers de même nature (css ensembles et js ensembles), tu diminues d'autant le nombre d'échanges entre le serveur et le client : tu accélères les processus de chargement de page.

Admettons que tu ais 10 fichiers JS (cas fréquent avec JQuery et quelques options), à chaque fichier, il y a : une demande du client, une réponse entête du serveur, un chargement du fichier, un accusé de bonne réception du client, et un cookie sur les serveurs dynamiques (par opposition d'un serveur statique). Si tu regroupes tes 10 fichiers en 1 seul, que de plus, tu exploites un logiciel pour "minifier" (minify) et ainsi diminuer le poids de ton fichier unique, tu économises beaucoup de ressources.

Sur mon WWW, le PageSpeed doit être de l'ordre de 92-93 sur la page d'accueil (ça dépend des jours d'ailleurs...) et mieux si on passe en "content only". La plupart des ralentissements ne sont pas dû au code, mais aux logiciels externes, en particulier openX pour les pubs et ... Google (7 erreurs sur 10)!!!

J'ai également optimisé un osCommerce et, pour ces deux sites, le rythme de fréquentation de GoogleBot mais aussi de BingBot a augmenté. Ce ne constitue pas une règle, mais c'est probablement un bienfait.

 

Je reviens sur une partie de ton post :

J'ai l'impression que ta question, finalement, revient à demander si "ça vaut le coup" ?

Pour répondre : dis-toi qu'une grande quantité (majorité ?) de sites se passent très bien de ces optimisations.

Cependant il y'a plusieurs avantages à optimiser son site pour le chargement :

• Confort utilisateur : tes visiteurs attendront moins, et apprécieront + la navigation sur ton/tes site(s). "Accessoirement", ça permet d'améliorer la conversion, le nombre de pages vues etc. (d'une manière générale, l'expérience utilisateur)
• Ressources serveur : si tu es sur un hébergement mutualisé, tu pourras y rester + longtemps avant de devoir passer à un dédié

Il y'a également l'aspect SEO/référencement, car Google a annoncé assez récemment qu'il prendrait désormais en compte le temps de chargement des pages (mais à mon avis, ce critère reste encore assez... marginal et ne doit pas peser bien lourd dans la balance).

En bref, tout dépend des ambitions que tu as et de la qualité de l'expérience utilisateur que tu souhaites offrir à tes visiteurs.

 

A noter que Google a proposé un projet / s'est lancé dans le développement d'une solution permettant de "grouper" tous les éléments d'un site (css, js, html et même peut être images, je ne me souviens plus) en 1 seul fichier afin d'accélérer le chargement des sites (je n'ai plus le nom de la solution ni de liens).
Le soucis c'est que les navigateurs ne sont pas prêts.

 

Perso, j'ai viré Addthis définitivement de partout (et tous mes sites) : trop lent, beaucoup trop lent.

 

Surtout, AddThis, ça sert à quoi ?
Il est possible de proposer les mêmes fonctions en interne, non ?

 

Parmis les choses qui ralentissent le plus les sites c'est tout ce qui est script "externe" (addthis, tout ce qui est "bouton facebook/twitter" share, google adsense/analytics).
Pour les Share de facebook, plutôt que d'utiliser les trucs tout fait facebook, recodez-le vous même, pour addthis, même principe (même si leur bouton d'origine est plutôt bien fait).
Pour tes images, qui ont des tailles changeante "automatiquement" tu peux utiliser la fonction php "getimagesize".
Par contre je te conseille de la mettre en cache car elle est assez "longue" (comparé à rien bien entendu).
Pour tes CSS "compressé", tu en fais un qui est "cp-css.cs" qui est celui compressé, toi tu taffs sur le css.css, pareil pour les JS.
Là où tu peux gagner pas mal aussi c'est en compressant tes images (sans pertes), ça peut vite faire gagner pas mal.
L'une des énormes améliorations faisable c'est les sprites CSS (bon par contre ça peut être très chiant à mettre en place).
Là dessus sur un site sur lequel j'ai passé on est passé d'une centaine de requêtes HTTP pour afficher la page d'accueil à une dizaine. Facebook l'utilise très très bien pour les "discussions instantanées".

 

Je pense que tu parles de Ctrl + R ?

Je ne te parle pas de resize, mais bien de l'affichage du height/width. Par contre cette fonction (getimagesize) demande à PHP de scanner ton image (donc si elle est lourde ça bouffe un peu de la RAM pour récupérer 2 valeurs (en plus des entiers)).
Pour ton import dans ton pannel d'admin, si tu stocks en DB l'URL de tes images, tu peux regarder pour stocker leurs tailles, ça pourrait être pas mal.

et

Normal, perso sur mon PC, charger le carousel facebook me prends au moins 2s.
Ce carousel fait appel à une dizaine de javascript hébergés chez facebook (et quelques CSS).
Ca peut se scripter (pas forcément aussi bien) facilement avec la graph API de facebook, donc après une ptite mise en cache html et zou. Après la question est "est-ce que ça apporte réellement quelque chose ?"

Bon courage en tout cas

Pour me la péter (c'est mon www)

 

@fanfl : pour les images gérées en CSS, voici un exemple sur mon WWW : -http://www.aqua-portail.com/static/l3.png (en plus, c'est mis sur un site/serveur en static = pas de cookie de transaction). Comme tu peux le constater, c'est assez hétéroclite : des images pour les réseaux sociaux, un bout d'image pour l'inscription, des boutons gauche droite, une loupe, etc...

En fait toutes ces images regroupées en une seule sont facilement exploitables en css avec de simples calculs de positions.

Dans l'image en lien, il y a 12 images exploitées via CCS... un gain énorme.

A noter : malgré l'exploitation d'un site façon CMS (basé sur Xoops au départ), je parviens à un page-speed de 96 en page interne... comme quoi, on peut facilement arriver à quelques résultats, y compris sur un site très étendu.

 

Dans ce cas là tu dois "versionner" tes CSS:
fichier.css?v=100
fichier.css?v=120

Ca on est d'accord, c'est "contraire" à pagespeed, mais ça sert à ça
Tu peux aussi frauder avec un rewrit :
/css/100/fichier.css
/css/120/fichier.css
Sinon, tout simplement le renommer