Comment charger du css asynchrone sans javascript ?

Consultez la formation SEO spéciale Wordpress
par WebRankInfo / Ranking Metrics

ortolojf
WRInaute accro
WRInaute accro
 
Messages: 2653
Enregistré le: 14 Aoû 2002

Comment charger du css asynchrone sans javascript ?

Message le Mar Mai 16, 2017 21:48

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.

Drew
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 485
Enregistré le: 2 Juil 2015

Re: Comment charger du css asynchrone sans javascript ?

Message le Mer Mai 17, 2017 12:43

Salut,

Question intéressante, je recherche aussi ce genre de possibilité.

Mon code actuel :
Code: Tout sélectionner
</footer>
<link rel="stylesheet" href="style/style.css">
<script src="js/jquery.js"></script>
</body>
</html>

Pour Google il y a donc une alerte de type Éliminer les codes CSS qui bloquent l'affichage du contenu au-dessus de la ligne de flottaison.

rick38
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 469
Enregistré le: 23 Fév 2013

Re: Comment charger du css asynchrone sans javascript ?

Message le Jeu Mai 18, 2017 10:15

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.

Drew
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 485
Enregistré le: 2 Juil 2015

Re: Comment charger du css asynchrone sans javascript ?

Message le Jeu Mai 18, 2017 10:33

Ok je comprends l'idée, et cela me semble pas mal de travaille pour pas grand chose (biensur, je parle pour mon site qui charge plutôt rapidement).

En tout cas merci rick38 pour ce lien.


spout
WRInaute accro
WRInaute accro
 
Messages: 8335
Enregistré le: 14 Mai 2003

Re: Comment charger du css asynchrone sans javascript ?

Message le Jeu Mai 18, 2017 10:38

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

Drew
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 485
Enregistré le: 2 Juil 2015

Re: Comment charger du css asynchrone sans javascript ?

Message le Jeu Mai 18, 2017 12:26

Interessant ce texte sur l'explication de l'effet. Il y a t'il un interet en terme de performance ?

Est-ce normalisé par exemple avec W3C ?

ortolojf
WRInaute accro
WRInaute accro
 
Messages: 2653
Enregistré le: 14 Aoû 2002

Re: Comment charger du css asynchrone sans javascript ?

Message le Jeu Mai 18, 2017 14:58

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.

Drew
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 485
Enregistré le: 2 Juil 2015

Re: Comment charger du css asynchrone sans javascript ?

Message le Jeu Mai 18, 2017 19:47

Je me suis fait un module de Shop automatique pour jeu en ligne, j'ai longtemps utilisé PayPal puis j'ai laché pour la lourdeur de l'IPN pour passer par Stripe et c'est tellement plus simple et plus pratique, que se soit pour l'admin que pour les utilisateurs...

noren
WRInaute accro
WRInaute accro
 
Messages: 2872
Enregistré le: 8 Avr 2011

Re: Comment charger du css asynchrone sans javascript ?

Message le Ven Mai 19, 2017 10:40

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
WRInaute accro
WRInaute accro
 
Messages: 8335
Enregistré le: 14 Mai 2003

Re: Comment charger du css asynchrone sans javascript ?

Message le Ven Mai 19, 2017 11:01

@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
WRInaute accro
WRInaute accro
 
Messages: 2872
Enregistré le: 8 Avr 2011

Re: Comment charger du css asynchrone sans javascript ?

Message le Ven Mai 19, 2017 11:07

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
WRInaute accro
WRInaute accro
 
Messages: 2653
Enregistré le: 14 Aoû 2002

Re: Comment charger du css asynchrone sans javascript ?

Message le Ven Mai 19, 2017 11:11

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
WRInaute accro
WRInaute accro
 
Messages: 2872
Enregistré le: 8 Avr 2011

Re: Comment charger du css asynchrone sans javascript ?

Message le Ven Mai 19, 2017 11:15

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

Drew
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 485
Enregistré le: 2 Juil 2015

Re: Comment charger du css asynchrone sans javascript ?

Message le Ven Mai 19, 2017 11:28

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

Ce n'est pas totalement vrai.

- https://validator.w3.org/unicorn/check?ucn_uri=https%3A%2F%2Ft4c-rebir ... nformance#
- https://html5.validator.nu/?doc=https%3A%2F%2Ft4c-rebirth.com%2F


Je dev mon site en full W3C et tout mes CSS (et JS) sont chargés en fin de body, aucun problème de validation W3C en html5.1 et css3.
Le site fonctionne sur Opera, Chrome, Firefox, Edge, browser Android 4, etc.



Pour l'explication : https://blog.lesieur.name/utiliser-la-balise-link-dans-la-balise-body/


spout
WRInaute accro
WRInaute accro
 
Messages: 8335
Enregistré le: 14 Mai 2003

Re: Comment charger du css asynchrone sans javascript ?

Message le Ven Mai 19, 2017 12:11

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.
Modifié en dernier par spout le Ven Mai 19, 2017 12:19, modifié 2 fois.

Drew
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 485
Enregistré le: 2 Juil 2015

Re: Comment charger du css asynchrone sans javascript ?

Message le Ven Mai 19, 2017 12:16

La même, avant html5.* je faisais uniquement du Strict.


Formation recommandée sur ce thème :

Formation SEO spéciale Wordpress : apprenez à optimiser le référencement naturel d'un site fait avec Wordpress... Formation Ranking Metrics animée par un expert SEO / Wordpress.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.

Lectures recommandées sur ce thème :