Presque tous les utilisateurs ont remarqué que, quelque temps après l'installation de diverses applications, y compris les navigateurs, ils commencent à fonctionner plus lentement. Il ne s'agit pas ici d'une évaluation subjective erronée des performances d'un navigateur ou d'un PC, mais d'une augmentation du volume d'informations traitées et de la présence de données obsolètes. Pour accélérer au maximum le navigateur, en particulier Yandex, et le rendre encore plus rapide qu'au début, vous devez effacer tout ce qui est inutile et activer les fonctions chargées d'augmenter la vitesse du navigateur. L'une des fonctionnalités utiles est l'accélération matérielle qui, en connectant des ressources supplémentaires, réduit le temps de traitement des données.

L'accélération du navigateur Yandex est un concept général. La première étape consiste à déterminer quelles zones doivent être améliorées ou si elles doivent toutes être restaurées. Les utilisateurs peuvent se plaindre dans plusieurs domaines principaux :

• Faible vitesse de lancement des applications. Parfois, il faut une minute ou plus entre le clic sur le raccourci et le chargement ;
• Chargement lent des pages. Cela devrait absolument être changé, puisque le chargement de sites Web est la tâche principale du navigateur ;
• Vitesse lente de téléchargement de fichiers depuis Internet. Si le réseau ralentit beaucoup lors du téléchargement de fichiers, la première étape consiste à étudier la vitesse déclarée par le fournisseur. C'est probablement la vitesse maximale, sinon il y a une opportunité d'améliorer l'état de cette zone ;
• Faible stabilité Internet, ce qui signifie une déconnexion constante du serveur et l'apparition de diverses erreurs.

Les deux avant-derniers points sont de nature similaire et les méthodes permettant de résoudre ces problèmes sont également les mêmes. Après avoir décidé de la zone problématique du navigateur, nous pouvons commencer à le rendre plus actif.

Accélérer le lancement du navigateur

Lorsque le navigateur est chargé, le traitement initial des pages précédemment ouvertes, des extensions installées, des fichiers temporaires et du noyau lui-même a lieu. En réduisant la quantité d'informations traitées, nous augmentons automatiquement la vitesse de lancement.

Comment accélérer le chargement du navigateur Yandex :

• Modifiez les paramètres de la page de démarrage. Si vous choisissez de lancer des pages précédemment ouvertes, le chargement prendra plus de temps proportionnellement au nombre d'onglets. Il existe 2 solutions pour sortir de la situation : fermer les onglets avant de terminer la session ou régler le mode de fonctionnement - ouvrir l'écran au démarrage. Pour définir un nouveau paramètre, accédez à la section « Paramètres » du navigateur Yandex et dans la colonne « Ouvrir au démarrage », sélectionnez « Tableau avec les sites favoris » ;
  
• Nettoyez les extensions gourmandes en ressources et inutiles. Nous vous recommandons de supprimer périodiquement les plugins rarement utilisés ou devenus inutiles. Sur la page « Modules complémentaires » du navigateur, faites défiler la liste et désactivez les extensions une par une. Nous accordons la plus grande attention à la section « Provenant d’autres sources ». Nous vous rappelons que l'installation simultanée de deux modules complémentaires du même type peut affecter négativement la vitesse de chargement du navigateur. Il vaut mieux en laisser une, la meilleure extension du genre ;
  
• Supprimez les fichiers temporaires. Un moyen simple d'accélérer le lancement du navigateur Yandex consiste à effacer tous les fichiers temporaires à l'aide de l'application CCleaner. Téléchargez-le simplement à partir du lien. Dans la section « Nettoyage » de l'onglet « Applications », sélectionnez tous les éléments liés à Google Chrome, puis cliquez sur le bouton « Analyser ». Après avoir terminé la procédure d'analyse, vous devez cliquer sur le bouton « Nettoyage » ;
  
• Analysez le système à la recherche de virus. La méthode contribuera à augmenter les performances du système dans son ensemble et aura un effet positif sur la vitesse du navigateur lors du chargement des pages. Un scanner antivirus comme Dr. vous aidera à supprimer les virus. Web ou un antivirus à part entière comme ESET NOD32 ou Kaspersky Internet Security ;
  
• Libérez des ressources informatiques. Si le PC est fortement chargé, les performances du système en matière de navigation diminueront considérablement. Vous devez arrêter les processus inutiles ou attendre que les tâches importantes soient terminées. Une autre façon d'augmenter la vitesse de votre ordinateur consiste à supprimer tous les programmes inutiles du démarrage. Nous pouvons le faire dans l'onglet « Démarrage » du « Gestionnaire des tâches ».
  

Si les méthodes système ne vous aident pas, la cause probable est une mauvaise performance du PC. Pour augmenter la vitesse de chargement de toutes les applications, y compris le navigateur Yandex, nous vous recommandons d'installer un lecteur SSD et d'ajouter plus de RAM.

Augmentation de la vitesse de travail et du chargement des pages

Les performances du navigateur ne dépendent pas uniquement de la puissance de votre ordinateur. Même sur des PC hautes performances, les sites Web peuvent connaître des retards de chargement importants. Quelle que soit la puissance de votre PC, vous pouvez utiliser les méthodes suivantes pour améliorer les performances de votre navigateur.

Comment accélérer le navigateur Yandex et ses secrets :

• Le navigateur Yandex accélère lorsque vous supprimez les extensions inutiles. La méthode est décrite dans la section précédente ;
• Une fonction supplémentaire du navigateur contribuera à augmenter la vitesse d'ouverture et de chargement des pages - exécution préliminaire d'une requête sur la page. Le préchargement peut accélérer considérablement les performances du navigateur. Comment activer la fonctionnalité :

• Activation de la prise en charge des images avec des arrière-plans transparents, ce qui entraîne une légère augmentation de la vitesse de fonctionnement. La fonction vous permet de rendre le navigateur Yandex plus rapide de plusieurs pour cent, mais en combinaison avec d'autres méthodes, l'augmentation est perceptible. Pour activer la fonctionnalité, accédez simplement à la page des fonctionnalités expérimentales et activez l'indicateur appelé #disable-accelerated-2d-canvas , en le définissant sur l'état « Activé » ;
  
• Mettez fin aux autres processus qui consomment de grandes quantités de trafic. Le téléchargement de fichiers, de torrents actifs, l'exploitation minière, le visionnage de films et certaines autres tâches consomment beaucoup de trafic. Les actions répertoriées et une navigation confortable et rapide sont des concepts mutuellement exclusifs. Il est facile d'accélérer le chargement des pages dans le navigateur Yandex en désactivant le téléchargement ou en attendant qu'il soit terminé. Pour vérifier la charge du réseau, nous pouvons aller dans le « Gestionnaire des tâches » et sélectionner le tri par l'onglet « Réseau » ;
  
• Augmenter l'empreinte mémoire maximale disponible. Sous Windows 7, vous devez souvent définir directement la tolérance de charge depuis le navigateur. Plus le numéro alloué pour l'initialisation du navigateur Yandex est élevé, plus la page se chargera tôt. Pour accélérer le navigateur Yandex pour Windows 7, vous devez spécifier une taille de mémoire allouée plus grande. Certes, la charge sur l'ordinateur augmentera quelque peu (légèrement). Pour augmenter la vitesse du navigateur, activez le drapeau #max-tiles-for-interest-area sur la page. Dans la dernière version du navigateur pour Windows 10, la fonction passe en mode automatique, il n'est pas nécessaire de l'activer et elle est absente de la section des drapeaux ;
• Activez des flux raster plus actifs. Aide à traiter les images sur les pages plus rapidement, et les images de la plupart des sites représentent 80 % du poids d'une page. Nous vous recommandons de définir l'indicateur #num-raster-threads sur la valeur maximale disponible dans la liste déroulante. Cela ne créera pas de charge notable sur l'ordinateur, mais augmentera la vitesse du navigateur Yandex ;
  
