1. Bienvenue sur le nouveau forum WebRankInfo ! Si vous avez envie d'en parler, c'est ici :-)
    Rejeter la notice

Comment charger du css asynchrone sans javascript ?

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par ortolojf, 16 Mai 2017.

  1. ortolojf

    ortolojf Nouveau WRInaute

    Inscrit:
    14 Août 2002
    Messages:
    2 754
    J'aime reçus:
    0
    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.
     
  2. Drew

    Drew Nouveau WRInaute

    Inscrit:
    2 Juillet 2015
    Messages:
    560
    J'aime reçus:
    2
    Salut,

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

    Mon code actuel :
    Code:
    </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.
     
  3. rick38

    rick38 Nouveau WRInaute

    Inscrit:
    23 Février 2013
    Messages:
    533
    J'aime reçus:
    0
  4. Drew

    Drew Nouveau WRInaute

    Inscrit:
    2 Juillet 2015
    Messages:
    560
    J'aime reçus:
    2
    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.
     
  5. spout

    spout Nouveau WRInaute

    Inscrit:
    14 Mai 2003
    Messages:
    8 656
    J'aime reçus:
    1
    Mettre le CSS dans du JS (oui oui vous ne rêvez pas) via Webpack.
    Par contre +1 pour l'effet FOUC.
     
  6. Drew

    Drew Nouveau WRInaute

    Inscrit:
    2 Juillet 2015
    Messages:
    560
    J'aime reçus:
    2
    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 ?
     
  7. ortolojf

    ortolojf Nouveau WRInaute

    Inscrit:
    14 Août 2002
    Messages:
    2 754
    J'aime reçus:
    0
    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.
     
  8. Drew

    Drew Nouveau WRInaute

    Inscrit:
    2 Juillet 2015
    Messages:
    560
    J'aime reçus:
    2
    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...
     
  9. noren

    noren Nouveau WRInaute

    Inscrit:
    8 Avril 2011
    Messages:
    2 918
    J'aime reçus:
    0
    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 ?
     
  10. spout

    spout Nouveau WRInaute

    Inscrit:
    14 Mai 2003
    Messages:
    8 656
    J'aime reçus:
    1
    @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
    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.
     
  11. noren

    noren Nouveau WRInaute

    Inscrit:
    8 Avril 2011
    Messages:
    2 918
    J'aime reçus:
    0
    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:
     
  12. ortolojf

    ortolojf Nouveau WRInaute

    Inscrit:
    14 Août 2002
    Messages:
    2 754
    J'aime reçus:
    0
    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.
     
  13. noren

    noren Nouveau WRInaute

    Inscrit:
    8 Avril 2011
    Messages:
    2 918
    J'aime reçus:
    0
    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
     
  14. Drew

    Drew Nouveau WRInaute

    Inscrit:
    2 Juillet 2015
    Messages:
    560
    J'aime reçus:
    2
    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/
     
  15. spout

    spout Nouveau WRInaute

    Inscrit:
    14 Mai 2003
    Messages:
    8 656
    J'aime reçus:
    1
    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
     
  16. Drew

    Drew Nouveau WRInaute

    Inscrit:
    2 Juillet 2015
    Messages:
    560
    J'aime reçus:
    2
    La même, avant html5.* je faisais uniquement du Strict.