Accélérez le chargement des pages sur Internet. Cinq façons d'accélérer les temps de chargement des pages

"Distribué une partie du contenu (images, jQuery) aux sous-domaines, et une partie au CDN (cloudflare.com) pour réduire la distance entre le serveur et l'utilisateur." C'est mauvais pour le site - les images ne seront pas liées au site, mais au CDN. Dans les statistiques Yandex, vous verrez "images dans l'index - 0". © INFA de Yandex.

C'est-à-dire qu'ils ont activé toutes les cases à cocher dans les paramètres d'optimisation du site sur l'hébergement. Quelques centaines de dollars ont été arrachés au client. Dans le même temps, un tel paramètre dans l'en-tête comme lastmodified a été tué, car lorsque ces options sont activées, il n'est pas transmis - c'est sa spécificité. Le sentiment qu'il n'y a pas de site du tout, ils ont juste créé un article et réécrit le nom des cases à cocher de l'hébergement, pensant que cela ferait une impression durable.
Bravo, je n'ai pas lu d'article plus primitif, un cas pour le Darwin Award !

Alexandre Porechnikov

Java n'est même pas proche de Java Script

Alexandre Porechnikov

Ici, vous écrivez, Gennady, que vous avez inclus http2 et en même temps, pour une raison quelconque, combinez des ressources dans un seul fichier. Ou vous ne savez tout simplement pas comment fonctionne http2. Et à en juger par la liste de contrôle, avez-vous mesuré la vitesse de téléchargement après avoir simplement allumé le ganzip, tout le reste est tellement subtil et sauvage qu'ils grimpent lorsque vous devez faire 400 ms à partir de 500 ms ou que le serveur se fige à partir de la charge (504 erreurs se glissent à travers ). Et jetez Apache du bundle Apache + Njinix (à moins, bien sûr, que vous n'utilisiez des plugins Apache spécifiques) + conseils, gardez toutes les statiques sur SDN, c'est très peu coûteux, et l'avantage en est énorme, au moins en réduisant la charge sur le processeur

Alexandre Porechnikov

et pourquoi les miroirs sont créés - fusionnez le SDN avec le domaine principal et c'est tout

Alexandre Porechnikov

Je suis d'accord sur la qualité de l'article, mais je ne suis pas d'accord sur le concept lui-même - nous avons testé tous les points à la maison, mais en avons laissé moins de la moitié, le reste ne fonctionne pas ou cette minuscule augmentation de la vitesse fonctionne ne justifie pas les efforts

Configurez OpCache, corrigez-le sur OPcache

Alexander, ces options du module pagespeed accélèrent sans aucun doute le site, mais lorsqu'au moins l'une d'entre elles est sélectionnée sur l'hébergement, last-modified n'est pas transmise, la réponse 304 du serveur à la requête if-modified-since n'est pas donnée, contrôle du cache -> max-age devient 0.
Ce n'est pas cet article qui a été indigné, c'était indigné que l'auteur écrive des choses aussi abstruses qu'ils aient élaboré un plan, comment ils ont mis en œuvre des méga technologies de référencement et comment ils y ont passé 60 heures-homme, 60 CARL ! Autrement dit, au moins 500 dollars ont été arrachés au client pour avoir mis un choucas sur l'hébergement. Pas de soucis, bonne santé ! Bon, divorcez et taisez-vous, mais ne grimpez pas avec vos pseudo-connaissances sur des sites normaux et ne prenez pas le temps des gens ! Pourquoi suis-je sûr qu'ils conduisaient sur l'hébergement - voici un écran d'un hébergeur ukrainien avancé, où l'ordre de ces cases à cocher coïncide presque à 100% avec le plan brillant de l'auteur et de la société pour accélérer le site.
https://uploads.disquscdn.c...

Alexandre Porechnikov

sur cet hébergement, nous avons même l'un des anciens projets semi-statiques en cours d'exécution, un excellent hébergement. Je sais de quoi vous avez parlé, mais beaucoup ne comprennent pas qu'en fait, il n'y a que quelques façons de vraiment réduire le temps de téléchargement, et non "d'économiser sur les matchs" - ce sont :
0) permettant la compression sur le serveur web (gzip),
1) définir les bonnes rubriques sur le site
2) en utilisant non pas un hébergement mutualisé, mais même un VPS minimal
3) en utilisant un moteur plus ou moins rapide (de préférence pas WordPress, mais sur un framework)
4) minification des fichiers statiques (ce qui change rarement - styles, images, scripts, polices)
5) page/mise en cache statique

Tout le reste donne une très petite augmentation ou ne donne pas du tout, et certains conseils ne font que gêner. Eh bien, le plus important est de tout faire version mobile, car généralement, le problème de vitesse de chargement du site se produit sur les appareils mobiles.

Je suis d'accord avec vous à 100%, merci pour la concision et la précision!

Lyapushkin Nikita

Ce moment précis où l'on sent les phrases mémorisées d'un vendeur dans les yeux de quelqu'un qui n'a pas vu de quoi il parle.
Si l'article est destiné à un développement général, il convient, mais pas à une liste de contrôle ou à un manuel d'utilisation.
Tirez simplement les surnoms de la technologie et fumez le sujet par vous-même, je recommande même de sauter les déclarations données dans l'article.

Philandre

quid de l'hébergement ?

Philandre

Alexeï Tyazhelnikov

Que signifie "Temps de cache étendu pour JavaScript et CSS" ?

Activé les dernières et avant-dernières cases à cocher sur l'hébergement (post avec l'écran ci-dessus))))

Gennady Fedorov

Oui, ils ont!
Désolé, vous n'êtes pas compétent en la matière.

Gennady Fedorov

Merci!
Un complexe d'œuvres - donne un résultat.

Gennady Fedorov

C'était la tâche, de donner une impulsion à l'action, et non de décrire comment le faire