• Activation du mode "Turbo". Vous permet d'économiser du trafic en compressant tout le contenu. Pour réduire la taille du contenu, tout le trafic est redirigé vers les serveurs Yandex, où il est compressé. La compression est effectuée sur les images et les vidéos. Nous pouvons activer le mode sur la page « Modules complémentaires » dans la section « Outils pratiques ». Si vous définissez le type d'opération sur « Auto », il s'allumera lorsque la vitesse diminuera à 128 kbit/s et s'éteindra après l'avoir augmentée à 512 kbit/s. Pour l’Internet haut débit, le mode « Turbo » n’est pas nécessaire ;
  
• Désactivez le VPN, les extensions proxy ou les applications. Ils entraînent inévitablement une diminution du débit Internet. La méthode contribuera à accélérer considérablement l'ouverture des pages dans le navigateur Yandex. Comment désactiver le proxy :

L'accélération du navigateur Yandex ne se produira pas si la raison du chargement lent des pages est une mauvaise vitesse de connexion Internet.

Comment accélérer au maximum le chargement dans le navigateur Yandex ?

Il n'existe pas beaucoup de façons d'augmenter la vitesse de téléchargement dans le navigateur Yandex, car cela dépend en grande partie de la qualité d'Internet. Mais il existe encore plusieurs méthodes qui permettent d'enregistrer un fichier plus rapidement :

• Un moyen trivial d'accélérer Internet en général et dans le navigateur Yandex consiste à commander le meilleur package de services auprès d'un fournisseur ;
• Désactivez tous les serveurs intermédiaires : proxys et VPN. De plus, nous vous recommandons de vérifier non seulement dans le navigateur, mais également parmi les applications de bureau. Pour accélérer le téléchargement dans le navigateur Yandex, il est préférable de désactiver complètement le proxy ou d'ajouter le navigateur aux exceptions (exemple de proxy : Browsec ; Hola ; friGate ; ZenMate) ;
  
• Modifiez les règles de sécurité Internet et de pare-feu. Il est facile d'accéder aux paramètres du pare-feu en saisissant le mot « pare-feu » dans la recherche Windows (Win+S). Ensuite, allez dans le groupe « Règles pour les connexions entrantes ». Nous trouvons l'élément « Yandex.Browser (trafic mDNS entrant) » et vérifions que son état est « Activé » et que le port UDP est utilisé. Si ce n'est pas le cas, vous devez créer une règle et spécifier le port 5353. Dans l'antivirus, il y a également une section « Exceptions » ou « Liste blanche », vous devez y ajouter le navigateur Yandex (Capture d'écran 1 - Pare-feu Windows ; Capture d'écran 2 - ESET NOD32);
  
• La désactivation du pare-feu contribuera à accélérer le téléchargement de fichiers dans le navigateur Yandex lors de l'utilisation d'un réseau d'entreprise. L'administrateur système peut le désactiver pour certains domaines. Une telle autorisation peut être obtenue assez rarement ;
• Choisissez le bon serveur de téléchargement. La vitesse de certains serveurs est faible en raison de paramètres spéciaux du côté de l'hébergement ; cela se produit souvent lorsque l'utilisateur choisit une méthode de téléchargement gratuite. De plus, si la vitesse et la stabilité d'Internet sont meilleures lors du téléchargement d'un fichier à partir d'autres serveurs, le problème réside dans une ressource spécifique.

On souhaite souvent augmenter la vitesse d'Internet dans le navigateur Yandex lors du téléchargement de fichiers à partir de ressources officiellement bloquées dans le pays. Pour les utiliser, vous devez activer le VPN. La seule façon d'accélérer les téléchargements est de remplacer le service proxy ou VPN par un service meilleur/payant (exemple : ExpressVPN).

Accélération matérielle dans le navigateur Yandex

L'accélération matérielle mérite une section distincte, car elle peut accélérer considérablement les performances du contenu vidéo. De plus, la fonction vous permet d'améliorer la fluidité de la vidéo et d'augmenter sa qualité, si les performances de votre ordinateur et la vitesse d'Internet le permettent.

Comment activer l'accélération matérielle ?

Il existe 2 manières simples d'initialiser l'accélération matérielle.

Première façon :

Deuxième méthode :

Comment désactiver l'accélération matérielle ?

La désactivation se fait exactement de la même manière ; nous pouvons utiliser l'une des méthodes suivantes :

Important! Pour activer ou désactiver la fonction, vous devez redémarrer le navigateur.

Toutes ces méthodes contribuent à augmenter la vitesse de chargement des pages et des fichiers, elles sont généralement utilisées ensemble pour accélérer autant que possible le travail du navigateur Yandex. Lorsqu'ils sont utilisés ensemble, il est souvent possible d'obtenir une augmentation significative des performances, bien que certaines méthodes augmentent indépendamment les performances de 50 à 200 %.

Directeur Marketing d'une des divisions Optify. Possède 20 ans d'expérience dans le lancement de divers produits et services dans le domaine du commerce électronique, des jeux informatiques et d'autres domaines.

Les algorithmes de classement de Google prennent en compte la vitesse de chargement des pages

Le 9 avril 2010, Google a officiellement annoncé que ses algorithmes prenaient en compte la vitesse de chargement des pages. Des rumeurs circulaient bien avant cela - lorsque l'entreprise est devenue hyper-consciente de la vitesse, en lançant les produits Chrome (un navigateur rapide) et SPDY (Speed ​​​​Web Delivery Protocol) et en faisant la promotion du haut débit ultra-rapide. Dans cet article, nous allons essayer d'expliquer comment Google détermine la vitesse et comment vous pouvez tester la vitesse de chargement de votre page et l'améliorer.

Nous pensons que la vitesse de chargement des pages est un excellent ajout au reste de la liste des facteurs qui déterminent le classement des pages dans Google, et cela pour deux raisons principales :

1. Vitesse de chargement des pages est extrêmement important pour le confort de l’utilisateur. La recherche montre que l'utilisateur moyen a l'impression qu'une horloge tourne dans sa tête lorsqu'il attend qu'une page s'ouvre. Avec l’augmentation de la vitesse d’utilisation d’Internet en général, les attentes en matière de vitesse ont également augmenté. Vous pouvez lire l'article de Google sur les tests de vitesse internes et leur impact. Donc,

2. Vitesse de chargement des pages est un facteur qu'un développeur peut mesurer, suivre et optimiser. Une grande partie de l'algorithme de Google échappe à notre contrôle, mais celui-ci peut être amélioré. Voici quelques outils que vous pouvez utiliser pour analyser la vitesse de votre site, ainsi que 6 conseils pour améliorer la vitesse de chargement et le classement de vos pages.

Comment Google détermine-t-il la vitesse ?

Deux méthodes principales pour analyser le chargement des pages :

