Comment charger du css asynchrone sans javascript ?

ortolojf · 16 Mai 2017

Bonjour

Je vais enfin me mettre à convertir mon site en mode AMP ( sans javascript ).

Faut-il aussi charger le script css en mode asynchrone ?

Si oui, comment sans Javascript ?

Je prend le train en marche, j'espère que ce n'est pas trop tard pour Google ...

Super merci pour vos réponses.

Amicalement et respectueusement.

rick38 · 18 Mai 2017

Google explique :

https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

Mettre du css inline dans le <head> et charger le reste dans le body avec du javascript.
C'est un gros travail pour éviter l'effet flash par contre.

spout · 18 Mai 2017

Mettre le CSS dans du JS (oui oui vous ne rêvez pas) via Webpack.
Par contre +1 pour l'effet FOUC.

ortolojf · 18 Mai 2017

Bonjour

J'ai fait celà, j'ai mis ( dans toutes les pages de mon site ), les css inline dans le <head>, et le script css proprement dit, avec du javascript en fin de body.

Mais, je veux éviter le javascript, pour être compatible AMP.

Y a -t-il ( en mode AMP ), d'autres solutions que le Javascript ?

J'ai probablement dit encore un cnn..rie, puisque AMP c'est rien que du javascript ?

Pour l'instant, je suis occupé à ce module de paiement Paypal pour mon site partenaire.

Merci beaucoup beaucoup de vos réponses.

Respectueusement.

noren · 19 Mai 2017

J'ai pas compris l'idée de mettre du CSS dans du JS. Ca ne revient pas au même de mettre le chargement de son css en fin de body ? dans les 2 cas on aura l'effet FOUC non ?

spout · 19 Mai 2017

@noren: le tag <link> doit être dans le <head>, donc ce n'est pas valide w3c.

https://developer.mozilla.org/fr/docs/Web/HTML/Element/link

Parents autorisés: Tout élément qui accepte des éléments de métadonnées. Si l'attribut itemprop est présent, tout élément qui accepte du contenu phrasé.

https://developer.mozilla.org/fr/docs/Web/HTML/Element#Métadonnées_du_document

Même pendant un moment, si on mettais le JS et le CSS après le </html>, on avait une bonne note PageSpeed :mrgreen:

En effet, en fin de body ou en JS, l'effet FOUC se produira.

noren · 19 Mai 2017

Ah en effet merci pour la précision, j'avais pas pensé à ça (généralement je met que du JS en bas de page). Dans tous les cas est-ce la peine de vraiment se faire ch*er pour ça ? Il faut surtout alléger son CSS dans le head. Et pour le JS on peut toujours le scinder en 2 fichiers. Suffit de mettre dans le head uniquement le JS qui doit être opérationnel le plus vite possible. Tous le JS n'est pas forcément prioritaire.

En tout cas je suis vraiment pas fan de cet effet FOUC. Ca peut "stresser" les visiteurs :mrgreen:

ortolojf · 19 Mai 2017

Bonjour

En fait, comme je vais prochainement examiner la migration de mon site à l'AMP de Google, est-ce que je suis obligé de mettre les css sans javascript ?

Amicalement.

noren · 19 Mai 2017

Alors c'est pas très jojo, mais si tes pages sont très simplifiées, ton css également non ? par conséquent est-il envisageable de le mettre directement dans ton script plutôt que dans un fichier css ?

PS : je tiens à préciser que je ne connais pas du tout les problématiques associées aux pages AMP

spout · 19 Mai 2017

Je ne savais pas que c'était valide en 5.1, me suis tjs référé à 5.0 et avant je faisais du XHTML Strict.

Edit: dans les commentaires en bas, il y en a un qui dit que c'est faux.
Edit 2: il a raison, c'est FAUX: https://www.w3.org/TR/html51/document-metadata.html#the-link-element

If the rel attribute is used, the element is restricted to the head element.