Étapes faciles pour accélérer votre site Web lourd d'images

Le propriétaire du site peut éventuellement vouloir augmenter sa vitesse de téléchargement. Cela augmente le classement des résultats de recherche ; de plus, il est plus agréable pour les visiteurs du site de travailler avec lui en obtenant une réponse plus rapide à leurs actions.

À la recherche d'une solution simple et rapide, les propriétaires de sites installent un grand nombre de plug-ins, qui à leur tour consomment des ressources et ne font que ralentir son travail. Nous n'avons rien contre les plugins d'optimisation, mais ils doivent être utilisés avec précision et en connaissance des principes de leur travail.

De plus, les propriétaires de sites qui n'ont jamais expérimenté l'administration ont souvent une mauvaise compréhension de l'optimisation. Dans leur compréhension, l'optimisation est l'accélération du script à tout prix. La tâche d'optimisation est de produire la vitesse optimale du site au prix optimal des ressources. Par conséquent, il ne peut y avoir d'instructions universelles pour tous les sites.

Rendre votre site Web rapide est une tâche urgente pour tout propriétaire de ressources ou webmaster. Après tout, la vitesse de chargement des pages est l'un des facteurs les plus critiques pour le succès d'une ressource Web, avec un contenu de haute qualité et une belle conception graphique.

Un chargement lent augmente parfois la probabilité de perdre des utilisateurs. Surtout lorsque les visiteurs viennent d'appareils mobiles. Des recommandations simples pour accélérer le chargement du site, que même un utilisateur inexpérimenté peut mettre en œuvre dans la pratique, aideront à minimiser la probabilité de perte de trafic.

1. Optimiser le code HTML et les fichiers CSS et JS

L'optimisation du téléchargement est impossible sans souci de la "propreté" du code transmis au navigateur de l'utilisateur lors de son entrée sur le site. Un grand nombre de caractères dans le code source affecte considérablement la vitesse de chargement, sa brièveté est donc un facteur de succès critique.

Comment minimiser le code pour accélérer le chargement du site

Supprimez les caractères inutiles, les éléments de balisage et les balises de code source. L'automatisation du processus aidera à ajouter un petit insert au début et à la fin du code HTML du site.

Cette méthode de mise en mémoire tampon du contenu HTML est très utile, mais elle peut créer une charge supplémentaire sur la mémoire vive.

Regroupez le même type de fichiers CSS et de fichiers JS. Des applications PHP gratuites comme JCH Optimize, Cloudflare ou Minify, qui sont copiées dans un répertoire séparé et passent par tous les fichiers du site, aideront à combiner les éléments.

2. Supprimer les requêtes HTTP supplémentaires

Le téléchargement d'éléments de page (javascript, images, CSS et fichiers flash) occupe la part du lion des ressources système lors du chargement d'un site. Les requêtes HTTP pour de tels éléments ralentissent sensiblement le site.

Pour éviter les requêtes "supplémentaires", vous devez réduire le nombre de composants de la page. Cela entraînera une diminution proportionnelle des appels au serveur et accélérera le chargement du site.

Cela peut se faire de plusieurs manières :

• Combinez plusieurs images dans un seul fichier graphique (sprite CSS);
• Utilisez des images en ligne (inline-pictures) dans la feuille de style de la page ;
• Plusieurs fichiers CSS ou scripts sur une même page fusionnent en un seul fichier ;
• Minimisez le nombre de scénarios et de plugins.

3. Organisez JavaScript et CSS dans le bon ordre

Il est recommandé de placer les fichiers CSS en haut du code de la page, et le JavaScript en bas. Après cette optimisation, le contenu statique sera chargé en premier, puis uniquement les graphiques dynamiques.

Les éléments flash ou les animations qui nécessitent plus de ressources pour être téléchargées ne « sortiront » pas vers l'avant et ne gâcheront pas l'impression du site dès les premières secondes. Cela garantira un téléchargement fluide du contenu et augmentera l'attrait esthétique de la ressource.

4. Réduisez le nombre de scripts externes