1. Réponse au robot Google. GoogleBot est un programme agent qui explore les liens sur le Web, catégorise les pages et le contenu et envoie le tout à Google, qui traite les données à l'aide de son propre algorithme. Le robot Google collecte simplement des informations, il ne les analyse ni ne les évalue. Cependant, il présente certaines limites quant à l'étendue de l'exploration d'une page donnée, car l'exploration de milliards de pages prend beaucoup de temps. C’est l’une des raisons pour lesquelles il est recommandé d’avoir du code « propre », de placer le bon contenu en haut de la page et de mettre le code répétitif (comme le CSS) dans des fichiers séparés.

2. Temps de chargement selon la barre d'outils Google. Google est très agressif dans la promotion et la vulgarisation de ses outils gratuits. L'une des raisons en est la possibilité pour Google d'utiliser sa barre d'outils comme plate-forme d'analyse de sites et de pages individuels.

Outils pour mesurer la vitesse des pages

Il existe de nombreux outils et plugins gratuits pour mesurer les performances d’un site Web. Voici quelques-uns des meilleurs, à notre avis :

1. Si vous avez un compte chez Google Webmaster (et vous devriez en avoir un), vous pouvez utiliser un outil spécial dans la section Labs. Cela vous permettra d'avoir une idée générale de la rapidité de chargement de vos pages par rapport aux pages d'autres sites dans les statistiques.

Que signifie pour vous ce changement d’algorithme ?

L'amélioration de la vitesse de chargement des pages n'est pas aussi critique que, par exemple, des balises de titre appropriées, une structure d'URL, un contenu unique ou des liens entrants de qualité. Mais toutes choses égales par ailleurs, une page qui se charge plus rapidement présente un avantage. Il ne fait aucun doute que des pages plus rapides offrent une meilleure expérience utilisateur, ce qui signifie plus de visites, moins de vues inutiles et plus de vues par visite. Quoi qu’il en soit, il est préférable de faire tout ce qui est en votre pouvoir pour garantir que vos pages se chargent rapidement.

6 façons d'améliorer la vitesse de chargement et le classement des pages

1. Optimiser les images : les grandes images peuvent être recadrées, compressées et téléchargées plus rapidement.
2. Au lieu d’images d’arrière-plan, utilisez uniquement des couleurs : cela se chargera plus rapidement.
3. Utilisez un cache : la mise en cache est pratique pour les utilisateurs, car les images et autres fichiers statiques ne sont chargés que lors de la première visite, et cela n'est plus nécessaire lors des visites suivantes.
4. Chargez le Javascript externe et les appelables en dernier : la pire chose que vous puissiez faire est de faire attendre vos visiteurs que tout le contenu se charge en même temps. Si possible, assurez-vous que votre contenu se charge en premier et que le contenu externe se charge après.
5. Utilisez des fichiers séparés pour le code répétitif : les fichiers séparés sont le plus souvent utilisés avec les feuilles de style CSS et permettent un code HTML de page plus léger (moins de lignes de code) et fournissent également un fichier central et facile à trouver pour apporter des modifications aux zones importantes. de code (par exemple, des feuilles de style).
6. Pour organiser les pages, utilisez des styles CSS au lieu de tableaux HTML : avant de charger le tableau lui-même, les navigateurs web (IE, Firefox, etc.) attendent que tout son contenu se charge. CSS rend ce processus plus rapide (et plus facile à mettre à jour).

1. Sélectionnez l'un des outils ci-dessus et installez-le.
2. Testez la vitesse de chargement de la page principale et de plusieurs autres pages de types différents.
3. Déterminez quels composants peuvent être améliorés. Discutez-en avec votre équipe technique et votre webmaster.
4. À titre de comparaison, effectuez les mêmes tests avec les pages des concurrents.

J'espère que tout ce qui précède vous aidera à accélérer le chargement des pages de votre site Web - les utilisateurs et les moteurs de recherche l'apprécieront.

Le temps de chargement d’un site Web est l’un des indicateurs les plus importants qui influencent le comportement des utilisateurs d’un site Web. Voyons cela.

Une diminution de la vitesse de chargement des pages de 1 seconde entraîne :

• diminution du nombre de vues de 11 % ;
• diminution de la satisfaction des utilisateurs de 16 % ;
• réduction de la conversion à 6%.

Vous trouverez ci-dessous un graphique montrant l'augmentation du pourcentage de pages fermées en raison d'une augmentation du temps de chargement du site.

Quelques secondes supplémentaires de temps de chargement du site réduisent les chances d'attirer l'intérêt des visiteurs et de réaliser des ventes.

KISSmetrics a mené une étude sur la manière dont la vitesse de chargement des sites Web affecte le comportement des utilisateurs et des clients :

• 47 % des utilisateurs s'attendent à ce qu'une page s'ouvre en moins de 2 secondes ;
• 40 % des utilisateurs ferment un site Web si le chargement prend plus de 3 secondes ;
• 79 % des acheteurs insatisfaits de la commodité du site n'achèteront probablement pas via celui-ci à l'avenir ;
• 44 % des acheteurs en ligne parleront à leurs amis des sites qui ne les ont pas satisfaits.

Un chargement plus rapide du site est particulièrement important pour les utilisateurs accédant au site à partir d'appareils mobiles. Et comme la part du trafic mobile ne cesse de croître, un accent particulier doit être mis sur l'accélération sur mobile.

Patience des mobinautes

Augmenter la vitesse de chargement du site Web pour augmenter la conversion

Le temps de chargement du site Web affecte la conversion. Regardons l'exemple de Walmart.

Dépendance du taux de conversion sur le temps de chargement des pages

Nous voyons ici que plus la vitesse de chargement des pages est rapide, plus le taux de conversion est élevé.

Walmart a constaté que la réduction du temps de chargement des pages d'une seconde augmentait les taux de conversion jusqu'à 2 %.

L’impact de l’optimisation du chargement du site Web sur le trafic organique

En 2010, Google a annoncé qu’il prendrait en compte la vitesse de chargement des sites Web lors du classement des résultats de recherche.

La raison pour laquelle les moteurs de recherche doivent faire cela est assez évidente. Si un moteur de recherche vous propose des sites « lents », vous l’utiliserez probablement moins souvent.

Par conséquent, il est important de réduire le temps de chargement du site afin que votre site soit mieux classé que celui de vos concurrents.

En résumant ce qui précède, nous concluons que l’accélération du site Web conduit à :

augmentation de la conversion ;

réduire le taux de rebond (le pourcentage du nombre de visiteurs qui ont quitté le site directement depuis la page de connexion ou n'ont consulté qu'une seule page du site) ;

hausse dans les moteurs de recherche.

20 façons d'accélérer le chargement d'un site Web 1. Réduire le nombre de requêtes HTTP

Selon les recherches de Yahoo, la majorité du temps de chargement des pages est consacrée au chargement d'images, de feuilles de style et de scripts.

Pour télécharger chacun de ces fichiers, une requête HTTP distincte est créée. Plus ces demandes sont nombreuses, plus le temps s'écoule jusqu'à ce que la page soit complètement chargée.

Vous pouvez vérifier très simplement combien de requêtes HTTP sont générées - utilisez le panneau de développement du navigateur.

Examinons le processus en utilisant le navigateur Google Chrome comme exemple.

