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
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.
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 ?
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.
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.
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.
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.
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.
"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.
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.
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)
A l’heure de l’explosion de la navigation par mobile et tablette, les technologies web évoluent et leurs utilisations elles-aussi !
Au vu de ce constat, nos pages web et leurs développements associés sont amenés à s’adapter eux-aussi pour rendre la navigation plus agréable pour l’utilisateur. Dans cette objectif, nos pages doivent pouvoir se charger rapidement avec des contraintes de performances nouvelles.
Google l’a bien compris et prend donc en compte depuis 2010 la performance au chargement de vos pages dans son algorithme de classement pour son moteur de recherche. Et oui ! La performance impacte aussi votre référencement !
12 bonnes pratiques pour apprendre à tirer le meilleur profit de votre site Web sous WordPress. Une conférence suivie d'audits en live à la Chambre de Commerce et d'Industrie de Bayonne.
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.
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.
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.
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.
"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.
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.
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)
A l’heure de l’explosion de la navigation par mobile et tablette, les technologies web évoluent et leurs utilisations elles-aussi !
Au vu de ce constat, nos pages web et leurs développements associés sont amenés à s’adapter eux-aussi pour rendre la navigation plus agréable pour l’utilisateur. Dans cette objectif, nos pages doivent pouvoir se charger rapidement avec des contraintes de performances nouvelles.
Google l’a bien compris et prend donc en compte depuis 2010 la performance au chargement de vos pages dans son algorithme de classement pour son moteur de recherche. Et oui ! La performance impacte aussi votre référencement !
12 bonnes pratiques pour apprendre à tirer le meilleur profit de votre site Web sous WordPress. Une conférence suivie d'audits en live à la Chambre de Commerce et d'Industrie de Bayonne.
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 ;)
Map, Flatmap and Reduce are Your New Best Friends: Simpler Collections, Concu...Chris Richardson
Higher-order functions such as map(), flatmap(), filter() and reduce() have their origins in mathematics and ancient functional programming languages such as Lisp. But today they have entered the mainstream and are available in languages such as JavaScript, Scala and Java 8. They are well on their way to becoming an essential part of every developer’s toolbox.
In this talk you will learn how these and other higher-order functions enable you to write simple, expressive and concise code that solve problems in a diverse set of domains. We will describe how you use them to process collections in Java and Scala. You will learn how functional Futures and Rx (Reactive Extensions) Observables simplify concurrent code. We will even talk about how to write big data applications in a functional style using libraries such as Scalding.
Introduction to Functional Programming in JavaScripttmont
A presentation I did for work on functional programming. It's meant as an introduction to functional programming, and I implemented the fundamentals of functional programming (Church Numerals, Y-Combinator, etc.) in JavaScript.
"Немного о функциональном программирование в JavaScript" Алексей КоваленкоFwdays
Все началось давно, еще в школе, классе эдак 7. Тогда учитель математики впервые произнесла фразу: "Игрек равно эф от икс". В то время я и не догадывался что это самое "эф от икс", является базовым принципом функционального программирования, да и не только функционального.
Functional Programming, Reactive Programming, Transducers, MapReduce и многое другое, так или иначе корнями уходит в то самое, незамысловатое f(x). Это настолько серьезная часть программирования, что ежеминутно, если не ежесекундно, по всему миру на клавиатуре нажимаются клавиши f, u, n, c, t, i, o, n. И нажимаются они именно в этой последовательности.
Пора принять тот факт, что без функционального программирования, программирования не существует!
Пора разобраться. Пора понять для чего нужны функции в программирование, как они должны работать и чем они могут быть полезны в ежедневной работе.
Explains the basic concepts of Category Theory, useful terminology to help understand the literature, and why it's so relevant to software engineering.
(video of these slides available here http://fsharpforfunandprofit.com/fppatterns/)
In object-oriented development, we are all familiar with design patterns such as the Strategy pattern and Decorator pattern, and design principles such as SOLID.
The functional programming community has design patterns and principles as well.
This talk will provide an overview of some of these, and present some demonstrations of FP design in practice.
Une immense majorité de développeurs connaissent jQuery, mais pas vraiment JavaScript. Nous verrons comment faire en pur JS ce que vous avez l’habitude de faire avec jQuery et jQuery UI, en mettant l’accent sur le support par les navigateurs des fonctionnalités JS utilisées, et sur les polyfills disponibles.
Sencha Touch est un framework JS permettant de développer des applications Mobile HTML5. Hérité de ExtJS, Sencha Touch est un outil déjà très mature, profitant d'une cinquantaine de composants, d'une architecture solide et d'un modèle MVC (contrairement à Jquery Mobile).
Sencha Touch permet également de packager l'application web pour Android ou iOS grâce à Sencha CMD ou Adobe PhoneGap
Le Profiling d'applications PHP - Blackfire.ionicolas.grekas
La performance d'une application. Tout le monde en parle. Mais êtes-vous outillés pour suivre son évolution entre chacune de vos itérations de développements ? Ou même avant chaque mise en prod. ?
Lors de cette conférence, je vous propose de découvrir Blackfire (ex-SensioLabsProfiler), un nouvel outil qui simplifie drastiquement la collecte et la compréhension de profils de performance PHP. Après avoir fait l'état de l'art sur le sujet (xhprof, xDebug), nous ferons un tour d'horizon des principales innovations de l'outil : expérience utilisateur simplifié, agrégation, visualisation de graphes, mise en avant des bottlenecks, comparaison de profils, etc. Voilà le moyen de mettre des nombres réels en face de vos intuitions, avec pour mot d'ordre : « getting and staying performant ».
Webperf et SEO : les Mythes et la RéalitéFasterize
Avoir un site rapide n'est plus une simple option, que ce soit pour vos utilisateurs ou pour les crawlers. Depuis 2010, la vitesse d'un site est prise en compte par Google et en juillet la vitesse sur mobile sera un facteur de classement officiel (Google Speed Update). Mais dans quelle mesure ? Concrètement, est-ce que gagner une seconde de temps de chargement fait gagner des positions ? Quelles sont les optimisations webperf qui marchent le mieux ? Y'a t il des optimisations contre-productives ? Faut il optimiser spécifiquement pour les robots ? Combien de pages Google peut crawler en 24h ? Au travers de cas concrets vus chez Fasterize et du témoignage de RueDuCommerce, nous essaierons de faire le point sur les mythes et les réalités de l'impact de la webperf sur le SEO en 2018 !
Avoir un site rapide n'est plus une simple option, que ce soit pour vos utilisateurs ou pour les crawlers. Depuis 2010, la vitesse d'un site est prise en compte par Google et en juillet la vitesse sur mobile sera un facteur de classement officiel (Google Speed Update). Mais dans quelle mesure ? Concrètement, est-ce que gagner une seconde de temps de chargement fait gagner des positions ? Quelles sont les optimisations webperf qui marchent le mieux ? Y'a t il des optimisations contre-productives ? Faut il optimiser spécifiquement pour les robots ? Combien de pages Google peut crawler en 24h ? Au travers de cas concrets vus chez Fasterize et du témoignage de RueDuCommerce, nous essaierons de faire le point sur les mythes et les réalités de l'impact de la webperf sur le SEO en 2018 !
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é.
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.
Avec l’avènement des connexions haut-débit et bientôt très haut-débit, les concepteurs semblent de moins en moins attentifs à la rapidité de leurs sites. De plus, avec de telles connexions, les internautes supportent mal un site qui les fasse attendre. Cela gâche l’expérience utilisateur, pourtant censée être au cœur du "web 2.0"
Cet atelier vous présentera comment, sans devoir repenser votre application ou vos pages depuis le début, améliorer la rapidité de votre site.
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.
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.
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Fasterize
A l’ère du mobile-first, les utilisateurs s’attendent à naviguer et acheter de façon fluide n’importe où et n’importe quand. Le temps de chargement est donc devenu LE critère le plus important pour les utilisateurs et cette exigence se reflète dans vos taux de conversion mobile.
Depuis plus d'un an, RueDuCommerce est classé par le JDN comme le site mobile e-commerce le plus rapide de France. Comment les équipes de Rue Du Commerce ont-elles relevé ce défi ? Comment a-t-on mesuré les améliorations sur l’expérience utilisateur ? Quels sont les bénéfices sur les utilisateurs et sur le business ?
Stéphane Rios, CEO de Fasterize et Aniss Boumrigua, Responsable du site RueDuCommerce.fr, vous partagent leurs expériences et leurs bonnes pratiques.
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échouéPhilippe YONNET
Le Edge SEO et Cloud SEO sont une nouvelle approche pour optimiser un site pour les moteurs de recherche. Elle exploite les nouvelles possibilités offertes par les CDN (Edge SEO) ou par les services de type Cloud (Cloud SEO) pour pallier à de nombreuses situations de blocage rencontrées au quotidien dans l'optimisation de plateformes complexes ou trop rigides.
Conférence donnée à l'occasion de l'événement SMX Paris par Philippe YONNET, Pdg de KNOW Y, et Stephane RIOS, Pdg de Fasterize.
Edge SEO & Cloud SEO : Comment faire du SEO dans le cloud quand tout le reste...Fasterize
Qu’est-ce que le Edge SEO et ses applications possibles ?
Quel est l’intérêt et les spécificités des tests A/B en SEO, et les avantages du Edge SEO dans le cadre de cette démarche ?
Pour en savoir plus et tester nos fonctionnalités Edge SEO en avant-première, contactez-nous : https://www.fasterize.com/fr/edge-seo/
Webperf et SEO : quelles métriques suivre ? Quelles optimisations privilégier ?Fasterize
Tout le monde est d’accord sur le fait qu’un site qui répond vite est crawlé plus facilement. Mais encore ? La vitesse de chargement est-elle un réel atout SEO et comment établir une corrélation ? Quelles sont les optimisations webperf efficaces pour votre site et celles qui sont contre-productives ? TTFB, Speed Index, PagesSpeed Insights et CrUX… Quels indicateurs suivre et à quels outils se fier ? Présentation de Stéphane Rios, CEO de Fasterize.
Aniss Boumrigua nous a présenté comment à l'occasion d'une refonte globale ils ont réussi à optimiser les performances de leur site et ainsi améliorer drastiquement leur taux de transformation
Similaire à Performances web - quoi de neuf ? (20)
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
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
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.
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
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
1. Quoi de neuf dans la Performance Web ?
Ce qui marche
Ce qui ne marche pas
Ce qui marchouille…
2. Bonjour je suis
• Jean-pierre VINCENT
• Dans le Web depuis 2000
• Dans la perf depuis 2005
• Startups, Yahoo!, grosses boites FR …
• Indépendant : expert JS et perfs
• Formateur, prof, auteur
• Viens jouer : @theystolemynick
braincracking.org
3. LE CHAMP DE BATAILLE
À quoi ça ressemble le front papa ?
4. Le monde est devenu merveilleux
Depuis 2005 :
• La fibre, la 4G !
• Des navigateurs qui
boostent !
• HTML5
• De nouveaux protocoles !
5. Le monde est devenu merveilleux
• Explosion du CSS3
• Flat Design
• Sites dédiés mobiles
6. Ce qui n’a pas changé
• L’être humain
– Need For Speed
• La vitesse de la lumière
– Fibre : débit X 10 mais chargement - 20% …
• La transmission radio
– Mobile = latence = pas si rapide
7. Ce qui n’a pas changé
• L’ADSL
• IE 8 (ou pire malheureux)
8. Ce qui a empiré
• Les attentes des utilisateurs :
– Si mon petit téléphone est fluide, pourquoi pas ton
site sur mon gros PC ?
• Google lit le JS
– Ce qui veut dire que la perf front va influencer le
taux de crawl
9. Ce qui a empiré
• Ton département
marketing :
– Tags
– Publicités
– Widgets
– AB Testing
en MASSE
12. Ce qui ne marche plus
Oublies :
• Le domain sharding
• JS en bas de page
13. Ce qui marchera (ou pas)
• SPDY / HTTP2
– 30% de gain selon les
organisateurs …
– 0% selon la police
• Images responsives, specs :
– ”srcset”, “src-N“, <picture>, client-
hints …
– ou pas
• CSS “will-change“
• Format d’image WebP
14. Les nouveaux trucs qui marchent
• Fonts asynchrones
• DOM Storage, offline
• Exécution non bloquante
de JavaScript
– Web Workers, RaF
– setTimeout (fn, 0)
15. Ce qui marchouille
• domaine des statiques
séparé
– des fois oui
– des fois non
• JS Asynchrone
• CDN
16. Ce qui marchouille
• Contenu dans le HTML :
– CSS, JS, images => google.fr
• CSS3
– Moins d’images
– Ça peut ramer
• JPG progressif
– Partout sauf IE8 / iOS
18. Ce qui marchera toujours
• Configure ton serveur
bon sang :
– Keep-alive
– Gzip (lvl 9)
– Minifie
(Et offre toi de quoi surveiller tes admins)
19. Ce qui marchera toujours
• Gère ton cache !
– Savoir le créer
– Savoir l’invalider
• Le super cache : l’offline
20. Ce qui marchera toujours
• Asynchrone sur :
– Pubs
– Widgets
– Trackers
– Images non-visibles
• Grouper :
– JS et CSS en 2 X 2 fichiers
– Sprites, fonts iconiques
21. La morale de cette histoire
• Fais ta veille
• Teste (en Dev)
• Re-teste (en Prod)
• Surveille
(Et appelle moi, j’ai un paquet d’idées rentables)
(au pire je te forme)
24. J’ai quasi-volé ces photos à :
• Blurb Code
• Marcela Palma
• AlsaCréationS
• Alex Proimos
• JD Hancock
• Ant Baena
• Kit
• Honza Soukup
• Nicu Buculei
• Earl
Notes de l'éditeur
Fibre : 50Mb/s , 4G : 20-30 Mb/s.
Même la 3G est passée récemment à 6Mb/s, + rapide que l’ADSL
moteur JS IE 9 10x plus rapide que IE 8, lui même 5x plus rapide que IE 7
accès GPU, compilos optimisés
Moins d’images à la con
Sites plus légers
Humain : La vitesse reste une exigence
4G : 50-100ms au mieux, 3G : on ne compte plus
France : 6,5Mb de MOYENNE => viser les 3 Mb pour être serein
Fibre : 10% de la population couverte
4G : des fois. La saturation arrivera
IE8 : 20%
Jusqu’ici, seules les perfs serveur influençaient le taux de crawl
AB Testing retarde VOLONTAIREMENT l’affichage
Bouton Google ou facebook : 150-200K chacun, un max de JS
Parce que IE7 c’est fini
Parce que mobile =
peu de bande passante,
HTTP pipelining : une ressource peut ralentir les autres
Par défaut dans Ruby par ex.
JS bas de page : ralentit les mobiles et le temps d’accès à la fonctionnalité
SPDY (HTTP2)
-30% selon les organisateurs, 0% selon la police
WebP : dans Chrome, déployé par Facebook, 30% meilleure que JPG
FONT :
Ça bloque, mais pas partout pareil
Le moins possible
Option asynchrone
Storage : stocker liste de pays, remplacer les cookies, stockage CSS / image
Grands gagnants : requireJS ou LabJS
1 seule requête pour le premier contenu visible
Le reste en asynchrone