Gennady Fedorov

Merci pour le commentaire!
J'avoue, tout a été fusionné avant le passage à https/http2))
Oui, la vitesse après gzip a été mesurée, pas le résultat (tout le monde ne plaira pas) ...

Gennady Fedorov

Ici, vous jugez en tant que spécialistes ... regardez-le du point de vue de l'utilisateur))

Gennady Fedorov

Votre commentaire est totalement incompréhensible

Alexandre Porechnikov

les utilisateurs ne configurent généralement pas de serveur, ne programment pas ou ne créent pas de produits, alors il est certainement bon qu'une personne sans connaissances puisse créer un "blog/site" sur WordPress, mais si une telle personne a des questions, il devra quand même traiter avec PHP, JavaScript , Nginx, Apache et d'autres mots auparavant inconnus, et Google aide généralement à cela, donc un "léger analphabétisme" en termes conduira au fait qu'une personne recherchera quelque chose de similaire à "Slider en Java" et sera être surpris qu'une sorte de JavaScript lui soit glissé dans les résultats. Par conséquent, cela ne vaut pas la peine de faire appel du côté de l'utilisateur

Alexandre Porechnikov

souvent le problème n'est pas que la vitesse augmente à partir de toutes les manipulations (même si de 0,1%), mais qu'on ne voit pas d'autres moyens d'optimisation (CDN, nginx) et ne comprend pas comment ça marche (http2) et en conséquence , nous optimisons ce qui n'a pas de sens pour optimiser et oublions ce qui doit être optimisé ou comment obtenir le résultat maximum avec notre optimisation.

Bonjour gars!

Aujourd'hui sera l'un des sujets les plus importants de optimisation interne site. Le matériel est grand, mais pratique et utile. J'ai renforcé les moments difficiles avec des tutoriels vidéo.

Nous allons parler de comment accélérer le chargement de votre site en utilisant 7 méthodes de travail. Peut-être sont-ils connus de tous. Mais j'ai remarqué que tout le monde ne les utilise pas. Et dans le complexe, encore plus, peu de monde.

En général, dans le contenu des points, j'écrirai toutes les méthodes, puis je lirai et mettrai tout en pratique.

Avant d'accélérer le site, je veux dire quelques mots sur l'importance de cette action et sur la façon de vérifier la vitesse de téléchargement.

On sait depuis longtemps que la vitesse de chargement d'une ressource est l'un des facteurs de classement dans les résultats de recherche. Si vous prenez absolument 2 pages identiques, mais qu'une se chargera plus rapidement, alors elle aura des positions plus élevées dans le SERP. Mais cela ne veut pas dire que le premier sera en 30ème position, et le second en 1ère. Non, c'est juste qu'un site de chargement plus rapide sera légèrement mieux classé.

Par conséquent, s'il existe des moyens simples de dépasser nos concurrents dans au moins quelque chose, nous devons le faire. De plus, il existe de nombreux moyens de ce type. En les utilisant tous, nous irons dans la bonne direction en dépassant nos concurrents.

En ce qui concerne la vérification de la vitesse de chargement d'un site, j'ai toujours utilisé le service webwait. En vous y rendant, il vous suffit d'insérer l'adresse de n'importe quelle page de votre site et de commencer à vérifier.

Par défaut, le service vérifiera la vitesse de chargement de la page 5 fois pour trouver la valeur moyenne. L'intervalle entre les requêtes sera de 5 secondes. Si vous souhaitez modifier les deux valeurs, j'ai mis en surbrillance les paramètres correspondants avec une case bleue dans l'image ci-dessus. Le premier est le nombre de vérifications, le second est l'intervalle entre les requêtes.

Juste que j'ai vérifié la vitesse de téléchargement d'un de mes articles. Sur la base des résultats de 5 vérifications, j'ai reçu un résultat moyen de 0,82 seconde.

Bien sûr, il peut être difficile d'atteindre une petite valeur et cela dépend de nombreux facteurs :

La quantité de contenu sur la page ;
Nombre de scripts chargés ;
La taille des graphiques sur la page et sur le site dans son ensemble ;
Nombre de plugins.

Par conséquent, vous devez essayer de réduire l'influence de tous ces facteurs. C'est de cela que nous allons parler. Passons à la première et peut-être la plus simple.

Optimisation graphique

Ce n'est un secret pour personne que les graphiques sont l'élément le plus important de chaque site Web. Cela inclut à la fois les graphiques de chaque page et les graphiques globaux. En ce qui concerne les graphiques sur chaque page, ce sont des graphiques de contenu - images, captures d'écran, photos. Les graphiques partagés sont des graphiques qui entrent dans la conception du site. Tout cela, nous pouvons l'optimiser.

Vous ne devez en aucun cas placer des graphiques en taille réelle dans vos articles. Cette erreur prononcé sur les sites culinaires et de photographie lorsque toutes les photos sont téléchargées dans des articles en taille réelle.

Une photo prise avec un appareil photo reflex de qualité moyenne pèsera plusieurs mégaoctets. Si vous téléchargez une telle photo sur le site, le visiteur la téléchargera en entier en entrant sur la page. Imaginez combien de temps il faudrait pour charger une page si 10 images à grand volume étaient publiées.

Prenez le temps pour ce moment lorsque vous publiez du contenu. Une fois, j'ai écrit un article sur la qualité sans perte. Le matériel vous sera très utile.

En ce qui concerne le design, essayez d'utiliser moins d'images. Vous pouvez créer un design complètement sain et organique en utilisant des styles CSS. Ce sera même pour le mieux. Si vous regardez des ressources très populaires, vous remarquerez que leur conception est essentiellement fond blanc avec des lignes de division. Cela joue très fort dans les mains et fait d'une pierre deux coups :

Réduit le temps de chargement ;
Augmente la commodité de la consommation de contenu.

