Ma participation au Webperf-Contest 2010 - commentaires

Ma participation au Webperf-Contest 2010

Tout d'abord bravo pour toutes ces optimisations, c'est un article très instructif et rempli de bonnes pratiques (voir que des bonnes pratiques).

L'appel aux portions du menu via AJAX n'est en rien un facteur bloquant pour le SEO.

L'utilisation de ce genre de techniques est d'ailleurs conseillée pour des sites dont le nombre de pages est aussi important que celui de la FNAC, cela permet de développer la technique de « siloing », où les informations sont disponibles par grandes catégories sur un site et ainsi de favoriser une meilleure contextualité au sein des pages car les seuls liens présents dans la page sont ceux qui concernent directement la thématique ciblé par la page en cours de lecture.

– La mise en avant du contenu en premier via le gabarit proposé par Layout Gala,
– L'appel du footer qui contient des liens pas essentiels au SEO via AJAX,
– Et tout le travail d'optimisation des temps de chargement de la page

sont autant de facteurs positifs pour améliorer la capacité de positionnement d'une page, il n'y a donc ici aucuns facteurs bloquants au SEO à mon sens,

Bravo !

Ma participation au Webperf-Contest 2010

Merci pour la précision !

Ma participation au Webperf-Contest 2010

Non, la règle générale de regrouper tous les js en un seul fichier est bonne et c'est bien ça qu'il faut avoir pour objectif.

Mais dans le cas précis du concours, comme tout le reste de la page était optimisé et se chargeait rapidement, le chargement du fichier js unique est devenu limitant, et j'ai donc du le découper en deux. Cela dit c'est un cas extrême et le but était ici de gagner les dernières dizaines de millisecondes.

Je pense que dans un contexte de production j'aurai choisi de garder un seul fichier, car c'est tout de même plus robuste et maintenable, et c'était déjà très performant.

Ma participation au Webperf-Contest 2010

Super article.

Par contre ou m'avait persuadé que grouper les css et les js économisait des requêtes et donc c'était plus performant. En fait l'inverse est mieux à cause de la parallélisation des téléchargements par le navigateur. J'ai bien compris ?

Ma participation au Webperf-Contest 2010

Bravo Cédric, je crois que la communauté SPIP te reconnait bien là :-D (Ah mince, moi aussi je l'ai nommé :-X )

Pour le reste, c'était quelque peu osé en effet, de shunter le menu d'un point de vue SEO mais l'aternative proposée me parait à priori cohérente. Maintenant à voir dans la pratique sur un vrai site en prod.

Puis à voir la page à optimiser, c'était certainement plus justifié dans ce cadre que pour d'autres site minimisant au max le nombre de liens (pour mieux controller la répartition du « jus ») et pour lequel charger conditionellement un menu est pour le coup un non-sens.

Enfin bref, en tout cas merci pour les petits outils mentionnés par ce post, me voila pleins de nouveaux joujoux à tester :-)

Ma participation au Webperf-Contest 2010

Bravo en tout cas... car ces recherches semblent avoir bien porté leurs fruits !
« Fastest Onload & start render times » avec tout ça... Chapeau :)

Ma participation au Webperf-Contest 2010

En ce qui concerne le lazy-loading, il y a plusieurs choses à savoir :

le script généralement utilisé (sur owni que tu cites, mais d'autres media l'utilisent aussi), ne fonctionne plus correctement sur les navigateurs récents. Le résultat est donc que les images sont chargées dès le départ, puis enlevées, puis rechargées. On a donc au final tous les inconvénients cumulés.
il y a des variantes de réglages qui permettent de le rendre plus discret (notamment un seuil par rapport à la ligne de flottaison, pour anticiper le scrolling)
il est probablement plus adapté à de petites images qu'à de grandes dont l'absence se remarque plus nettement.

En ce qui concerne le statut d'indépendant, il donne la liberté de placer le curseur rentabilité/intérêt comme on le veut à un instant donné, et surtout d'organiser son temps de manière beaucoup plus souple. Cela m'a donc permis de consacrer des journées complètes sur le concours.

Tu as toutefois raison de rappeler que cela ne peut être permanent, évidemment, et qu'en moyenne on ne peut négliger totalement la rentabilité du temps.

Ma participation au Webperf-Contest 2010

