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

Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Mar Mai 16, 2017 22: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.
Haut
15 Réponses
Messages: 541

Enregistré le: 2 Juil 2015

Message le Mer Mai 17, 2017 13: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.
Haut
Messages: 507

Enregistré le: 23 Fév 2013

Message le Jeu Mai 18, 2017 11: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.
Haut
Messages: 541

Enregistré le: 2 Juil 2015

Message le Jeu Mai 18, 2017 11: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.
Haut
Messages: 8554

Enregistré le: 14 Mai 2003

Message le Jeu Mai 18, 2017 11:38

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

Enregistré le: 2 Juil 2015

Message le Jeu Mai 18, 2017 13: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 ?
Haut
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Jeu Mai 18, 2017 15: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.
Haut
Messages: 541

Enregistré le: 2 Juil 2015

Message le Jeu Mai 18, 2017 20: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...
Haut
Messages: 2911

Enregistré le: 8 Avr 2011

Message le Ven Mai 19, 2017 11: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 ?
Haut
Messages: 8554

Enregistré le: 14 Mai 2003

Message le Ven Mai 19, 2017 12: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.
Haut
Messages: 2911

Enregistré le: 8 Avr 2011

Message le Ven Mai 19, 2017 12: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:
Haut
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Ven Mai 19, 2017 12: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.
Haut
Messages: 2911

Enregistré le: 8 Avr 2011

Message le Ven Mai 19, 2017 12: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
Haut
Messages: 541

Enregistré le: 2 Juil 2015

Message le Ven Mai 19, 2017 12: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/
Haut
Messages: 8554

Enregistré le: 14 Mai 2003

Message le Ven Mai 19, 2017 13: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 13:19, modifié 2 fois.
Haut
Messages: 541

Enregistré le: 2 Juil 2015

Message le Ven Mai 19, 2017 13:16

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

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.