Si vous ne pouvez pas vous passer d'images colorées, un article sur la réduction de la taille des images (lien ci-dessus) vous aidera.

mise en cache

La mise en cache est peut-être l'élément le plus important dans le chargement rapide des pages du site Web. Particulièrement fonction donnée utile quand il y a beaucoup de trafic, quand il y a beaucoup de requêtes à la base de données.

Pour faire de la mise en cache sur le site (pour WordPress) vous devez installer le plugin Hyper Cache. Instructions complètes continuer à lire . Tout mâché là-bas.

Il est également possible d'ajouter des codes au fichier .htaccess qui permettront également la mise en cache ainsi que la compression gzip. Pour être honnête, je n'ai pas remarqué leur action sur mon site. Peut-être parce que mon blog était déjà entièrement optimisé. Et je ne les vois pas sens spécial. Et il y a un problème, puisque nous ne pourrons pas vider le cache. Ensuite, vous ne verrez aucun changement sur le site. Par conséquent, je ne donnerai pas ces codes afin de ne pas vous casser la tête plus tard si des problèmes surviennent.

Je ne les utilise pas. La mise en cache avec le plugin Hyper Cache est plus que suffisante.

Optimisation du chargement des scripts

Si votre site est assez fonctionnel (divers boutons sociaux, curseurs, compteurs de trafic, etc.), alors il contient beaucoup de scripts.

Les scripts sont toujours superflus et une grosse charge sur le site. Débarrassez-vous toujours d'eux si possible. Si ce n'est pas possible, vous pouvez les faire charger en dernier et également les supprimer du code du modèle de thème lui-même.

Pour charger des scripts à la toute fin du chargement de la page, ils doivent être placés tout en bas du code de la page, c'est-à-dire dans le pied de page. Sur WordPress, cela se fait en le plaçant dans le fichier footer.php avant la balise de fermeture..

Il est également possible de placer les scripts dans un fichier séparé au lieu du fichier footer.php. Et puis chargez ce fichier à la fin du fichier de pied de page. C'est la meilleure façon de télécharger des scripts sur le site.

Je vais vous montrer comment le faire en pratique. Je vais commencer par un tutoriel vidéo.

En règle générale, la plupart des scripts sont placés dans le fichier header.php entre les balises et ils sont placés entre les balises. À titre d'exemple, je montre un script de mon fichier d'en-tête.

Avec un cadre rouge, j'ai mis en évidence la partie dont nous avons besoin. Comme vous pouvez le voir, il est enfermé dans les balises d'ouverture et de fermeture du script, qui est mis en évidence avec des cadres bleus. J'ai mis en surbrillance la balise de fermeture avec une bordure noire pour montrer où se trouve le script lui-même.

Pour placer ce script dans un fichier séparé, nous devons prendre son contenu (boîte rouge) et le placer dans un nouveau fichier que je crée avec l'éditeur Notepad. Le contenu du nouveau fichier ressemblera à ceci.

Maintenant, enregistrez fichier donné au format .js et appelez-le un nom pratique. Je l'appellerai "footer-scripts.js" pour préciser qu'il s'agit du fichier de script affiché dans le pied de page du site.

Vous pouvez maintenant télécharger ce fichier sur le site pour que les scripts fonctionnent. Pour ce faire, vous devez placer une ligne de code contenant le chemin d'accès à ce fichier. Vous devez placer le code dans le fichier footer.php avant la balise de fermeture/

Voici ma ligne de code.

Dans celui-ci, vous devrez remplacer le chemin d'accès au fichier et son nom, s'il a été appelé différemment. Pour faciliter la compréhension, je donne une ligne avec des indices.

Le chemin d'accès au fichier dans cette ligne convient aux sites WordPress. Si vous avez un site sur un moteur différent ou juste une page HTML, vous devrez changer le chemin par vous-même.

Lorsque nous modifions une ligne, nous la plaçons dans le fichier de pied de page avant la balise de fermeture du corps. Cela ressemblera à l'image ci-dessous.

Cela devrait être à peu près pareil pour vous. Comme vous pouvez le voir, en plus de cette ligne, d'autres scripts sont affichés. Par conséquent, ils sont chargés en dernier lors du chargement du site. Le code du site lui-même devient plus propre et plus agréable pour moteurs de recherche. Il joue également un rôle dans la promotion.

De cette façon, vous devez vous débarrasser du nombre maximum de scripts dans vos fichiers de modèle et essayer de les supprimer complètement ou de les charger via le fichier, comme je l'ai montré ci-dessus. C'est l'un des de meilleures façons comment accélérer le site s'il contient beaucoup de scripts.

Si vous avez besoin de placer plus d'un script dans un fichier, mais plusieurs, alors indentez simplement et placez nouveau code. Mais il vaut mieux alors signer chaque script, pour ne pas s'embrouiller plus tard. Par exemple, vous pouvez télécharger mon fichier pour y naviguer.

Et une note de plus. Tous les scripts ne fonctionnent pas dans le pied de page du site. Certains ne fonctionnent que lorsqu'ils sont placés dans l'en-tête, c'est-à-dire dans le fichier Header.php entre les balises. Par example, bouton social"J'aime" de Vkontakte ne fonctionne pas au sous-sol si vous prenez son code de réseau social. Dans ce cas, vous devrez placer le script dans l'en-tête.

Se débarrasser des requêtes inutiles dans le code du modèle

C'est le moyen le plus difficile d'accélérer un site basé sur un type de moteur, tel que WordPress. Son essence est de remplacer les lignes de code php dans le fichier de modèle par du code déjà généré afin de se débarrasser de la génération inutile de requêtes de base de données.

