{"id":1429,"date":"2015-03-14T19:26:36","date_gmt":"2015-03-14T18:26:36","guid":{"rendered":"https:\/\/www.fanjoe.be\/?p=1429"},"modified":"2021-01-13T21:47:50","modified_gmt":"2021-01-13T20:47:50","slug":"raspberry-pi-nginx-ameliorer-les-performances-du-serveur-web","status":"publish","type":"post","link":"https:\/\/www.fanjoe.be\/?p=1429","title":{"rendered":"Raspberry Pi : Nginx : Am\u00e9liorer les performances du serveur web"},"content":{"rendered":"<p>R\u00e9cemment, je suit tomb\u00e9 sur <a title=\"GTmetrix\" href=\"http:\/\/gtmetrix.com\" target=\"_blank\" rel=\"noopener\">gtmetrix.com<\/a>. C&rsquo;est un outil tr\u00e8s int\u00e9ressant qui permet de mesurer les performances d&rsquo;un site internet et qui, surtout, propose des conseils pour am\u00e9liorer la situation.<\/p>\n<p>Vu que mon site est propuls\u00e9 par <a title=\"Nginx\" href=\"http:\/\/nginx.org\/\" target=\"_blank\" rel=\"noopener\">Nginx<\/a> sur un <a title=\"Raspberry Pi\" href=\"http:\/\/www.raspberrypi.org\/\" target=\"_blank\" rel=\"noopener\">Raspberry Pi<\/a> 2 Model B (depuis une semaine), je vais vous d\u00e9tailler les modifications apport\u00e9es pour booster les performances.<\/p>\n<p>Tout d&rsquo;abord, c&rsquo;est tr\u00e8s simple, il suffit de se rendre sur <a title=\"GTmetrix\" href=\"http:\/\/gtmetrix.com\" target=\"_blank\" rel=\"noopener\">gtmetrix.com<\/a> et d&rsquo;entrer l&rsquo;URL du site \u00e0 analyser.<\/p>\n<p>Voici les premi\u00e8re performances retourn\u00e9es par le syst\u00e8me :<\/p>\n<p><a href=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-01.jpg\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1432\" data-permalink=\"https:\/\/www.fanjoe.be\/?attachment_id=1432\" data-orig-file=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-01.jpg\" data-orig-size=\"720,331\" data-comments-opened=\"1\" data-image-title=\"Nginx-GTmetrix-01\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-01-620x285.jpg\" class=\"alignnone size-large wp-image-1432\" src=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-01-620x285.jpg\" alt=\"Nginx-GTmetrix-01\" width=\"620\" height=\"285\" srcset=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-01-620x285.jpg 620w, https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-01-175x80.jpg 175w, https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-01-300x138.jpg 300w, https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-01.jpg 720w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p>Les 3 erreurs principales en rouge indiquent :<\/p>\n<ul>\n<li>Leverage browser caching<\/li>\n<li>Serve scaled images<\/li>\n<li>Enable gzip compression<\/li>\n<\/ul>\n<p><strong>Leverage browser caching<\/strong><\/p>\n<p>Par d\u00e9faut, lors de la navigation sur un site, le navigateur va lire compl\u00e8tement les pages qui le composent et donc charger tous les \u00e9l\u00e9ments (images, css, js, &#8230;) lors de chaque visite.<\/p>\n<p>L&rsquo;id\u00e9e est de demander au navigateur de stocker ces \u00e9l\u00e9ments en cache, c-\u00e0-d en local, pour les r\u00e9utiliser plus tard. Par exemple, le logo du site ou le css peuvent \u00eatre r\u00e9utilis\u00e9s sur diff\u00e9rentes pages.<\/p>\n<p>Pour cela, on va sp\u00e9cifier une date d&rsquo;expiration aux fichiers pour \u00e9viter de les recharger \u00e0 chaque fois.<\/p>\n<pre>$ sudo nano <code>\/etc\/nginx\/sites-enabled\/default<\/code><\/pre>\n<p>Et on ajoute les lignes <code>location ~* \\.(jpg|jpeg|png|gif|ico|css|js|pdf)$ { expires 365d; }<\/code> au fichier comme ci-dessous :<\/p>\n<pre>server {\n\nlisten 80;\nserver_name localhost;\n\nlocation \/ {\nroot \/usr\/share\/nginx\/html;\nindex index.html index.htm;\n}\n\nlocation ~* \\.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {\nexpires 365d;\n}\n\n}<\/pre>\n<p><strong>Serve scaled images<\/strong><\/p>\n<p>Lorsque vous ins\u00e9rez une image dans une page web, \u00e9vitez de sp\u00e9cifier une taille (largeur \/ hauteur) inf\u00e9rieure \u00e0 l&rsquo;image originale. Sinon, le navigateur devra charger une grande image qui sera ensuite affich\u00e9e en petit. Pr\u00e9f\u00e9rez charger la juste taille.<\/p>\n<p>Dans WordPress, il est possible de d\u00e9finir les formats qui seront cr\u00e9\u00e9s au moment de l&rsquo;importation.<\/p>\n<p>Dans le cas de mon site, l&rsquo;image en pleine largeur fait 620px. Je peux donc uploader une image en 1000px qui sera redimensionn\u00e9e \u00e0 max 175&#215;175, 300&#215;300 et 620&#215;620. Un clic sur l&rsquo;image \u00e0 620px ouvrira l&rsquo;image originale \u00e0 1000px.<\/p>\n<p><a href=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-03.png\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1436\" data-permalink=\"https:\/\/www.fanjoe.be\/?attachment_id=1436\" data-orig-file=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-03.png\" data-orig-size=\"650,200\" data-comments-opened=\"1\" data-image-title=\"Nginx-GTmetrix-03\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-03-620x191.png\" class=\"alignnone size-large wp-image-1436\" src=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-03-620x191.png\" alt=\"Nginx-GTmetrix-03\" width=\"620\" height=\"191\" srcset=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-03-620x191.png 620w, https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-03-175x54.png 175w, https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-03-300x92.png 300w, https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-03.png 650w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p>Il est \u00e9galement important de bien compresser les images avant de les envoyer et de choisir le format le plus ad\u00e9quat : JPEG, PNG ou GIF.<\/p>\n<p>L&rsquo;outil <a title=\"ImageOptim\" href=\"https:\/\/imageoptim.com\/fr.html\" target=\"_blank\" rel=\"noopener\">ImageOptim<\/a> est un tr\u00e8s bon utilitaire gratuit sur MAC.<\/p>\n<div class=\"tiled-gallery type-rectangular tiled-gallery-unresized\" data-original-width=\"980\" data-carousel-extra='{&quot;blog_id&quot;:1,&quot;permalink&quot;:&quot;https:\\\/\\\/www.fanjoe.be\\\/?p=1429&quot;,&quot;likes_blog_id&quot;:71477700}' itemscope itemtype=\"http:\/\/schema.org\/ImageGallery\" > <div class=\"gallery-row\" style=\"width: 980px; height: 243px;\" data-original-width=\"980\" data-original-height=\"243\" > <div class=\"gallery-group images-1\" style=\"width: 243px; height: 243px;\" data-original-width=\"243\" data-original-height=\"243\" > <div class=\"tiled-gallery-item tiled-gallery-item-small\" itemprop=\"associatedMedia\" itemscope itemtype=\"http:\/\/schema.org\/ImageObject\"> <a href=\"https:\/\/i0.wp.com\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-04.png?ssl=1\" border=\"0\" itemprop=\"url\"> <meta itemprop=\"width\" content=\"239\"> <meta itemprop=\"height\" content=\"239\"> <img decoding=\"async\" class=\"\" data-attachment-id=\"1437\" data-orig-file=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-04.png\" data-orig-size=\"256,256\" data-comments-opened=\"1\" data-image-title=\"Nginx-GTmetrix-04\" data-image-description=\"\" data-medium-file=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-04.png\" data-large-file=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-04.png\" src=\"https:\/\/i0.wp.com\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-04.png?w=239&#038;h=239&#038;crop=1&#038;ssl=1\" srcset=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-04.png 256w, https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-04-175x175.png 175w, https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-04-100x100.png 100w\" width=\"239\" height=\"239\" loading=\"lazy\" data-original-width=\"239\" data-original-height=\"239\" itemprop=\"http:\/\/schema.org\/image\" title=\"Nginx-GTmetrix-04\" alt=\"Nginx-GTmetrix-04\" style=\"width: 239px; height: 239px;\" \/> <\/a> <\/div> <\/div> <!-- close group --> <div class=\"gallery-group images-1\" style=\"width: 737px; height: 243px;\" data-original-width=\"737\" data-original-height=\"243\" > <div class=\"tiled-gallery-item tiled-gallery-item-large\" itemprop=\"associatedMedia\" itemscope itemtype=\"http:\/\/schema.org\/ImageObject\"> <a href=\"https:\/\/i0.wp.com\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-05.png?ssl=1\" border=\"0\" itemprop=\"url\"> <meta itemprop=\"width\" content=\"733\"> <meta itemprop=\"height\" content=\"239\"> <img decoding=\"async\" class=\"\" data-attachment-id=\"1438\" data-orig-file=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-05.png\" data-orig-size=\"1026,334\" data-comments-opened=\"1\" data-image-title=\"Nginx-GTmetrix-05\" data-image-description=\"\" data-medium-file=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-05-300x98.png\" data-large-file=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-05-620x202.png\" src=\"https:\/\/i0.wp.com\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-05.png?w=733&#038;h=239&#038;ssl=1\" srcset=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-05.png 1026w, https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-05-175x57.png 175w, https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-05-300x98.png 300w, https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-05-620x202.png 620w\" width=\"733\" height=\"239\" loading=\"lazy\" data-original-width=\"733\" data-original-height=\"239\" itemprop=\"http:\/\/schema.org\/image\" title=\"Nginx-GTmetrix-05\" alt=\"Nginx-GTmetrix-05\" style=\"width: 733px; height: 239px;\" \/> <\/a> <\/div> <\/div> <!-- close group --> <\/div> <!-- close row --> <\/div>\n<p><span style=\"text-decoration: underline;\"><strong>Edit 13 janvier 2021 :<\/strong><\/span><\/p>\n<p>Il est \u00e9galement possible d&rsquo;utiliser des outils en ligne pour compresser les images comme : <a href=\"https:\/\/www.websiteplanet.com\/fr\/webtools\/imagecompressor\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.websiteplanet.com\/<\/a> .<\/p>\n<p>Merci Nancy pour ton mail ! \ud83d\ude42<\/p>\n<p><strong>Enable gzip compression<\/strong><\/p>\n<p>Gzip permet de compresser les pages Web et les feuilles de style avant de les envoyer vers le navigateur. Cela r\u00e9duit consid\u00e9rablement le temps de transfert puisque les fichiers sont beaucoup plus petits.<\/p>\n<p>Pour activer la compression Gzip dans Nginx :<\/p>\n<pre>$ sudo nano \/etc\/nginx\/nginx.conf<\/pre>\n<p>Et on d\u00e9-commente les lignes suivantes :<\/p>\n<pre>gzip on;\ngzip_disable \"msie6\";\n\ngzip_vary on;\ngzip_proxied any;\ngzip_comp_level 6;\ngzip_buffers 16 8k;\ngzip_http_version 1.1;\ngzip_types text\/plain text\/css application\/json application\/x-javascript text\/xml application\/xml application\/xml+rss text\/javascript;<\/pre>\n<p>Une fois toutes ces op\u00e9rations effectu\u00e9es, on relance Nginx :<\/p>\n<pre>$ sudo service nginx restart<\/pre>\n<p>Un nouveau petit test avec <a title=\"GTmetrix\" href=\"http:\/\/gtmetrix.com\" target=\"_blank\" rel=\"noopener\">gtmetrix.com<\/a> devrait renvoyer des performances nettement meilleures.<\/p>\n<p><a href=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-02.jpg\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1433\" data-permalink=\"https:\/\/www.fanjoe.be\/?attachment_id=1433\" data-orig-file=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-02.jpg\" data-orig-size=\"720,331\" data-comments-opened=\"1\" data-image-title=\"Nginx-GTmetrix-02\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-02-620x285.jpg\" class=\"alignnone size-large wp-image-1433\" src=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-02-620x285.jpg\" alt=\"Nginx-GTmetrix-02\" width=\"620\" height=\"285\" srcset=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-02-620x285.jpg 620w, https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-02-175x80.jpg 175w, https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-02-300x138.jpg 300w, https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-02.jpg 720w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n<p><strong>Edit 15 mai 2015 :<\/strong><\/p>\n<p>Sur les statistiques de Google, on peut s&rsquo;apercevoir que le temps de chargement des pages a consid\u00e9rablement diminu\u00e9 vers le 10 mars (trait orange), lors de l&rsquo;application des mesures d\u00e9crites dans cet article.<\/p>\n<p><a href=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-06.png\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1650\" data-permalink=\"https:\/\/www.fanjoe.be\/?attachment_id=1650\" data-orig-file=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-06.png\" data-orig-size=\"1068,408\" data-comments-opened=\"1\" data-image-title=\"Nginx-GTmetrix-06\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-06-620x237.png\" class=\"alignnone size-large wp-image-1650\" src=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-06-620x237.png\" alt=\"Nginx-GTmetrix-06\" width=\"620\" height=\"237\" srcset=\"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-06-620x237.png 620w, https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-06-175x67.png 175w, https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-06-300x115.png 300w, https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-06.png 1068w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>R\u00e9cemment, je suit tomb\u00e9 sur <a title=\"GTmetrix\" href=\"http:\/\/gtmetrix.com\" target=\"_blank\" rel=\"noopener\">gtmetrix.com<\/a>. C&rsquo;est un outil tr\u00e8s int\u00e9ressant qui permet de mesurer les&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1431,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","jetpack_post_was_ever_published":false},"categories":[10,3,12],"tags":[141,51,142],"class_list":["post-1429","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-geek","category-informatique","category-raspberrypi","tag-gtmetric","tag-nginx","tag-performances","end"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/www.fanjoe.be\/wp-content\/uploads\/2015\/03\/Nginx-GTmetrix-00.png","_links":{"self":[{"href":"https:\/\/www.fanjoe.be\/index.php?rest_route=\/wp\/v2\/posts\/1429","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fanjoe.be\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fanjoe.be\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fanjoe.be\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fanjoe.be\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1429"}],"version-history":[{"count":0,"href":"https:\/\/www.fanjoe.be\/index.php?rest_route=\/wp\/v2\/posts\/1429\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fanjoe.be\/index.php?rest_route=\/wp\/v2\/media\/1431"}],"wp:attachment":[{"href":"https:\/\/www.fanjoe.be\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1429"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fanjoe.be\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1429"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fanjoe.be\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}