Les scripts externes sont des morceaux de code (textes) accessibles via un lien externe. Les liens créent des requêtes supplémentaires vers de nombreux serveurs différents, ce qui ralentit finalement le site. Pour éviter cela, il est recommandé d'utiliser principalement des scripts locaux intégrés dans la structure du code source de la page.

Bien sûr, se concentrer sur les scripts locaux créera certaines limitations dans l'apparence et la fonctionnalité du site. Mais l'avantage de vitesse de téléchargement qui en résulte vaut ces "sacrifices".

5. Activer le rinçage

Cette fonctionnalité PHP vous permet de ne pas attendre que le serveur de l'utilisateur charge les informations de la ressource, mais de les sortir en plusieurs parties. Pendant que les données sont transmises au navigateur, la fenêtre ouverte ne restera pas vide mais sera progressivement remplie d'éléments chargeables du site. Une telle accélération est particulièrement nécessaire pour les ressources Web avec une interface complexe et un trafic élevé.

Il est préférable de placer la fonction flush au début du code source de la page, juste après le head. À partir de l'en-tête, le contenu HTML s'ouvrira plus rapidement et vous pouvez également activer le chargement parallèle des éléments CSS et JavaScript.

6. Mettez les pages en cache

La mise en cache enregistre certaines informations des pages du site (flash, graphiques, JavaScript et CSS) dans le navigateur de l'utilisateur. Lors de la prochaine exécution, ces fichiers sont instantanément téléchargés à partir du navigateur, ce qui donne au site une vitesse supplémentaire.

Vous pouvez activer la mise en cache en ajoutant un en-tête expires au code HTML. Les sites WordPress sont facilement mis en cache à l'aide de l'installation de plug-ins avec des fonctionnalités gratuites ou partiellement gratuites, telles que W3 Total Cache, Cache Enabler ou Zen Cach.

Pour les nouveaux sites, il est préférable d'utiliser la mise en cache uniquement après la préparation complète pour le lancement. Si vous activez la fonctionnalité pendant le développement, d'autres modifications peuvent ne pas s'afficher correctement sur le site.

7. Utilisez un CDN

Réseau de diffusion de contenu - une chaîne de serveurs dispersés dans des centres de données à travers le monde pour augmenter la vitesse à laquelle le contenu est transféré aux visiteurs. Plus le visiteur est géographiquement proche des serveurs CDN, plus les paquets de données du site sont transmis rapidement.

L'utilisation du CDN est particulièrement importante pour les portails de contenu et à forte charge, dont l'audience principale est très éloignée des serveurs physiques. Ce service minimise le temps d'attente pour les téléchargements à partir de sites étrangers, contribuant à une augmentation de leur classement dans les résultats de recherche locaux. Après tout, le contenu est téléchargé à partir du stockage du serveur le plus proche de l'utilisateur dans son pays.

8. Optimiser les graphiques et la vidéo

Vous devez sélectionner le bon format graphique et vidéo, car le format de fichier affecte directement la vitesse à laquelle les informations sont présentées aux visiteurs.

Formats recommandés pour différents contenus Web :

• SVG – pour les logos vectoriels et les éléments d'interface simples ;
• PNG – pour les schémas et les logos non vectoriels ;
• JPG – pour les photos et les images ;
• MPEG4 – pour la vidéo et l'animation.

Également pour la vidéo et l'animation, un format WEBM relativement nouveau est disponible. Dans la plupart des cas, il fournit une taille de vidéo plus petite avec la même qualité. Cependant, le formulaire a une prise en charge limitée du navigateur (par exemple, il n'y a pas de prise en charge dans le navigateur macOS / iOS Safari). Par conséquent, il est recommandé d'utiliser un fichier WEBM comme source vidéo prioritaire et d'installer MPEG4 comme source alternative. Vous pouvez également utiliser le seul MPEG4 si le partage est inacceptable ou gênant.

Par ailleurs, nous notons que le format vectoriel (SVG) permet une mise à l'échelle sans perte de qualité graphique.

Étapes de l'optimisation de l'image

Étape 1 - Réduire la taille de l'image.

De nombreux CMS populaires, tels que WordPress ou Joomla, ont des plug-ins intégrés pour optimiser les images à partir de l'original. Mais cette méthode crée une charge supplémentaire et peut ralentir le site. Chaque fois que la page se charge, le navigateur accède d'abord au code source, puis redimensionne l'image à la volée.