Nous avons besoin d'un fichier header.php et de tout ce qu'il contient entre les balises . Entre ces balises, des codes php sont stockés qui génèrent des requêtes et affichent des informations de base. L'ensemble de la question sera plus facile à comprendre à l'aide du didacticiel vidéo que j'ai préparé ci-dessous.

Maintenant la version texte.

Je vais tout montrer en utilisant l'exemple d'une chaîne qui génère une requête pour sortir l'encodage du site. La ligne dans le fichier ressemble à ceci.

Comme vous pouvez le voir, c'est du code php. Si vous regardez le code source (ctrl + u) de n'importe quelle page du site, nous verrons que ce code php n'est plus là, mais il y aura du code HTML avec l'encodage spécifié.

Pour vous débarrasser de cette demande de génération d'encodage, vous devez prendre une ligne prête à l'emploi du code source et modifier le code php dans le fichier de modèle avec. Ce sera finalement le cas.

Je me suis débarrassé d'une demande. De la même manière, vous devez remplacer d'autres lignes possibles. Bien sûr, il ne sera pas possible de tout faire, car tout n'est pas code source production. Mais nous devons nous efforcer de le nombre maximal remplacement

Je veux également attirer votre attention sur le fait qu'il existe un code pour générer le nom du site. Il est généralement entouré de balises . Si vous envisagez de modifier le nom de la ressource, ne remplacez pas ce code ou n'oubliez pas de modifier le nom plus tard dans le code du fichier, car après le remplacement, le nom sera affiché à partir de la ligne terminée avec le nom. Le nom du site ne sera pas généré, puisqu'il n'y aura pas de code php. Prenez note de ce moment.

Aussi, n'oubliez pas de faire toutes ces fraudes avec des fichiers uniquement après . Et faites-les sur votre ordinateur avec des programmes d'édition afin de pouvoir annuler vos modifications. J'utilise le Bloc-notes à des fins similaires.

Désactivation des révisions

Encore une fois, je vous torture avec une leçon vidéo.

Les révisions sont l'enregistrement automatique de copies d'enregistrements effectuées lors de la création d'enregistrements à certains intervalles de temps.

En fait, la chose est utile, mais parfois elle crée beaucoup de déchets et charge la base de données. Je ne recommanderais pas fortement de désactiver cette fonctionnalité, car elle permet parfois d'économiser. La lumière peut soudainement disparaître, et puis quoi ? Et, s'il existe des copies de l'enregistrement, vous pouvez restaurer la progression en toute sécurité. Cela s'est produit plusieurs fois, je le sais par ma propre expérience.

Je les ai quand même désactivés, mais si vous êtes débutant, je ne recommande pas de le faire. Meilleur temps nettoyer la base de données des révisions de temps en temps, car un grand nombre de révisions crée une charge importante.

A la racine du moteur, il y a un dossier WP-includes, qui contient le fichier default-constants.php. Vous devez l'ouvrir, y trouver le contenu suivant.

if (!defined("AUTOSAVE_INTERVAL")) define("AUTOSAVE_INTERVAL", 60); /** * @depuis 2.9.0 */ if (!defined("EMPTY_TRASH_DAYS")) define("EMPTY_TRASH_DAYS", 30); if (!defined("WP_POST_REVISIONS")) define("WP_POST_REVISIONS", vrai);

définir("AUTOSAVE_INTERVAL" , 60 ) ;

* @depuis 2.9.0

définir ("EMPTY_TRASH_DAYS" , 30 ) ;

si (! défini("WP_POST_REVISIONS" ) )

définir("WP_POST_REVISIONS" , true ) ;

Au moment d'écrire ces lignes, tout cela provient de la ligne 277. Tout ce code est responsable de la sécurité de nos dossiers. Il se compose de 3 parties, chacune commençant par si.

La première partie est responsable de l'intervalle de création automatique des révisions. Par défaut, la valeur est de 60 secondes, ce qui signifie qu'une copie de l'enregistrement sera créée toutes les minutes. Imaginez que vous rédigez un article pendant plus d'une heure. Pouvez valeur donnée augmenter, par exemple jusqu'à 10-20 minutes. Ce réglage ne fonctionne que lorsque les révisions sont activées.

if (!defined("AUTOSAVE_INTERVAL")) define("AUTOSAVE_INTERVAL", 600);

si (! défini("AUTOSAVE_INTERVAL" ) )

définir("AUTOSAVE_INTERVAL" , 600 ) ;

La valeur est définie en secondes.

La deuxième partie est responsable du temps de stockage des enregistrements supprimés dans la corbeille. Lorsque nous supprimons des entrées, elles vont à la corbeille. Par défaut, ils y sont stockés pendant 30 jours, après quoi ils sont supprimés. Si vous définissez la valeur sur 0, les enregistrements n'iront pas à la corbeille, mais seront immédiatement supprimés sans possibilité de récupération.

if (!defined("EMPTY_TRASH_DAYS")) define("EMPTY_TRASH_DAYS", 0);

si (! défini("EMPTY_TRASH_DAYS" ) )

définir ("EMPTY_TRASH_DAYS" , 0 ) ;

La troisième partie est chargée du travail de révisions. Ils sont activés par défaut. Si vous souhaitez désactiver, la valeur de true doit être remplacée par false ou définie sur 0.

Pour les webmasters et les référenceurs, le temps de chargement d'un site est important. Pour confirmer cela, je veux donner quelques statistiques et faits:

Plus de la moitié des visiteurs quittent une page qui met plus de 3 secondes à se charger ;
Un site qui se charge en 3 secondes a 25 % de vues en moins, 50 % de rebonds en plus et 25 % de conversions en moins qu'un site qui se charge en 1 seconde ;
La barre de progression augmente le délai de chargement de la page ;
La vitesse de chargement affecte directement les ventes et les positions du site ;

Déterminer la vitesse de chargement d'un site n'est pas difficile du tout. Par exemple, vous pouvez utiliser le populaire suivant un service en ligne suis-je:

