Augmentez la vitesse de chargement du site Web - Profit Hunter

Malheureusement, ou heureusement, les moteurs de recherche actuels accordent une attention particulière à la vitesse à laquelle le site fonctionne. Cela affecte le classement de la ressource dans la recherche. De plus, la vitesse de chargement détermine le comportement des visiteurs, que les robots prennent également en compte.

Voici quelques conseils pour accélérer votre site.

Inclusion de CSS au tout début

Plus précisément, dans la page d'en-tête. Ainsi, ses éléments seront chargés séquentiellement, du titre au pied de page. Qu'est-ce que ça va donner? Bien sûr, la commodité de travailler avec le site pour l'utilisateur et de le fidéliser. Lorsque CSS est connecté tout en bas, les navigateurs refusent de charger progressivement des éléments. Par conséquent, la page doit faire référence au fichier CSS déjà présent dans la balise head.

Augmentez la vitesse de chargement du site Web - Profit Hunter

JS - à la fin du code

Grâce à la connexion des fichiers JS à la toute fin du téléchargement, la page contenant le contenu principal dont l'utilisateur a besoin sera chargée en premier. La règle principale est de ne pas faire attendre le visiteur. Et de nombreux beaux éléments peuvent être chargés et puis. En passant, lors du chargement du script, les autres composants de la page ne sont pas chargés, même à partir d'autres hôtes.

Utilisation des sous-domaines

Avez-vous beaucoup d’éléments graphiques sur vos sites? Ensuite, vous devriez envisager de les transférer vers un ou plusieurs sous-domaines, considérés comme des serveurs différents pour le navigateur. Cependant, n'utilisez pas des dizaines de sous-domaines: cela ne fait que nuire au site. En tout, vous devez savoir quand vous arrêter.

Nombre de demandes HTTP

Différents scripts, fichiers CSS, photos et flash sont généralement chargés. Il est souhaitable que les navigateurs chargent un maximum de 2 éléments de page à partir du premier hôte. Par conséquent, moins il y en avait, moins il y avait de demandes adressées au serveur.

Cependant, l'apparence du site n'a pas besoin d'être modifiée pour cette raison. Il y a d'autres moyens.

  • Graphiques en ligne. En l'intégrant dans CSS, et non dans la page elle-même, vous obtiendrez un nombre réduit de requêtes sur le serveur et la taille des pages n'augmentera pas.
  • Application des sprites CSS. Leur essence réside dans le fait qu’au lieu de quelques petites images chargées, mais volumineuses. En utilisant le code CSS, il est divisé en images plus petites. Par exemple, vous pouvez traiter plusieurs boutons à la suite, en les combinant dans une image. Moins il y a de téléchargements d'images, moins il y a de requêtes HTTP.
  • Plusieurs fichiers en un. Si le modèle utilise plusieurs fichiers css ou js, il est conseillé d’en créer un fichier.

Nettoyez tous les fichiers JS et CSS de tout code inutile

Supprimez les lignes commentées, les espaces supplémentaires et les onglets. Ces petites choses non pertinentes ajoutent du poids à vos fichiers et, par conséquent, en augmentent le volume. Des services spéciaux sont utilisés pour compresser le code, il n’est donc pas nécessaire de tout éditer manuellement.

Ne réduisez pas l'image avec le code

Si la taille d'origine de la photo ne vous convient pas, il est préférable de la modifier initialement que de l'ajuster à l'aide d'un code CSS ou d'attributs de balise img.

Utiliser le CDN pour les infrastructures

Lorsque des infrastructures sont impliquées dans une ressource (telle que jQuery), il est conseillé d’utiliser un réseau de distribution de contenu (Content Delivery Network) - un cluster de serveurs géographiquement séparés pour assurer un maximum de ressources. rapidité de transmission des données au client.

Le serveur pour la transmission de contenu est sélectionné en fonction de divers critères, par exemple le temps de réponse. En tant que CDN, vous pouvez utiliser l'API Google et l'hébergement de bibliothèques JavaScript de Yandex.

Mise en cache des données dans les navigateurs

Si vous utilisez activement la connexion JS et les scripts CSS, vous devez impérativement vous connecter au cache. Lorsque vous accédez au site pour la première fois, le navigateur de l'utilisateur charge tous les codes des fichiers, ainsi que les composants graphiques et flash. Si l'en-tête HTTP Expires est configuré, lorsque le visiteur reviendra, son navigateur stockera toutes ces données et les pages se chargeront plus rapidement.

Images optimisées

Sélectionnez le format correct pour les images, sinon leur taille pourrait augmenter. Ainsi, dans le format GIF, il est préférable d’enregistrer des images de plusieurs couleurs et, en JPEG, des graphiques complexes multicolores (par exemple, des photos). Le format PNG est utilisé lorsqu'une bonne qualité d'image et un arrière-plan transparent sont nécessaires.

Pour compresser une image dans Photoshop, appuyez simultanément sur les touches "Alt + Maj + CTRL + S" (ne vous cassez pas les doigts) et choisissez le rapport taille / qualité optimal.

Augmentez la vitesse de chargement du site Web - Profit Hunter

Aimez-vous les articles? Inscrivez-vous à la newsletter!

Chercher

Articles Liés