Link rel="preload"

Discussion dans 'Débuter en référencement' créé par saluts92, 15 Janvier 2021.

  1. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    Je suis passé un peu à coté de rel="preload" pour la balise LINK, et je souhaite le mettre en place pour mes fichier CSS et JQUERY

    1/ je n'arrive pas à savoir s'il y a un réel gain de chargement (parallélisme avec le html, ..) ou s'il s'agit simplement de priorisation des chargements

    2/ concernant la syntaxe certain (dont WRI) rajoute onload="this.onload=null;this.rel='stylesheet'" dans la balise LINK et d'autres non. Est ce obligatoire ? que se passe t-il si on le met pas ?

    D'avance merci
     
    nicodak apprécie ceci.
  2. nicodak
    nicodak WRInaute discret
    Inscrit:
    21 Octobre 2020
    Messages:
    77
    J'aime reçus:
    23
    Très intéressant.
     
  3. aMoN12
    aMoN12 Nouveau WRInaute
    Inscrit:
    12 Octobre 2020
    Messages:
    7
    J'aime reçus:
    0
    Hello, non ce n'est pas obligatoire.

    Cela permet juste de charger des fichiers CSS de manière asynchrone afin que le rendu de la page ne soit pas bloqué pendant le chargement de la feuille de style, je l'utilise sur mes sites (no WP).
     
  4. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    Ok mais alors à quoi sert d'utiliser "preload" si le "onload" le charge après le chargement de la page ?
     
  5. aMoN12
    aMoN12 Nouveau WRInaute
    Inscrit:
    12 Octobre 2020
    Messages:
    7
    J'aime reçus:
    0
    link rel = "preload" as = "style" appelle la feuille de style de manière asynchrone.

    A ne pas mélanger avec l''attribut onload qui, dans le lien, permet au CSS d'être traité une fois le chargement terminé.

    onload=null : En "annulant" le gestionnaire onload une fois qu'il est utilisé, certains navigateurs évitent de le rappeler lors du changement de l'attribut rel.

    En général on utilise un <noscript > juste après comme une solution de secours pour les navigateurs qui n'exécutent pas JavaScript.

    ;)
     
  6. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    OK, mais que se passe t-il si on ne met pas le onload stp ?
     
  7. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    577
    J'aime reçus:
    75
    La page peut être affichée une fois la CSS chargée. Comme si tu n'avais pas preload, en fait.

    Link rel=preload sur une CSS qui est présente directement en balise link dans le HTML ne sert à rien, les feuilles de styles étant déjà des ressources avec une priorité haute et le navigateur pouvant les détecter au même moment qu'il détecte les preload.

    Ce à quoi sert preload dans le HTML, c'est à indiquer au navigateur des sources qu'il ne peut pas découvrir immédiatement dans une première lecture du HTML. Par exemple, un fichier de police de caractères qui est dans une CSS externe : normalement le navigateur devrait lire la CSS, puis la parser pour découvrir qu'il aura besoin de la police et démarrer son téléchargement.
    Si tu as mis la police en preload, elle aura commencé son chargement dès le parsing du HTML.

    Preload sert également à donner une haute priorité à des ressources qui normalement ont une priorité basse, notamment les background-image. Si ta page a un header avec une telle image et qu'elle est importante, tu peux la mettre en preload pour accélérer son chargement.

    Une (ou des) ressource en preload peut aussi être indiquée en header HTTP, ce qui active le server push sur un serveur supportant HTTP2 (qui n'est pas trop ancien, en somme).
    Par exemple avec Apache : https://httpd.apache.org/docs/2.4/fr/howto/http2.html#push

    Dans ce cas, les ressources sont directement envoyées au navigateur après le HTML sans qu'il ait demandé quoi que ce soit, et il arrêtera les transferts s'il n'a pas besoin des dites ressources. C'est à manier avec précaution et seulement si on sait ce qu'on fait, et ça demande de faire des tests avant de mettre en production. Bien utilisé, ça permet d'améliorer les performances. Utilisé sans trop comprendre comment ça marche, ça a plutôt tendance à détériorer les perfs.
     
Chargement...
Similar Threads - Link rel=preload Forum Date
Ou acheter des Backlinks en 2021? Netlinking, backlinks, liens et redirections 2 Février 2021
Backlinks : tout refaire, désavouer ou passer en nofollow ? Netlinking, backlinks, liens et redirections 25 Janvier 2021
Comment référencer un site à l'international anglais grâce au netlinking ? Débuter en référencement 11 Janvier 2021
Vos meilleures plateformes netlinking anglais ?! Référencement international (langues, pays) 10 Janvier 2021
Backlinks plateforme netlinking Netlinking, backlinks, liens et redirections 8 Janvier 2021
SEO, backlinks, netlinking Demandes d'avis et de conseils sur vos sites 3 Janvier 2021
Plateformes de netlinking pour le marché italien Référencement international (langues, pays) 22 Décembre 2020
Avoir des backlinks ou citation de la marque Netlinking, backlinks, liens et redirections 18 Décembre 2020
Liens dans les commentaires + backlinks Netlinking, backlinks, liens et redirections 30 Novembre 2020
sitelink avec accents dans le nom de recherche dans google Référencement Google 27 Novembre 2020