Un blog orienté SEO

Un nouvel article a été publié à l'adresse suivante : https://gdpx.fr/zcs

Moodboard

#ipt_fsqm_form_wrap_57 .ipt_fsqm_form_logo img, #ipt_fsqm_form_wrap_57 .ipt-eform-width-restrain, #ipt_fsqm_form_wrap_57 .ipt_fsqm_form_message_restore, #ipt_fsqm_form_wrap_57 .ipt_fsqm_form_message_success, #ipt_fsqm_form_wrap_57 .ipt_fsqm_form_message_error, #ipt_fsqm_form_wrap_57 .ipt_fsqm_form_message_process, #ipt_fsqm_form_wrap_57 .ipt_fsqm_form_validation_error, #ipt_fsqm_form_wrap_57 .eform-ui-estimator max-width: 100%; min-width: 240px; /**/

Javascript is disabled

Javascript is disabled on your browser. Please enable it in order to use this form.

.ipt_uif_ajax_loader, .ipt_uif_ajax_loader *, ipt_uif_ajax_loader *::before, ipt_uif_ajax_loader *::after box-sizing: border-box;

Chargement

Le contenu de la formation a-t-il répondu à vos attentes ?*

Comment vous sentez-vous après la formation*

Tell us something about your rating

Qu'aimeriez-vous aborder lors d'un prochain cours ?

Envoyer

Your form has been submitted

Thank you %NAME% for taking the quiz/survey/feedback. We have received your answers. You can view it anytime from this link below: %TRACK_LINK% We have also attached a copy of your submission.

Server Side Error

We faced problems while connecting to the server or receiving data from the server. Please wait for a few seconds and try again.

If the problem persists, then check your internet connectivity. If all other sites open fine, then please contact the administrator of this website with the following information.

TextStatus: undefined HTTP Error: undefined

.ipt_uif_ajax_loader, .ipt_uif_ajax_loader *, ipt_uif_ajax_loader *::before, ipt_uif_ajax_loader *::after box-sizing: border-box;

Processing you request

Erreur

Un nouvel article a été publié à l'adresse suivante : https://gdpx.fr/bif

Feuille de présence

#ipt_fsqm_form_wrap_56 .ipt_fsqm_form_logo img, #ipt_fsqm_form_wrap_56 .ipt-eform-width-restrain, #ipt_fsqm_form_wrap_56 .ipt_fsqm_form_message_restore, #ipt_fsqm_form_wrap_56 .ipt_fsqm_form_message_success, #ipt_fsqm_form_wrap_56 .ipt_fsqm_form_message_error, #ipt_fsqm_form_wrap_56 .ipt_fsqm_form_message_process, #ipt_fsqm_form_wrap_56 .ipt_fsqm_form_validation_error, #ipt_fsqm_form_wrap_56 .eform-ui-estimator max-width: 980px; min-width: 240px; /**/

Javascript is disabled

Javascript is disabled on your browser. Please enable it in order to use this form.

.ipt_uif_ajax_loader, .ipt_uif_ajax_loader *, ipt_uif_ajax_loader *::before, ipt_uif_ajax_loader *::after box-sizing: border-box;

Chargement

First Name

Last Name

Email Address

Phone

Date Time Title*

Select Date ×

Signature Pad Title

Envoyer

Votre formulaire a été envoyé

Thank you %NAME% for taking the quiz/survey/feedback. We have received your answers. You can view it anytime from this link below: %TRACK_LINK% We have also attached a copy of your submission.

Server Side Error

We faced problems while connecting to the server or receiving data from the server. Please wait for a few seconds and try again.

If the problem persists, then check your internet connectivity. If all other sites open fine, then please contact the administrator of this website with the following information.

TextStatus: undefined HTTP Error: undefined

.ipt_uif_ajax_loader, .ipt_uif_ajax_loader *, ipt_uif_ajax_loader *::before, ipt_uif_ajax_loader *::after box-sizing: border-box;

Processing your request

Erreur

Un nouvel article a été publié à l'adresse suivante : https://gdpx.fr/9snk

Un nouvel article a été publié à l'adresse suivante : https://gdpx.fr/kayk

Isotope2

<p>* box-sizing: border-box;

body font-family: sans-serif;

/* ---- button ---- */

.button display: inline-block; padding: 0.5em 1.0em; background: #EEE; border: none; border-radius: 7px; background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) ); color: #222; font-family: sans-serif; font-size: 16px; text-shadow: 0 1px white; cursor: pointer;

.button:hover background-color: #8CF; text-shadow: 0 1px hsla(0, 0%, 100%, 0.5); color: #222;

.button:active, .button.is-checked background-color: #28F;

.button.is-checked color: white; text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);

.button:active box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);

/* ---- button-group ---- */

.button-group margin-bottom: 20px;

.button-group:after content: ''; display: block; clear: both;

.button-group .button float: left; border-radius: 0; margin-left: 0; margin-right: 1px;

.button-group .button:first-child border-radius: 0.5em 0 0 0.5em; .button-group .button:last-child border-radius: 0 0.5em 0.5em 0;

/* ---- isotope ---- */

.grid border: 1px solid #333;

/* clear fix */ .grid:after content: ''; display: block; clear: both;

/* ---- .element-item ---- */

.element-item position: relative; float: left; width: 100px; height: 100px; margin: 5px; padding: 10px; background: #888; color: #262524;

.element-item > * margin: 0; padding: 0;

.element-item .name position: absolute;

left: 10px; top: 60px; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: normal;

.element-item .symbol position: absolute; left: 10px; top: 0px; font-size: 42px; font-weight: bold; color: white;

.element-item .number position: absolute; right: 8px; top: 5px;

.element-item .weight position: absolute; left: 10px; top: 76px; font-size: 12px;

.element-item.alkali background: #F00; background: hsl( 0, 100%, 50%); .element-item.alkaline-earth background: #F80; background: hsl( 36, 100%, 50%); .element-item.lanthanoid background: #FF0; background: hsl( 72, 100%, 50%); .element-item.actinoid background: #0F0; background: hsl( 108, 100%, 50%); .element-item.transition background: #0F8; background: hsl( 144, 100%, 50%); .element-item.post-transition background: #0FF; background: hsl( 180, 100%, 50%); .element-item.metalloid background: #08F; background: hsl( 216, 100%, 50%); .element-item.diatomic background: #00F; background: hsl( 252, 100%, 50%); .element-item.halogen background: #F0F; background: hsl( 288, 100%, 50%); .element-item.noble-gas background: #F08; background: hsl( 324, 100%, 50%);

Isotope – filtering & sorting

Filter

show all metal transition alkali and alkaline-earth not transition metal but not transition number > 50 name ends with –ium

Sort

original order name symbol number weight category

Mercury

Hg

80

200.59

Tellurium

Te

52

127.6

Bismuth

Bi

83

208.980

Lead

Pb

82

