Charger les images plus rapidement sur son site : Lazy load images, le guide complet #webperf

Lorsque l’on s’attaque à l’optimisation des pages, on tombe forcement sur ce qui est bloquant pour l’expérience utilisateur : la lourdeur des images.

Il est possible d’alléger le poids des images dans un 1er temps, mais on peut le combiner avec une autre technique : le Lazy loading.

Alléger les pages en ne chargeant pas celles qui sont hors-écran (above the fold)

En effet, lorsque vous chargez une page web, le navigateur va tout d’abord charger toutes les ressources (structure html, javascript, images, etc…), même si ces ressources ne sont pas affichées à l’écran, et une fois que ces ressources sont chargées, la page apparaît.

Il faut tricher un peu pour afficher rapidement la structure (DOM) de la page et charger uniquement les ressources visible, par une technique dite de Lazy loading (spoil : les images sont chargée par javascript). Avant d’en arriver là, on peut faire quelques optimisations techniques au niveau du serveur.

Comment charger plus rapidement les images ?

L’impression de l’utilisateur est que la page est longue à charger, il faut donc trouver des astuces pour afficher le plus rapidement quelque chose, pour que sa perception soit la rapidité du site tout en masquant que le reste est en cours de chargement, on devrait employer http/2 et https et le lazy loading. Vérifiez que votre hébergeur web vous mettent a disposition http2.

Comment le http/2 et le https accélèrent le chargement des images ?

Techniquement http/2 et https couplé ensemble parralélisent le chargement des ressources, et au lieu d’envoyer les fichiers en chargement au navigateur par blocs de 10, tous les fichiers se chargent en même temps.

La 1ere chose a faire, est de mettre en place le http2 avec le https. Les images ainsi que les autres ressources vont se charger en parallèle.

Exemple, on est passé d’une page qui mettait 2,6 secondes a charger à 0,6 secondes pour une page de 1mo. (Soyons honnête il y a quand même un cache varnish qui a été vidé juste avant le test 😉 )

Optimiser le http2 et https pour accelerer le chargement

Le temps de chargement est donc maintenant conditionné par le chargement de votre image la plus lourde.

Comment mettre en place le lazy loading ?

Si cette fameuse image se trouve plus bas dans votre contenu, on pourrait ne pas la charger dès le premier chargement, mais le différer parcqu’elle n’est pas visible. C’est là que le lazy loading rentre en jeu.

La technique du lazy loading sert à ça : charger dynamiquement les images au fur et à mesure que l’utilisateur scroll.

Par contre pour une meilleur expérience utilisateur, pas toutes les images ne doivent être en lazy loading.

Il existe des plugins pour chaque CMS que je ne detaillerais pas dans cet article.

Comment vérifier que le lazy loading fonctionne ?

Allez dans l’inspecteur d’élément, onglet Network > Images.

Quand vous rafraichissez la page vous voyez les images au chargement de votre page. Des images manquent ? Alors cela fonctionne. Descendez et les autres images s’ajouteront.

 

Afficher une couleur dominante à l’emplacement de la photo comme pinterest

Une des technique employée par pinterest est d’afficher un bloc de calage avec la couleur dominante (placeholder) avant de charger le reste des images.

Cela consiste à récupérer un pixel avzc la couleur dominante de l’image et remplir le bloc.

Vous trouverez toutes les techniques de lazy loading d’image dans cet article de css-trick avec des codes sources.

Vous y decouvrirez que l’ont peut utiliser un service imagekit pour envoyer une image basse qualité avant de la remplacer par la vraie image. Ou une image floue.

La seule chose qui me gêne c’est que cela rajoute quand même un temps de latence d’accès au service (résolution dns)

https://css-tricks.com/the-complete-guide-to-lazy-loading-images/

Panne de base de données mysql chez OVH, que faire ?

On se lève un matin et on s’aperçoit que le site ne fonctionne plus. Cela arrive et quelque soit l’hebergeur.

Si vous aviez décidé de prendre un hébergement mutualisé, et vous vous retrouvez avec une erreur : error etablishing database connection. Cela veut dire que soit vous avez un problème avec les paramètres de votre site, soit que le serveur de base de données ne repond plus. Autant ce n’est pas grave pour un blog personnel, mais si vous faites de la vente en ligne, il vaut mieux avoir un plan B.

Créer une base de donnée sql ailleurs.

Vous avez surement le backup de la veille. Vous pouvez donc recréer une base de donnée temporairement ailleurs ou vous importerez votre base de donnée la plus récente.

Vous modifiez les parametres de connection, et vous avez un site a nouveau fonctionnel.

Que faire lorsque la base de donnée fonctionnera à nouveau ?

Il faudra néanmpins resynchroniser vos données, mais au moins vous n’aurez pas perdu de ventes.

 

 

Restauration base de donnée en ligne de commande serveur #linux #sysadmin

Comment restaurer mes bases de données MYSQL sur mon nouveau serveur ?

mysql --user=mon_user --password=mon_password < dump.sql 

Si vous voulez restaurer une base de données précise :

mysql --user=mon_user --password=mon_password nom_de_la_base < dump.sql

Comment Importer une base de donnée Gzipée ou compressé ?

C’est la même manipulation il suffit de lance la commande gunzip et mettre le nom de votre base de donnée zippé :

gunzip < dump.sql.gz | mysql -u user -p database

Pour restaurer une base de donnée compressée.

zcat nom_de_la_base.sql.gz | mysql -h localhost -u utilisateur -p"mot_de_passe" nom_de_la_base

Pourquoi phpmyadmin ne veut pas importer ma base de donnée ?

La plupart du temps, votre base de donnée doit dépasser la taille d'upload autorisée, il faudra modifier

post_max_size =

upload_max_filesize =

Mais le mieux est de passer par la ligne de commande si vous le pouvez.

 

 

 

 

Sauvegarde Base de données en ligne de commande linux #sysadmin

Faire un backup de toutes ses bases de données serveur en ligne de commande

Il vous faudra la commande mysqldump normalement présent sur touts les serveurs.

Comment faire une sauvegarde de toutes ses bases de données via SSH ?

mysqldump -u root -p --all-databases --single-transaction –default-character-set=utf8 > dump.sql

(je force l’encodage utf-8, mais vous pouvez l’enlever)

Si vous n’avez pas les accès root, il vous faudra utiliser le nom d’utilisateur et le mot de passe de votre base de données. On peut également zipper pour que cela prenne moins de place serveur (ce sera moins long à copier de serveur à serveur)

mysqldump --user=mon_user --password=mon_password --all-databases | gzip > dump.sql.gz

Attention : Article écrit pour mon usage personnel, je ne suis pas responsable si vous pétez votre serveur.