La première étape consiste à accéder à la page en cours d'analyse, à faire un clic droit sur n'importe quelle zone vide de la page et à sélectionner « Afficher le code » dans le menu contextuel. Le panneau Chrome DevTools s'ouvrira en bas de l'écran. Accédez à l'onglet Réseau et rechargez la page. Nous voyons une liste de toutes les demandes, leurs statuts de réponse et les temps de téléchargement des fichiers.

2. Fusionnez et réduisez les fichiers CSS et JS

Maintenant que nous savons combien de demandes sont générées, nous pouvons commencer à les réduire.

Le moyen le plus simple de réduire le nombre de requêtes est de combiner et de réduire (compresser) les fichiers HTML, CSS et JavaScript. Il est préférable de confier cette tâche aux développeurs. Si ce n’est pas possible, vous pouvez essayer de le faire vous-même.

Ouvrez n'importe quel éditeur de texte, collez-y le contenu de tous les fichiers CSS utilisés dans l'ordre dans lequel ils sont inclus dans le modèle. Ensuite, en utilisant n'importe quel service de minification (par exemple, CSSminifier), nous compressons le code.

De ce fait, nous réduisons le nombre de requêtes et les symboles insignifiants pour l'interprète (espaces, tabulations, sauts de ligne, etc.) sont supprimés du code final.

3. Implémenter le chargement asynchrone de CSS et JS

Nous sommes tous habitués à charger un fichier CSS en HTML en insérant une balise

Cependant, tous les morceaux de code ne sont pas si critiques qu’ils doivent être chargés immédiatement. Par exemple, le site dispose d’un composant de comparaison de produits rarement utilisé. Il est logique de charger les styles et le code js directement au moment où les utilisateurs souhaitent utiliser une telle fonctionnalité.

La mise en œuvre du chargement asynchrone de CSS et JS n'est souvent possible que pour les développeurs professionnels. Nous notons seulement que vous devez envisager soit d'utiliser la valeur de préchargement de l'attribut rel en conjonction avec l'attribut onload, soit de charger des styles à l'aide d'un script js.

4. Configurez le chargement paresseux du code javascript

Pour comprendre ce qu’est le chargement paresseux du code javascript, voyons d’abord comment cela se produit habituellement. En mode javascript standard, les fichiers interrompent l'analyse d'un document HTML jusqu'à ce que tous ces fichiers aient été reçus et exécutés.

Nous devons souvent insérer un widget de réseau social peu important dans le pied de page du site. Peu importe qu’il apparaisse sur la page immédiatement ou après quelques secondes.

Pour implémenter le chargement paresseux, ou plutôt le traitement, d'un tel script, il suffit d'attribuer l'attribut defer à la balise.

5. Accélérer la réception des premiers octets (TTFB)

TTFP est le premier octet reçu de la page. Le temps nécessaire pour recevoir un tel octet est l'un des facteurs de classement d'une page par les moteurs de recherche et nécessite une attention particulière.

Malheureusement, sans compétences en administration de serveur, il est impossible d'améliorer cet indicateur. Nous ne pouvons que vous conseiller d'utiliser un hébergement de qualité et éprouvé ou de nous contacter pour obtenir de l'aide.

6. Réduisez le temps de réponse du serveur

Le conseil s’adresse plutôt aux professionnels du développement backend. Cependant, afin que vous puissiez définir correctement la tâche des programmeurs, sans vous tromper avec le budget, nous vous expliquerons ce que fera un professionnel.

Bref, il faut analyser toutes les requêtes vers la base de données. Recherchez et corrigez les erreurs. Optimisez le code de requête de la base de données et supprimez ou réécrivez les plugins écrits par des développeurs inexpérimentés.

7. Sélectionnez les options d'hébergement optimales pour les demandes des utilisateurs

Quelle que soit l'optimisation du code que vous avez sur votre site Web, à mesure que le nombre d'utilisateurs augmente, la vitesse du site diminuera lentement. Par conséquent, il est très important de choisir le bon type d’hébergement et les bonnes options.

Pour les sites Web et les cartes de visite des petites entreprises, l'hébergement virtuel le plus simple (hébergement partagé) convient. Pour les boutiques en ligne, portails - VPS/VSD. Pour les sites à fort trafic, il faut se tourner vers des serveurs physiques dédiés (Dedicated server).

8. Effectuer une analyse de compression de page

Le protocole HTTP utilisé sur le World Wide Web offre la possibilité de compresser les informations transmises pour économiser le trafic et augmenter la vitesse de chargement des données. La plupart des navigateurs modernes prennent en charge la méthode gzip.

Vous pouvez vérifier si gzip est activé sur votre site Web en utilisant n'importe quel service proposé par un moteur de recherche pour la requête « gzip test ».

9. Activer la compression des pages

Après vous être assuré que la compression est désactivée, nous attribuons la tâche aux développeurs le plus rapidement possible. Si vous avez confiance en vos capacités, vous pouvez chercher une solution sur Internet. Le plus souvent, il vous sera demandé d'écrire quelque chose comme ceci dans le fichier .htaccess :

AddOutputFilterByType DEFLATE texte/texte html/texte brut/application xml/application xml/xhtml+texte xml/texte css/application javascript/application javascript/x-javascript

Nous ne conseillerons pas d'utiliser une telle solution, nous dirons seulement que tout ici n'est pas aussi simple qu'il y paraît au premier abord. Par conséquent, ne prenez pas de risques et contactez-nous pour obtenir de l’aide.

10. Configurer les paramètres de mise en cache

Qu’est-ce que la mise en cache ? Expliquons avec un exemple. Laissez votre enfant vous demander chaque jour quel âge il a. Vous pouvez recalculer votre âge en fonction de votre date de naissance à chaque fois, ou vous pouvez le calculer une fois et utiliser ce nombre comme réponse à tout moment, en ajustant les données à chaque anniversaire.

C’est la même chose avec un site Web : vous n’avez pas toujours besoin de générer mille requêtes dans la base de données à chaque fois que vous ouvrez une page. Vous disposez d'une boutique en ligne de théières dont les prix sont mis à jour une fois par an. Évidemment, cela ne vaut pas la peine d’effectuer à chaque fois des calculs de serveur gourmands en ressources juste pour afficher les prix de chaque théière. Il suffit de sauvegarder ces informations dans un fichier statique et de les configurer pour qu'elles soient automatiquement mises à jour une fois par an.

Ce sont les paramètres de mise en cache. Cela peut se faire soit dans les paramètres du CMS que vous utilisez, soit dans le fichier .htaccess.

11. Compressez toutes les images et vidéos

Si votre site contient un grand nombre d’images et de vidéos, il est logique de les compresser. Cela peut être fait soit dans n'importe quel éditeur graphique, soit dans les services en ligne, qui sont de plus en plus courants sur Internet ces derniers temps.

12. Utilisez un CDN

CDN (ou Content Delivery Network) est un réseau de diffusion de contenu. Bref, le principe de fonctionnement est le suivant. Le site est hébergé sur des serveurs situés dans divers endroits à travers le monde. Selon l'endroit où se trouve l'utilisateur final, il reçoit des informations de l'un ou l'autre serveur - le meilleur en termes d'indicateur complexe, dans lequel la localisation géographique joue un rôle important.

Utiliser la puissance d’un CDN ne fera pas une grosse brèche dans votre portefeuille, mais cela apportera une contribution significative à votre objectif final. De plus, dans le cadre du support technique, nous vous expliquerons en détail comment vous connecter au réseau de la manière la plus rentable possible.

