La vitesse de chargement d'un site

Il existe de nombreuses discussions sur ce sujet, mais il est clair que chaque site Web a ses propres particularités et chaque particularité peut rendre plus ou moins difficile le chargement d'un site Web..

Également, plusieurs outils et méthodes sont apparus qui vous donneront un score de chargement des pages Web mais de mon point de vue, il est préférable de vous résumer sur les outils de vitesse de page Google, Outils Pingdom si GTMatrix.

Également, il est important de mettre beaucoup l'accent sur l'expérience utilisateur et la navigation sur le site Web pour être une expérience agréable pour le visiteur. Concernant la plateforme WordPress, Je l'utilise depuis très longtemps et j'ai vu quels sont les problèmes les plus courants qu'un site Web peut avoir en matière de vitesse de chargement., même s'il s'agit d'un thème Premium ou Gratuit.

J'essaierai d'expliquer chacun mode d'optimisation de fichier:

1: Minimiser les fichiers CSS

C'est probablement l'un des processus les plus difficiles d'optimisation d'un fichier. Pourquoi?

Même si techniquement, son concept est très simple, en réalité la grande majorité, surtout dans le cas de personnes peu familiarisées avec les techniques informatiques, elles abandonnent rapidement cette analyse et préfèrent se tourner vers une personne spécialisée..

Pour ceux qui connaissent ces techniques, c'est un peu plus simple et ils découvrent de nombreux outils pour les aider dans ce processus..

Qu'est-ce que la minimisation? ( dans la minification engleza ).

Sur certains sites, vous trouverez cela plus facile ainsi que l'optimisation des fichiers CSS, JS et HTML. D'autres l'appellent la minification.

En général, le processus d'optimisation consiste en 2 processus complémentaires:

• Minificarea
• Concaténarea

L'exploration signifie supprimer les parties inutiles des fichiers CSS et JS ( Script Java )pour les rendre plus compacts.

Lorsqu'un programmeur écrit un code, il inclut des sauts de ligne, des espaces et des commentaires qui faciliteront la lecture du code mais votre navigateur Web n'a pas besoin de traiter le code. donc, La minification élimine ces éléments inutiles. Ce code sera beaucoup plus lisible pour les visiteurs, mais les ordinateurs ne s'en soucient pas vraiment car ils peuvent le traiter sans problème.. Ces espaces, les parties inutiles peuvent ajouter quelques octets supplémentaires à la taille du fichier, ce qui les rendra légèrement plus volumineux que nécessaire.

Donc en conclusion l'idée est de réduire la taille des fichiers afin qu'ils puissent être téléchargés plus rapidement.

Avant la remise, un fichier CSS ressemblera à quelque chose comme ça:

Alors ça devrait ressembler à ça :

Concatenare

La concaténation signifie joindre des codes. Si par exemple vous avez 10 Fichiers CSS sur votre site, le processus de concaténation les combinera.

Qu'est-ce que la minification aidera

J'essaierai de faire une analogie pour faciliter la compréhension. Une analogie dans laquelle on parle de requêtes HTTP ( demandes du navigateur ).

Imagine que tu es avec des amis. Allez au bar pour commander une tournée de boissons, pour vous et ceux 7 tes amis. Dans cet exemple, vous êtes comme un navigateur Web (par exemple, Chrome, Safari etc.), et votre barman. est le serveur web. Votre barman a le maximum 2 mains, donc il ne peut apporter que quelques bières à la fois. Cela signifie qu'il doit tout faire 4 voyager au réfrigérateur pour vous apporter ces 8 puisque. Cela prend du temps.

Mais, si vous commandez un pichet de bière à la place? De cette façon, tout 8 les boissons sont dans un seul contenant, de sorte qu'en un seul voyage, le barman peut vous apporter la commande. C'est beaucoup plus efficace.

Tout comme votre barman., les navigateurs ne peuvent gérer qu'un certain nombre de fichiers à la fois. donc, plus vous avez de fichiers sur votre site., plus il faut de voyages vers le serveur. Et les sites Web modernes commandent souvent des dizaines de fichiers à la fois.

La concaténation joint plusieurs fichiers, pour que votre serveur. être en mesure d'envoyer moins de fichiers au navigateur et ce sera un processus plus rapide.

Cela semble assez facile, donc quel est le problème?

Dans certains cas, la minification et la concaténation appropriées peuvent faire des merveilles. Chaque site se comportera différemment en fonction de l'ensemble spécifique de thèmes et de plugins en cours d'exécution et de la manière dont ils sont codés. Les environnements de serveur peuvent faire, également, une différence.