207.2

Gold

Au

79

196.967

Potassium

K

19

39.0983

Sodium

Na

11

22.99

Cadmium

Cd

48

112.411

Calcium

Ca

20

40.078

Rhenium

Re

75

186.207

Thallium

Tl

81

204.383

Antimony

Sb

51

121.76

Cobalt

Co

27

58.933

Ytterbium

Yb

70

173.054

Argon

Ar

18

39.948

Nitrogen

N

7

14.007

Uranium

U

92

238.029

Plutonium

Pu

94

(244)

// external js: isotope.pkgd.js

// init Isotope var $grid = $('.grid').isotope( itemSelector: '.element-item', layoutMode: 'fitRows', getSortData: name: '.name', symbol: '.symbol', number: '.number parseInt', category: '[data-category]', weight: function( itemElem ) var weight = $( itemElem ).find('.weight').text(); return parseFloat( weight.replace( /[\(\)]/g, '') ); );

// filter functions var filterFns = // show if number is greater than 50 numberGreaterThan50: function() var number = $(this).find('.number').text(); return parseInt( number, 10 ) > 50; , // show if name ends with -ium ium: function() var name = $(this).find('.name').text(); return name.match( /ium$/ ); ;

// bind filter button click $('#filters').on( 'click', 'button', function() var filterValue = $( this ).attr('data-filter'); // use filterFn if matches value filterValue = filterFns[ filterValue ] );

// bind sort button click $('#sorts').on( 'click', 'button', function() var sortByValue = $(this).attr('data-sort-by'); $grid.isotope( sortBy: sortByValue ); );

Un nouvel article a été publié à l'adresse suivante : https://gdpx.fr/7f8u

Un nouvel article a été publié à l'adresse suivante : https://gdpx.fr/exot

Un nouvel article a été publié à l'adresse suivante : https://gdpx.fr/61w

Deuxieme test

Un nouvel article a été publié à l'adresse suivante : https://gdpx.fr/02i

Créer un Sprite CSS

Créer un Sprite CSS

Cet article ne va intéresser qu’une poignée d’intégrateurs, fleuron de l’optimisation des temps de chargement, ayatollahs de la Webperf et autres fascistes râleurs dès qu’une page met plus d’une seconde à charger.

Rassurez-vous, j’en fais moi-même parti (c’est une bonne maladie, je le vis très bien).

Aujourd’hui, on voit une technique d’un autre temps, mais qui peut encore servir : le Sprite CSS. Pour les acharnés, le lien vers la doc de la W3 Schools.

Un Sprite CSS, c’est quoi ?

Un Sprite CSS, c’est une technique qui consiste à regrouper les images de fond sur un même fichier, pour éviter d’avoir trop d’appels HTTP sur le chargement d’une page. C’est surtout pertinent pour les sites qui sont en HTTP1. Rappel : HTTP2 est beaucoup plus rapide que HTTP1, permet de paralléliser les chargements de contenus, et est donc moins sensible à un grand nombre de fichiers pour composer une page.

Tant qu’on est à souligner la quasi-obsolescence de cette technique, on peut également évoquer toutes les évolutions qu’il y a eu au niveau CSS pour générer des fonds en dégradé complexe, mettre des images de fond en base 64, utiliser des librairies d’icônes etc.

Cependant, on peut encore utiliser ce genre de technique pour gratter quelques centaines de milliers de secondes sur les pages où on a des images de fond (je vous avais prévenu, c’est pour les psychopathes).

Comment faire un Sprite CSS

On va prendre un exemple tout bête : les images de fond que j’utilise sur gdm-pixel.fr

Sur les pages profondes, celles qui sont surtout là pour taper sur la longue traine, j’ai plusieurs petites images de fond qui me serve à découper mes sections de page, rajouter des marqueurs autour des titres etc.

Vous trouverez ci-dessous le visuel qui contient ces images.

Ici, j’ai bien un seul fichier pour afficher 7 images différentes (donc un appel HTTP au lieu de 7).

On va prendre l’exemple des titres de niveau deux (H2). Les petites icônes de part et d’autre du titre sont intégrées grâce à une image de fond, en utilisant la pseudo classe «:before » et «:after » de CSS3.

Dans un premier temps, on va positionner ces éléments de part et d’autre du titre. Du coup, on commence par positionner le titre lui-même grâce aux codes suivants :

.gdm-ez-container h2 position: relative; display: inline-block;

Le titre est en « display:inline-block; » pour qu’il ne s’étale pas sur toute la largeur de la page dont l’overflow est en display:none (ça positionnerait mes images de fond hors du conteneur principal donc on ne les verrait pas) , et la position relative, c’est parce que mon « before » et mon « after » vont être en position absolue.

La suite coule de source :

.gdm-ez-container h2::before, .gdm-ez-container h2::after /*On ne veut l’image de fond qu’une seule fois*/ background-repeat: no-repeat; /*On indique l’adresse de l’image de fond*/ background-image: url("/wp-content/uploads/separator.png"); /*On déclare la largeur et la hauteur de ma « fenêtre » de contenu*/ width: 40px; height: 25px; /*On joue la facilité en positionnant l’élément en absolue */ position: absolute; /*On déclare un contenu sinon on n’aura rien */ content: "";

Et enfin, on positionne l’image de fond :

.gdm-ez-container h2::before /*On positionne le « before » en lui-même */ top: 7px; left: -66px; /*On positionne le background */ background-position: 0 -31px;

On fait la même chose pour le after (et toutes les autres images qui sont contenues dans le Sprite).

A noter, pour ne pas se retrouver avec des centaines de lignes de code, qu’on peut factoriser les déclarations en regroupant les éléments de manière optimisée (c’est compliqué mais c’est plus propre).

En utilisant un Sprite CSS, j’ai 6 appels HTTP en moins sur ma page. Et là, c’est un petit sprite, car j’avais peu de besoins. Si vous avez beaucoup d’images de fond, cette technique est  redoutable d’efficacité.

Un autre exemple avec des boutons

Prenez les deux énormes boutons ci-dessous :

Envoyer

J’aime

Le code source des boutons est simplissime :

<a class="sendex" href="#">Envoyer</a> <a class="megusta" href="#">J'aime</a>

Le CSS, lui, est un peu plus complexe :

.sendex, .megusta display:inline-block; font-weight: bold; color: white; padding: 25px 25px 25px 65px; border: solid 3px white; border-radius: 6px; /*ON RAJOUTE UNE OMBRE PORTEE POUR VOIR LES BORDS BLANCS SUR FOND BLANC*/ -webkit-box-shadow: 0px 0px 32px -7px rgba(0, 0, 0, 0.61); -moz-box-shadow: 0px 0px 32px -7px rgba(0, 0, 0, 0.61); box-shadow: 0px 0px 32px -7px rgba(0, 0, 0, 0.61); font-size: 42px; text-transform: uppercase; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;

Quand vous créez votre sprite pour une image de fond comme on a ici, faites bien attention à la hauteur du bouton ! Utilisez la console de développeur pour avoir la hauteur précise, ou bien utilisez la formule suivante :

(Font-size X line-height) + padding + border = Height

Ici, j’ai « calé » les hauteurs avec le padding. Mais si vous voulez préciser la hauteur dans le CSS, pensez à utiliser la propriété box-sizing. Anticiper sur le calcul de la hauteur doit vous permettre de positionner les composants de votre sprite sur le fichier parent (le PSD). Voir ci-dessous le fichier du sprite :

Puis on déclare les couleurs de fond et on place les images de fond, pour l’état standard et le hover :

.sendex background: url("https://www.gdm-pixel.fr/wp-content/uploads/sprite-ex.png") no-repeat #00697f; background-position: 17px 21px; .megusta background: url("https://www.gdm-pixel.fr/wp-content/uploads/sprite-ex.png") no-repeat #3a559f; background-position: 12px -112px; .sendex:hover background: url("https://www.gdm-pixel.fr/wp-content/uploads/sprite-ex.png") no-repeat #ffc600; background-position: 17px -46px; .megusta:hover background: url("https://www.gdm-pixel.fr/wp-content/uploads/sprite-ex.png") no-repeat #2cb2ff; background-position: 12px -179px;

J’aurai pu factoriser en déclarant à part « background-color », « background-image » , « background-repeat » et « background -position » mais pas sur que ça aurait fait beaucoup moins de code… Donc j’ai fait au plus simple (et au plus rapide). Le code n’étant pas dans le CSS principal, c’est pas bien grave si c’est pas optimisé à fond.

Transitions et hover

Vous pouvez également utiliser un Sprite CSS pour générer vos images de fond sur un survol de boutons ou de conteneurs, comme dans l’exemple. Vous devez en revanche savoir que pour gérer les transitions, ça va devenir nettement plus complexe qu’un simple :

.montruc :hover transition :300ms ease all ;

Car ici, vous allez devoir, justement, préciser ce que vous souhaitez modifier dans la transition (pour ne pas voir de mouvement opéré sur l’image de fond).

.sendex, .megusta, .sendex:hover, .megusta:hover /*Ici, on verra justement le va et vient entre les images de fond*/ transition: .3s ease all; .sendex, .megusta, .sendex:hover, .megusta:hover /*Ici, en revanche, seul la couleur du texte et la couleur de fond sont prise en compte dans la transition*/ transition: color .3s ease, background-color .3s ease

J’ai écrasé la transition 300ms ease all pour la démo sur la vidéo.

Utiliser un générateur de Sprite CSS

On trouve des générateurs de Sprite CSS sur le Web, mais pour être honnête, à chaque fois que j’ai essayée d’en utiliser un, ça ne marchait pas comme je voulais. Du coup, ça va plus vite de le faire à la main, mais générateur peut vous aider à vous inspirer.

L’avenir du sprite CSS ?

Un nouvel article a été publié à l'adresse suivante : https://gdpx.fr/oir

Installer un script de Lazyload

Installer un script de Lazyload

Parmi les leviers qu’on peut utiliser pour réduire les temps de chargement sur son site, il y en a un qui est particulièrement efficace : le Lazyload. Le principe est très simple : au lieu de charger toutes les images et les vidéos en même temps que le reste des fichiers à l’affichage de la page, un script les télécharge et les affiche au fur et à mesure que l’utilisateur scrolle et découvre les contenus.

Parallèlement à ça, le script peut également apposer un « placeholder » qui permettra de respecter le layout de la page.

Petite présentation d’un script que vous pouvez utiliser n’importe où, et d’un module WordPress. Particulièrement efficace sur un serveur Nginx, ce genre de script vous sauvera la mise sur un site qui contient beaucoup d’images… Si vous ne savez pas comment installer Nginx sur votre serveur, je vous renvoie à ce tutoriel pour démarrer.

Un script de lazyloading à utiliser n’importe où

Le script que je vais vous présenter a été développé par Andrea Verlicchi. Honnêtement, c’est le premier script que j’ai trouvé sur Google en tapant « script Lazyload » pour ce tutoriel. Je l’ai utilisé sur un site développé en dur il y a quelques semaines, et il fonctionne très bien.

La doc est très complète et permet de charger les images directement, ou d’utiliser une version alternative redimensionnée.

Pour charger le script le plus facilement possible, on charge ce script dans le head (faites attention à la version utilisée, se référer à la doc pour connaitre la dernière) :

https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js

Et pour charger votre image en Lazyload, au lieu d’écrire :

Vous écrivez :

Pour appeler le script dans le code source :

var lazyLoadInstance = new LazyLoad( elements_selector: ".lazy" );

Le lien vers la doc complète : https://www.andreaverlicchi.eu/lazyload/

Utiliser un plug-in WordPress : A3 Lazy Load

On trouve des dizaines de plug-ins de Lazyload sur le dépôt de WordPress. Ici, je vais vous présenter A3 Lazy load. La configuration est assez simple, même s’il y a beaucoup d’options…

Plugin Framework Global Settings

Customize Admin Setting Box Display

Open Box Display : pour ouvrir les accordéons automatiquement. Les modifications sont enregistrées à chaque fois que vous cliquez sur le bouton « Save changes » en bas de page.

House Keeping

Clean up on Deletion : pour retirer tout contenu et les tables du module si vous le désinstallez

Lazy Load Activation

Enable Lazy Load : pour activer ou désactiver le module…

Lazy Load Images

Enable Lazy Load for Images : active le Lazyload pour les images en général

Images in Content : active le Lazyload pour les images dans le contenu, ce qui sous-entend uniquement le contenu des pages ou des posts (pas dans le header, pas dans le footer, pas dans la sidebar).

Images in Widgets : active le Lazyload pour les images qui sont contenues dans un widget

Post Thumbnails : active le Lazyload pour les miniatures des articles

Gravatars : active le Lazyload pour les images d’avatar des commentaires

Skip Images Classes : cette fonction permet d’indiquer quelles images ne doivent pas être chargée grâce aux Lazyload. Si vous constatez que le chargement d’une image plante pour une raison quelconque, vous pouvez ainsi la sortir de la file de traitement en indiquant simplement la classe CSS qui lui est rattachée.

Noscript Support : si les utilisateurs désactivent le JavaScript sur leur navigateur, cette fonction permet d’afficher quand même les images. Autant dire que ça servira très peu, mais vous pouvez quand même l’activer.

Lazy Load Videos and iframes

Video and iframes : active le Lazyload pour les vidéos et les iframes (les vidéos que vous mettez depuis YouTube, Dailymotion, mais aussi les tweets etc.).

In Content : active le Lazyload pour les vidéos dans le contenu.

In Widgets : active le Lazyload pour les vidéos dans les widgets

Skip Videos Classes : comme pour les images, permet de renseigner la classe CSS des vidéos que vous ne souhaitez pas « Lazyloader ».

Noscript Support : pareil, pour les utilisateurs qui ont désactivé JavaScript, permet de charger tout de même les vidéos ou les iframes.

Exclude by URI’s and Page Types

Exclude by URIs

Une fonctionnalité super pratique qui permet de désactiver le script globalement sur une page complète en renseignant simplement son URI.

Page Type Exclusions

Home Page : désactiver le script sur la page qui contient tous les articles

Front Page : désactiver le script sur la page d’accueil

Posts : désactiver le script sur les articles

Pages : désactiver le script sur les pages

Post Categories : désactiver le script sur les catégories d’articles

Post Tags : désactiver le script sur la page des tags

Search Page : désactiver le script sur la page de recherche

Author Pages : désactiver le script sur la page des auteurs

Archive Pages : désactiver le script sur les autres pages d’archives (par date etc.).

Script Load Optimization

Theme Loader Function : pour choisir l’emplacement où vous apposez le script (dans le header ou dans le footer). Dans le header, il permettra de lancer la fonction plus vite au chargement de la page.

WordPress Mobile Template Plugins

Effect & Style

Loading Effect : pour choisir l’effet visuel du chargement des images. Soit fondu, soit « spinner ». Perso, je trouve que l’effet de fondu est beaucoup plus naturel et élégant.

Loading Background Colour : pour choisir la couleur d’arrière-plan du placeholder (choisissez la même couleur que le fond de votre page).

Image Load Threshold

Un nouvel article a été publié à l'adresse suivante : https://gdpx.fr/mnc

Configurer Autoptimize

Configurer Autoptimize

Grâce à Autoptimize, on va pouvoir améliorer les temps de chargement, en regroupant les fichiers JavaScript, les CSS, et grâce à quelques bricoles qui feront une petite différence. À noter, ça ne va gérer que ce qui se passe côté serveur de pages (temps d’envoi des fichiers), et pas du tout ce qui pourrait se passer sur le serveur en lui-même (temps de compilation). Si vous avez des problèmes de perfs, je vous recommande la suite de vidéos sur Webinoly, disponible ici.

Présentation de la configuration du module…

Options CSS

On va commencer par le plus facile : optimiser le code CSS. Grâce à cette option, Autoptimize va vous permettre d’avoir moins de fichiers CSS, et de présenter un code plus condensé.

Le CSS, c’est le code qui « habille » la page, en ajoutant les couleurs, la taille des typos, la taille et l’emplacement des conteneurs etc. C’est aussi le code qui gère l’apparence de certaines interactions (survol des boutons par exemple). Bref, sans CSS, le web serait super moche, et ce serait bien dommage.

Optimiser le code CSS

À cocher, évidemment, sans quoi ça annule tout ce qu’il y après. Cette option va également permettre de les minifier, c’est-à-dire de supprimer les espaces, les commentaires, pour compresser un peu plus le fichier.

Concaténer les fichiers CSS

« Concaténer », c’est un gros mot pour dire « regrouper ». Vous n’aurez plus « N » fichiers CSS, mais un seul. À noter que le fichier CSS qui sera servi par Autoptimize dépend de la page sur laquelle vous vous trouvez, des templates, des modules etc., il est donc possible que le cache du module soit imposant (ça dépendra du nombre de pages que vous avez).

Agréger aussi les CSS in-line

Cette option est géniale, car elle va retirer le code CSS qu’il y a dans votre page pour le placer dans un autre fichier : votre code source sera ainsi bien plus léger, plus propre. Si vous êtes sur un builder de pages, ça ne fera pas de mal…

Génération de données : URI pour les images

Cette option va modifier la façon dont les images de fond sont rendues sur le site. Au lieu de procéder au chargement d’un fichier, les petites images peuvent être chargées en base 64.

Ce que ça veut dire, c’est plus de travail pour les navigateurs, et moins de travail pour le serveur. À n’utiliser que si vous n’avez pas de scripts de Lazyload sur votre site.

Inclure le CSS principal dans l’HTML et reporter le reste

Cette option permet de pré-charger dans le head le CSS nécessaire à l’affichage du contenu au-dessus de la ligne de flottaison, également appelé « critical CSS ». Ça suppose que vous savez ce que vous devez charger, ou que vous avez pu générer le critical CSS. Pratique pour une super note sur Pages speed, mais si votre serveur est bien foutu, le gain sera assez faible.

Mettre tous les CSS dans votre code HTML

Non, ne faites pas ça ! Ça collerait tout votre CSS inline dans le code source. Cela étant, tout dépend de la quantité de code, mais ça ne me paraît pas être une bonne idée.

Exclure les fichiers CSS d’Autoptimize

Ça, c’est si vous avez du contenu dont l’affichage merdouille quand vous avez activé le plug-in : ça veut dire que certains fichiers CSS sont en conflit (ça peut arriver, en fonction de l’ordre dans lequel ils sont chargés). Ça suppose que vous connaissez très bien votre code, vos plugins etc.

Option HTML

C’est une rubrique relativement simple, qui ne comprend que deux options : « optimiser le code HTML » et « préserver les commentaires HTML ».

Optimiser le code HTML

Cette option va permettre de minifier le code HTML, c’est-à-dire retirer les sauts de ligne, les espaces qui ne servent à rien etc. Vous allez gagner quelques octets sur le poids de la page en elle-même, rien de plus.

Préserver les commentaires HTML

Pour que les commentaires HTML ne soient pas supprimés par le plug-in. Clairement, les commentaires ne peuvent servir qu’en phase de développement. Si vous êtes en production, vous pouvez les faire sauter.

Option du CDN

Un CDN, c’est un Content Delivery Network, c’est-à-dire un réseau livraison de contenu. Utilisé pour faire du Domain Sharding, c’est-à-dire charger différents contenus au navigateur sur des sous domaines tiers, pour paralléliser l’envoi de fichiers. Sur HTTP 2, ça ne sert à rien. Sur HTTP un, vous aurez effectivement un gain de performance.

Un CDN peut également être utilisé pour avoir des points de livraison de type  « proxy », c’est-à-dire qu’en fonction de la zone géographique depuis laquelle vous téléchargez un fichier, vous n’allez pas vous connecter à n’importe quel data Center. Ça sert typiquement pour les sites qui ont une audience internationale.

Pour résumer, si votre site est en France, pour une audience française, ou proche, et que vous êtes en HTTP 2, vous n’avez pas à vous embêter avec cette rubrique.

Option JavaScript

C’est la plus risquée des options ! Avec ça, vous pouvez tout péter !

Optimiser le code JavaScript ?

Cette option permet de réduire la taille des JavaScript. Jusqu’ici, tout va bien.

Concaténer les fichiers JavaScript

C’est typiquement le genre de fonction qui peut tout casser. En fonction de vos fichiers, de la version de Jquery utilisée etc., si vous modifiez l’ordre dans lequel les JavaScript sont chargés, ou que vous les concaténer, vous pouvez obtenir des erreurs dans l’exécution du code.

Ca veut dire que certaines fonctionnalités du site seront K.-O.

Néanmoins, les gants performance sont assez bluffant. À utiliser, donc, si vous êtes sûrs de ce que vous faites (voir plus bas).

Agréger aussi les JS in-line

Cette fonction, comme pour le CSS inline, permet de récupérer les JavaScript qui sont « en dur » sur la page pour les placer proprement dans un fichier externe.

Forcer le JavaScript à charger dans l’en-tête de la page

Cette fonction permet de charger le JavaScript dans le Head. Ça va corriger certaines erreurs, mais ça va accroître le temps de rendu sur la page. Je déconseille d’utiliser cette fonction. On préférera exclure les fichiers qui plantent.

Scripts à exclure d’Autoptimize

Voilà, c’est l’option magique qui vous permet d’exclure de la concaténation les fichiers qui risqueraient de provoquer des erreurs. Super pratique, mais ça nécessite de connaître vos plug-ins, les fichiers qui sont liés etc. C’est donc une fonctionnalité relativement avancée, pour ceux qui n’ont pas peur de regarder le code source.

Ajouter une gestion des erreurs (trycatch)

Si vos scripts ne fonctionnent pas en raison d’erreurs JS, vous pouvez essayer cette option.

Options diverses

Enregistrer les scripts/CSS en tant que fichiers statiques

À cocher ! Ça permet de créer les fichiers JavaScript et CSS de manière statique, c’est-à-dire qu’il y aura un fichier, dans un dossier, et qu’il restera là jusqu’à ce qu’il soit expiré.

Optimiser les fichiers CSS et JS exclus ?

Si vous excluez un fichier de la concaténation, il sera quand même optimisé par le module (minifié).

Optimiser aussi pour les utilisateurs connectés

C’est une option qui peut servir si vous utilisez un builder et que celui-ci ne charge pas (avec un beau message d’erreur).

L’onglet « images »

Cette section du module permet d’optimiser les images, en les distribuant via un CDN ou en exécutant un script de Lazyloading.  Pour le Lazyloading, je vous renvoie à ce tutoriel. Et pour le CDN, j’ai tout expliqué plus haut.

La section extra

Google fonts

Si vous avez beaucoup de Google fonts, ça peut être intéressant de les optimiser avec l’option dédiée. Par défaut, le rendu de la typo de votre site est impacté par le chargement de Google Font. Si vous appelez de nombreuses polices, ça peut être intéressant de gérer cette section-là.

Personnellement, vu que je n’ai qu’une seule typo, je ne m’embête pas. Si vous avez besoin de dégreffer finement, vous pouvez utiliser la fonction que vous trouverez ici.

Désactiver les emojis

Si vous tapez un joli petit smiley, WordPress le remplace par une icône. Le problème, c’est que ça va nécessiter du CSS et un JavaScript supplémentaire. Vous pouvez supprimer cette belle merde qui ne sert à rien.

Supprimer les chaînes de requête des ressources statiques

De nombreux plug-in vont charger leur fichier avec une variable de version. Parfois, celle-ci indique au navigateur qu’on a changé de fichiers. Donc, techniquement parlant, c’est utile de les laisser. Retirer la chaîne de requête va améliorer le score de performance, rien de plus.

« Préconnection » avec des domaines tiers (utilisateurs avancés)

Ça, c’est pour ajouter le DNS prefetch : avant de charger une page, le navigateur se connectera au DNS susceptible d’être appelé, afin de gagner quelques millisecondes. Franchement, c’est un peu « gadget », car en général, sur la page d’accueil, ou une bonne landing page, il y aura plus de 80 % des requêtes effectuées en termes de connexion au DNS.

Fichiers JavaScript asynchrones (utilisateurs avancés)

Ça, c’est pour différer le chargement des JavaScript. Attention à ne pas bloquer le rendu.

Optimiser les vidéos YouTube

Un nouvel article a été publié à l'adresse suivante : https://gdpx.fr/5qj

Réduire le nombre de fichiers pour améliorer ses temps de chargement

Réduire le nombre de fichiers de typos

Dans la vidéo concernant l’audit des temps de chargement, j’expliquai que le nombre de fichiers envoyés par votre serveur est un facteur crucial. Même si vous êtes en HTTP 2, un protocole plus rapide que HTTP 1, il est important d’optimiser ce qui est envoyé par votre serveur de pages (Apache ou Nginx).

Voilà les fichiers sur lesquels on pourra travailler :

Les polices de texte

Les CSS

Les JavaScript

Les images

Les vidéos

Normalement, sur du HTTP 2, on est moins tatillon à ce sujet, car HTTP 2 a le mérite d’envoyer plus de fichiers d’un coup au navigateur. Mais pour avoir testé sur de nombreux sites, en HTTP 1 ou en HTTP 2, avec ou sans concaténation de fichiers, je peux vous garantir que même en HTTP 2, le gain de temps n’est pas négligeable.

Les polices de texte

C’est du bon sens, mais je dois quand même en parler vu qu’il m’arrive de voir des horreurs en audit. Un bon design Web c’est deux polices de texte. Une pour les titres, et une pour les textes. Point barre. Rien de plus.

Le truc, c’est que de nombreux plug-ins proposent d’utiliser des polices personnalisées (la plupart du temps des Google fonts) et les ajoutent automatiquement. Il faut donc rester vigilant, parce que ça peut aller très vite de se retrouver avec six ou sept polices chargées dans le Head.

Si c’est le cas, il faudra dégreffer tout ça, soit manuellement directement dans le module, soit avec une fonction dans votre fichier functions.php.

Dégreffer Google font avec un module

Vous pouvez donc utiliser ce module pour dégager les Google Font . Pas très compliqué, mais ça fait installer un module de plus (et ça, on n’aime pas trop).

Dégreffer Google font grâce à une fonction

D’abord, repérez dans votre code source (dans le head) une ligne qui ressemble à ça :

<link rel="stylesheet" id="cf7md_roboto-css" href="//fonts.googleapis.com/css?family=Roboto:400,500" type="text/css" media="all">

Ce que vous voulez ici, c’est l’id de la typo importée (dans mon cas « cf7md_roboto-css »).

Puis, ajoutez ça au fichier functions.php de votre thème enfant :

Contenu réservé aux membres Inscrivez-vous gratuitement pour y accéder

Ou connectez-vous avec vos identifiants

Utilisateur:

Mot de passe:

S'inscrire

Mot de passe oublié ?

jQuery(document).ready( function() jQuery('#iump_login_username').on('blur', function() ihc_check_login_field('log', 'Veuillez compléter tous les champs !'); ); jQuery('#iump_login_password').on('blur', function() ihc_check_login_field('pwd', 'Veuillez compléter tous les champs !'); ); jQuery('#ihc_login_form').on('submit', function(e) e.preventDefault(); var u = jQuery('#ihc_login_form [name=log]').val(); var p = jQuery('#ihc_login_form [name=pwd]').val(); if (u!='' && p!='') jQuery('#ihc_login_form').unbind('submit').submit(); else ihc_check_login_field('log', 'Veuillez compléter tous les champs !'); ihc_check_login_field('pwd', 'Veuillez compléter tous les champs !'); return FALSE; ); );

Vous remarquerez que j’ai tronqué le « -css » sur la troisième ligne. Sauvegardez le fichier, rechargez la page, et c’est nettoyé…

Les images

Oui, on peut réduire le nombre d’images qu’on envoie ! Par exemple en faisant un Sprite CSS. Il s’agit d’une technique qui consiste à mettre toutes les images de fond dans un seul fichier et de gérer la position des images dans les conteneurs via des directives CSS (background-image, background-position etc.).

Clairement, si vous en êtes là, c’est que vous êtes un véritable maniaque de l’optimisation. Vous pouvez créer votre Sprite à la main, ou utiliser un générateur en ligne si vous n’avez pas envie de vous prendre la tête. Je vous mets ci-dessous un exemple de Sprite CSS, avec le visuel et une partie du CSS qui va avec (on fera un tuto complet à ce sujet).

Un sprite que j’utilise sur le site

.gdm-ez-container h2::after background-repeat: no-repeat; background-image: url("/wp-content/uploads/separator.png"); width: 40px; height: 25px; position: absolute; content: ""; top: 7px; right: -66px; background-position: -47px -31px; /*ET BIEN ENTENDU, L'ELEMENT PARENT EST EN POSITION RELATIVE*/

Vous pouvez également utiliser un script de Lazyload pour ne charger les images que quand elles sont visibles sur la fenêtre. C’est clairement le meilleur moyen de réduire le temps de chargement lié aux images. Et vous avez de la chance, y a un tuto dédié à ce type de script ici 🙂

Notez également qu’on travaillera sur la taille et le poids des images (tuto à venir).

Les vidéos

S’il y a bien un truc qui bouffe de la bande passante, c’est les vidéos. Clairement, je déconseille d’héberger des vidéos directement sur votre serveur, car ce sont des fichiers supers lourds. Préférez l’utilisation d’hébergeurs spécialisés, comme YouTube ou Dailymotion.

Notez qu’il est possible d’appliquer du Lazyload sur les vidéos, y compris les vidéos embedded. Comme ça, vous résolvez le problème facilement…

Les JavaScript et les CSS

C’est ce qu’il y a de plus commun quand on veut travailler sur le nombre de fichiers envoyés : concaténer les JavaScript et les feuilles de style.

Concaténer, ça veut simplement dire qu’on va tous les regrouper dans un ou plusieurs fichiers. C’est une fonction proposée par la plupart des modules de cache.

Les avantages, c’est que moins vous avez de requêtes HTTP, plus la page chargera vite. L’inconvénient, c’est que, parfois, une concaténation trop agressive cassera le layout du site ou certaines fonctionnalités. On rentre un peu dans les détails…

Les CSS

Normalement, vous n’aurez que très rarement des problèmes d’affichage suite à la concaténation de CSS. Ça dépendra principalement du module que vous avez utilisé ou de la méthode employée. Personnellement, j’utilise Autoptimize depuis des années et je n’ai jamais eu de souci particulier, d’autant plus que vous pouvez exclure certains fichiers du processus si ça plante.

Pour WordPress, il existe pas mal de modules pour faire ça :

Autoptimize

Fast Velocity Minify

WP Fastest Cache

WP Optimize

WP Rocket

W3 Total Cache

etc

Vous n’avez que l’embarras du choix. Perso, je n’utilise pas de plugin de cache car j’ai déjà une solution qui s’exécute coté serveur (FastCGI). Je vous envoie au tuto sur Autoptimize si vous voulez en savoir plus.

Les JavaScript

Là, clairement, c’est casse-gueule. Concaténez les fichiers JavaScript dans le mauvais ordre, et certaines fonctionnalités du site sauteront. Là encore, Autoptimize fait des merveilles, et vous permet d’exclure les scripts qui ne fonctionnent pas.

Un nouvel article a été publié à l'adresse suivante : https://www.gdm-pixel.fr/parcourir-les-donnees/

Parcourir les données

Javascript is disabled

Javascript is disabled on your browser. Please enable it in order to use this form.

.ipt_uif_ajax_loader, .ipt_uif_ajax_loader *, ipt_uif_ajax_loader *::before, ipt_uif_ajax_loader *::after box-sizing: border-box;

Chargement

Portail des données envoyées

Bonjour Charles Annoni. Voici la liste de toutes les requêtes que vous avez soumises.

Déconnexion

0 Soumission

0,00% Average Score

.ipt_uif_ajax_loader, .ipt_uif_ajax_loader *, ipt_uif_ajax_loader *::before, ipt_uif_ajax_loader *::after box-sizing: border-box;

Fetching Data

ScoreMax%RemarqueActionFormulaireDatePas de requête soumise.

Un nouvel article a été publié à l'adresse suivante : https://www.gdm-pixel.fr/envoi-confirme/

Envoi confirmé

Code de suivi

Un nouvel article a été publié à l'adresse suivante : https://gdpx.fr/69k

Nope

Admin access is restricted, dumbass.

Un nouvel article a été publié à l'adresse suivante : https://gdpx.fr/u0n

Installer un serveur optimisé pour Wordpress

Installer un serveur optimisé pour WordPress

Oubliez les hébergeurs spécialisés pour WP, et devenez votre propre prestataire, pour un coût dérisoire, et des performances monstrueuses ! Plus besoin de plugin de cache, plus besoin de prendre un SSL tous les ans : avec la solution qu’on va découvrir aujourd’hui, vous allez gérer votre WordPress comme un pro, facilement, et sans vous prendre la tête…

Les pré-requis : un VPS SSD

Tout d’abord, vous avez besoin d’un serveur dédié, c’est-à-dire un serveur qui n’est utilisé que par vous. Ce type de serveur est habituellement assez onéreux, comparativement à un hébergement mutualisé. Mais ici, on va prendre un VPS SSD, c’est-à-dire un serveur privé virtuel, installé sur un disque utilisant de la mémoire flash.

Les temps de lecture/écriture sont très rapides, et nous aurons donc de très bonnes performances. Personnellement, je prends les miens chez OVH, et je fais une veille régulière sur le marché pour trouver un meilleur rapport qualité-prix depuis trois ans maintenant ; je n’ai pas encore trouvé mieux.

Je vous renvoie à la vidéo suivante si vous avez un doute pour la commande : commander un VPS SSD chez OVH.

Installer le serveur

Quand vous passez votre commande, vous recevez un e-mail contenant les informations nécessaires pour accéder à votre machine : adresse IP, login, mot de passe etc. Dans ce tutoriel, je vous montre comment vous connecter en SSH, et dans celui-ci, en FTP.

Mais pour plus de sécurité, je vous conseille de réinstaller une deuxième fois (ça prend trois minutes) en greffant une clé SSH : ainsi, vous seul pourrez vous connecter au serveur, et les attaques de type brute-force échoueront systématiquement.

Je vous renvoie à ce tutoriel pour installer une clé SSH sur votre VPS SSD : installer une clé SSH sur son VPS OVH.

Installation de la couche logicielle

Pour avoir un WordPress vraiment rapide, il faut, certes, utiliser un thème léger, avoir construit ses pages intelligemment et avoir usé de bonnes pratiques en matière d’intégration (taille des images, minification et concaténation des fichiers etc). Mais il y a aussi un facteur hyper important : les logiciels.

Ainsi, un WordPress installé sur un stack LAMP classique (Apache, PHP 5, MySQL) sera bien moins rapide qu’un WordPress installé sur un stack LEMP (Nginx, PHP 7, Maria DB). Je vous mets ci-dessous quelques benchmarks comparatifs pour que vous voyez où je veux en venir…

Apache Vs Nginx

Nginx présente un avantage redoutable par rapport à Apache pour servir des contenus statiques. Outre une meilleure capacité à gérer un grand nombre de connexions simultanées, Nginx est aussi beaucoup moins gourmand en ressources…

PHP 5 Vs PHP 7

C’est le plus gros levier qu’on a (hormis la mise en cache) pour optimiser les temps de chargement. PHP7 est BEAUCOUP plus rapide que PHP 5, et pour un CMS gourmand comme WP, c’est un MUST !

Il y a encore quelques années, on pouvait être un peu frileux pour passer sur PHP 7, en raison d’un éventuel problème de compatibilité du thème ou d’un plugin, mais aujourd’hui, il n’y pas plus d’excuses qui tiennent. PHP 7.2 est stable, et fait tourner WordPress comme une horloge.

Mysql Vs MariaDB

MariaDB est open-source, est c’est principalement pour cette raison que l’éco-système Web Open Source le préfère à Mysql.

Je n’ai pas trouvé de Benchmark suffisamment clair et permettant d’affirmer que MariaDB est bien meilleur que Mysql pour un site WP.

HTTP2 VS HTTP1

Http, c’est HyperText Transfer Protocol. Sans lui, pas de web. Le souci, avec HTTP1, c’est que sur une seule connexion, on ne peut envoyer qu’un seul fichier. Alors qu’avec HTTP2, on peut en mettre plusieurs.

Du coup, HTTP2 est vachement plus rapide dès lors qu’il s’agit d’envoyer une page web qui contient de nombreux éléments (comme une page générée par un CMS par exemple)…

Installer Webinoly

Installer des logiciels sur Linux, c’est facile, il suffit de coller la bonne commande dans une console. Mais les configurer, ça devient tout de suite « moins marrant », et ça prend un peu de temps. Heureusement, il existe des solutions logicielles qui vont faire ça très bien, et il y en a justement une qui est dédiée à WordPress.

Webinoly est une solution développée par Cristhian Martínez Ochoa, un dev/admin-sys Mexicain. L’outil est open source, donc 100 % gratuit, bien documenté et franchement hyper agréable à utiliser.

Une fois qu’on aura installée Webinoly, tout sera configuré : NGINX, PHP7, Maria DB, votre site WordPress, certains éléments de sécurité, la solution de cache Fast CGI, le support SSL avec Lets Encrypt, ainsi que le support HTTP2 !

Mise à jour du serveur

Si vous n’avez pas mis votre machine à jour grâce au tutoriel de la précédente vidéo, vous pouvez le faire avec les commandes suivantes :

Contenu réservé aux membres Inscrivez-vous gratuitement pour y accéder

Ou connectez-vous avec vos identifiants

Utilisateur:

Mot de passe:

S'inscrire

Mot de passe oublié ?

jQuery(document).ready( function() jQuery('#iump_login_username').on('blur', function() ihc_check_login_field('log', 'Veuillez compléter tous les champs !'); ); jQuery('#iump_login_password').on('blur', function() ihc_check_login_field('pwd', 'Veuillez compléter tous les champs !'); ); jQuery('#ihc_login_form').on('submit', function(e) e.preventDefault(); var u = jQuery('#ihc_login_form [name=log]').val(); var p = jQuery('#ihc_login_form [name=pwd]').val(); if (u!='' && p!='') jQuery('#ihc_login_form').unbind('submit').submit(); else ihc_check_login_field('log', 'Veuillez compléter tous les champs !'); ihc_check_login_field('pwd', 'Veuillez compléter tous les champs !'); return FALSE; ); );

Là encore, laissez le script tourner sans interruption, mais restez devant votre ordinateur, car à deux reprises un message va apparaître pour vous demander si vous conservez la configuration locale : dans les deux cas, choisissez de conserver les fichiers installés (vous avez juste à appuyer sur entrée).

Quand l’installation est terminée, vous avez un message qui apparaît pour vous donner vos identifiants de connexion à MySQL (un couple login / mot-de-passe pour deux utilisateurs). Notez les biens précieusement et conservez-les, de préférence sur une clé USB et pas sur votre machine (je vous ai raconté l’histoire où la foudre tombe sur mon appartement et crame toute mon installation informatique ?).

On a fait le plus gros du travail !

Un nouvel article a été publié à l'adresse suivante : https://gdpx.fr/tal

Sécuriser son accès SSH

Sécuriser son accès SSH

Troisième vidéo de notre formation « Optimiser ses temps de chargement sur WordPress » ! On a déjà commandé notre VPS, et on s’est connecté en SSH, mais à ce stade on a encore un petit souci : la connexion n’est sécurisée « que » par mot de passe…

Avant de procéder à l’installation de notre stack LEMP, on va sécuriser tout ça !

Utiliser une authentification par échange de clés

En fait, il existe de nombreux moyens de solidifier la connexion SSH serveur :

Interdire la connexion de l’utilisateur « root »

N’autoriser que certaines adresses IP à se connecter

Utiliser un mot de passe très fort

Bannir les utilisateurs qui commettent trop d’erreurs pour s’authentifier etc.

Pour un site sur lequel on travaille, c’est un peu pénible de ne pas pouvoir se connecter en root, car on va être amené à travailler sur pas mal de fichiers, et on a justement besoin d’avoir les mains libres pour bosser tranquillement.

Du coup, la connexion root, si elle est nécessaire, demeure toutefois une faille de sécurité potentielle.

NB : En fait, il existe tout un tas d’approche pour sécuriser l’accès SSH à un serveur : changer le port de connexion (mais ici, on perdrait une partie du monitoring chez OVH), créer un autre groupe d’utilisateurs etc. Je vous livre une approche, mais libre à vous de faire plus si vous voulez over-blinder votre machine.

Il existe donc un moyen radical de sécuriser notre connexion : en autorisant uniquement la connexion de l’utilisateur « root » à l’aide d’une clé RSA ! On coupe court à toutes les attaques de type « brute force » (type d’attaque qui utilise toutes les combinaisons possibles pour se connecter).

La clé qu’on va générer, il faut vraiment la voir comme la clé d’une maison : si on ne l’a pas, on ne rentre pas. Donc triple backup, s’il vous plaît, ne la perdez pas !

PS : si jamais vous la perdez quand même, il existe une console d’urgence chez OVH qui permet de retrouver son accès en éditant le fichier de configuration de SSH…

Télécharger Putty

Pour générer notre couple de clés publiques et privées, on va utiliser un logiciel qui s’appelle Putty, et que vous pouvez télécharger en cliquant ici. Une fois le logiciel installé, utilisez l’utilitaire intitulé « Puttygen », dans le dossier créé par l’installateur.

Générer clé privée et clé publique

Cliquez sur le bouton « Generate » et faites des mouvements aléatoires avec votre souris au-dessus de la fenêtre pour générer le chiffrement.

Copiez L’ensemble du texte généré dans la fenêtre du haut, et conservez-le dans un fichier texte que vous appellerez « public-key.txt ». Puis entrer un mot de passe à la ligne « Key passphrase ».

Confirmez-le sur la ligne du dessous. Ce mot de passe, il ne faudra pas le perdre : vous en aurez besoin quand vous voudrez charger votre clé privée. Si jamais vous vous faites voler votre clé privée, sans le mot de passe, elle sera tout simplement inutilisable.

Puis, cliquez sur le bouton « Save private key » et enregistrez la sur votre ordinateur.

Tous ces fichiers doivent être sauvegardés et conservés précieusement, car avec les manips qu’on va faire par la suite, sans clé, pas de connexion possible.

Idéalement, ces fichiers doivent être placés dans un coffre-fort électronique…

Envoyer la clé publique sur votre compte OVH

Maintenant qu’on a la clé publique, on va l’envoyer sur notre compte OVH. Rendez-vous dans la section « mon compte », puis dans la sous-section « mes clés SSH ».

Collez le contenu de votre fichier public-key.txt dans la fenêtre tel que montré ci-dessous, et donnez un nom à votre clé. Attention, pas de caractère accentué ou de caractères spéciaux dans le nom de la clé, sinon, ça va planter.

Votre clé publique est maintenant greffée sur votre compte utilisateur chez OVH.

Réinstaller le serveur en greffant la clé publique

Maintenant, on va réinstaller notre VPS SSD, en greffant la clé publique dessus. En fait, on pourrait greffer la clé directement via SSH, mais c’est chiant et compliqué, donc on la joue grosse feignasse et on laisse un script travail à notre place (non, je n’ai pas honte)…

Rendez-vous dans la section « server » et sélectionnez votre serveur dans la liste des VPS disponibles. Sur la fenêtre qui apparaît, cliquez sur « réinstaller mon VPS », puis choisissez votre système d’exploitation : Ubuntu 18.04 (ou une version plus récente que la 16.04).

On choisit la langue, et on greffe la clé qu’on vient de générer sur la nouvelle installation.

Validez, faites-vous un café, c’est fini ! Quelques minutes plus tard, vous recevez de nouveaux identifiants pour vous connecter à votre machine.

Se connecter à la machine distante

On va maintenant utiliser Putty pour se connecter au serveur. On va utiliser l’adresse IP de la machine comme destination, le nom d’utilisateur « root», et le mot de passe indiqué dans le mail de livraison. Comme dans la vidéo précédente en fait…

Une fois qu’on est connecté, on peut procéder aux mises à jour habituelles :

apt-get install update

apt-get install dist-upgrade

Ensuite, toujours en mode « un peu feignant », on va utiliser WinSCP pour se connecter au gestionnaire de fichiers. Téléchargez WinSCP ici, entrez les mêmes données pour vous connecter à la machine, et vous arrivez à la racine du serveur.

Editer le fichier de configuration sshd

On va éditer le fichier sshd_config afin de restreindre les droits de connexion SSH.

Rendez-vous dans /etc/ssh pour accéder au fichier en question, et ouvrez-le.

Rechercher la ligne qui commence par

Contenu réservé aux membres Inscrivez-vous gratuitement pour y accéder

Ou connectez-vous avec vos identifiants

Utilisateur:

Mot de passe:

S'inscrire

Mot de passe oublié ?

jQuery(document).ready( function() jQuery('#iump_login_username').on('blur', function() ihc_check_login_field('log', 'Please complete all required fields!'); ); jQuery('#iump_login_password').on('blur', function() ihc_check_login_field('pwd', 'Please complete all required fields!'); ); jQuery('#ihc_login_form').on('submit', function(e) e.preventDefault(); var u = jQuery('#ihc_login_form [name=log]').val(); var p = jQuery('#ihc_login_form [name=pwd]').val(); if (u!='' && p!='') jQuery('#ihc_login_form').unbind('submit').submit(); else ihc_check_login_field('log', 'Please complete all required fields!'); ihc_check_login_field('pwd', 'Please complete all required fields!'); return FALSE; ); );

Et voilà, c’est fini, désormais vous ne pouvez plus vous connecter avec l’identifiant root sans utiliser la clé. Avant de fermer votre session en cours, je vous invite à ouvrir une autre session de putty en parallèle pour vous assurer que vous pouvez bien vous connecter avec la clé privée (voir section ci-dessous). Si vous ne pouvez pas, vérifiez votre configuration sur le fichier de config.

Charger la clé privée pour se connecter

Du coup, la procédure pour vous connecter désormais est la suivante :

Double-cliquez sur votre clé privée

Entrez le mot de passe sur la pop-up qui arrive

Puis lancez Win SCP, où le client que vous utilisez pour vous connecter au serveur, mais ne mettez pas de mot de passe pour vous authentifier

Sans mots de passe, Pageant va charger directement la clé privée, et procéder à l’échange de clés avec le serveur pour permettre la connexion.

Les attaques de type brute force n’ont maintenant plus aucun sens sur votre serveur, puisque le seul moyen de vous connecter, c’est d’utiliser la clé privée et le mot de passe qui va avec, dont vous êtes le seul propriétaire.

Il existe une console d’urgence dans votre compte OVH, si jamais vous perdez la clé : j’ai testé la procédure indiquée pour me reconnecter il y a quelque mois, et ça fonctionne bien, mais faites des sauvegardes quand même 😊

Dans la prochaine vidéo, on procède à l’installation du Stack LEMP qui va nous permettre d’avoir des temps de chargement extrêmes !