Aaaah, le lazy loading et son détestable effet d'affichage des images à retardement ! Cet effet ne me semble pas gênant ici, alors que je le trouve insupportable sur d'autres sites et blogs (comme owni.fr). Sans doute son usage est-il plus adapté à des visuels de catalogue qu'à des contenus éditoriaux illustratifs. Intéressant.

Petite considération annexe : je ne suis pas d'accord avec ce que tu dis du statut d'indépendant, qui laisse entendre qu'on y ferait ce qui plaît sans se soucier de rentabiliser... C'est faux : indé et salarié ont pareillement besoin de bouffer ! On peut simplement considérer que tu as utilisé l'intégralité de ton temps de loisir à ce concours.

Merci d'avoir documenté ta participation.

Ma participation au Webperf-Contest 2010

merci Cédric pour les explications, et bonne chance pour la suite

Ma participation au Webperf-Contest 2010

Un grand merci pour ce post, vraiment très intéressant (je pense que c'est une des premières fois que je lis un post en bonne partie et avec grand intérêt).

Je vais pouvoir mettre en pratique quelques techniques fort intéressantes !

Encore merci.

Ma participation au Webperf-Contest 2010

Les gros menu déroulants ne font que proposer des liens directs redondants avec la colonne de navigation présente sur chaque page accessible depuis l'onglet visible. Ainsi la navigation des robots d'indexation n'est pas entravée de ce point de vue.

A contrario, en enlevant toute cette partie de HTML (8ko gzippé), j'ai fait fortement remonter le vrai contenu de la page dans le source, et cela le rend beaucoup plus accessible aux robots d'indexation, et lui donne plus de poids. C'est donc un plus pour le référencement, à mon sens.

En ce qui concerne l'iframe, il faut savoir que lorsque celle-ci n'est pas chargée, elle est remplacée par un lien alternatif vers le contenu qu'elle propose, ce qui permet là aussi aux robots d'indexation de retrouver leur contenu. Proposer du contenu dans une iframe est de toute façon un non sens, et elle n'a été conservée ici que pour respecter le règle du concours. Dans la vie réelle, on ferait tout pour s'en débarasser au profit d'une inclusion côté serveur.

Ma participation au Webperf-Contest 2010

je parle du menu et du iframe que vous avez sauté en les chargeant en ajax, c'est pas un jugement, ce n'est que mon avis :)

Ma participation au Webperf-Contest 2010

A quels aspects SEO pensez-vous ? vis à vis de quelles techniques ? Je ne suis pas entré ici dans le détail de chaque technique, mais on peut le faire (et j'ai essayé de renvoyer vers des articles plus complet quand c'était possible).

Ma participation au Webperf-Contest 2010

Merci pour ce post, il y a des techniques intéressantes que vous avez utilisé, mais malheureusement les aspects SEO sont pas pris en compte.

Ma participation au Webperf-Contest 2010

Merci beaucoup pour ce post... Je suis impressionné et émerveillé par le nombre de techniques possible pour optimiser une page. J'ai également hate de voir les résultats.

Ce concours m'a vraiment permis de re-découvrir le web :)

Bonne chance a toi.

Ma participation au Webperf-Contest 2010

Très interessant comme debrief, il faudrait que je fasse de même.

Mettre des versions de basses qualités des images avant de les remplacer par les versions complètes est une très bonne idée, ça me rappelle le principe des « Level of Details » utilisé en 3D/Jeux vidéos.

Idem pour servir une version non-Javascript (ou plutot : servir une version Javascript only sur laquelle tu peux t'éclater à coup de lazyload sans avoir peur de gacher l'experience de tes visiteurs sans JS).

Par contre la façon de charger la page par blocs (à la Facebook comme tu l'indiquais) je n'ai jamais fait, je m'interroge sur la complexité coté serveur pour automatiser une telle technique ?

Charger le JSON depuis le domaine principal (car les cookies y sont sans doute nécessaire), j'avais oublié ça, tu a raison de le préciser.

Sinon, il y a le fait de charger le contenu du menu principal en AJAX qui me semble « dangereux ». Bien qu'il ne soit accessible qu'avec JS comme tu l'indiques, en faisant ainsi tu le rends aussi complétement invisible aux moteurs de recherche. C'est un choix que je n'ai pas osé faire dans ma participation.

En tout cas, c'était très instructif. Merci aussi d'avoir repris CSSTidy, je participerai à son amélioration.