Cela peut être un problème si vous essayez de tester avec Google PageSpeed ​​parce que Google veut autre chose, souhaite que les fichiers JS soient déplacés vers le bas du site, mais cela peut entraîner d'autres problèmes sur le site. Donne, Je sais qu'il est difficile de trouver un équilibre parfait entre tous les outils de test de vitesse.

La minification en vaut la peine?

De mon point de vue oui, cela en vaut la peine même si ce n'est pas le plus gros gain du site. Ici, nous avons parlé de minimiser les fichiers CSS, car la minimisation de JS est un véritable défi pour ceux qui sont inexpérimentés car ils ne sont pas si intuitifs et vous ne réalisez peut-être pas lequel doit être supprimé.

Mettez en œuvre la mise en cache des pages et optimisez vos images. sont à la fois assez faciles à mettre en œuvre et dans lesquels vous constaterez une amélioration visible du temps de chargement.

À propos Optimisation de site Web J'ai écrit il y a quelque temps mais cet article concerne strictement l'optimisation des fichiers.

2: Optimiser la diffusion CSS

Les ressources de blocage de rendu sont des fichiers statiques, comme les polices, fișiere HTML, CSS et JavaScript, qui sont vitales pour le processus de rendu d'une page Web.

Lorsque le navigateur rencontre une ressource de blocage de lecture, il arrête de télécharger le reste des ressources jusqu'à ce que ces fichiers critiques soient traités. En attendant, tout le processus de lecture est suspendu. D'autre part, les ressources qui ne bloquent pas le rendu ne retardent pas la lecture de la page. Le navigateur peut les télécharger en toute sécurité en arrière-plan après la lecture initiale de la page.

pourtant, toutes les ressources que le navigateur considère comme bloquantes ne sont pas essentielles pour le premier affichage; tout dépend des caractéristiques individuelles de la page.

Il existe des bonnes pratiques que vous pouvez utiliser pour transformer ces ressources de blocage de lecture non critiques en ressources de blocage de lecture non.. en outre, tu peux réduire, également, nombre et / ou la taille des ressources de blocage de lecture, qui sont encore critiques et ne peuvent pas être éliminés. Ainsi la vitesse de chargement d'un site devient bien meilleure

Pourquoi éliminer les ressources bloquant le rendu?

L'option WP Roket Optimisation de la livraison CSS répond à la recommandation Google PageSpeed:

Éliminez les ressources bloquant le rendu ou en RO Supprimer les ressources de verrouillage de lecture

Que fait cette option?

• Générez le chemin CSS critique nécessaire pour rendre la partie visible de votre site. la toile
• Téléchargez tous les autres fichiers CSS de manière asynchrone, qui est reporté, sans bloquer la lecture.

Que se passe-t-il réellement lorsque vous activez cette option ?