Envisagez des moyens d'accélérer le temps de chargement des pages du site. En fait, toutes les méthodes sont très simples et se résument le plus souvent à l'optimisation du "poids" de la page et au chargement compétent du code.

Il y a beaucoup de matériel sur Internet à ce sujet. J'ai essayé de présenter toutes les méthodes de manière compacte et uniquement au point. Commençons.

1. Activer la compression gzip

Chaque site a inclus des fichiers avec des styles .css et des scripts .js. Ils peuvent être compressés à la volée (lors du chargement de la page). En termes simples, nous réduisons leur poids et donc le site se charge plus rapidement. Mes fichiers étaient compressés à 75% en moyenne. Par exemple, si un fichier pesait 45 Ko, après compression, il commençait à peser 12 Ko. Au total, économie de 33 Ko de poids sur un fichier avec une feuille de style.

Activer la compression est facile. Il vous suffit d'écrire les lignes de code suivantes dans le fichier .htaccess (le fichier est situé à la racine du site) :

mod_gzip_on Oui mod_gzip_dechunk Oui mod_gzip_item_include fichier .(html?|txt|css|js|php|pl)$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude ^rspheader -Encodage :.*gzip.*

Vous pouvez vérifier si la compression est activée sur les sites

Si quelque chose ne fonctionne pas, n'hésitez pas à écrire une question au support technique de votre hébergement. Il arrive souvent qu'eux-mêmes n'aient pas activé quelque chose dans les paramètres du serveur.

2. Activer le cache du navigateur

L'activation du cache du navigateur est activée en ajoutant quelques lignes de code au même fichier .htaccess :

Header append Cache-Control "public" FileETag MTime Size ExpiresActive On ExpiresDefault "access plus 0 minutes" ExpiresByType image/ico "access plus 1 ans" ExpiresByType text/css "access plus 1 ans" ExpiresByType text/javascript "access plus 1 ans" ExpiresByType image/gif "accès plus 1 ans" ExpiresByType image/jpg "accès plus 1 ans" ExpiresByType image/jpeg "accès plus 1 ans" ExpiresByType image/bmp "accès plus 1 ans" ExpiresByType image/png "accès plus 1 ans"

Il n'y a qu'un problème important, combien de temps le cache doit être stocké. Si vous définissez une durée très longue et que le fichier a changé, le navigateur chargera obstinément ce qu'il a dans le cache. Le moyen de sortir de la situation peut être de remplacer le nom du fichier et d'apporter des modifications au modèle, mais est-ce vraiment pratique ? Vous devez donc réfléchir et déterminer par vous-même à quelle fréquence vous modifiez les fichiers sur le site.

Mon opinion est que dans tous les cas, un délai de 1 à 7 jours peut toujours être livré.

C'est la chose la plus facile à faire, passons à autre chose.

Vous etes peut etre intéressé:

3. Optimisez vos images

Utilisation d'images jpg - pour le contraste et gif - où il y a peu de couleurs. Ce sont tous des axiomes. En aucun cas, vous ne devez utiliser à nouveau png ou bmp, car les deux formats ne sont pas du tout optimisés.

déjà existante image jpg et png peuvent être facilement compressés à l'aide de programmes et de services. Personnellement, j'ai cherché sur Internet des services de compression d'images. J'ai comparé les résultats et conclu que j'aimais le service en ligne tinypng.com le plus. Parfois, il parvient à réduire l'image même de 75%, alors que la qualité reste presque inchangée.

Si le site utilise une grande image en arrière-plan, elle peut être très compressée. Par exemple, j'ai réussi à compresser une image de 300 Ko à 86 Ko avec Contexte pour l'un des sites.

4. Télécharger des fichiers depuis un autre domaine

Les navigateurs ont une limite sur le nombre de requêtes exécutées simultanément (pas plus de deux en parallèle). En d'autres termes, s'il y a beaucoup d'images sur le site (même de petite taille), cela augmente considérablement le temps de chargement. Par conséquent, l'astuce suivante est utilisée :

Créez un sous-domaine pour stocker des photos, du javascript et plus encore. Par exemple, si auparavant la photo se trouvait sur /img/foto.jpg , l'adresse doit maintenant être changée en img.site.ru/img/foto.jpg . Pour un navigateur, ce sera un domaine différent, et donc méthode artificielle nous accélérons le téléchargement.

Noter

C'est assez tendance d'utiliser "CSS sprite" de nos jours. La signification est la suivante: par exemple, sur notre site, il y a un tas de petites images pour l'arrière-plan (je pense que cela est familier à tout le monde). Toutes ces images peuvent être combinées en une seule grande image, et avec en utilisant CSS"couper" les bons morceaux aux bons endroits.

5. Optimisation CSS et JS

Souvent, les fichiers CSS et JS contiennent de nombreuses descriptions de style inutiles, des scripts et même de simples espaces et commentaires. C'est un poids supplémentaire pour le site. Vous pouvez facilement vous en débarrasser à l'aide de services :

Cela semble être une "fraude" si simple, et c'est un petit bonus pour réduire la taille de la page.

6. Placement correct du CSS et du JS

Nous connectons tous les fichiers .css dans les balises head (avant la balise body), nous connectons tous les scripts en fin de page. De manière générale, cela n'accélérera pas le chargement de la page, mais le contenu commencera à apparaître plus tôt devant l'utilisateur, ce qui, à son tour, le motivera à attendre, car il voit que le site se charge.

Noter

Si vous chargez la bibliothèque AJAX (de Google), alors, bien sûr, le chargement directement depuis le site de Google est plus rapide, et vous pouvez être sûr à presque 100% que le navigateur de l'utilisateur a déjà son cache. Mais il arrive que pour une raison quelconque Google ne soit pas disponible ou ralentisse le téléchargement, donc pour minimiser ce risque, vous pouvez écrire le code suivant :

