Les utilisateurs sont encore moins patients sur mobile que sur navigateur de bureau, malgré leur débit à priori faible et la faible puissance de leur machine. Quelles techniques et quelles méthodologies pour limiter la casse ? Le RWD est il un fléau ou une opportunité ? La 4G sauvera-t-elle le monde ?
Dans ce talk mêlant business, ergonomie de base, méthodologie et techniques, nous répondrons au moins partiellement à ces questions.
Qu'est ce qui a changé ces dernières années pour la performance Web ?
Quelles sont les pratiques obsolètes, limite ou toujours au top ?
Tour d'horizon en 20 minutes de la perf aujourd'hui
Techniques d’accélération des pages WebMicrosoft
Vos utilisateurs, votre consultant référencement et même votre ergonome devraient déjà vous poursuivre pour accélérer l'affichage de vos pages. Si ça n'est pas le cas, c'est à l'équipe front de l'introduire. Nous allons voir les techniques universelles dont disposent les développeurs Web ou les exploitants pour accélérer l'affichage des pages Web, y compris sur les mobiles. C'est surtout côté code front que se passe la course à l'affichage de pixel, mais nous discuterons également des choses à prendre en compte côté backend et machines. Nous passerons également en revue les arguments à avancer pour faire prendre conscience des enjeux de qualité, d'ergonomie et de finances associés à des sites rapides.
Présentation donnée à SudWeb 2013 (http://www.sudweb.fr/2013), le 17 mai, sur le Responsive Web Design à BBC News (http://m.bbc.co.uk/news).
La technique "Cutting the Mustard" est documentée en détail sur le blog de l'équipe Responsive News: http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
Introductions aux notions de performances web et des temps d'affichage des pages : notions, avantages financiers, ce qui ralentit le web, comment mesurer, quelques exemples, comment accélérer ses pages concrètement.
Les slides de mon talk à la Kiwiparty 2014 sur la logique Responsive : comment appréhender les différentes problématiques que pose le Responsive Design tout en conservant une bonne maintenabilité
JCertif 2013 - Vers un web moderne pour l'Afrique ?Rossi Oddet
Slides d'animation d'un débat autour du web moderne pour l'Afrique lors de l'événement JCertif 2013.
Blog : http://blog.roddet.com/2013/10/jcertif-2013-retour/
Présentation de l'outil http://yellowlab.tools
Pourquoi le JavaScript peut-il être si lent ?
Comment l'accélérer en diminuant le nombre d'accès au DOM ?
Comment utiliser Yellow Lab Tools pour analyser le code JS et trouver des axes d'optimisaiton ?
Qu'est ce qui a changé ces dernières années pour la performance Web ?
Quelles sont les pratiques obsolètes, limite ou toujours au top ?
Tour d'horizon en 20 minutes de la perf aujourd'hui
Techniques d’accélération des pages WebMicrosoft
Vos utilisateurs, votre consultant référencement et même votre ergonome devraient déjà vous poursuivre pour accélérer l'affichage de vos pages. Si ça n'est pas le cas, c'est à l'équipe front de l'introduire. Nous allons voir les techniques universelles dont disposent les développeurs Web ou les exploitants pour accélérer l'affichage des pages Web, y compris sur les mobiles. C'est surtout côté code front que se passe la course à l'affichage de pixel, mais nous discuterons également des choses à prendre en compte côté backend et machines. Nous passerons également en revue les arguments à avancer pour faire prendre conscience des enjeux de qualité, d'ergonomie et de finances associés à des sites rapides.
Présentation donnée à SudWeb 2013 (http://www.sudweb.fr/2013), le 17 mai, sur le Responsive Web Design à BBC News (http://m.bbc.co.uk/news).
La technique "Cutting the Mustard" est documentée en détail sur le blog de l'équipe Responsive News: http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
Introductions aux notions de performances web et des temps d'affichage des pages : notions, avantages financiers, ce qui ralentit le web, comment mesurer, quelques exemples, comment accélérer ses pages concrètement.
Les slides de mon talk à la Kiwiparty 2014 sur la logique Responsive : comment appréhender les différentes problématiques que pose le Responsive Design tout en conservant une bonne maintenabilité
JCertif 2013 - Vers un web moderne pour l'Afrique ?Rossi Oddet
Slides d'animation d'un débat autour du web moderne pour l'Afrique lors de l'événement JCertif 2013.
Blog : http://blog.roddet.com/2013/10/jcertif-2013-retour/
Présentation de l'outil http://yellowlab.tools
Pourquoi le JavaScript peut-il être si lent ?
Comment l'accélérer en diminuant le nombre d'accès au DOM ?
Comment utiliser Yellow Lab Tools pour analyser le code JS et trouver des axes d'optimisaiton ?
La vitesse d’un site web : un levier de croissance peu exploitéFasterize
La rapidité des sites web doit faire partie des stratégies marketing car elle impact le taux de transformation, le taux de rebond, le référencement et permet de gérer les pics de charge (en période de soldes par exemple)
• Le temps de chargement de page, c’est (très souvent) idiot, par Jean-pierre Vincent.
D’autres métriques génériques et bien meilleures existent et ont chacune leurs défauts (speedIndex, first contentful paint, Time to Interactive). Du coup je vais surtout vous apprendre à mesurer ce qui compte pour VOTRE site.
Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007Eric D.
Il est possible d'aller plus loin que les applications classiques. En profitant pleinement des capacités du navigateur cet atelier vous montrera comment améliorer les performances et modulariser l'existant. HTTP, REST et Ajax sont au menu pour une application orienté services légère, simple à modifier et avec une API partageable avec vos clients.
Cloud Azure – Services de données et bonnes pratiquesMicrosoft
Durant cette session, nous vous présenterons les différentes options de stockage de données Windows Azure SQL/NoSQL, PaaS/IaaS et les bonnes pratiques pour identifier celle(s) correspondant à votre besoin. Une application web d’Emailing sera démontrée et permettra notamment d’expliquer les avantages d’utiliser une combinaison de plusieurs options de stockage. Nous terminerons par un retour d’expérience sur une solution permettant de gérer de gros fichiers (>150 Go) et les bénéfices apportés.
Speakers : Benjamin Moulès (Microsoft France), Jean-Luc Boucho (Infosys), Mickaël Mottet (Econocom-Osiatis)
"Enfin", c'est le mot qu'on peut avoir à la découverte du framework web Ruby On Rails.
Enfin un cadre de travail MVC qui facilité réellement le développement au lieu de le complexifier. ActiveRecord, une des briques magiques de cette application, pose une interface objet pour votre base de donnée en moins de cinq lignes. Le reste est à l'image de ruby : principe de surprise minimum, agilité et extensibilité. Cette présentation vous montrera, après des années de framework Web et d'expertises PHP, ce que quelques mois de Ruby On Rails suffisent à gagner.
Créer et gérer un site internet seul c'est possibleYoucef Kébaïli
L'agence Web CLENO vous montre comment créer vous-même votre Site Internet avec l'outil Jimdo.
Suivez la démonstration et faites un essai gratuit en ligne.
Support de cours pour un atelier qui a eu lieu à Kisangani, RD Congo sur le CMS WordPress. L'accent était mis sur la procédure de déploiement de son site local vers un hébergeur distant.
Le Web comme plateforme applicative - comment programme-t-on le Web?Francois Daoust
D'une plateforme documentaire, le Web s'est peu à peu transformé en plateforme applicative. Cette présentation explore les différentes facettes de la plateforme applicative web qui en font LA plateforme incontournable pour le développement d'applications.
64 conneries que font les référenceurs avec WordPressAurélien Denis
Une conférence pour sensibiliser les référenceurs, les clients et donc les utilisateurs de WordPress sur des erreurs récurrentes aux conséquences préjudiciables. Pas moins de 64 bêtises identifiées et des astuces pour les corriger avec votre prestataire Web.
Cette présentation fut présentée lors du SEO Camp Day Pays Basque 2019 à Bayonne.
PHP jouit parfois d'une mauvaise réputation au niveau des performances. Nous verrons si cette réputation est méritée, si les performances sont réellement un problème pour utiliser PHP.
PHP a une architecture qui lui permet de monter en charge sans mettre en place des solutions complexes. Entre l'installation, la configuration et les possibilités au niveau applicatif, cette session vous permettra de répondre efficacement à la problématique des performances.
Optimiser Wordpress : présentation préparée pour le Wordpressday Algérie en décembre 2011 par Jean-François VIAL
La video du screencast : http://vimeo.com/33115346
Licence : CC-By-SA
Il y a plusieurs centaines de techniques pour accélérer ses pages côté client, mais à travers ce retour d'expérience nous allons voir qu'en ayant simplement appliqué les bases on a pu diviser les temps d'affichage utilisateur par 5.
Présenté à la soirée Webperf de novembre 2013
La vitesse d’un site web : un levier de croissance peu exploitéFasterize
La rapidité des sites web doit faire partie des stratégies marketing car elle impact le taux de transformation, le taux de rebond, le référencement et permet de gérer les pics de charge (en période de soldes par exemple)
• Le temps de chargement de page, c’est (très souvent) idiot, par Jean-pierre Vincent.
D’autres métriques génériques et bien meilleures existent et ont chacune leurs défauts (speedIndex, first contentful paint, Time to Interactive). Du coup je vais surtout vous apprendre à mesurer ce qui compte pour VOTRE site.
Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007Eric D.
Il est possible d'aller plus loin que les applications classiques. En profitant pleinement des capacités du navigateur cet atelier vous montrera comment améliorer les performances et modulariser l'existant. HTTP, REST et Ajax sont au menu pour une application orienté services légère, simple à modifier et avec une API partageable avec vos clients.
Cloud Azure – Services de données et bonnes pratiquesMicrosoft
Durant cette session, nous vous présenterons les différentes options de stockage de données Windows Azure SQL/NoSQL, PaaS/IaaS et les bonnes pratiques pour identifier celle(s) correspondant à votre besoin. Une application web d’Emailing sera démontrée et permettra notamment d’expliquer les avantages d’utiliser une combinaison de plusieurs options de stockage. Nous terminerons par un retour d’expérience sur une solution permettant de gérer de gros fichiers (>150 Go) et les bénéfices apportés.
Speakers : Benjamin Moulès (Microsoft France), Jean-Luc Boucho (Infosys), Mickaël Mottet (Econocom-Osiatis)
"Enfin", c'est le mot qu'on peut avoir à la découverte du framework web Ruby On Rails.
Enfin un cadre de travail MVC qui facilité réellement le développement au lieu de le complexifier. ActiveRecord, une des briques magiques de cette application, pose une interface objet pour votre base de donnée en moins de cinq lignes. Le reste est à l'image de ruby : principe de surprise minimum, agilité et extensibilité. Cette présentation vous montrera, après des années de framework Web et d'expertises PHP, ce que quelques mois de Ruby On Rails suffisent à gagner.
Créer et gérer un site internet seul c'est possibleYoucef Kébaïli
L'agence Web CLENO vous montre comment créer vous-même votre Site Internet avec l'outil Jimdo.
Suivez la démonstration et faites un essai gratuit en ligne.
Support de cours pour un atelier qui a eu lieu à Kisangani, RD Congo sur le CMS WordPress. L'accent était mis sur la procédure de déploiement de son site local vers un hébergeur distant.
Le Web comme plateforme applicative - comment programme-t-on le Web?Francois Daoust
D'une plateforme documentaire, le Web s'est peu à peu transformé en plateforme applicative. Cette présentation explore les différentes facettes de la plateforme applicative web qui en font LA plateforme incontournable pour le développement d'applications.
64 conneries que font les référenceurs avec WordPressAurélien Denis
Une conférence pour sensibiliser les référenceurs, les clients et donc les utilisateurs de WordPress sur des erreurs récurrentes aux conséquences préjudiciables. Pas moins de 64 bêtises identifiées et des astuces pour les corriger avec votre prestataire Web.
Cette présentation fut présentée lors du SEO Camp Day Pays Basque 2019 à Bayonne.
PHP jouit parfois d'une mauvaise réputation au niveau des performances. Nous verrons si cette réputation est méritée, si les performances sont réellement un problème pour utiliser PHP.
PHP a une architecture qui lui permet de monter en charge sans mettre en place des solutions complexes. Entre l'installation, la configuration et les possibilités au niveau applicatif, cette session vous permettra de répondre efficacement à la problématique des performances.
Optimiser Wordpress : présentation préparée pour le Wordpressday Algérie en décembre 2011 par Jean-François VIAL
La video du screencast : http://vimeo.com/33115346
Licence : CC-By-SA
Il y a plusieurs centaines de techniques pour accélérer ses pages côté client, mais à travers ce retour d'expérience nous allons voir qu'en ayant simplement appliqué les bases on a pu diviser les temps d'affichage utilisateur par 5.
Présenté à la soirée Webperf de novembre 2013
Comment accélérer ses pages Web ? Combien cela rapporte il, quels sont les outils
Nous allons voir les techniques de base que les développeurs doivent connaître et quels sont les outils dont tout site moderne doit s'équiper pour assurer un minimum de qualité.
Comment avoir un rendu performant même sur mobile ? Comment animer convenablement ses interfaces Web ? Quelques pistes et retours d'expérience.
Présenté en 2015 pour le JS Open days 1
1ère partie de la présentation HTML5 maintenant : les nouvelles balises, microdata, les nouveaux formulaires, bref tout ce qui fait l'évolution de la sémantique de HTML4
2ème volet de la présentation HTML5 maintenant : géolocalisation, nouveau formulaires, et Web storage au menu, afin de voir ce qu'il est possible d'utiliser dès aujourd'hui, et à quelles conditions
Practical web performance - Site Confidence Web Performance SeminarStephen Thair
Over of Web performance optimisation (WPO) as well as some results from 25 web performance site analysis. Some information on Mobile web performance as well.
Measuring Mobile Web Performance presentation at the London Ajax Mobile Conference 2nd July 2011. Covers the basics of web performance measurement and looks specifically at the measurement of page load speed from mobile devices.
Physical Web is an important component for the Smart Cities and for monetizing IoT projects. This talk explain what is it and how to implement it using Eddystone protocol.
Présentation donnée lors de la KiwiParty 2014 pour montrer la forte présence et support des technologies Open Source dans Azure ainsi que d'autres initiatives comme .NET, TypeScript, Babylon.JS ou status.modern.ie
**31 Octobre 2014** : Présentation mise à jour pour la conférence Blend Web Mix disponibles sur http://www.slideshare.net/kaelig/faire-le-pont-entre-designers-et-developpeurs-au-guardian
Les pré-processeurs CSS sont d’excellents outils pour les développeurs. Au Guardian nous sommes allés plus loin, procurant un réel bénéfice au niveau de la communication en utilisant les variables et mixins Sass comme socle pour un vocabulaire et des concepts communs partagés entre développeurs et designers.
Présentation donnée en tant qu'invité d'honneur à la KiwiParty (http://kiwiparty.fr/) le vendredi 13 juin 2014.
Présentation donnée lors de la KiwiParty 2014 pour sensibiliser aux avantages de la notation BEM en CSS.
Vous ne connaissez pas BEM ? Pas de soucis ! Cette présentation commencera par une présentation des principes et ce que ça peut vous apporter. Nous découvrirons aussi comment le mettre en place sur vos projets et quelques petites astuces pour vous simplifier la vie ;)
Cette conférence présente les problématiques du JavaScript pour la performance SEO, des propositions de solutions et les outils utilisés par les professionnels du SEO.
Elle a été présentée par Aymeric Bouillat et Adrien Russo lors du SMX Paris 2023.
Les défis d’une application mobile multi-périphériques avec HTML5davrous
Aujourd’hui, on peut s’approcher de plus en plus des capacités des applications dites « natives » grâce à HTML5. Il y a 2 manières pour atteindre ce but. Utiliser les capacités intrinsèques d’HTML5 en faisant un site web moderne ou étendre ses capacités avec des frameworks comme PhoneGap. Mais ce n’est pas tout. Il y a ensuite de nombreux défis à relever : gestion du tactile, identité visuelle de chacune des plateformes, performances très différentes du desktop, etc. Nous verrons comme adresser certains de ces points via des exemples parfois issus du monde du jeu vidéo pour égayer cette présentation !
http://conf2013.web-5.org/speaker/david-rousset-les-defis-dune-application-mobile-multi-peripheriques-avec-html5/
Performance Web côté client - Daspet / Sullivan - Paris Web 2008Association Paris-Web
80% des problèmes de performance Web se situe au niveau des échanges avec le navigateur et sur le navigateur lui-même : échanges réseau, rendu dans le navigateur, organisation des composants dans une page etc.
Nous aborderons les principales problématiques et les solutions à mettre en œuvre. Forts de l'expérience de l'équipe performance de Yahoo!, à la fin de cette session vous saurez aborder la question des performances Web du point de vue du visiteur et mettre en œuvre les actions correctrices sur vos sites Web.
Node.js et les nouvelles technologies javascriptKhalid Jebbari
Présentation sur Node.js et les nouvelles technologies javascript, qui a eu lieu dans les locaux de Smile, à Levallois (92).
Retour d'exploration par un développeur Drupal (moi) sur ces technologies, et comparaison avec Drupal.
"Trucs et astuces sur le dévelopment Android"
Thierry-Dimitri Roy
Programmeur principale de La Presse Mobile et La Presse Hockey sur Android
Présentation donnée pour Android Montréal le 7 décembre 2011
jQuery mobile / PhoneGap : contenus dynamiques client-sidemaru.maru
Présentation effectuée le 24 mai 2012 à l'occasion de la Creative week Adobe live à Paris.
Problématiques abordées :
- Comment générer du contenu HTML dynamiquement côté client (sans PHP !) ?
- Quelles sont les techniques disponibles, les bonnes pratiques, les pièges à éviter ?
Avant d'entamer un chantier de performance Web, il convient de mettre en place du monitoring.
En particulier si vous voulez gérer sur le long terme la qualité, si vous avez beaucoup de sites et de pages à gérer.
Cette présentation est tirée d'un retour d'expérience d'installation de monitoring spécialisé en performance Web, avec des logiciels gratuits, et un serveur peu cher.
Decouvrez les particularités de JavaScript qui vous aideront à débogguer sans craindre ce langage aujourd'hui indispensable.
- la portée des variables et comment ne pas polluer l'espace global
- comprendre le mot clé this
- les particularités des fonctions
- introduction aux namespaces
Loin de la théorie vous aurez des explications pratiques et des démos de code ainsi que les bonnes pratiques.
3. À une seconde près ?
Temps de réaction Perception
0 – 100 ms Instantané (wow)
100 – 300 ms Ça rame
300 – 1000 ms La machine travaille
1 s+ Changement de contexte mental
10 s+ Je reviendrais (ou pas)
4. À une demie seconde près !
Tests utilisateurs : perception de la marque tesco.com
Site témoin
• Facile à utiliser
• Simple
• Lent
• Chargé
• Mobile friendly
• Rapide
Latence de 500 ms
• Lent
• Basique
• Navigation difficile
• Ennuyant
• Compliqué
• frustrant
5. Combien coûte le temps ?
• Etsy :
– 1 image de 160K = + 12% de
taux de rebond
• DoubleClick
– 1 redirection en moins = +12%
de taux de clic
• RadWare
– 60% d’abandon après 4
secondes de chargement
• Wallmart
– -50% de conversion par
seconde
• Akamai
– -6% de vidéo vue par seconde
• Google
– Critère de Référencement
6. Où est le problème ?
• Réseau mobile français (Akamai) :
– 6 Mb/s en moyenne
– 34 Mb/s en pointe
• La 4G française (degrouptest) :
– 21-32 Mb/s
• 75% d’utilisation via le wifi (Étude Google)
7. Les contraintes externes
• Latence 4G : 50-100 ms
• Vraies situations de
mobilité : need for speed
• Utilisateur : un site avec
moins de contenu doit se
charger plus vite non ?
• Saturation et variabilité
des réseaux
16. « Il n’y a pas plus rapide qu’une requête qu’on ne fait pas »
17. Manage cache (or die trying)
La seule bonne méthode :
• Définir des temps de cache
longs (1 mois - 1 an)
• Invalidation par changement
de l’URL d’appel
18. Cache manuel
Les caches sur mobile ne sont pas fiables
• Utiliser localStorage (voir google HP)
– Stockage de plusieurs Mo
– HTML, CSS, JS, images, données JSON
19. Le cache ultime
http://bit.ly/demo-offline
• HTML5 Application Cache
• Apparition instantanée
de l’interface
• Équivalent de
l’installation d’une
d’application native
• Gère la déconnexion !
23. Chargement juste à temps
• Ne charge que les images visibles
• Libére la connexion pour les ressources critiques
• Ex: lequipe.fr
– 30 images et 300Ko économisés
• Librairie bullet-proof
24. Images embarquées
• Technique de data:uri + encodage base 64
• Images critiques encodées dans le HTML
25. Les formats d’image
Optimiser les formats
actuels
• Gif < PNG < JPG
• Des dizaines d’outils de
compression auto
• Nettoyage des EXIF
• JPG progressif : NON
Distribuer les remplaçants
de JPG
• WebP (Android Chrome)
• JPG XR (Windows phone)
• JPG 2000 (iOS Safari)
27. Définir le problème
• Taille d’images adaptée à la taille de viewport ?
• Support des écrans haute résolution ?
• Variation des formats d’image ?
• Art direction ?
28. Une réponse compliquée à un problème compliqué
• Format officiel final : <picture>
• Librairie d’émulation officielle : picturefill 2.0
29. La technique improbable
« grand JPG qualité nulle »
http://bit.ly/jpg-0 (sur un écran à haute densité)
31. Technique « fait main »
• Images d’interface critiques encodées en
base64
• Images de contenu critiques visibles en basse
définition (<img src>)
• Images de contenu critiques en haute définition
(JS)
• Images contenu secondaire en lazy-loading
• Image d’interface secondaires en font / SVG /
sprites
33. SPDY / HTTP 2
Réduit les dégâts d’un grand nombre de requêtes
Support
• Chrome (forcément), Firefox, iOS 8
Limites
• HTTPS only
• Laisse ramer IE 8, iOS < 7, navigateur Android
34. Domain sharding
Il faut arrêter maintenant hein
• Résolution DNS couteuses
• Saturation immédiate de la bande passante
35. JavaScript en bas de page
• Ça ne sert à rien pour le site lambda
– Ralentit l’affichage sur Safari iOS
– Ralentit l’exécution partout
37. Grandeur et décadence
• Animations
– Directement en CSS3 (généré si besoin)
– Utiliser translate
– Tenter requestAnimationFrame
• Scroll de longues pages
– Technique du recyclage d’objets
• Décoration
– Éviter CSS3 … (ombrages)
• Calcul
– Web Workers
– L’increvable setTimeout( 0 )
38. Fluidité
• Une seule règle : tester et profiler
• Avoir de vrais téléphones
• Utiliser les déboguages via USB :
– Chrome Android
– Safari iOS
– Windows
– Firefox OS
40. Impliquer
• Le mythe du développeur héro solitaire
• La vitesse doit être prévue dans les specs
– Google : « Speed is the #1 feature »
• Exemple :
– Pour 80% des utilisateurs
– Premier rendu en moins de 2 secondes
– Fonctionnalité principale en moins de 5 secondes
– Navigations internes en moins de 2 secondes
41. Mesurer, avant action
• La base : WebPageTest
• Mesures utilisateurs
– Google, de base
– À enrichir avec des mesures liées au métier
42. Surveiller dans le temps
• Compléments payants ou gratuits à WPT
• Analytics
– Google, de base
– À enrichir avec des mesures liées au métier
44. RWD ? Non : mobile first
• Suivre les utilisateurs :
– Déjà en multi-écrans
– Commencent souvent par une navigation mobile
– Parfois moyen unique d’accès au net
• Bonus : accélération pour tout le monde
– IE 8
– marchés lointains
– smartphones bas de gamme