Je suis bloqué à 78/100 sur PageSpeed Insights

RiderFx3
PHP

Bonjour,

Je n'arrive pas à améliorer ma note mobile sur PageSpeed Insights.
Je suis à 98/100 en version Ordinateur, et bloqué à 78/100 en version mobile

La situation

J'ai utilisé Grunt pour minifier et regrouper mes fichiers pour que ça charge plus vite,
Et maintenant j'ai encore pas mal d'erreurs que j'arrive pas à corriger

Les points que j'arrive pas à corriger

Diffusez des éléments statiques grâce à des règles de cache efficaces 11 ressources trouvées
Diffusez des images aux formats nouvelle génération
Délai d'exécution de JavaScript Erreur
Envisagez de réduire le temps consacré à l'analyse, la compilation et l'exécution de JS. La livraison de charges utiles JS plus petites peut vous aider. En savoir plus.
Assurez-vous que le texte reste visible pendant le chargement des polices Web

Pour les polices, j'ai un fichier fourni par le graphiste, qui va chercher les polices en ligne sur le site Adobe, je pense que je perds beaucoup à cause de ça... Je vais faire le test de les télécharger. Mais en tout cas j'ai mis une deuxième police de secours qui devrait charger le temps que les autres se téléchargent non ?

html, body{
    font-family: proxima-nova, sans-serif;
}

Voici le lien pour ceux qui veulent suivre les erreurs en live.

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.baticlub.com%2F

Merci

3 réponses

RiderFx3
Auteur

Pour TypeKit :

J'ai ajouté font-display: swap; dans le CSS
TypeKit ne permet pas de défénir cette réègle au chargement du script donc j'ai du télécharger le CSSpour le modifier manuellement au lieu de laisser le script le charger.

Pour Font Awesome :
J'ai du charger le fichier CSS via un script JavaScript avec l'attribut defer.

<script defer type="text/javascript">
            var shared = {};
            shared.css = ["https://pro.fontawesome.com/releases/v5.10.2/css/all.css"];
            (function () {
                var container = document.querySelector('head');
                shared.css.forEach(function (href) {
                    var css = document.createElement('link');
                    css.href = href;
                    css.rel = 'stylesheet';
                    css.type = 'text/css';
                    document.getElementsByTagName('head')[0].appendChild(css);
                });
            })();
        </script>
Grégoire Puget

Hello,
Normalement la recommandation "Assurez-vous que le texte reste visible pendant le chargement des polices Web" est simple à corriger en mettant en place le font-display : swap. Je vois que cela n'est toujours pas corrigé sur ton site. Même avec Typekit.

Après, il y a d'autres points qui sont mis en avant sur ton site et notamment sur les images

  • L'utilisation de formats nouvelles générations, tes images ne sont sans doute pas assez compressées. Tu dois pouvoir faire mieux sur du jpg ou même passer à du WebP => article sur le sujet ici : Optimisation des images.
  • DIfférer le chargement des images hors écran=> La il faut mettre en place du Lazyloading. Y a plein de tutos sur le web, sans doute même ici en vidéo.
    Cela existe même en natif depuis peu, mais pas compatible avec tous les navigateurs. Il y a un article très intéressant pour pour gérer anciens et nouveaux navigateurs ici ( en anglais) => Lazyloading

Après, tu es ralenti par youtube, Analytics, Facebook, Goole Tag Manager...
Je supprimerais youtube sur la home et essaierai de mettre en place du defer et/ou du prefetch sur tous ces JS.

Bon courage à toi.

Defy

une chose aussi qui peut-être pas mal,. mais c'est uniquement si tu as un VPS ou un serveur dédié que tu vas pouvoir le faire, c'est activer Http 2. Ça va paralléliser le chargement des assets, js, Css, etc. et du coup augmente ta vitesse de chargement de ton site.

tu peux aussi utiliser les webworker pour mettre en cache toute les assets lors du 1er chargement et augmenter les suivant de manière significative.