Le sens est assez simple. Tout d'abord, nous essayons de charger la bibliothèque directement depuis ajax.googleapis.com, si cela échoue, nous chargeons une copie de la bibliothèque depuis notre site.

Noter

Si vous avez un cas unique où le site est encore très lourd et prend beaucoup de temps à charger, créez une "barre de progression" sur votre site. En faisant cela, vous montrez à l'utilisateur que le site est en train de se charger et qu'il vous suffit d'attendre un peu.

Bonne journée! Certes, tout le monde arrive au moment où il est nécessaire d'augmenter la vitesse de chargement des pages du site pour la raison que le site prend trop de temps à charger et les utilisateurs, sans l'attendre pleine charge, quittez le site. Dans l'article d'aujourd'hui, je parlerai plus en détail des outils que vous devez utiliser pour optimiser la vitesse de chargement des pages du site et des points clés qui peuvent interférer avec le chargement des pages. De plus, vous découvrirez également à l'aide de quels services vous pouvez mesurer la vitesse de chargement des pages du site.

Services de mesure de la vitesse de chargement des pages du site Web

Parmi les nombreux services que j'ai utilisés pour vérifier la vitesse de chargement des pages du site, j'ai aimé le service : Pingdom.com , qui montre clairement chaque détail du site et la vitesse de chargement de la page requise, par exemple pour page d'accueil site de blog, si vous sélectionnez "Amsterdam, Pays-Bas" dans les paramètres, le site se chargera en 1,08 seconde, ce qui n'est pas si mal.
Ci-dessous tout les informations nécessaires, qui est fourni par le service en termes de vitesse de connexion, d'attente et de réponse des serveurs tiers à partir desquels les données sont demandées et du serveur interne.

A partir des données fournies, vous pouvez déterminer les moments les plus lents et améliorer la vitesse de chargement des pages du site en influençant ces endroits. Cela aidera un merveilleux outil développé par Google - Google PageSpeed Insights.

Optimiser la vitesse de chargement des pages avec Google PageSpeed

En fait, tout est plus simple qu'il n'y paraît à première vue, mais je tiens à souligner le fait que lors de l'utilisation de Google PageSpeed Insights, vous ne pouvez pas voir tous les points qui peuvent aggraver la vitesse de chargement des pages du site, mais c'est tout à fait approprié, après avoir rempli tous les éléments requis par le service, vous pouvez grandement améliorer la vitesse. Pour une analyse plus détaillée des facteurs affectant la vitesse de chargement du site, vous devez utiliser le navigateur Mozilla Firefox avec le module complémentaire Firebug et le plugin PageSpeed pour Firefox.

Pourquoi Firefox ? Pour Firefox, ce plugin a l'air plus pratique, même le contenu qui s'affiche après l'analyse des pages du site par le plugin est plus compact, je vous conseille donc d'analyser les pages à l'aide de Firefox.

Ainsi, après avoir installé le plugin et le module complémentaire Firebug, un bouton avec l'image d'un scarabée apparaîtra dans le coin supérieur droit.

Rendez-vous sur le site pour lequel vous souhaitez effectuer une analyse, cliquez sur le bouton avec le scarabée. Une fenêtre s'ouvrira devant vous, dont le dernier onglet s'appellera Page Speed.Après avoir cliqué sur l'onglet, une fenêtre apparaîtra avec un bouton Analyser les performances, vous devez cliquer sur le bouton et attendre que la page soit analysée. Suivant Vous verrez une liste de toutes les recommandations que vous devez suivre pour améliorer la vitesse de chargement des pages du site. Après une courte manipulation du contenu des pages du blog, j'ai obtenu un résultat de PageSpeed \u003d 94 points sur 100 possibles, ce qui est assez bon, bien sûr, vous pouvez améliorer le résultat, mais jusqu'à présent ce n'est pas critique , l'essentiel est que j'ai éliminé tous les principaux points d'interférence.

Mais les coches vertes semblent indiquer que tout est en ordre, en fait, vous pouvez améliorer l'indicateur et atteindre une valeur supérieure à 94.

Voyons donc maintenant les principales recommandations à suivre pour optimiser la vitesse de chargement des pages du site :

Activer la compression- pour configurer la compression des xml, css, js et html au format gzip, il faut ajouter le code suivant au fichier .htaccess sur le serveur ftp du site :

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/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$

Fournir des images avec les bonnes proportions- dans les fichiers CSS, vous devez définir des proportions fixes pour les images, au lieu de les modifier à l'aide de CSS.

Utiliser le cache du navigateur, le validateur de cache est également spécifié ici et l'élément est exécuté Spécifier un validateur de cache- il faut utiliser la mise en cache côté navigateur, c'est-à-dire client, vous devez ajouter les lignes de code suivantes à .htaccess :

Jeu d'en-tête Cache-control : privé Taille de FileETag MTime ExpiresActive sur ExpiresDefault "accès plus 7 jours" BrowserMatch "MSIE" force-aucune-variation BrowserMatch "Mozilla/4.(2)" force-aucune-variation

Cette partie du code implémente la mise en cache pendant 7 jours, n'oubliez pas qu'il n'est pas toujours nécessaire de se conformer aux exigences des moteurs de recherche, si les éléments de votre site sont mis à jour fréquemment, vous devez configurer la mise en cache pour chacun séparément.

Optimiser les images- afin de réduire la taille des pages et, par conséquent, d'augmenter la vitesse de téléchargement, vous devrez utiliser le principe de la copie de toutes les images du site à partir de serveur ftp et téléchargement par lots pour un traitement ultérieur vers le service http://www.smushit.com/, la procédure est assez longue si le nombre d'images sur votre site change par milliers. Il peut y avoir des erreurs que les fichiers gif seront compressés en jpg ou png, lors de la modification du nom du fichier, vous devez prendre en compte ce moment, s'il y a des images au format gif, il est préférable de les télécharger séparément puis de les éditer manuellement. Recommandations :

