Consigne google et w3c

Bonjour à tous,

Je me tourne vers vous afin d'obtenir vos précieux conseils. Je suis noté 83/100 en vitesse mobile, et j'aimerais pouvoir obtenir une meilleur note que ça - si ça en vaut vraiment la peine.
Les erreurs signalé :
- Eliminer les code js et css au dessus de la ligne de flottaison => 2fichier css (aucun js)
- Mise en cache navigateur => script gg
- Reduire la taille des ressources => script gg

Pour les deux derniers, je ne peux visiblement rien faire (a part enlever la pub, ce qui ne m'est pas possible).
Dans le premier cas, gg préconise de mettre les appels en bas de page et de mettre dans le html que le code correspondant à ce qu'il y a au dessus de la ligne de flottaison.

Dans mon cas, mettre le code qui concerne le dessus de la ligne de flottaison dans le code html - est de la pure co***rie dans le sens ou la maintenance du site va s'en trouver beaucoup plus compliquer à gérer (pas impossible certes). Il me reste la solution de les appeler en bas de page... l'ennuie c'est qu'il me semble que ce n'est pas valide w3c. De plus google annonce 2fichier. En réalité j'en ai qu'un dans lequel j'appel effectivement un autre fichier css avec @import , le tout minifier!

Question : comment puis-je optimiser ça ?

Bonjour,

Ta question est intéressante et ce débat risque de l'être tout autant

Pour résumer la situation :
1- Google est très friand du conseil "rendre inline les CSS au-dessus de la ligne de flottaison"
2- C'est effectivement très complexe à maintenir surtout si c'est fait à la main
3- Le "problème" c'est... que ça fonctionne vraiment.

En gros, c'est à toi de décider jusqu'où tu veux placer ton curseur entre la maintenance et l'optimisation de ton site (j'espère que ton objectif n'est pas "juste" d'atteindre une bonne note sur PageSpeed).

Quelques ressources pour étayer :
- Une conférence très intéressante de Patrick Hamann du Guardian qui explique comment la homepage du site du Guardian est parvenu à s'afficher en moins d'une seconde grâce à l'inline de CSS "critiques" : https://speakerdeck.com/patrickhamann/css-and-the-critical-path
- Une tâche Grunt pour automatiser les CSS "critiques" sur ses pages (je l'ai employée sur mon site perso www.goetter.fr si tu veux décortiquer) : https://www.npmjs.com/package/grunt-critical

Bon dimanche
Modifié par Raphael (26 Apr 2015 - 19:43)

Bonjour Raphael,

Je te remercie de m'avoir accordé de ton temps pour répondre à ma question.

Pour ce qui est du curseur, bien que les exigences google doivent être respecté puisqu'il correspond encore à plus de 80% de mon traffic, je n'ai pas non plus envie de tomber dans l'extrême. Ma limite s'arrête au moment où les optimisations viennent perturber - soit mon travail, soit mes visiteurs.
En ce qui concerne mon travail, je suis toujour prête à pousser plus loin - c'est comme ça qu'on apprend.

Aussi j'ai regardé avec beaucoup d'attention la conférence donné par Patrick Hamann et je dois dire que je suis assez surprise du résultat. Je ne pensais pas qu'on pouvait avoir un tel gain ! Du coup, dès que j'ai un moment je lance un test sur mon site.