Le CSS sera généré pour votre site. en arrière-plan et ajouté au chargement de la page suivante. Puis, CSS sera chargé de manière asynchrone (c'est-à-dire sans bloquer la lecture) sur votre site web.

Le chemin CSS critique sera supprimé lors du chargement de la page. Cela devrait éviter les problèmes de mise en page lorsqu'un site injecte du JavaScript ou met à jour les classes CSS après l'application du chemin CSS critique.

CSS est stocké dans le dossier suivant sur votre serveur.: / contenu wp / cache / critique-css /

Certaines modifications de code seront apportées:

• Les chemins relatifs dans les images et les polices seront automatiquement modifiés en URL absolues.
• Le CSS critique sera coupé et minimisé avec soin. Cela signifie que tous les espaces nécessaires (comme les opérations de calcul internes ()) écrire des barres obliques inverses (comme « f311’ pour un glyphe dans une police d'icônes) ils seront gardés.
• Les règles sur la face de la police seront supprimées pour améliorer au maximum la métrique du contenu de peinture.
• Dans les pages où cette option est active, les polices ne seront pas préchargées, pour améliorer la plus grande peinture de contenu.

3: Combinez des fichiers CSS

Pendant la concaténation (c'est-à-dire combiner CSS et JS en moins de fichiers) est considéré comme une bonne pratique en HTTP / 1, ce n'est pas forcément le cas avec HTTP / 2.

Il y a des débats en cours sur la question de savoir si certaines concaténations, c'est-à-dire combiner des fichiers en petits groupes, sont bénéfiques. La vraie réponse est que cela peut varier d'un site à l'autre. Nous avons tendance à croire que, la concaténation n'aura pas un si grand avantage sur HTTP / 2, mais vous devriez tester le temps de chargement de votre site. avec et sans ces options, car les résultats peuvent varier.

Si votre serveur. utilise HTTP / 1, ça vaut le coup d'essayer. Notez cependant que ces paramètres ne fonctionnent pas avec tous les plugins ou thèmes!

Cette option peut être activée chez WP Roket et si vous avez certains fichiers à l'exception, ils peuvent être ajoutés à la liste d'exceptions.

4: Réduisez et combinez les fichiers Java Script

Combinez des fichiers JavaScript pour fusionner les ressources internes du site, ressources tierces et JS en ligne, réduction des requêtes HTTP.

La même philosophie s'applique ici que pour la minimisation des fichiers CSS, ce que j'ai écrit ci-dessus. La même logique est suivie, si votre site contient des fichiers JS du thème ou d'un certain module, ils doivent également être optimisés et concaténés.

Vous pouvez également spécifier certains fichiers à exclure de la liste de concaténation. sont ces fichiers qui peuvent causer certains problèmes opérationnels ou graphiques pour le site Web.

Pour les identifier, vous devez mieux connaître la structure du site Web et des pages.

5: Importer du JavaScript différé

Et cette option répond à la recommandation Google PageSpeed:

Éliminez les ressources bloquant le rendu ou en RO Supprimer les ressources de verrouillage de lecture

Pour la performance, il est préférable que les fichiers JavaScript soient téléchargés dans le pied de page (pied de page ) votre site, ou être retardé afin de ne pas bloquer le téléchargement d'autres éléments de votre site., ralentissant ainsi.

Activer cette option, Importer du JavaScript différé, tous les fichiers JavaScript de votre page, y compris ceux minimisés par WP Rocket, sera chargé avec l'attribut delay:

inclut des scripts chargés avec un src même s'ils n'ont pas d'extension .js.

Également, wp-roket recherche tous les scripts en ligne liés à jQuery et les retarde . Cela offre une meilleure compatibilité, donc jquery.js peut être retardé dans plusieurs cas.

Cela améliorera encore votre score. PageSpeed.

Résolution de problème

En fonction de votre site, vous devrez peut-être exclure plus de fichiers du report.

Veuillez noter que Google ne prend pas en compte le fait qu'il n'est parfois pas possible de reporter tout JavaScript – du moins pas sans que votre site ne plante. Tout fichier que vous excluez du report entraînera la PageSpeed ​​indiquée pour vous donner certaines recommandations, mais dans certains cas, il peut être nécessaire de conserver la fonctionnalité souhaitée pour le site.

GTmetrix – Reporte l'analyse JavaScript

Lorsque vous exécutez un tester GTmetrix, vous constaterez peut-être que cela ne vous donne pas une note parfaite pour cette recommandation, même lorsque Load Deferred JavaScript est activé. Voici les raisons les plus courantes. Pour voir si cela s'applique à votre site., assurez-vous de cliquer sur la recommandation pour afficher la liste des fichiers.

Fichiers exclus pour compatibilité

• Tous les fichiers que vous avez dû exclure pour des raisons de compatibilité seront signalés par GTmetrix
• jquery.js Si vous avez activé le mode sans échec, jQuery.js est exclu pour éviter les problèmes de votre site. Vous pouvez essayer de désactiver le mode sans échec, mais assurez-vous de vérifier attentivement votre site pendant que vous êtes déconnecté de WordPress, pour vous assurer que tout fonctionne comme prévu sur votre site.
• Fichiers injectés par Cloudflare
• Fichiers téléchargés indirectement
• Fichiers sans extension .js
• Notes techniques

Ce sont les techniques les plus courantes pour améliorer la vitesse de chargement d'un site made in WordPress et qui utilise le module WP-Roket pour l'optimisation des fichiers mais aussi pour toutes les exigences de Google PageSpeed.

Mais comme vous le verrez, GTMatrix offre des détails fins sur la possibilité d'optimiser un site Web. De mon point de vue, c'est un outil plus utile.

Cet article est en grande partie tiré du site Web de wp-fusée dans lequel il explique chaque erreur comment elle peut être améliorée. C'est un module que j'utilise pour plusieurs projets et je vous garantis qu'il fait un excellent travail.

Tout ce que j'ai écrit ci-dessus peut être facilement amélioré avec ce module.

Vecteur d'entreprise créé par pikisuperstar – www.freepik.com