Actualisez la page après chaque téléchargement du package, sinon les images seront ajoutées à la liste actuelle.
Tous les fichiers optimisés sont téléchargés sous forme d'archive à partir de ce service, par conséquent, avant de les télécharger sur le serveur, ils doivent être extraits de l'archive.

Script Java d'analyse différée - vous pouvez exécuter un script d'un certain temps de chargement de document en utilisant le code :

Minifier les scripts JS et les styles CSS- vous devez utiliser le service : http://www.refresh-sf.com/yui/, qui supprime espaces supplémentaires dans le code, économisant ainsi de l'espace fichier.

Réduire le HTML- réduire pages HTML vous pouvez supprimer les espaces supplémentaires et les guillemets auxiliaires, qui peuvent être omis dans des situations spécifiques

Spécifier les tailles d'image- pour toutes les images, leurs tailles doivent être spécifiées, vous n'avez pas besoin d'omettre le réglage des tailles d'image, sinon soit les images seront mises à l'échelle de travers, soit le CMS aura recours à des styles css auto-écrits pour les images, augmentant ainsi leur taille.

Spécifiez l'en-tête Vary : Accept-Encoding– tous les fichiers ouverts pour la mise en cache doivent renvoyer l'en-tête, ajoutez simplement le code à .htaccess sur le serveur ftp :

Header set Cache-control: private Header append Vary Accept-Encoding Jeu d'en-tête Cache-control : public

P.S. : Pour réduire le nombre de demandes de fichiers, vous devez réduire le nombre de Styles CSS et les fusionner en 1 fichier, idéalement les scripts js doivent également être fusionnés en 1 fichier.

Conclusion

La liste des recommandations fournies contribuera grandement à améliorer la vitesse de chargement des pages du site, mais n'oubliez pas qu'à certains moments, la charge sur le serveur peut augmenter, par exemple lors de l'utilisation de la compression gzip à l'aide des outils du serveur et de la mise en cache sur le navigateur ( côté client), ici vous devrez aborder les étapes d'optimisation avec d'autre part, et préparer vous-même les fichiers gzip, et configurer le traitement correct en .htaccess, et selon le navigateur, fournir aux utilisateurs des fichiers compressés ou non.

N'oubliez pas également que l'amélioration de la vitesse de chargement des pages a un effet positif sur le référencement du site, et toutes choses égales par ailleurs, si votre site gagne en vitesse, il surpassera les concurrents.

Bonne chance pour optimiser la vitesse des pages du site !

Presque tous les utilisateurs ont remarqué qu'après un certain temps après l'installation de diverses applications, y compris des 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 de la quantité d'informations traitées, de la présence de données obsolètes. Pour accélérer le navigateur, en particulier Yandex, au maximum et le rendre encore plus rapide qu'au début, vous devez effacer tout ce qui n'est pas nécessaire et activer les fonctions chargées d'augmenter la vitesse du navigateur. Un des fonctionnalités utiles est un accélération matérielle, ce qui, du fait de la connexion de ressources supplémentaires, réduit le temps de traitement des données.

L'accélération du navigateur Yandex est un concept généralisé. La première étape consiste à déterminer quel domaine particulier doit être amélioré ou ils doivent tous être restaurés. Les utilisateurs peuvent se plaindre dans plusieurs domaines principaux :

Vitesse de démarrage lente de l'application. Parfois, une minute ou même plus s'écoule entre le clic sur le raccourci et le chargement ;
Chargement des pages lent. Cela doit être changé, car le chargement des sites Web est la tâche principale du navigateur ;
Vitesse lente de téléchargement de fichiers à partir d'Internet. Si le réseau chute fortement lors du téléchargement de fichiers, la première chose à faire est d'étudier la vitesse déclarée par le fournisseur. C'est probablement vitesse maximum sinon, il y a une opportunité d'améliorer l'état de cette sphère;
Faible stabilité d'Internet, ce qui signifie l'arrêt constant de la connexion avec le serveur et l'apparition de diverses erreurs.

Les deux avant-derniers points sont de nature similaire, les méthodes de résolution de tels dysfonctionnements sont également les mêmes. Après avoir identifié la zone problématique du navigateur, nous pouvons commencer à le rendre plus actif.

Vitesse de lancement du navigateur

Lors du chargement du navigateur, le démarrage du traitement a lieu plus tôt pages ouvertes, extensions installées, les fichiers temporaires et le noyau lui-même. En réduisant la quantité d'informations traitées, nous augmentons automatiquement la vitesse de démarrage.

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

Modifier les paramètres page de démarrage. S'il est configuré pour lancer les pages précédemment ouvertes, le chargement prendra plus de temps proportionnellement au nombre d'onglets. Il y a 2 façons de sortir de la situation : fermer les onglets avant de terminer la session ou définir le mode de fonctionnement - ouvrir le tableau de bord au démarrage. Pour définir un nouveau paramètre, accédez aux "Paramètres" du navigateur Yandex et dans la colonne "Ouvrir au démarrage", sélectionnez "Tableau de bord avec vos 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 "D'autres sources". Nous vous rappelons que l'installation simultanée de deux modules complémentaires du même type peut nuire à la vitesse de téléchargement du navigateur. Il vaut mieux en laisser un meilleure extension type;
Supprimez les fichiers temporaires. Un moyen simple d'accélérer le lancement du navigateur Yandex consiste à effacer tous les fichiers temporaires via 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 "Nettoyer" ;
Vérifiez le système pour les 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. Scanner de virus comme Dr. 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 dans le navigateur chuteront considérablement. Vous devez arrêter les processus inutiles ou attendre la fin des tâches importantes. Une autre façon d'augmenter la vitesse de votre ordinateur est de tout supprimer du démarrage programmes inutiles. Cela peut être fait dans l'onglet "Démarrage" du "Gestionnaire des tâches".

