Vitesse de chargement du site. 4 facteurs principaux.

Vitesse de chargement du site. Comment augmenter la vitesse de téléchargement ? Problèmes principaux.

conseillé vitesse de chargement du site Google - 2 secondes. (et maintenant regarde ta vitesse)

(Comment vérifier la vitesse de chargement du site ?Le moyen le plus simple et le plus rapide est d'ouvrir outils de développement CTRL+MAJ+IEnsuite, sélectionnez l'onglet "Réseau", puis actualisez la page, pour voir la vitesse de téléchargement dont vous avez besoin pour actualiser la page, Actualiser sans cache : vous devez appuyer sur CTRL + F5 / CTRL + R. Et ci-dessous sera la vitesse de téléchargement.)

Vérifier la vitesse de chargement du site
en utilisant un service de Google : PageSpeed ​​Insights

(infographie extraite de seoprofy ©2014)

Les principaux points qui touchent le plus :

1. Cache
2. CSS (modes)
3. JS (scénarios)
4. Images (leur poids, leur taille - oui, exactement la taille HxL, les métadonnées - oui, il y a une telle chose, ce sont leurs informations telles que : Date, titre, sujet, etc.)

Afin de ne pas peindre beaucoup d'informations inutiles sur de petits moments qui n'affectent pas particulièrement ou ont un effet négligeable, je n'écrirai pas à leur sujet.

#1 L'ARGENT

mise en cache (oucache) est un tampon (un endroit) où toutes les données sont stockées. Dans notre cas, ce sont des images, du code, des styles, etc.

Le plus facile ce que vous pouvez faire vous-même est activer la mise en cache sur l'hébergement.
(Si vous avez un hébergement Ukraine.com.ua, alors vous devez aller dans "paramètres du site" -> "paramètres de base" et il y aura un élément "Caching" et là vous sélectionnez la durée requise pour laquelle votre site sera être mis en cache. De ma part, je recommande de le définir sur 2 semaines - avec cette période de mise en cache, les informations sur la vitesse des pages Google ajoutent beaucoup de points.)

d'autres méthodes liées au htaccess, aux balises du navigateur, etc. peuvent être trouvées sur Internet pour pas mal d'articles et je ne vois pas l'intérêt de repeindre. Vous pouvez lire sur les types de mise en cache dans l'article sur Habré.

#2 CSS (styles)

CSS - (feuilles de style en cascade - feuilles de style en cascade).
Que peut-on faire avec les styles ?
Bien d'abord presse-les.
en deuxième réduire le nombre de fichiers, c'est-à-dire fusionner autant que possible pour réduire le nombre d'appels au serveur.
Troisièmementintégrez les principaux styles qui affectent l'affichage de la partie visible du premier écran directement dans , et laissez le reste dans le fichier.

Je laisse également quelques liens utiles :

• services de compression css
• comment compresser des fichiers css

#3 JS (scripts)

Ici, nous avons également plusieurs façons d'optimiser les scripts.

1. Différer le chargement du script. Gonflez-le aussi bas que possible, mettez-le derrière ou même plus bas parfois ça aide, parfois ce n'est pas une option. Mais le point numéro 2 vient à la rescousse.
2. ASYNC – chargement de script asynchrone. Ceci est fait en utilisant le paramètre "async"

   Il y a plus de détails sur async ici.
   Un peu plus d'informations sur JS et son influence.

3. Point mineur.
   JS peut également être compressé. Fusionner également en 1 fichier.

#4 Photos

Vous pouvez toujours faire trois choses : regarder le feu, regarder l'eau et optimiser les images.

Le sujet est assez vaste, je vais donc essayer de ne vous donner que des informations importantes.

Optimiser le poids.

Comment? Par le biais d'un programme ou d'un service.

• Programme de travail de masse avec des images Image de pierre rapideavec ça tu peux
  Redimensionner les images en masse. Comment et quoi déjà google n'est pas difficile.
  Télécharger l'image Faststone.
  
• Service de réduction de la taille des images - Panda. Ou plutôt TinyPNG & TinyJPG.
  Le principal avantage d'EN LIGNE. Il suffit de télécharger les fichiers et de les récupérer dans une version compressée - La qualité n'en souffre pas du tout (c'est magique).
  Liens : tinypng.com & tinyjpg.com

Optimiser la taille.

La taille comme je l'ai écrit ci-dessus peut être modifiée à l'aide du programme image de pierre rapide.
La taille est Hauteur x Poids (Hauteur par Largeur).

Exemple:

(Si vous voulez en savoir plus à ce sujet, vous pouvez lire l'aide de Google sur ce sujet. ARTICLE de Google, mais je vous préviens que c'est ringard dans une certaine mesure)

Par exemple nous avons 2 images :
1) Poids 100kb, Taille 500x500
2) Poids 100kb, Taille 2500x2500
Il semblerait que quelle différence cela fait-il, ils pèsent le même, donc, les charger devrait être tout aussi compliqué ou simple, mais ce n'était pas là si vous le vérifiez par google page speed insgiht, il jurera toujours à une résolution plus élevée image.

Résumé: Questions de taille. Le poids aussi. (le reste n'est pas si important, mais selon les arguments de certains experts, cela a aussi un impact, maintenant je parle des métadonnées d'image)

Je n'ai vraiment rien écrit sur les métadonnées, eh bien, il n'y a rien à écrire ici ...
Effacez simplement toutes les métadonnées de toutes les images, selon la légende, vous pouvez réduire la taille de 2 fois. j'ai découvert récemment (à propos de l'effet de la taille du fichier, je pensais que c'était assez insignifiant).

En bref sur la sortie :

• problèmes de chargement de site Web les plus courants
• options pour les résoudre
• ce à quoi vous devez faire attention pour que tout aille bien

Passons à la vidéo :

PS
Si vous avez des questions ou n'êtes pas d'accord avec quelque chose, écrivez-le dans les commentaires.