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 WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    2 919
    J'aime reçus:
    12
    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. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 291
    J'aime reçus:
    162
  3. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 882
    J'aime reçus:
    263
    Mettre le CSS dans du JS (oui oui vous ne rêvez pas) via Webpack.
    Par contre +1 pour l'effet FOUC.
     
  4. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    2 919
    J'aime reçus:
    12
    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.
     
  5. noren
    noren WRInaute accro
    Inscrit:
    8 Avril 2011
    Messages:
    2 903
    J'aime reçus:
    14
    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 ?
     
  6. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 882
    J'aime reçus:
    263
    @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.
     
  7. noren
    noren WRInaute accro
    Inscrit:
    8 Avril 2011
    Messages:
    2 903
    J'aime reçus:
    14
    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:
     
  8. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    2 919
    J'aime reçus:
    12
    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.
     
  9. noren
    noren WRInaute accro
    Inscrit:
    8 Avril 2011
    Messages:
    2 903
    J'aime reçus:
    14
    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
     
  10. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 882
    J'aime reçus:
    263
    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
     
Chargement...
Similar Threads - charger css asynchrone Forum Date
Charger le contenu en priorité (HTML, CSS) Développement d'un site Web ou d'une appli mobile 20 Septembre 2010
Comment charger tarteaucitron de manière asynchrone ? Google Analytics 8 Mars 2018
télécharger une image avec php Développement d'un site Web ou d'une appli mobile 8 Février 2018
Alléger des pages trop lentes à charger Débuter en référencement 8 Mars 2017
Charger mes fonts via "fonts.gstatic.com" ou les héberger sois même ? Développement d'un site Web ou d'une appli mobile 21 Février 2017
Télécharger un fichier à partir d'un dédié Administration d'un site Web 30 Juillet 2016
Télécharger toutes les vidéos d'une chaîne Youtube ? Le café de WebRankInfo 5 Mai 2016
Avis pour amélioration (Télécharger vidéos Youtube) Demandes d'avis et de conseils sur vos sites 21 Mars 2016
Comment recharger seulement un script au lieu de toute la page ? Développement d'un site Web ou d'une appli mobile 11 Novembre 2014
Défaut d'affichage : Pas le temps de charger un fichier avant son affichage Développement d'un site Web ou d'une appli mobile 30 Mars 2014
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice