Optimiser la vitesse de chargement d'une page web

Salut à tous,

Si l’on visite pour la première fois la page d’accueil de mon site web, le chargement complet prend en moyenne 910 ms.

Parmi ces 910 ms, le chargement d’une police d’écriture (fichier police.ttf, 431 KB) prend 570 ms en moyenne, c’est le fichier qui prend le plus de temps :

https://zestedesavoir.com/media/galleries/5280/f034046a-8ada-4e19-b1c2–43a538415004.png

Je que j’aimerais idéalement, c’est charger la police d’écriture uniquement si l’utilisateur ne la possède pas sur son ordinateur.

Mais je n’ai aucune idée de comment faire… je me disais qu’utiliser du JavaScript, ça revient à charger un fichier en plus et donc on se retrouve avec le même problème de temps de chargement…

Voici le code CSS de ma page web :

@font-face
{
    font-family:    one_policy;
    src:            url("police.ttf");
}

html
{
    background-color:   black;
    font-size:          22px;

    text-shadow:        2px 2px 3px #000;
    font-family:        one_policy;
}

body
{
    width:  80%;
    margin: auto;
}

.choix
{
    margin-left:    40px;
    margin-top:     50px;
}

a
{
    text-decoration:    none;
    text-shadow:        0px 0px 10px #fff;
}

Des idées pour optimiser la vitesse de chargement de ma page web ?

Merci d’avance

Pile poil ce que je recherchais comme fonctionnalité !

Merci de cette réponse expresse

EDIT : et ça a parfaitement fonctionné !

Pour l’image il y a la technique du fastloading (je n’ai pas les détails techniques en tête) l’idée est de remplacer toutes images par son double en version flou de l’image via l’utilisation de la compression jpg donc tu obtiens un jpg ultra-compressé qui pèse environ 5–9Ko.

Puis dans un deuxième css tu mets les vrais images.

Nan nan. Pour l’image, il vaut mieux utiliser JPEG 2000 avec un affichage progressif. 🐱

D’ailleurs, jpg n’est pas forcément le meilleur format, ça dépends de l’image. Aussi, si l’image n’est pas visible dès le début, tu peux essayé de mettre en place du lazy loading.

Ou comment tuer une mouche avec un fusil à pompe … 😺

Concernant les images, je les compresse en utilisant le site https://compressor.io qui me semble pas mal du tout.

Upload facile, qualité suffisante après compression, c’est parfait pour mon développement actuel.

J’ai lu un article récemment qui disait que la plus part des sites utilisent des trucs poubelles.

Je m’explique, par exemple tu vas lire un article de presse sur Le Parisien, tu dois charger les différentes polices, les différents styles, les trackers de pubs, les scripts JS / CSS, les images, le site en lui même, etc., pour au final lire un article de quelques octets, tu te retrouve à charger des Mo de données.

C’est comme si t’allais acheter ton pain, en prenant ta voiture, puis le bus, et le tram lol; alors la boulangerie est à 200m de chez toi.

C’est le nouveau web.

J’ai aussi cette impression. Il me semble que les sites les plus populaires sont concernés, comme jeuxvideo.com ou 7sur7.
Il est difficile de naviguer sur ces sites à cause des publicités envahissantes et des scripts en arrière-plan.

Je remercie des sites comme ZdS ou Wikipédia car ils sont respectueux de l’internaute. Pour le reste, je désactive Javascript et les images par défaut. La plupart du temps, cela me permet d’accéder quand même au contenu textuel recherché. Sinon, je mets des exceptions dans mon navigateur. Malgré tout, un bloqueur de script est indispensable pour une navigation confortable.

Regardez un genre de site complétement poubelle :

http://www.journaldesfemmes.fr/prenoms/recherche-bebe?sexe=1&popularite=4&origine=origine-3&page=2

Des centaines de chargement, pour avoir le résultat de base; les 30 prénoms; c’est franchement inutile et encombrant. Je ne comprendrai jamais le dév front/back de certaines boites les mecs ils doivent se shooter aux narcos, ce ,n’est possible sinon ^^.

Surtout le réseau JDF, CCM, JDN, etc. c’est l’un des pires.

Hummm : https://www.socketloop.com/references/golang-fmt-fprintf-function-examples

>_<"

Quel est le rapport ?

Exemple de site poubelle. La pub envahie l’écran et l’article n’est pas accessible tant qu’il détecte un bloqueur de pub.

On peut accéder à l’article si Javascript et les images sont désactivées.
J’utilise souvent cette astuce pour naviguer sur les nouveaux sites, même si dès fois cela ne fonctionne pas.

Avant je désactivais JS automatiquement et je réactivais au cas part cas. Mais on m’a trop souvent traité d’extrémiste … Du coup ben j’ai plus l’habitude de le faire.

Utiliser la User Agent String de Google Bot aussi ça marche souvent.