13. Utilisez les services cloud

Ce paragraphe s'applique aux vidéos et autres contenus lourds présents sur le site. Afin de ne pas surcharger à nouveau votre serveur, il est conseillé de placer ces documents dans des services cloud :

• vidéo sur Youtube/Vimeo ;
• fichiers à télécharger sur Dropbox/Yandex Disk/Google Drive

Dans la plupart des cas, c'est gratuit.

14. Réduisez le nombre de styles en ligne

Un défi pour les développeurs. Très souvent, les éditeurs visuels intégrés à un CMS pèchent en créant du « code sale » dans lequel les styles des éléments sont définis à l'aide de la méthode en ligne dans l'attribut style. Ainsi, par exemple, il y aura plusieurs éléments sur la page :

Attention! Annonce importante

...

Le poids de la page augmente, la vitesse de traitement du navigateur diminue. Il est plus correct d'utiliser des classes CSS. En conséquence, nous devrions obtenir :

...

Attention! Annonce importante - 1

...

15. Implémenter le chargement paresseux des images, des vidéos, des iframes et du contenu

S'il y a un grand nombre d'éléments lourds sur la page, il est alors logique de les charger immédiatement avant de les utiliser. Par analogie avec la vidéo en ligne, on n’attend pas à chaque fois que la vidéo entière soit téléchargée, on attend qu’un petit fragment soit téléchargé et on lance la vidéo. Ensuite, tout le reste sera progressivement chargé.

