Nous aimons les petits outils et techniques utiles pour aider les gens à faire leur travail mieux et plus rapidement. Aujourd'hui, nous aimerions braquer les projecteurs sur un petit assistant qui aide à repérer facilement les goulots d'étranglement de performances courants : ct.css.
Il existe de nombreuses façons de détecter les goulots d'étranglement des performances et d'auditer CSS. Nous pouvons examiner les goulots d'étranglement de performances courants et la complexité des feuilles de style, la façon dont nous chargeons les ressources et l'ordre dans lequel cela se produit.
Un moyen utile de repérer facilement les problèmes courants consiste à utiliser une sorte de diagnostic de performances. CSS — une feuille de style dédiée qui met en évidence les problèmes et les erreurs potentiels. aide qui l'aide à repérer facilement les goulots d'étranglement de performance courants. Et cela est principalement lié à l'ordre dans lequel les actifs sont chargés dans .
Comme le dit Harry,
«Je passe beaucoup de temps à parcourir les balises des clients
pour m'assurer que tout s'y trouve. est dans la meilleure forme possible. Il y a beaucoup de règles complexes et souvent contradictoires qui constituent de « bonnes »balises, et tout faire des références croisées peut vite devenir difficile à manier, alors pour me faciliter la vie, j'ai développé ct.css – un façon rapide et sale de voir à l'intérieur de votre. "
ct.css est un petit extrait de diagnostic, nommé d'après les scans de tomodensitométrie (CT), qui expose les problèmes de performances potentiels dans les balises de votre page , et disparaîtra dès que vous les aurez corrigés.
Harry a mis toutes les connaissances qu'il a apprises de son travail de performance dans un ordre parfait et l'outil expose certains des problèmes qui résultent souvent d'une disposition sous-optimale des balises .
Avec le bookmarklet dans la barre d'outils du navigateur, accédez au site Web de votre choix, cliquez ou activez le bookmarklet, et l'outil met en évidence des pointeurs utiles que vous pouvez vérifier lorsque vous travaillez autour des goulots d'étranglement des performances. Juste une petite aide pour rendre votre travail un peu plus facile et trouver tous ces problèmes cachés plus rapidement.
Si vous voulez juste jouer avec l'extrait, vous pouvez l'obtenir sur csswizardry.com/ct. Bon débogage à tous !
(vf, il)