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/
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 !
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
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
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
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
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 !
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
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
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
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
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
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
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
welcomattic
zozotech
kairim0
8maki
cyberagentdevelopers
iwamot
sonoda_mj
ham0215
line_developers_tw
nagatsu
yutaokafuji
uhyo
whisaiyo
techseoconnect
addyosmani
marketingsoph
katiecoart
tessaabrams
nwiizo
.png){kind=avatar}
helenjbeal
philnash
aleyda
axbom
marktimemedia
