Comment mesurer les performances du site Web frontal

En parlant de processus d'optimisation est presque inexistante parmi les concepteurs de sites Web de la nouvelle ère. Même de nombreux concepteurs de sites Web qui sont en affaires depuis une décennie ou plus ne comprennent pas pleinement l’importance de l’optimisation des sites..

Après une période de temps prolongée, un site Web commencera à s'enliser. Les fichiers frontend peuvent contenir des blocs de code exagérés ou des bits verrouillés et cachés. Cela se produit le plus souvent dans des fichiers ou des images JavaScript. Il peut être important de créer un site Web agréable pour l'expérience utilisateur, mais sans un site Web optimisé, la conception n'aura peut-être même pas la possibilité de charger entièrement des utilisateurs impatients..

Les conseils ci-dessous sont destinés aux développeurs Web débutants à intermédiaires intéressés par optimiser leurs pages au maximum. Il existe de nombreuses techniques disponibles et chacune se comportera différemment en fonction des problèmes rencontrés par votre site Web. Essayez de parcourir quelques zones et voyez si vous pouvez appliquer ces techniques à vos propres marques..

Requêtes HTTP

Chaque fois que votre site Web charge, il envoie une requête HTTP à un serveur distant. Ce type de transfert de données est appelé un protocole de réseau utilisé spécifiquement pour la distribution et le stockage de fichiers en texte brut. Ceux-ci incluent souvent votre code frontal de base tel que HTML, CSS et JavaScript.

Une fois la demande envoyée, votre navigateur analysera chaque élément de la page. En fonction du moteur d'analyse, chaque site Web se chargera différemment et les éléments apparaîtront dans un ordre variable en fonction de la vitesse de transfert. Par exemple, Internet Explorer affichera des pages Web différentes de celles de Chrome ou de Safari, qui exécutent toutes des moteurs d'analyse légèrement différents de ceux de Firefox ou Opera..

Ce qui doit être pris en compte, c'est combien de temps dure le temps de demande pour chaque fichier et si cette tendance se maintient. Envisagez de recevoir plus de 100 000 ou 1 million de visiteurs par mois. Il appartient au navigateur de rassembler chaque élément de page et de charger des fichiers externes en mémoire..

Souvent, les facteurs qui freinent la vitesse optimisée d'un site Web incluent des fichiers JavaScript volumineux ou des fichiers image volumineux. Avec la vulgarisation de Verizon FiOS, il est courant que la vitesse de l’Internet atteigne 600 kbps et continue de grimper! Malheureusement, ce n'est pas la norme et même avec des connexions haut débit, il est possible de rencontrer des erreurs d'optimisation..

Remèdes à la performance du site

Nous ne sommes pas seuls dans le domaine du développement Web et de l'optimisation frontale. Pour que le travail soit terminé, certains outils sont nécessaires pour gérer le travail..

Google a publié un projet intitulé Page Speed, conçu pour aider les développeurs à optimiser leurs sites Web et à rechercher les meilleurs niveaux de performance. A l'origine, le projet avait été lancé en tant que complément Firebug à code source ouvert et est maintenant accepté comme référence tierce pour les tests de sites Web..

Une autre option pour les utilisateurs de Firebug est l’add-on YSlow de Yahoo! Le script analyse chaque requête de page Web et suggère les moyens les plus courants d’améliorer les performances. Ces suggestions sont basées sur Yahoo! Ressources de développement pour les meilleures pratiques d’optimisation en conception Web.

Le programme peut être un peu abrasif au début car il contient beaucoup d’informations. Il suffit de s'en tenir aux bases et en suivant une simple documentation, le processus devrait être un jeu d'enfant.

Les développeurs sont toujours intéressés par un projet visant à décomposer le code, ce qui devrait être une évidence. Pour un peu d'aide, vous pouvez consulter le guide d'aide YSlow.

Techniques de vitesse

Il existe quelques astuces simples que vous pouvez appliquer immédiatement à votre site Web pour améliorer les performances. La première et la plus simple consiste à séparer vos fichiers CSS et JavaScript..

Le code CSS appartient à l'en-tête de votre document. Ceci est utile car les propriétés CSS doivent être analysées pendant le chargement du DOM. Une fois qu'un navigateur Web a reconnu vos styles CSS dans l'en-tête, il attendra que la page Web soit entièrement affichée jusqu'à ce que tous les styles aient été chargés. De plus, toutes les images utilisées pour les icônes ou les arrière-plans prendront du temps à se charger et doivent le faire en premier.

