15 conseils pour améliorer les performances techniques de vos sites web

Transcript

1. Bienvenue aux Niort TECH LIVES
2. 15 conseils pour améliorer les performances techniques de vos sites web Mathieu Santostefano - Développeur web Niort Tech Lives
3. Mathieu Santostefano Développeur web chez PHP, JavaScript, Docker, Elasticsearch, … @welcomattic sur Twitter et GitHub
4. 1. Prendre soin de vos images • Optimisez le poids de vos images pour le web (exemple : avec ImageOptim) • Convertissez vos images “simples” (ex: illustrations) en .svg • Optimisez les dimensions de vos images, afin d’accélérer leur chargement Les images représentent une large partie du poids total d’une page, il est primordial d’optimiser leur chargement au maximum https://slides.com/welcomattic/des-images-au-cordeau-pour-vos-applications-symfony/
5. 2. Utiliser le lazy loading natif • Retardez le chargement des images non visibles sur votre page • Profitez du récent lazy loading natif offert par les navigateurs pour ne pas charger toutes les images de votre page au chargement initial. • Les images non visibles seront chargées au fur et à mesure de la navigation de l’utilisateur sur la page. Ceci va accélérer le chargement initial de votre page, sans pour autant faire perdre de l’information à votre utilisateur !
6. 3. Respecter la sémantique HTML • Il est primordial de respecter la sémantique HTML dans la construction de vos pages, afin que les informations que contiennent les balises soient correctement interprétées par les navigateurs, les moteurs de recherches, les lecteurs audio (pour les malvoyants), etc • Hiérarchiser le contenu dès la conception des pages (UX designers, graphistes, etc) • N’hésitez pas en tant que développeur à apporter vos conseils sur cette sémantique Le structure de contenu des pages web est un pilier transverse à tous les métiers du web
7. 4. Paralléliser les appels à des API externes • Utiliser les fonctionnalités asynchrones de JavaScript pour paralléliser le chargement de données externes à votre site (cartes, widget, lecteur vidéo, etc) • Appliquer ce principe sur vos propres données si certaines sont lourdes et donc longues à charger (liste de produits, commentaires nombreux sur un contenu, etc) Ces chargement parallèles permettent un chargement initial de page plus rapide, et laissent l’utilisateur consulter le contenu principal pendant que le secondaire charge
8. 5. Rendre asynchrones des traitements longs et/ou non urgents • Le principe d’asynchronisme s’applique également pour les tâches longues et/ou non urgentes (traitement d’image, envoi de mails, etc) • Ne laissez pas votre utilisateur patienter pendant que vous traitez sa commande et que vous lui envoyez un email de confirmation. Privilégiez d’abord de répondre à l’action de l’utilisateur Plusieurs études montrent une perte d’attention de l’utilisateur après ~1 sec d’attente
9. 6. Dark mode Nos écrans sont les principales sources de consommation d’électricité sur nos ordinateurs et smartphones • Réduction de consommation énergétique (1 pixel noir est moins gourmand qu’1 pixel blanc) • Ne l’imposez pas ! Proposez-le, ou synchronisez-vous sur les paramètres système de l’appareil de votre utilisateur La plupart des smartphones récents disposent d’un réglage automatique du dark mode, Profitez-en pour vous synchronisez dessus et afficher votre site en dark mode le cas échéant
10. 7. Configurer votre serveur web pour compresser vos pages • Apache, Nginx, Varnish, HAProxy, IIS, Tomcat … • Quelque soit votre serveur web, ou votre architecture, pensez à activer la compression des réponses HTTP afin d’accélérer le chargement de vos pages Tous les navigateurs prennent en charge la décompression de contenus, profitez-en pour gagner encore quelques millisecondes !
11. 8. Éviter les erreurs 404 • Lors de la refonte d’un site, le plan d’URL change très souvent et certains liens ne fonctionnent plus • Pensez à lister ces liens morts et à les rediriger vers leur nouvelle URL • Plus votre taux d’erreur 404 sera bas, plus votre migration sera réussie et vos utilisateurs moins perdus • Les moteurs de recherche seront plus cléments avec vous également Des outils spécialisés peuvent vous aider à automatiser la redirection de vos anciennes URLs vers les nouvelles https://redirection.io
12. 9. Utiliser des pictogrammes en svg plutôt qu’en png Versus
13. 10. Utiliser des animations CSS plutôt que JS • Les animations graphiques en CSS sont optimisées par le navigateur pour faire appel au meilleures ressources de l’appareil (carte graphique, puce dédiées, etc) • Les animations en JavaScript ne sont pas par défaut optimisées pour ça, ce qui peut les rendre moins performantes Privilégiez les animations d’éléments SVG en CSS, pour garantir une fluidité à l’affichage
14. 11. Utiliser la bonne techno pour le bon besoin (SSG, CMS etc) • Portez une attention particulière au choix technologique que vous faites selon votre besoin. • Vous n’avez pas besoin du dernier framework de Machine Learning pour développer le site vitrine du plombier de votre commune • Pour les besoins éditoriaux, privilégiez les Static Site Generators qui disposent des principaux avantages éditoriaux d’un CMS, sans leur lourdeur de fonctionnement Pour les besoins plus complexe, les grands frameworks du marchés sont très souvent la bonne solution
15. 12. Utiliser des modules JS accessibles • Les contenus dynamiques comme les carrousels, les popins, etc, sont souvent peu accessibles aux PSH • Des modules existent pour permettrent à ces utilisateurs de s’en servir convenablement • Les attributs HTML aria-* vous aideront à rendre vos interfaces accessibles Des bibliothèques JavaScripts open sources proposent déjà certains éléments d’interface accessibles https://github.com/jonathanlevaillant/a11y-dialog-component
16. 13. Automatiser le déploiement • Le déploiement est très souvent vécu comme un moment critique et stressant • Déléguez cette tâche en vous affranchissant de la gestion de votre architecture quand c’est possible • Les prestataires IaaS/PaaS offrent des services de déploiement continu automatisé, tout en garantissant le maintien en ligne de vos applications Selon votre technologies, des services comme Clever Cloud ou Platform.sh proposent ces services
17. 14. Industrialiser votre environnement de développement • L’installation locale d’un projet pour un nouveau développeur peut être un moment compliqué • Industrialisez cet environnement de développement avec les mêmes outils que votre production • Docker, ou Ansible, tous ces outils sont adaptables à vos environnement de développement et vous simplifieront la vie au quotidien Des dizaines d’articles sont publiés chaque années par plusieurs équipes de développeurs pour partager leurs méthodes, leurs outils, et parfois leur créations en open source
18. 15. Automatiser le renouvellement de vos certificats SSL • Le renouvellement des certificats SSL est critique. Il est aujourd’hui possible de l’automatiser grâce à ces outils comme Certbot, et des services comme Let’s Encrypt, qui propose gratuitement des certificats SSL • Ne vous faites plus avoir à payer vos certificats plusieurs centaines d’euros, Let’s Encrypt vous fournis la même qualité de service gratuitement, avec du renouvellement automatisé possible Le SSL est indispensable aujourd’hui, il contribue à la sécurité des données échangées sur le réseau
19. À vous de jouer ! Pratiquez une veille sur tous ces sujets, et appliquez autant que possible au quotidien les meilleurs conseils que vous trouvez, vous contribuerez à rendre le web meilleur ! 🎉