Pour éviter toute perte de vitesse lors du chargement des images, les éditeurs graphiques intégrés au système d'exploitation, tels que Preview (Mac) ou Microsoft Paint (Windows), ainsi que les services en ligne dotés de fonctionnalités similaires vous aideront. Travailler avec eux nécessitera des compétences minimales dans le travail avec les graphiques.

Étape 2 - Compressez le fichier avant de le télécharger.

Même après optimisation de la taille de l'image, son "poids" est généralement encore loin d'être optimal. Des services pratiques et gratuits comme ImageResize ou TinyPNG aident à réduire la taille sans perte de qualité d'image. La plupart des processus ici sont automatisés. L'utilisateur n'a qu'à télécharger des fichiers et à télécharger déjà compressés à la taille d'image optimale.

9. Appliquer la compression de fichier Gzip

Gzip est une méthode simple de compression des fichiers du site pour économiser les ressources du canal et accélérer le chargement. À l'aide de Gzip, les fichiers sont compressés dans une archive que le navigateur peut télécharger plus rapidement, puis décompressez et affichez le contenu.

Activer l'utilisation de Gzip est assez simple - il vous suffit d'ajouter quelques lignes de code au fichier .htaccess. Par exemple, lors de l'utilisation du serveur Web Apache, le module mod_gzip est disponible pour les webmasters, afin d'activer Gzip, dans ce cas, vous devez ajouter ce code à .htaccess

La compression de fichier Gzip est effectuée pour réduire le nombre de requêtes adressées au serveur à partir d'un navigateur. En d'autres termes, cette technologie réduit le poids initial des fichiers à 70 % pour accélérer le téléchargement.

Façon d'intégrer la compression Gzip

Ajoutez l'extrait de code suivant au fichier de configuration du serveur Web ".htaccess".

Sur serveur Apache

# BEGIN GZIP COMPRESSION
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
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 ^Content-Encoding:.*gzip.*
</IfModule>
# END GZIP COMPRESSION

Sur le serveur Nginx

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

10. Changer d'hébergement

La méthode la plus simple pour accélérer les téléchargements consiste à changer de fournisseur d'hébergement. L'économie sur l'allocation des ressources conduit souvent à une détérioration importante de la qualité des services, ce qui compromet toutes les tentatives d'accélération du chantier sur la vigne.

Si les manipulations avec le contenu, le code et les plugins n'apportent pas de résultats, il est temps de penser à choisir une "maison" plus décente pour le site. Sur un hébergement de qualité avec une haute disponibilité et un support technique attentionné, la ressource Internet recevra une impulsion puissante pour augmenter la vitesse de travail. Et cela sera apprécié par un public reconnaissant.

La chose la plus importante est…

Il est nécessaire de s'efforcer d'accéder au site pendant pas plus de 2-3 secondes. Peu importe si le site s'ouvre pendant 2 voire 3 secondes, mais s'il y en a plus, et alors c'est une raison de penser à accélérer la charge du site.

Vous devez également comprendre qu'il existe deux paramètres pour la vitesse de chargement des pages.

Le premier est la vitesse à laquelle le contenu est affiché (à ce stade, la page est déjà ouverte et affichée à l'utilisateur, tandis que l'indicateur de page transparente est toujours affiché jusqu'à ce que tous les fichiers statiques et les scripts asynchrones soient connectés).

De plus, la seconde est la rapidité de la formation proprement dite de la page, quand tout ce qui devait être connecté l'a été. Vous devez vous concentrer sur le premier paramètre, c'est-à-dire qu'il ne doit pas s'écouler plus de trois secondes avant que la mise en page du site ne s'affiche.

Conclusion

Vous ne pouvez pas ignorer un chiffre tel que la vitesse de chargement du site. C'est lui qui, dès les premières secondes, crée un environnement confortable pour les visiteurs. Plus l'utilisateur obtient rapidement le contenu souhaité, plus il est probable qu'une image positive de la ressource se forme et qu'il se fidélise à celle-ci.