Outre tous les aspects liés au cache, à la minification des CSS, des fichiers javascript,… Il y souvent ces éléments méconnus ou auxquels on ne pense pas et dont j’aimerais vous parler. Je mettrai cet article à jour au fur et à mesure que je pense à des choses à vous partager.
Embarquez (embed, font-src) vos polices
Rien de pire que Google Font pour mettre en place vos typographies. Certes c’est pratique mais ça pose plein de problèmes : dépendance, délais d’affichage,…
À la place utilisez plutôt le @font-src dans votre CSS. Mais comment aller chercher les typographies sur Google-Font sachant qu’il ne vous permet de télécharger que des fichiers TTF pas du tout utiles pour du web qui aurait plus besoin du WOFF2 ou WOFF.
J’ai la solution pour vous : Google Webfonts Helper
Un outil magique qui va vous faire un paquet à télécharger avec les fichiers qui vont bien tout en vous indiquant le code css à mettre. Ajoutez-y juste un « font-display: swap; » et vous êtes prêt!
Source de la manipulation complète avec captures
Fouc, chargement et affichage indésirable avant vos animations
SI vous utilisez des frameworks d’animations comme GSAP, vous avez sans doute eu la désagréable surprise d’avoir des affichages de vos animations qui se chargent deux fois. Votre framework n’est pas en cause, c’est uniquement votre navigateur qui exécute les choses comme vous lui indiquez dans le code de votre page web notamment via le DOM.
Il faut en fait via votre CSS désactiver l’élément (visibility: hidden) et l’afficher ensuite grâce à votre framework. Tout en oubliant pas au passage une solution de sauvetage (visibility: visible) via la balise <noscript>.
Source de la manipulation pour GSAP et qui vous aidera pour d’autre frameworks.
Voilà, c’est tout pour le moment! N’hésitez pas à me soumettre vos trucs à vous.
Be First to Comment