[MVC] Chargement de CDN's

gtbuilder
PHP

Bonjour,

J'ai une question assez essentiel puisqu'elle me permettrait de gagner en temps de chargement !

Ce que je fais

Actuellement j'ai une architecture MVCS en PHP et sur chacune de mes pages je charge mes librairies.

    <!-- CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Pacifico|Nunito|Overlock" rel="stylesheet">

    <!-- Library -->
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Ce que je veux

Je me demande s'il n'y a pas une solution pour charger les librairies une fois (à la configuration du site par exemple -> première connection). Afin que l'utilisateur n'ai pas à recharger le tout à chaque page ?

Merci !

5 réponses

yanis-git
Réponse acceptée

Les systèmes de cache (navigateur ici mais c'est pareil partout) fonctionne bêtement par système clé valeur, dans le cas d'asset à charger par le navigateur, la clé c'est l'url complète, la valeur c'est le contenu.

Si tu as le même contenu (ici font depuis un domaine cdn.bootstrap.com/font.woff et cdn.fontawesome.com/font.woff) mais pas la même url (Comprendre clé). Le navigateur ne sera pas que c'est le même contenu, il chargera donc les deux.

Mehdikacim

Tu peux te pencher sur un tuto de grafikart à fait : Turbolinks

Balsakup

Salut, je vais t'expliquer à quoi sert un CDN.

Les assets sont chargés que si elles ne sont pas mise en cache sur la navigateur du client, l'utilisation de CDN permet d'optimiser l'importation des assets.

Si un client a déjà chargé l'asset d'un site qui est hébergé sur un CDN, si cet asset est aussi présent sur un autre site qu'il visite, il n'aura pas besoin de le charger.

Exemple

  • Client 1 visite le site toto.fr, dessus il charge pour la première fois //cdn1.feuilledestyle.fr/css.css et la met en cache
  • Client 1 visite après le site tata.fr, et tata.fr utilise aussi la feuille //cdn1.feuilledestyle.fr/css.css, vue que Client 1 a déjà cette feuille de style en cache dans son navigateur, Client 1 n'a pas besoin de la charger.
Mehdikacim

@Balsakup +1

gtbuilder
Auteur

D'accord merci ! Mais comment s'explique que je chargeais par erreur deux fois un font awesome venant pas du même site un de bootstrap et l'autre de font awesome lui même. Quant je lançais la page 2 grosses secondes, je regarde network (google chrome) et là je vois que le cdn mettait 1 grosse seconde.. je l'ai supprimé (le doublon) et ça va beaucoup plus vite :o