Share
Nous savons tous qu'il y a d'innombrables raisons pour lesquelles les temps de chargement des pages Web montent en flèche, mais identifier le problème peut être coûteux en temps et en argent. Alors pourquoi gaspiller les efforts quand quelqu'un d'autre ou quelque chose d'autre peut faire tout le sale boulot pour vous?
Rencontrer YSlow de Yahoo, un analyseur de page Web gratuit pour Firefox.
YSlow a deux exigences:
YSlow se connecte à Firebug. Vous devez donc installer les modules complémentaires dans l’ordre indiqué ci-dessus avant de continuer..
Les concepteurs Web, les développeurs et les rédacteurs s'efforcent d'avoir le contenu le plus intéressant et le plus intéressant par rapport à leurs concurrents..
Vous avez peut-être passé des jours à perfectionner votre nouveau blog et vous êtes presque tombé de votre chaise avec enthousiasme lorsque vous le visionniez pour la première fois. Mais, après qu'un torrent de visiteurs a inondé votre site Web, vous constatez que les choses ne fonctionnent plus correctement. Sous pression, votre nouveau site Web pourrait réagir comme un Commadore 64.
Les outils d'analyse de site Web appartiennent généralement à deux catégories:
YSlow s'inscrit dans ce dernier. Il utilise des ensembles de règles prédéfinis pour évaluer les performances d'une page Web et des outils tiers (tels que Smush.it et JS Minifiers) pour vous aider à résoudre les incidents..
Il y a trois vues:
YSlow comprend six outils utiles: ceux-ci vont du test de code JavaScript à l'optimisation d'image en passant par Smush.It (une autre application Web gratuite de Yahoo). L'ensemble de l'application est encapsulé dans la fenêtre contextuelle de Firebug, que vous pouvez ouvrir et fermer à l'aide d'une icône très pratique dans la barre des tâches du navigateur..
Regardons de plus près la vue 'Grade'.
En prenant pour exemple la page d’accueil d’Envato, qui est un site à trafic relativement faible, nous constatons que le score de performance global est évalué à 74 sur 100, avec une note «C» jaune. Mais qu'est-ce que cela signifie vraiment? Après tout, la page Web s'affiche parfaitement dans le navigateur. Eh bien, nous devons examiner de plus près les règles à gauche de la vue pour comprendre cela..
Les règles sont divisées en catégories: contenu, cookies, CSS, images, JavaScript et serveur. Lorsque YSlow inspectait des éléments du DOM, il les notait sur un ensemble de règles prédéfini (dans ce cas, YSlow V2). Plus un élément est proche des règles, plus il marque. Une fois que tous les scores ont été rassemblés, la note finale a été attribuée..
Dans le cas d’Envato, toutes les règles de l’interface utilisateur ont obtenu un score élevé, mais les règles du serveur ont fonctionné moins efficacement. Cela a abaissé la note finale.
Heureusement, chaque règle explique où se situe le problème et fournit une explication détaillée sur la façon de résoudre le problème. Cette fonctionnalité apportera un énorme soulagement à quiconque découvre l'optimisation de sites Web..
Pour certains, certaines règles sont plus importantes que d'autres. YSlow vous fournit un ensemble de règles par défaut, mais vous permet également de basculer en mode "classique", "petit site ou blog" ou de créer le vôtre. Si vous ne vous souciez pas de l'utilisation de Content Delivery Networks, éditez simplement un jeu de règles et supprimez cette fonction. Cela ne pourrait vraiment pas être plus facile.
La vue des composants répertorie les éléments d'une analyse dans un tableau de données propre et extensible..
Bien que cette section propose une analyse plus approfondie, des données telles que la date d'expiration du fichier ou le temps de réponse peuvent être utiles pour comprendre les domaines problématiques. Si la compression GZIP est activée, vous pouvez voir la différence de taille de fichier ici..
Tout le monde aime un graphique. YSlow aussi.
La page de statistiques est un moyen simple et rapide de comprendre le poids total de vos requêtes HTTP. En termes simples, il existe deux graphiques: le cache vide et le cache apprêté. Ces graphiques décomposent votre site Web en HTML, JavaScript, images, etc. Les tailles de fichier de chacun sont ensuite affichées sous forme de segments. Cache vide représente la première visite du navigateur sur la page Web. Le cache principal indique les composants qui figureraient ou non dans le cache du navigateur lors de la prochaine visite. Propre, clair et efficace.
Enfin, nous avons des outils. Immédiatement, vous remarquerez un manque de spécificité vis-à-vis de la page Web analysée, mais ne vous y trompez pas. Chaque outil est un puissant gain de temps en termes de réduction, de réduction et de compression du contenu. Si vous connaissez le concept d’optimisation, vous avez peut-être déjà rencontré des outils similaires auparavant..
Lorsque vous réduisez les temps de chargement des pages, il est important de supprimer les espaces et les commentaires de vos documents et d'optimiser vos images..
Heureusement, ces outils effectuent tout le travail difficile pour vous, car cela vous mènera sans aucun doute jusque dans les profondeurs de la nuit. Pour la centième fois, aucune boisson énergisante ne vous empêchera de devenir fou.
Il y a huit outils en tout; couvrant chacun d'eux prendrait quelques articles. Donc, je vais me concentrer sur Yahoo! Smush.it comme exemple.
Yahoo! Smush.it est une petite application Web qui peut être utilisée avec YSlow ou directement depuis votre navigateur..
Smush.it est tout simplement un optimiseur d'image sans perte. YSlow télécharge pour vous les images, qui sont "effacées" et présentées dans un tableau où vous pouvez voir la nouvelle image, la taille et le pourcentage d'économie de compression..
Vous pouvez même conserver les fichiers dans la même structure de répertoires et les télécharger tous sous forme de fichier zip pratique..
Il existe de nombreuses applications gratuites avec des outils similaires, mais celles fournies avec YSlow sont un ajout apprécié..
Comme je l'ai mentionné plus tôt, le score de performance Envato pour YSlow est de 74 avec une note de C. Prenons un peu de temps pour analyser les résultats de YSlow et ce qui pourrait être fait pour améliorer le score final.
Voici les améliorations suggérées, en partant du haut:
Cette règle précise ensuite qu'il existe six scripts JavaScript externes et 17 images d'arrière-plan externes. Leur suggestion est de combiner les fichiers et d’utiliser des sprites CSS pour résoudre le problème..
La première chose à faire est de jeter un coup d’œil sur la vue Composants, et en particulier sur les fichiers JS..
Comme le montrent les URL, un seul fichier JavaScript est hébergé sur le même serveur que la page analysée. Ce fichier contient du code JavaScript personnalisé pour WordPress. Deux sont nécessaires pour JQuery et Google Analytics et les trois derniers proviennent de formspring.com..
Si les fichiers JavaScript étaient les miens, je pourrais envisager de combiner les fichiers JS applications.js et formspring personnalisés et de les héberger localement. Cependant, seul le fichier application.js semble être personnalisé. Donc, je ne veux vraiment pas jouer avec le travail de quelqu'un d'autre. Surtout que certains de ces fichiers manquent d'informations de licence / copyright.
L'utilisation de l'hébergement de Google pour jQuery est également considérée comme une bonne pratique. Toutefois, ils doivent mettre à jour leur version la plus récente de jQuery: 1.4.2.
Donc, dans ce cas, il est probablement préférable d’ignorer cette règle, car toute modification des méthodes actuelles pourrait entraîner des problèmes ultérieurs. Ma seule préoccupation réelle concerne le temps de réponse de deux des fichiers FormStack. À l'heure actuelle, ils parlent chacun plus de 360 ms pour répondre. Si cela continue, il peut être intéressant de trouver une méthode pour les héberger localement.
Ensuite, nous passons en revue les images. tous sont hébergés localement, répondent en moins de 40 ms et sont de taille relativement petite. Cela nous indique que, individuellement, ces fichiers sont déjà optimisés pour cette page. YSlow suggère de combiner ces images et d’utiliser des sprites CSS pour améliorer notre note..
Si vous n'êtes pas familier avec les sprites CSS, vous pouvez cliquer sur le lien "En savoir plus", qui vous mènera aux meilleures pratiques de Yahoo! pour accélérer la page de votre site Web..
Dans ce cas, en utilisant une image optimisée, nous devrions constater une amélioration du temps de réponse de l’image. Les sprites CSS fonctionnent en combinant vos images d’arrière-plan en une image, puis en utilisant CSS pour aligner cette image sur background-image et background-position. Le CSS utilisé n’a rien de spécial, il devrait donc être compatible avec tous les principaux navigateurs..
De nombreux sites Web attribueront la note F à cette règle, du fait que la configuration nécessite un peu de travail. cependant, les avantages en valent la peine. De plus, des services comme Amazon offrent un hébergement étonnamment bon marché. Tandis qu'Envato utilise absolument les CDN pour ses sites à fort trafic, comme Nettuts +, ils ont peut-être décidé que ce n'était pas nécessaire pour les sites à faible trafic.
Encore une fois, nous sommes confrontés à une règle qui concerne les requêtes HTTP. Les en-têtes Expires sont courants car ils permettent aux composants de pouvoir être mis en cache. Les composants mis en cache (images, JavaScript, etc.) permettent d'économiser du temps et de la bande passante pour les visites répétées d'une page Web. Donc, il vaut la peine d'implémenter des dates d'expiration pour votre contenu.
YSlow a trouvé 55 composants "sans date d'expiration très éloignée" après avoir analysé Envato.com. La plupart des composants sont des images d'arrière-plan. Nous savons dès la première suggestion, "Faire moins de requêtes HTTP", que nous pouvons utiliser des sprites CSS pour réduire le nombre d'images d'arrière-plan, améliorant ainsi automatiquement cette note..
La configuration des en-têtes "Expires" est généralement un processus simple et ne nécessite généralement qu'un ajout rapide à votre fichier .htaccess. Une fois appliqués, tous vos composants doivent maintenant avoir les en-têtes appropriés, expirés, sans aucune autre manipulation ou modification de fichier. Pour avoir un aperçu complet du travail avec votre fichier .htaccess et vos en-têtes, vous devez disposer d'un article. Plutôt que d’entrer dans les détails ici, j’ai inclus une série de liens utiles pour une lecture plus approfondie:
YSlow a trouvé une feuille de style en dehors de l'élément Head pour Envato. Heureusement, c'est la règle la plus simple à corriger. En gardant les feuilles de style en haut de votre page Web, vous augmentez automatiquement la vitesse de chargement de votre page Web. Une fois déplacé, YSlow devrait signaler une note A pour cette règle..
La suppression des espaces blancs inutilisés dans vos documents réduit la taille du document et augmente donc la vitesse de téléchargement du fichier. Comme je l’ai mentionné plus tôt, YSlow nous fournit un outil de minimisation afin que tout le travail acharné puisse être fait pour nous..
Allez dans la vue Outils et sélectionnez YUI CSS Compressor. En un clin d'œil, vos fichiers CSS sont minifiés et disponibles au téléchargement. Rapide, propre et simple.
Les ETags permettent de valider une version spécifique d'un composant de page Web (images, JavaScript, etc.). Ils travaillent avec le serveur Web pour faire correspondre le contenu mis en cache d'un navigateur au contenu du serveur Web. Malheureusement, YSlow a détecté deux ETags manquants pour les fichiers hébergés sur formspring.com. Pour cette raison, il serait peut-être préférable de suivre la suggestion de YSlow et de supprimer complètement les balises ETags. Cela peut être fait en ajoutant "FileETag aucun"dans votre fichier de configuration Apache. Vous devriez maintenant voir une amélioration de cette règle.
Il existe de nombreuses alternatives en matière d'analyse de site Web, et je ne serais pas surpris si vous aviez vos favoris. Avec YSlow, j'utilise quatre autres analyseurs gratuits. Comme vous vous en doutez, chacun offre des fonctionnalités uniques et, pour cette seule raison, il est important de se rappeler qu'aucun outil ne peut fournir un rapport absolu à toute épreuve..
Pour vous donner une idée de la différence entre chacune d’elles et générer un résultat final, j’ai inclus une brève description et le score attribué au site Web d’Envato..
Fournie par AOL, cette application ajoute divers paramètres à votre analyse. Vous pouvez simuler la version du navigateur, la vitesse de connexion et effectuer des comparaisons visuelles avec d'autres URL. C'est une fonctionnalité intéressante si vous souhaitez commencer les tests A / B.
But: N / A. Fournit une liste de contrôle d'optimisation et des horaires de chargement.
PageSpeed est un autre add-on pour Firefox et Firebug. Cela apparaît même dans le même menu que YSlow et fournit une analyse similaire. Comme YSlow, il utilise des règles et rend compte de la performance de chaque composant. Il va même optimiser et minimiser votre contenu.
But: 76/100
Toujours en version bêta, cette application Web gratuite vérifiera votre contenu, votre classement Alexa, votre trafic, votre optimisation pour les moteurs de recherche, vos métadonnées géographiques, etc. De nouveau, des astuces utiles sont ajoutées à chaque analyse. Vous pouvez même ajouter un widget à votre site Web, affichant votre "score woorank".
But: 65,8 / 100
Grader est une autre application Web gratuite, également disponible pour iPhone. Cet outil est assez similaire à WooRank, avec une interface propre et détaillée. Il existe même un outil dédié à l'analyse de blogs: une caractéristique unique parmi les cinq énumérées dans cet article..
But: 99/100
Des applications telles que YSlow offrent une analyse rapide et efficace des pages Web. Ils peuvent générer des rapports détaillés à partir des informations collectées, fournir des suggestions ou des outils pour résoudre les problèmes, et éventuellement vous apprendre quelque chose en cours de route. Mais YSlow et ses alternatives auront toujours de la concurrence: développeur Web expérimenté, qualifié et analyste en référencement.
Rien ne vaut la connaissance et la pratique; comme nous l'avons vu, plusieurs outils d'analyse produiront toujours plusieurs rapports différents.
Il n’existe pas de solution unique en ce qui concerne l’optimisation des moteurs de recherche ou l’augmentation du temps de chargement des pages Web. Cependant, un coup de main comme YSlow peut alléger votre charge de travail et vous faire économiser, à vous ou à votre client, beaucoup de temps et surtout d’argent, à long terme..
Accentsconagua