EWWW Image Optimizer<\/a>\u00a0et d\u2019autres. Il est, par ailleurs, possible d\u2019effectuer une optimisation interne de la compression des donn\u00e9es en utilisant zopfliPNG. Le but principal de ce logiciel est de s\u00e9lectionner les param\u00e8tres de compression optimaux en supprimant les donn\u00e9es non n\u00e9cessaires du fichier. Ici vous devez \u00eatre prudents : dans les modes des certains outils il y des pertes de qualit\u00e9, ce qui pourrait ne pas vous convenir (si vous vous attendez \u00e0 ce que l\u2019image ajust\u00e9e soit conforme \u00e0 l\u2019original ).<\/p>\nLe processus d\u2019optimisation des fichiers en JPEG est aussi divis\u00e9 en deux types : avec et sans perte de qualit\u00e9. En g\u00e9n\u00e9ral, il est recommand\u00e9 d\u2019utiliser le JPEG package de Mozilla, qui est con\u00e7u sp\u00e9cialement pour la meilleure compression des images de ce format. Pour une optimisation sans perte, vous pouvez utiliser jpegtran, et avec pertes \u2013 cjpeg.<\/p>\n
<\/p>\n
La mise en cache des titres<\/h3>\n
C\u2019est la m\u00e9thode la plus facile de l\u2019optimisation du parcours client. Il consiste \u00e0 mettre dans le cache du navigateur les ressources exceptionnels : les images, les fichiers CSS et JS, les polices, parfois m\u00eame le document HTML. Par cons\u00e9quent, la sollicitation de chaque ressource au serveur s\u2019effectue qu\u2019une seule fois. Si vous utilisez Nginx, rajoutez simplement une instruction : add_header Cache-Control “max-age=31536000, immutable”;<\/p>\n
D\u00e8s maintenant, le navigateur est autoris\u00e9 \u00e0 mettre en cache les ressources pour une dur\u00e9e d\u2019un an (ce qui correspond presque \u00e0 une \u00e9ternit\u00e9). Le nouveau param\u00e8tre \u00ab immutable \u00bb indique que la ressource ne doit pas \u00eatre chang\u00e9e.<\/p>\n
Une autre question surgit : que faire si jamais on a besoin de changer la ressource mise en cache ? La r\u00e9ponse est simple : changez son adresse, l\u2019URL). Par exemple, vous pouvez ajouter une version au nom du fichier. On peut utiliser cette m\u00e9thode \u00e9galement pour les documents HTML, mais, en g\u00e9n\u00e9ral, pour une dur\u00e9e de mise en cache plus courte ( par exemple, une minute ou une heure).<\/p>\n
<\/p>\n
La compression des donn\u00e9es<\/h3>\n
Il est obligatoire de compresser tout texte ou donn\u00e9e lors de leur transfert depuis un serveur vers le navigateur. La plupart des serveurs web dispose d\u2019un gzip-compresseur des r\u00e9sultats.<\/p>\n
Toutefois, l\u2019activation d\u2019une simple compression n\u2019est pas suffisant.<\/p>\n
Premi\u00e8rement, il faut ajuster le taux de compression afin qu\u2019il soit le plus proche du maximum.<\/p>\n
Deuxi\u00e8mement, vous pouvez utiliser la compression statique, c\u2019est-\u00e0-dire les fichiers pr\u00e9alablement compress\u00e9s, et les mettre sur le disque. Le serveur web va ensuite chercher la version compress\u00e9e et la rendra imm\u00e9diatement une fois trouv\u00e9. Troisi\u00e8mement, vous pouvez utiliser la compression des algorithmes encore plus efficace : zopfli ( compatible avec gzip) et brotli ( l\u2019algorithme de compression r\u00e9cent). Brotli ne pourra fonctionner qu\u2019avec HTTPS.<\/p>\n
Comme la compression de ces algorithmes ( zopfli en particulier) est ch\u00e8re, nous les utilisons toujours dans la version statique.<\/p>\n
Pour optimiser l\u2019effet de la compression des fichiers, on applique d\u2019abord le processus de minification : suppression des traductions inutiles des chaines, des espaces, et d\u2019autres caract\u00e8res superflus. Ce process est sp\u00e9cifique pour chaque format. Vous devez aussi veiller \u00e0 compresser d\u2019autres donn\u00e9es de texte sur le site.<\/p>\n
<\/p>\n
Utilisation du RDC<\/h2>\n
<\/p>\n
Une autre mesure tr\u00e8s conseill\u00e9e pour l\u2019augmentation de la performance web est l\u2019utilisation d\u2019un RDC ( R\u00e9seau de diffusion de contenu) o\u00f9 de nombreuses strat\u00e9gies de marketing visent l\u2019essence de la technologie.<\/p>\n
<\/p>\n
Th\u00e9orie : pourquoi<\/h3>\n
Initialement, les RDC ont \u00e9t\u00e9 con\u00e7us pour d\u00e9charger les r\u00e9seaux internet des diffusions diverses de la part des m\u00e9dias sociaux. Par exemple, lorsque plusieurs milliers de personnes regardent une vid\u00e9o en direct, cela cr\u00e9e une charge tr\u00e8s importante sur la bande passante du serveur. De plus, il est extr\u00eamement difficile d\u2019assurer une communication de qualit\u00e9 et ininterrompue pour un grand nombre de clients ( \u00e0 cause des d\u00e9lais et l\u2019instabilit\u00e9 du r\u00e9seau).<\/p>\n
Pour r\u00e9soudre ce probl\u00e8me, on a cr\u00e9\u00e9 le RDC, c\u2019est-\u00e0-dire un r\u00e9seau de distribution auquel se connectaient les clients ( par exemple, les spectateurs) et rejoignaient les h\u00f4tes d\u2019origine (les diffuseurs ) qui \u00e9taient d\u00e9j\u00e0 pr\u00e9sents sur le serveur. Dans le m\u00eame temps, le nombre de connexions au serveur \u00e9tait r\u00e9duit \u00e0 1 (ou plusieurs), et le nombre de connexions au RDC pouvait atteindre des millions en raison de la mise en cache du contenu par le r\u00e9seau.<\/p>\n
Aujourd\u2019hui, la plupart des RDC se positionnent comme le moyen d\u2019augmentation de la performance web en r\u00e9duisant la distance entre le contenu et le client (le visiteur du site).<\/p>\n
<\/p>\n
Les effets possibles<\/h3>\n
Comment pourrais-je augmenter la performance du site en utilisant le RDC ?<\/p>\n
Oui, en effet, en r\u00e8gle g\u00e9n\u00e9rale, l\u2019utilisateur se connecte au serveur du r\u00e9seau le plus proche. Les connexions TCP et TLS sont, ensuite, \u00e9tablies rapidement. Par ailleurs, si le contenu est sur le serveur CDN, l\u2019utilisateur y a acc\u00e8s tr\u00e8s vite. La charge sur notre propre serveur est r\u00e9duite.<\/p>\n
Deuxi\u00e8mement, le RDC ne peut pas juste distribuer le contenu sans le faire changer. Il l\u2019optimise de sa fa\u00e7on et le rend sous une forme plus compacte : les images, le test etc sont compress\u00e9s. Gr\u00e2ce \u00e0 ces optimisations, le temps de t\u00e9l\u00e9chargement du contenu est r\u00e9duit.<\/p>\n
<\/p>\n
Les d\u00e9savantages de l\u2019utilisation du RDC<\/h3>\n
A c\u00f4t\u00e9 des avantages il y a toujours des inconv\u00e9nients : il arrive que l\u2019objet ne soit pas disponible dans le cache du n\u0153ud RDC . Par exemple, il n\u2019a pas encore \u00e9t\u00e9 demand\u00e9 ou ne peut juste pas y \u00eatre mis (document HTML). Dans ce cas, on fait face \u00e0 des retards suppl\u00e9mentaires qui sont cr\u00e9\u00e9s entre le n\u0153ud du RDC et notre serveur.<\/p>\n
Les RDC sont con\u00e7us pour acc\u00e9l\u00e9rer l\u2019acc\u00e8s au site. Pourtant il y a des situations quand la route du r\u00e9seau fonctionnerait mieux sans l\u2019utilisation des RDC. Ceci se r\u00e9v\u00e8le particuli\u00e8rement important pour des RDC mondiaux, pour lesquels le march\u00e9 de la Russie n\u2019est pas la plus grande priorit\u00e9.<\/p>\n
Finalement, les r\u00e9seaux du contenu constituent des syst\u00e8mes complexes instables, o\u00f9 tr\u00e8s fr\u00e9quents sont les accidents divers, peu importe le pays. En utilisant les RDC nous ajoutons une complication suppl\u00e9mentaire.<\/p>\n
<\/p>\n
Maintenir le r\u00e9sultat<\/h2>\n
<\/p>\n
Supposons que vous avez r\u00e9ussi \u00e0 obtenir une bonne performance du site. Les utilisateurs et les propri\u00e9taires de la ressource sont heureux. Apr\u00e8s cela vous pouvez oublier les probl\u00e8mes li\u00e9s \u00e0 la performance ? Bien s\u00fbr que non. Pour que votre site fonctionne bien de mani\u00e8re constante, vous devez tout le temps le surveiller et maintenir.<\/p>\n
<\/p>\n
Le maintien de la performance<\/h3>\n
Tout projet web en ligne est r\u00e9guli\u00e8rement mis \u00e0 jour. Les changements ont lieu dans des mod\u00e8les courants (les th\u00e8mes, interfaces) et dans le contenu. De plus, le code de programmation (client et serveur) change de mani\u00e8re active.<\/p>\n
Chaque changement peut affecter la vitesse du site. Pour surveiller cet impact, vous devez mettre en place un syst\u00e8me de surveillance synth\u00e9tique de la vitesse du site au stade du d\u00e9veloppement de celui-ci. Gr\u00e2ce \u00e0 cela, les probl\u00e8mes li\u00e9s \u00e0 la vitesse pourront \u00eatre intercept\u00e9s avant que les utilisateurs ne les remarquent.\u00a0La website monitoring<\/a> fait donc partie int\u00e9grante de l’optimisation.<\/p>\nPour optimiser le contenu entrant, il est n\u00e9cessaire d\u2019int\u00e9grer les proc\u00e9dures d\u2019optimisation dans le syst\u00e8me de gestion de contenu. Premi\u00e8rement, cela concerne le traitement d\u2019image.<\/p>\n
La performance des sites est un domaine tr\u00e8s dynamique : de nouveaux standards apparaissent et leur support par les navigateurs change. Par cons\u00e9quent, il est important de v\u00e9rifier r\u00e9guli\u00e8rement les technologies du projet, des processus et logiciels utilis\u00e9s.<\/p>\n
<\/p>\n
La surveillance de la performance pour les utilisateurs r\u00e9els<\/h3>\n
Les test synth\u00e9tiques dans des conditions laboratoires id\u00e9ales sont certes tr\u00e8s utiles pour \u00e9valuer les changements dans le code du syst\u00e8me, mais ce n\u2019est pas suffisant. En fin de compte, nous voulons que le site soit performant pour des utilisateurs r\u00e9els. Pour collecter ce genre d\u2019information, il existe un outil de surveillance de la vitesse du site, telle que la per\u00e7oivent les utilisateurs (RUM \u2013 real user monitoring).<\/p>\n
Pour mettre en place le RUM, il suffit de lancer l\u2019un des syst\u00e8mes d\u2019analyse ( Yandex.Metrica, Google Analytics) et observer les rapports sur le temps de chargement du site.<\/p>\n
<\/p>\n
Conclusions<\/h3>\n
Le sujet de la performance web, qui affecte de nombreux aspects de la conception et de la maintenance d\u2019une application web : depuis le code serveur jusqu\u2019\u00e0 contenu, est assez vaste. Cela signifie, qu\u2019il est impossible d\u2019obtenir de bons r\u00e9sultats sans y impliquer une \u00e9quipe qui veillera \u00e0 son d\u00e9veloppement.<\/p>\n
La chose la plus importante \u00e0 retenir : pensez aux utilisateurs, tenez compte des conditions diff\u00e9rentes dans lesquels ils utilisent le site. L\u2019augmentation de la performance du site est un processus qui peut \u00eatre plus ou moins r\u00e9ussi pendant les \u00e9tapes diff\u00e9rentes du projet.<\/p>","protected":false},"excerpt":{"rendered":" Chacun sait qu\u2019un site lent c\u2019est p\u00e9nible. De graves probl\u00e8mes dans la solution des t\u00e2ches quotidiennes apparaissent en raison du site qui freine. Parfois c\u2019est juste agassant. Parfois, le freinage est d\u00fb \u00e0 une panne, un d\u00e9ni de service et les gens partent sans attendre le chargement. Ceci est significatif dans les cas du…","protected":false},"author":10380808,"featured_media":3348,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"pages-templates\/pages-minitools-3.php","meta":[],"categories":[60],"tags":[],"_links":{"self":[{"href":"https:\/\/test.sitechecker.pro\/fr\/wp-json\/wp\/v2\/pages\/1063"}],"collection":[{"href":"https:\/\/test.sitechecker.pro\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.sitechecker.pro\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.sitechecker.pro\/fr\/wp-json\/wp\/v2\/users\/10380808"}],"replies":[{"embeddable":true,"href":"https:\/\/test.sitechecker.pro\/fr\/wp-json\/wp\/v2\/comments?post=1063"}],"version-history":[{"count":0,"href":"https:\/\/test.sitechecker.pro\/fr\/wp-json\/wp\/v2\/pages\/1063\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/test.sitechecker.pro\/fr\/wp-json\/wp\/v2\/media\/3348"}],"wp:attachment":[{"href":"https:\/\/test.sitechecker.pro\/fr\/wp-json\/wp\/v2\/media?parent=1063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/test.sitechecker.pro\/fr\/wp-json\/wp\/v2\/categories?post=1063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/test.sitechecker.pro\/fr\/wp-json\/wp\/v2\/tags?post=1063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}