Cela doit être fait pour les images, les vidéos, les iframes et parfois pour le texte (par exemple, dans le cas d'un site Web de bibliothèque en ligne). Comment procéder fait l'objet d'un article séparé.

16. Effectuer une analyse de code et réduire le nombre de plugins utilisés

Très souvent, les développeurs inexpérimentés, pour implémenter une seule info-bulle sur le site, chargent un plugin entier en utilisant l'une des centaines de capacités de la bibliothèque, c'est-à-dire qu'ils tirent sur des moineaux avec un canon. Et si ce plugin utilise d'autres bibliothèques (dépendances), alors un énorme tas de code inutilisé apparaît sur le site.

Cela vaut la peine d'analyser le code du site et de réduire le nombre de plugins rarement utilisés. Par exemple, une info-bulle peut être implémentée en écrivant quelques lignes de Javascript pur ou même en l'implémentant en utilisant CSS.

17. Réduisez le nombre de redirections

Il est souvent impossible de se passer des redirections. Par exemple, si l'adresse de notre page a changé, nous mettons en place une redirection 301 afin que les utilisateurs puissent ouvrir la page en utilisant l'ancien lien (les liens ne sont pas mis à jour immédiatement dans les moteurs de recherche).

Cependant, chacune de ces redirections augmente considérablement le temps de chargement des pages. Si 1 à 2 redirections sont toujours autorisées, un nombre plus élevé a un effet extrêmement négatif sur la vitesse de chargement.

Il faut parcourir toutes les redirections sur le site et optimiser ces chaînes.

18. Réduisez le nombre de scripts externes

Par exemple, de nombreuses personnes utilisent des scripts externes qui ajoutent de nouvelles polices au site (par exemple Google). Malgré le fait que Google lui-même prévienne de la diminution de la vitesse de chargement du site, de nombreux développeurs inexpérimentés ajoutent des polices au hasard, pour le plaisir d'un en-tête sur une page rarement visitée.

En Russie, ce conseil est particulièrement pertinent. Roskomnadzor bloque l'adresse IP et votre site continue d'essayer d'en recevoir des scripts externes. Dans ce cas, le temps de chargement peut même augmenter jusqu'à 30 secondes !

Par conséquent, dans la mesure du possible, essayez d’utiliser des scripts locaux et réduisez au minimum le nombre de scripts externes.

19. Réaliser un audit des performances de la version mobile du site

Il a été dit plus tôt que Google prêtait attention à la vitesse de chargement du site lors du classement. Une attention particulière est portée à la version mobile.

Nous vous recommandons d'utiliser le service Google PageSpeed ​​​​Insights, avec lequel vous pouvez effectuer rapidement un audit en ligne des versions de bureau et mobile du site. Après l'audit, le service lui-même vous proposera des conseils pour optimiser votre site.

Je pense que ce n’est un secret pour personne que la vitesse de chargement des pages est influencée par de nombreux facteurs. Si quelqu’un ne le sait pas, je dirai brièvement ce qui suit : la vitesse de chargement affecte non seulement si un visiteur attendra le chargement de votre site, mais également sur l’optimisation du référencement. En effet, aujourd’hui, de nombreux moteurs de recherche ont commencé à prendre en compte la vitesse de chargement des pages lors du classement des sites. Par conséquent, plus votre site se charge rapidement, plus vous pouvez obtenir de visiteurs des moteurs de recherche et, par conséquent, plus vous pouvez gagner d’argent.

Par conséquent, dans cet article, j'ai décidé de rassembler les 10 meilleurs conseils sur la manière d'augmenter la vitesse de chargement d'une page Web et du site dans son ensemble. L'article ne prétend pas être génial et s'adresse aux débutants.

Alors, c'est parti :

1. Réduisez le nombre de requêtes HTTP

80 % du chargement des pages est axé sur le chargement des composants de la page : scripts, photos, fichiers CSS, flash. La spécification HTTP/1.1 recommande aux navigateurs de télécharger en parallèle pas plus de 2 composants d'une page Web à partir d'un seul hôte. En réduisant le nombre de ces composants, nous réduisons le nombre de requêtes HTTP vers le serveur et, par conséquent, augmentons la vitesse de chargement des pages.

Mais comment réduire le nombre de requêtes vers le serveur sans affecter l’apparence de la page ?

2. Placez les fichiers CSS au début de la page

En plaçant une connexion aux fichiers CSS dans l'en-tête de la page, nous obtenons un rendu progressif de la page, c'est-à-dire la page se chargera progressivement - d'abord l'en-tête, puis le logo en haut, la navigation, etc. – et cela constitue à son tour un excellent indicateur du chargement des pages pour l’utilisateur et améliore l’impression globale du site.

Placer les fichiers CSS au bas de la page empêche de nombreux navigateurs d'afficher la page de manière incrémentielle. Cela s'explique par le fait que le navigateur « ne veut pas » redessiner les éléments dont le style peut changer après le chargement de la page. Incluez donc toujours tous vos fichiers CSS en haut de la page dans la section HEAD.

3. Placez javascript en bas de page

En plaçant les fichiers javascript au bas de la page, nous permettons au navigateur de charger d'abord la page avec le contenu, puis seulement de commencer à charger les fichiers javascript. Si votre site est dans l'air du temps et contient toutes les cloches et sifflets interactifs possibles, alors il peut y avoir plusieurs de ces fichiers javascript et ils peuvent peser plusieurs centaines de kilo-octets, obligeant ainsi l'utilisateur à attendre que tous vos fichiers javascript soient chargés avant de charger le la page est désastreuse.

De plus, les fichiers .js externes bloquent le chargement parallèle. La spécification HTTP/1.1 recommande aux navigateurs de télécharger en parallèle pas plus de 2 composants d'une page Web à partir d'un seul hôte. Ainsi, si les images de votre site se trouvent sur des hébergeurs différents, vous recevrez plus de 2 téléchargements parallèles. Et lorsque le script est téléchargé, le navigateur ne lancera aucun autre téléchargement, même à partir d'autres hôtes.

4. Réduire les CSS et Javascript

La minimisation de fichier consiste à supprimer tous les caractères non essentiels du code afin de réduire la taille du fichier et d'accélérer son chargement. Dans le fichier réduit, tous les commentaires et espaces insignifiants, sauts de ligne et caractères de tabulation sont supprimés. Tout est simple ici. Plus la taille du fichier est petite, moins il faudra de temps au navigateur pour le télécharger. Et ces 24 services en ligne de compression et d'optimisation du code CSS vous aideront à minimiser votre code.
5. Utilisez des sous-domaines pour les téléchargements parallèles

Comme je l'ai dit plus haut, selon la spécification HTTP/1.1, les navigateurs sont soumis à des restrictions sur le nombre de composants de sites Web chargés simultanément, à savoir pas plus de 2 composants provenant d'un même hôte. Par conséquent, si votre site contient beaucoup de graphiques, il est préférable de le déplacer vers un ou plusieurs sous-domaines distincts. Pour vous ce sera le même serveur, mais pour le navigateur ce sera différent. Plus vous créez de sous-domaines, plus le navigateur peut télécharger de fichiers simultanément et plus la page entière du site se chargera rapidement. Tout ce que vous avez à faire est de changer l'adresse des photos par une nouvelle. Un moyen très simple mais efficace.

6. Utilisez le cache de votre navigateur

La mise en cache devient extrêmement importante pour les sites Web modernes qui s'appuient fortement sur JavaScript et CSS. Le fait est que lorsqu'un visiteur visite votre site pour la première fois, le navigateur téléchargera tous les fichiers javascript et css, et chargera également tous les graphiques et flash, mais en définissant correctement l'en-tête HTTP Expires, vous rendrez la page composants pouvant être mis en cache. De cette façon, lorsqu'un visiteur visite à nouveau votre site ou passe à la page suivante de votre site, le cache de son navigateur contiendra déjà certains des fichiers nécessaires et le navigateur n'aura pas besoin de les télécharger à nouveau. D’où le gain en vitesse de chargement du site.

Par conséquent, définissez l’en-tête HTTP Expires dans la mesure du possible, plusieurs jours, voire plusieurs mois à l’avance. Pour que le serveur web Apache émette des en-têtes HTTP Expires conformes aux recommandations, vous devez ajouter les lignes suivantes dans le fichier .htaccess situé dans le dossier racine du site :
En-tête ajouter Cache-Control "public" FileETag MTime Size ExpiresActive On ExpiresDefault "accès plus 0 minutes" ExpiresByType image/ico "accès plus 1 ans" ExpiresByType text/css "accès plus 1 ans" ExpiresByType texte/javascript "accès plus 1 ans" ExpiresByType image/gif "accès plus 1 an" ExpiresByType image/jpg "accès plus 1 an" ExpiresByType image/jpeg "accès plus 1 an" ExpiresByType image/bmp "accès plus 1 an" ExpiresByType image/png "accès plus 1 an"
Ce fragment du fichier de configuration du serveur Web Apache vérifie la présence du module mod_expires et, si le module mod_expires est disponible, active l'envoi des en-têtes HTTP Expires, qui fixent la durée de conservation des objets ci-dessus dans le cache des navigateurs et serveurs proxy à un an à compter du premier chargement. En définissant la durée de vie du cache du navigateur à ce niveau, il peut s'avérer difficile de mettre à jour les fichiers. Par conséquent, si vous avez modifié le contenu d'un fichier CSS ou Javascript et souhaitez que ces modifications soient mises à jour dans le cache du navigateur, vous devez alors modifier le nom du fichier lui-même. Habituellement, la version du fichier est ajoutée au nom du fichier, par exemple : styles.v1.css

7. Utilisez un CDN pour charger les bibliothèques JavaScript populaires

Si votre site utilise un framework javascript populaire, tel que jQuery, il est alors préférable d'utiliser un CDN pour le connecter.

8. Optimisez vos images

Vous devez déterminer le format approprié pour vos images. La sélection d’un mauvais format d’image peut augmenter considérablement la taille du fichier.

• Les GIF sont idéaux pour les images comportant plusieurs couleurs, comme un logo.
• Les fichiers JPEG sont parfaits pour les images détaillées avec beaucoup de couleurs, comme les photographies.
• PNG est votre choix lorsque vous avez besoin d’une image de haute qualité avec transparence.

Il existe deux manières d'optimiser une image : utiliser des programmes ou des services en ligne sur Internet pour compresser les images. Dans le premier cas, vous aurez besoin de certaines connaissances pour travailler avec tel ou tel programme, mais n'importe qui peut utiliser les services en ligne. Tout ce que vous avez à faire est de télécharger les images nécessaires, et le service lui-même les optimisera et fournira un lien pour télécharger les fichiers déjà compressés.

Voici plusieurs services en ligne pour l’optimisation des images :

9. Ne redimensionnez pas les images

Ne redimensionnez pas l'image en utilisant les attributs width et height de la balise, ou en utilisant CSS. Cela affecte également négativement la vitesse de chargement des pages. Si vous avez une image d'une taille de 500x500px et que vous souhaitez insérer une image d'une taille de 100x100px sur le site, alors il est préférable de redimensionner l'image originale à l'aide de l'éditeur graphique Photoshop, ou tout autre. Plus l’image est claire, moins il faudra de temps pour la charger.

10. Utiliser la compression Gzip

Des études ont montré que la compression gzip d'un fichier texte à la volée dans 95 à 98 % des cas permet de réduire le temps de transfert du fichier vers le navigateur. Si vous stockez des copies archivées de fichiers sur le serveur (dans la mémoire du serveur proxy ou simplement sur le disque), la connexion peut en général être établie 3 à 4 fois plus rapidement.

À partir de HTTP/1.1, les clients Web indiquent les types de compression qu'ils prennent en charge en définissant l'en-tête Accept-Encoding dans la requête HTTP.

Accepter l'encodage : gzip, dégonfler

Si le serveur Web voit un tel en-tête dans une requête, il peut appliquer une compression de réponse à l'aide de l'une des méthodes répertoriées par le client. Lors de l'émission d'une réponse, le serveur informe le client via l'en-tête Content-Encoding de la manière dont la réponse a été compressée.

Encodage du contenu : gzip

Les données ainsi transférées sont environ 5 fois plus petites que les données d'origine, ce qui accélère considérablement leur livraison. Il y a cependant un inconvénient : cela augmente la charge sur le serveur web. Mais le problème avec le serveur peut toujours être résolu. Alors n'y prêtons pas attention.

Afin d'activer la compression GZIP sur votre site Web, vous devez écrire les lignes de code suivantes dans le fichier .htaccess :
AddOutputFilterByType DEFLATE texte/html AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE texte/javascript AddOutputFilterByType DEFLATE texte/css BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0 no-gzip BrowserMatch \bMSIE !no- gzip !gzip-only-text/html

Si cette méthode a fonctionné, alors tant mieux, sinon, vous pouvez essayer ce code :

AddOutputFilterByType DEFLATE texte/texte html/texte brut/application xml/application xml/xhtml+texte xml/texte javascript/application css/x-javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0 no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html mod_gzip_on Oui mod_gzip_item_include fichier \.js$ mod_gzip_item_include fichier \.css$

Mais encore une fois, ce code ne fonctionne pas sur tous les serveurs, il est donc préférable de contacter le service support de votre hébergeur et de clarifier ce problème.

Eh bien, c'est en fait tout ce que je voulais vous dire. Dans cet article, j'ai essayé de lister toutes les principales méthodes d'optimisation client pour augmenter la vitesse de chargement d'une page Web. En plus de l'optimisation du client, il existe également l'optimisation du serveur. Mais c'est un sujet pour un article séparé.

Si vous avez manqué quelque chose ou si vous avez quelque chose à ajouter, écrivez votre opinion dans les commentaires ci-dessous sur cet article. Merci pour votre attention!

L’un des aspects les plus importants de votre site Web est la rapidité avec laquelle il se charge ; les utilisateurs veulent recevoir instantanément une photo sans délai, et si vous n'êtes pas en mesure de la leur donner, ils chercheront sans hésitation des informations ailleurs. Dans cet article, nous aborderons 5 façons d’accélérer le temps de chargement de votre site Web.

1. Utilisez YSlow pour suivre les temps de chargement des pages

Connaître le temps nécessaire au chargement des pages peut vous aider à identifier les zones problématiques. Cela vous donnera également une autre incitation à accéder à la fonctionnalité et à essayer de corriger la situation.

Avant de commencer, vous devrez installer YSlow, si ce n'est pas déjà fait. YSlow est une extension pour Mozilla Firefox, que vous pouvez retrouver sur cette page :

Ouvrons maintenant un site Web. Disons Six Révisions, pour que nous ayons à peu près les mêmes données (ouvrez simplement ce site dans un nouvel onglet de votre navigateur).

En bas à droite de votre navigateur, vous disposez d'une barre d'icônes spéciale (voir Figure 1). Un peu plus loin de ce panneau, après le chargement de la page, à côté de « YSlow », vous verrez un numéro. Ce nombre correspond au temps nécessaire à cette page pour se charger en secondes dans votre navigateur. Nous avons besoin que ce nombre soit le plus petit possible.

Les « ralentisseurs » les plus courants sont les objets ou opérations suivants :

• Trop de requêtes HTTP
• Fichiers JavaScript non compressés
• Pas de délai d'attente d'en-tête pour les fichiers graphiques

Nous y reviendrons plus en détail dans quelques minutes.

Pour vous familiariser avec ce système, parcourez plusieurs sites et regardez leurs temps de chargement. Vous pouvez tester Google, Facebook et quelques-uns de vos blogs/sites préférés que vous visitez le plus souvent. Veuillez noter que les fichiers et images JavaScript affectent le plus la vitesse.

Utiliser YSlow au maximum

En plus de calculer les temps de chargement des pages, YSlow vous donne également des informations avancées sur ce que vous devez corriger pour optimiser le temps de chargement de votre site, afin que vous puissiez combler les trous.

Pour des informations similaires, cliquez sur l'onglet Performances. Après avoir scanné le site, YSlow vous donnera une note globale qui caractérisera les performances de votre page.

L’accès à l’information peut être accéléré grâce à un CDN (Content Delivery Network). Le CDN est mieux utilisé pour les grands sites Web. Ils sont utilisés pour diffuser des informations via plusieurs serveurs dans différentes parties du monde. De cette façon, les informations seront téléchargées depuis le serveur approprié (le plus proche de l'utilisateur) afin de ne pas passer par les routeurs personnels. YSlow suit également les requêtes CDN.

Mais en règle générale, les gens n’utilisent pas le CDN (qui est assez cher).

Classification des types d'erreurs

Passons maintenant en revue chaque élément de l'extension mentionnée ci-dessus. Vous trouverez ci-dessous un résumé des critères sur lesquels vos pages sont jugées et comment résoudre les problèmes pour obtenir des performances maximales.

Faites le moins de requêtes HTTP possible : une requête HTTP se produit lorsque le navigateur envoie une requête au serveur. La même chose peut se produire lors de la connexion de scripts, de fichiers CSS, d'images, ainsi que de requêtes asynchrones, tant du côté client que du côté serveur (Ajax et autres technologies similaires). Cependant, en ce qui concerne les performances du système, il convient de réfléchir au nombre de ces requêtes qui se produisent sur votre page. En guise de solution, vous pouvez utiliser la mise en cache pour aider les machines clientes à charger plus rapidement les scripts, les CSS et les images.

Ajout d'en-têtes Expires : 80 % du chargement des pages est axé sur le téléchargement de scripts, de photos et de fichiers CSS. Dans la plupart des cas, ces éléments ne changent pas sur les machines des utilisateurs. En ajoutant un peu de code à votre fichier .htaccess, vous pouvez mettre en cache les fichiers en double sur la machine locale de l'utilisateur (nous verrons comment procéder plus tard).

Composants Gzip : appliquez Gzip ou compression aux fichiers JS, images, documents HTML, fichiers CSS, etc. permet aux utilisateurs de télécharger des informations dans une taille réduite, ce qui augmente considérablement la vitesse de chargement des pages. De plus, cela permettra d'économiser de l'espace sur le serveur, cependant, le déballage des données peut entraîner un ralentissement de la réponse et dépend directement du navigateur de l'utilisateur.

Placer CSS en haut de la page : Si vous placez la connexion aux fichiers CSS en haut de la page, cela signifie qu'ils seront chargés en premier, et les images et scripts plus tard.

Placez JS en bas de la page : Maintenant que vos fichiers CSS vont se charger en haut, il est temps de placer les scripts JS juste avant la balise de fermeture. Cela permettra à votre page de s'afficher, puis d'activer les scripts nécessaires.

Évitez les expressions CSS : personnellement, je n’ai jamais utilisé d’expressions CSS (également appelées propriétés dynamiques). Ces expressions sont les propres concepts de programmation d'IE (tels que les conditions) en CSS. La technologie utilisée dans IE8, et même dans toutes les autres versions, ne sera plus prise en charge, vous devrez donc dans tous les cas renoncer à écrire des expressions CSS de cette manière. PHP est plus adapté à des fins similaires, par exemple pour charger différents styles CSS en fonction de certaines conditions, telles qu'un nombre aléatoire, l'heure de la journée ou le navigateur de l'utilisateur.

Écrivez JS et CSS dans des fichiers séparés : si vous placez vos scripts JS et styles CSS dans des fichiers séparés, le navigateur peut facilement les mettre en cache, permettant ainsi à votre page de se charger plus rapidement.

Réduisez le temps de recherche DNS : lorsqu'un utilisateur tape le nom de votre site dans le navigateur, une recherche DNS commence immédiatement pour l'adresse IP où se trouve votre site. Plus votre site contient de sources externes, plus la recherche DNS prendra du temps. En règle générale, une telle recherche dure 60 à 100 millisecondes.

Réduire JS : en plus de la compression gzip, la réduction des fichiers JavaScript vous permet d'alléger vos scripts en éliminant les espaces, tabulations et autres caractères spéciaux inutiles qui s'ajoutent à des tailles de fichiers plus grandes. C'est évident : plus les fichiers sont petits, plus les pages se chargent rapidement. Pour réduire les fichiers JavaScript, vous pouvez utiliser l'outil JSMIN.

Évitez les redirections : peu importe où vous effectuez la redirection, en JS, HTML ou PHP. Dans tous les cas, votre navigateur recevra un en-tête avec une page vierge dont le chargement prendra du temps. Essayez donc simplement de ne pas utiliser de redirection là où elle peut être évitée.

Évitez le chargement de script en double : si votre navigateur charge un script plus d'une fois, cela aura un impact significatif sur le chargement de la page. Le calcul ici n’est pas compliqué. Plus il y a de téléchargements des mêmes fichiers, plus la page se charge longtemps. Passez en revue vos scripts et assurez-vous de ne pas appeler jQuery 2 ou 3 fois. La même chose s'applique aux scripts JS.

Eh bien... je pense que ça suffit. Passons maintenant au prochain onglet YSlow avant d'examiner d'autres techniques qui amélioreront la vitesse de chargement de vos pages.

L'onglet Composants vous permettra de déterminer les efforts que vous devez faire pour améliorer la vitesse de chargement. Vous trouverez ici des informations sur le poids de chaque fichier, ainsi que sur le temps nécessaire au téléchargement. Vous pouvez également voir pour quels fichiers gzip est utilisé, connaître le temps de réponse, si les fichiers sont mis en cache sur la machine de l'utilisateur et quand le cache lui-même se termine. Ces informations peuvent vous être utiles lors de l'évaluation des problèmes de votre site, vous saurez ce qui ne va pas chez vous et ce qui doit être optimisé.

Et enfin, passons au dernier onglet Stats. Vous trouverez ici des informations sur toutes les requêtes HTTP, à la fois pour les fichiers normaux et ceux en cache. La valeur Cache vide indique que ces fichiers doivent être chargés pour afficher la page. À son tour, Primed Cache est constitué de fichiers qui ont déjà été mis en cache par le navigateur de l'utilisateur. Cela signifie que vous n'avez pas besoin de les télécharger.

2. Utilisez des sprites CSS pour raccourcir les requêtes HTTP

Les sprites CSS sont probablement la chose la plus importante que l'humanité ait inventée depuis que Tesla a inventé l'électricité... En fait, j'ai dit ça... oups, je voulais dire Edison.

Bon, peut-être pas exactement le plus cool, mais quand même.

Les sprites CSS peuvent contribuer à augmenter considérablement la vitesse de chargement des pages en réduisant le nombre de requêtes HTTP générées pour charger les images.

Vous pouvez trouver de nombreux didacticiels expliquant comment les sprites CSS sont utiles pour la navigation - en général, pour les utiliser dans l'interface utilisateur.

Jetons maintenant un coup d'œil rapide à la façon dont YouTube utilise les sprites CSS. Voici à quoi ressemble le sprite qu'ils utilisent :

YouTube utilise ce fichier de manière plutôt originale. Ils le chargent comme arrière-plan de la classe sprite. Lorsque vous devez sélectionner un élément, vous sélectionnez une position initiale à l'aide de la propriété CSS background-position, puis appliquez une hauteur et une largeur.

Essayons aussi quelque chose de similaire. Expérimentons sur la même image de YouTube.

Dans l'exemple ci-dessous, nous affichons le logo YouTube à l'écran. En utilisant la même classe de sprite et la même image, nous pouvons créer une image qui changera lorsque la souris sera survolée.

.sprite ( background:url(http://s.ytimg.com/yt/img/master-vfl87445.png); ) #logo ( largeur:100px; hauteur:45px; background-position:0 0; )

Ainsi, en utilisant cette image, nous pouvons réduire toutes les connexions à une seule requête HTTP. Eh bien, quel est l'effet ?

Un autre avantage des sprites CSS est que lors de l'utilisation de la pseudo-classe :hover, l'image ne disparaîtra pas pendant plusieurs instants (qui sont consacrés au chargement d'une nouvelle image), comme cela se produit sans utiliser de sprites CSS.

.sprite ( background:url(http://s.ytimg.com/yt/img/master-vfl87445.png); ) #logo ( largeur:100px; hauteur:45px; background-position:0 0; ) #button ( position d'arrière-plan : 0 -355 px ; remplissage : 5 px 8 px ; ) #bouton : survol (position d'arrière-plan : -25px -355px ; )

3. Chargez d'abord les fichiers CSS, les fichiers JavaScript en dernier

Pour certains sites, la réduction du nombre de requêtes HTTP peut entraîner une panne des fonctionnalités. Une autre façon d'augmenter la vitesse de chargement des pages consiste à placer toutes les connexions de fichiers JavaScript à la fin du document.

Il convient également de noter :

Chargez les fichiers CSS dans la section juste avant le début de la balise body.

Incluez JavaScript juste avant la balise body de fermeture.

Si vous suivez nos conseils, vous permettrez à vos utilisateurs d'admirer vos sites tout en chargeant vos scripts JavaScript en arrière-plan.

Remarque : Si vous ne souhaitez pas déplacer les balises JavaScript parce que vous craignez que la fonctionnalité soit supprimée, je vous recommande d'utiliser la propriété defer. Appliquez-le comme ceci :

4. Utilisez des sous-domaines pour les téléchargements parallèles

Le téléchargement parallèle signifie augmenter les téléchargements parallèles des mêmes fichiers. Si vous parcourez de nombreux sites, vous remarquerez peut-être que beaucoup d’entre eux envoient des requêtes à static.domain.com et c1.domain.com. Cela peut être vu dans la barre inférieure du navigateur.

C'est un excellent moyen d'augmenter les performances du site. Lors de l’utilisation de sous-domaines, les informations seront essentiellement sur le même serveur, mais elles seront différentes pour le navigateur.

Configuration du processus :

Créez 3 sous-domaines sur votre serveur

Organisez vos images dans des dossiers sur différents sous-domaines

Remplacez les chemins dans vos fichiers

5. Ajout d'en-têtes Expires

Certains sites restent chargés même après avoir appliqué toutes les méthodes décrites ci-dessus. Mais il existe quelques autres méthodes.

L'utilisateur peut se rendre sur votre site et faire toutes les requêtes HTTP nécessaires pour afficher la page, les images, les scripts, etc.

Lorsque vous utilisez les en-têtes Expires, vous pouvez mettre en cache tous ces éléments sur la machine de l'utilisateur, augmentant ainsi non seulement la vitesse de chargement des pages, mais réduisant également le trafic. Les en-têtes Expires peuvent être appliqués à tous vos scripts, CSS et images.

Cet effet peut être obtenu grâce à quelques lignes que vous devez ajouter au fichier .htaccess, qui se trouve dans le répertoire racine de votre site.

L'exemple de fichier .htaccess suivant définit les en-têtes d'expiration sur un certain nombre en 2010 pour les types de fichiers tels que .ico, .pfd, .flv (fichiers Flash), .jpg, .png, etc.

L'ensemble d'en-tête Expire "Jeudi 15 avril 2010 20:00:00 GMT"

Attention : si vous apportez des modifications à ces fichiers (si le délai n'est pas encore passé), vous devrez les renommer (ou ajouter une version au nom), sinon ils ne seront pas mis à jour dans le cache.

Par exemple, si vous avez un fichier JavaScript dans lequel vous avez modifié quelque chose, ajoutez simplement le numéro de version au nom (quelque chose comme javascriptfile-1.0.js, javascriptfile-1.1.js, etc.)

Conclusion

Aujourd'hui, nous avons utilisé de nombreuses méthodes. J'espère que vous avez noté quelques méthodes que vous utiliserez activement dans vos projets ! Bonne chance!