D'un autre côté, le déplacement de tous les fichiers JavaScript dans le pied de page de votre site peut considérablement résoudre les problèmes de temps. De nombreux navigateurs bloquent les téléchargements parallèles, ce qui signifie qu’avant de restituer la page, le navigateur Web d’un utilisateur peut s’arrêter pendant 4 secondes pour charger complètement les fichiers JS externes inclus..

Ce n'est pas toujours possible ni nécessaire pour tous les sites Web. Si vos pages se chargent de la même manière avec des temps de réponse égaux, quel que soit le placement des fichiers à inclure, ne vous souciez pas de la lecture.

Le contenu dynamique ne peut pas être chargé tant que le DOM n’est pas terminé, mais cela peut parfois renvoyer des erreurs. Testez les inclusions CSS / JS pour voir si vous pouvez obtenir des avantages en termes d'optimisation..

Compression de la taille du fichier

La compression de gros fichiers est devenue très populaire. Il peut désormais même être utilisé dans des pages Web pour réduire les temps de chargement et réduire la taille des fichiers. Une grande partie du travail a déjà été fait et avec des outils comme YUI Compressor, les fichiers de petite taille sont un processus sans énergie.

Il existe de nombreux autres services gratuits sur le Web pour vous aider dans cette tâche.. Minify CSS possède une interface de compression CSS complète pour simplifier le processus. Le même site Web possède également un compresseur JavaScript personnalisé qui effectue une grande partie des mêmes tâches tout en maintenant le script organisé.

Vous pouvez également envisager de compresser les plus grandes images de vos pages Web. Cela peut être fait avec n’importe quel logiciel de retouche photo tel que Adobe Photoshop ou GIMP en ré-échantillonnant simplement l’image à une résolution inférieure. Les images PNG exporteront en moyenne beaucoup moins que les formats jpg ou TIFF. Il existe également de nombreux outils en ligne tels que Image Optimizer pour faciliter le processus de compression..

Vérification de la source et métriques

C’est une routine que les développeurs Web ne pratiquent pas souvent et qui peut offrir des résultats étonnants. En analysant tous les éléments de la page de votre site Web, vous pouvez déterminer lequel a été le plus long à charger et l'ordre dans lequel chaque élément a été chargé..

L'outil le plus populaire Mozilla Firebug est un plug-in pour le navigateur Firefox. Cette application installe une petite barre d'outils au bas de votre navigateur pour vérifier les temps de réponse, les informations d'en-tête, les éléments de page et les scripts de chaque site Web. Le script a également été porté dans Firebug Lite en tant qu’extension pour Google Chrome..

Apache avec mod_pagespeed

Toutes les configurations n'exécuteront pas un serveur Web Apache, cette option n'est donc pas toujours disponible. Ce module est directement lié à Moniteur de vitesse de page de Google mentionné plus tôt. En fait, le code de mod_pagespeed était à l'origine basé sur de nombreuses bibliothèques des bases de données de Google Code..

Apache permet aux administrateurs de serveurs d'installer de petits packages, appelés modules, pour améliorer les performances de leurs serveurs.. mod_pagespeed est l’un de ces modules qui exécute automatiquement des techniques d’optimisation au moment de l’exécution. Il y a trop de processus à énumérer, bien que certaines des applications principales incluent la compression à la volée HTML / CSS / JS et la mise en cache des images..

Le projet est actuellement hébergé chez Google et est ouvert aux développeurs. Google collabore avec GoDaddy pour implémenter mod_pagespeed dans tous les comptes d'hébergement exécutant le serveur HTTP Apache..

Bien que de nombreuses autres options soient disponibles, les travaux de développement front-end sont parmi les plus intenses, notamment en ce qui concerne la pré-optimisation pour les pages Web cruciales. L’optimisation pour les en-têtes de site et les grandes images peut être une tâche extrêmement fastidieuse mais enrichissante.

Examinez quelques-unes des techniques présentées dans cet article et voyez comment elles pourraient être appliquées à vos projets Web. Souvent, les développeurs ne prennent pas assez de temps pour apprécier leur travail et nettoyer les vieux morceaux de code. Si vous avez encore besoin de conseils, consultez notre guide d'optimisation Web ultime pour les pointeurs sur la maintenance frontale et les améliorations pratiques des performances..