Si un méthodes systémiques n'aide pas, la raison probable est la mauvaise performance du PC. Pour augmenter la vitesse de téléchargement de toutes les applications, y compris le navigateur Yandex, nous vous recommandons d'installer un lecteur SSD et d'ajouter des bandes de RAM.

Augmentation de la vitesse de travail, chargement des pages

Les performances du navigateur ne sont pas seulement affectées par la puissance de l'ordinateur. Même sur des PC hautes performances, les sites Web peuvent se charger avec des retards importants. Quelle que soit la puissance du PC, l'utilisation des méthodes suivantes améliorera les performances du navigateur.

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

L'accélération du navigateur Yandex se produit lorsque les extensions inutiles sont effacées. La méthode est décrite dans la section précédente ;
Augmenter la vitesse d'ouverture et de chargement des pages aidera fonction supplémentaire navigateur - exécution préliminaire de la demande à la page. Le préchargement peut considérablement accélérer la vitesse du navigateur. Comment activer la fonctionnalité :

Activation de la prise en charge des images de arrière-plan transparent, à partir de laquelle il y a une légère augmentation de la vitesse de travail. La fonction vous permet de rendre le navigateur Yandex plus rapide de quelques pour cent, mais au total avec d'autres méthodes, l'augmentation est tangible. Pour activer la fonctionnalité, accédez simplement à la page des fonctionnalités expérimentales et activez le drapeau avec le nom #disable-accelerated-2d-canvas, en le faisant passer à l'état "Activé" ;
Mettre fin à d'autres processus qui consomment beaucoup de trafic. Le téléchargement de fichiers, les torrents actifs, l'exploitation minière, le visionnage de films et certaines autres tâches nécessitent beaucoup de trafic. Ces actions et un surf 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 se termine. 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" ;
Augmentez la taille maximale de la mémoire disponible. Dans Windows 7, il est souvent nécessaire de définir directement la charge utile du navigateur. Plus le nombre attribué à l'initialisation du navigateur Yandex est élevé, plus la page se chargera rapidement. Pour accélérer le navigateur Yandex pour Windows 7, vous devez spécifier une plus grande quantité de mémoire allouée. Certes, la charge sur l'ordinateur augmentera légèrement (légèrement). Pour augmenter la vitesse du navigateur, activez le drapeau #max-tiles-for-interest-area Sur la page . À dernière version navigateur pour Windows 10, la fonction a été traduite en mode automatique, vous n'avez pas besoin de l'activer, et il manque dans la section des drapeaux ;
Allumer grande quantité flux raster actifs. Cela aide à traiter plus rapidement les images sur les pages, et les images sur la plupart des sites représentent 80% du poids de la page. Indicateur de recommandation #num-raster-threads définissez 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 photos et les vidéos. Nous pouvons activer le mode sur la page Modules complémentaires dans la section Outils pratiques. Si vous réglez le type de fonctionnement sur "Auto", il s'allumera lorsque la vitesse chutera à 128 kbps et s'éteindra après avoir augmenté à 512 kbps. Pour Internet haut débit pas besoin de mode Turbo ;
Désactivez le VPN, les extensions de proxy ou les applications. Ils entraînent inévitablement une diminution de la vitesse d'Internet. La méthode aidera à accélérer considérablement l'ouverture des pages dans le navigateur Yandex. Comment désactiver le proxy :

Le navigateur Yandex ne sera pas accéléré si la raison du chargement lent des pages est une mauvaise vitesse de connexion Internet.

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

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

Un moyen banal d'accélérer Internet en général et dans le navigateur Yandex consiste à commander le meilleur ensemble de services auprès du fournisseur.
Désactivez tous les serveurs intermédiaires : proxy 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) ;
Modifier les règles de protection Internet et de pare-feu. Accéder aux paramètres du pare-feu est facile en tapant le mot "pare-feu" dans 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 statut est "Activé", et que le port UDP est également utilisé. Si ce n'est pas le cas, vous devez créer une règle et spécifier le port 5353. Également dans l'antivirus, il y a une section "Exceptions" ou " Liste blanche", vous devez y ajouter le navigateur Yandex (Capture d'écran 1 - fenêtre pare-feu; capture d'écran 2 - ESET NOD32);
Accélérez le téléchargement de fichiers dans le navigateur Yandex lors de l'utilisation réseau d'entreprise désactiver le pare-feu aidera. Administrateur du système peut le désactiver pour certains domaines. Une telle autorisation est rarement obtenue ;
Choisissez le bon serveur de téléchargement. À partir de certains serveurs, la vitesse est lente en raison de paramètres spéciaux du côté de l'hébergement, cela se produit souvent lorsque l'utilisateur sélectionne autoroute téléchargements. 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 se situe dans une ressource particulière.

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 votre 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 vous permet d'accélérer considérablement le contenu vidéo. De plus, la fonction vous permet d'améliorer la fluidité de la vidéo et d'améliorer sa qualité, si les performances de l'ordinateur et la vitesse d'Internet le permettent.

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

Il ya deux des moyens simples effectuer l'initialisation du démarrage de l'accélération matérielle.

Première manière :

Deuxième méthode :

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

L'arrêt s'effectue de la même manière, on peut utiliser l'une des méthodes :

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

Toutes les méthodes ci-dessus aident à augmenter la vitesse de chargement des pages, des fichiers, elles sont généralement utilisées en combinaison pour accélérer autant que possible le navigateur Yandex. À partage il est souvent possible d'obtenir une augmentation des performances à certains moments, bien que certaines méthodes augmentent indépendamment les performances de 50 à 200 %.