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.
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é.
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.
Vous êtes en fonctionnement agile mais ça ne marche pas ? Vous ne vous servez pas de l’agilité et doutez que ça puisse s’appliquer à votre équipe ? Ce REX est fait pour vous !
Nous vous proposons de retrouver l’esprit de l’agilité en comparant deux expériences client contradictoires. D’un côté l’application quasi stricte des cérémoniels décrits dans la méthode Scrum, de l’autre une application très adaptée des principes de l’agilité.
Quels sont les effets observés dans chacun des cas et quels pièges peuvent être évités lors de l’application de la méthode ?
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
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.
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é.
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.
Vous êtes en fonctionnement agile mais ça ne marche pas ? Vous ne vous servez pas de l’agilité et doutez que ça puisse s’appliquer à votre équipe ? Ce REX est fait pour vous !
Nous vous proposons de retrouver l’esprit de l’agilité en comparant deux expériences client contradictoires. D’un côté l’application quasi stricte des cérémoniels décrits dans la méthode Scrum, de l’autre une application très adaptée des principes de l’agilité.
Quels sont les effets observés dans chacun des cas et quels pièges peuvent être évités lors de l’application de la méthode ?
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
"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019Boris SCHAPIRA
L’essor des usages mobiles change la donne du Web, entraînant une nouvel intérêt pour l’optimisation de l’expérience utilisateur, à commencer par la Performance Web. Mais pour appréhender la performance d’un site web, encore faut-il savoir quels indicateurs collecter, comment les interpréter et les améliorer.
Quand on travaille sur un CMS comme WordPress, il est aussi important d’évaluer ce qui peut mettre en danger cette performance, et les techniques à développer pour s’en prémunir.
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.
Support de notre séminaire du 08/10/2009.
- Présentation technique de la notion de portail, portlet JSR168, JSR286
- Présentation du marché
- Zoom sur les principaux acteurs Open Source du monde du portail JEE
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.
The quest for global design principles (SymfonyLive Berlin 2015)Matthias Noback
If you’re a programmer you make design decisions every second. You need to think, and often think hard, about everything. Luckily there are many useful design principles and patterns that you can apply. But some of them merely expose code smells. Others only help you design your classes. And some are applicable to packages only. Wouldn’t it be nice to have some more general, always useful, invariably applicable, foundational design principles? In this talk we’ll look at software from many different perspectives, and while we’re zooming in and out, we’ll discover some of the deeper principles that form the basis of proper object-oriented design. After attending this talk you will be able to make better design decisions by reflecting on the stream of messages that is flowing from object to object, and from application to application.
Replacing dependents with doubles is a central part of testing that every developer has to master. This talk goes over the different types of doubles and explains their place in testing, how to implement them in a mainstream mocking framework, and which strategies or doubles to use in different message exchange scenarios between objects. After this talk you will have moved a step forward in your understanding of testing in the context of object oriented programming.
Marcello reflects over the craftsmanship manifesto and its elements to uncover some interesting insights regarding the application of the underlying principles in real life projects and in the context of organisations and communities struggling to live up to the expectations it creates.
Writing infinite scalability web applications with PHP and PostgreSQLGabriele Bartolini
PostgreSQL 9.2 introduced native support for the JSON data type, as well as V8/Javascript and Coffeescript procedural languages.
Learn how you can write web applications in PHP using an intelligent and horizontally sharded cluster of PostgreSQL databases, bringing you infinite scalability and parallel processing.
This talk will guide you through the development lifecycle of the application, focusing on architecture, technologies, testing and deployment.
Si le tdd est mort alors pratiquons une autopsie mix-it 2015Bruno Boucard
Si Michel-Ange avait été développeur quels auraient été ses secrets. Quelle était la posture de cet artiste ? Quelle place occupent nos modèles mentaux lorsque nous développons ? La notion de design émergent qui accompagne les approches test-first (TDD, BDD,…) peut rendre plus d’une personne sceptique. En effet, comment concilier nos intuitions et projections mentales avec cette approche a priori minimaliste et contre-intuitive ?
L'ABC du BDD (Behavior Driven Development)Arnauld Loyer
Une introduction au Behavior Driven Development, avec plein d'idées pour tout de suite! et applicable à tout projet. Il sera question:
* de passer de l'incompréhension à savoir qu'on ne sait pas
* des westerns spaghetti aux Three Amigos,
* de reléguer le Comment au second plan pour laisser sa place au Pourquoi!
* de rendre des spécifications exécutables
* de découvrir qu'un concombre n'est pas qu'un Cucurbitacée aux feuilles tri-lobées
* d'automatisation comme outil de non-regression
Au cours de cette session, nous expliquerons ce qu'est le BDD. Nous verrons qu'il n'est pas question d'outils ou de tests, mais de collaboration et de discussion entre les différentes parties prenantes: du métier aux développeurs en passant par les testeurs. Cette presentation s'adresse à l'ensemble de ces populations en expliquant l'importance qu'il y a à se comprendre, et qu'il n'est pas nécessaire d'avoir des outils sophistiqués pour avoir des bénéfices immédiats.
Nous verrons quelques pratiques de discussion qui permettent d'arriver à une meilleure compréhension et à une description du besoin. Nous verrons aussi comment des exemples concrets permettent de s'assurer d'une compréhension commune et comment ils permettent de construire un langage unique et non ambigu. Nous verrons comment rendre ces spécifications executables en réutilisant les exemples construits précédemment et en les automatisant. Ceux-ci viendront renforcer les tests d'acceptance et devenir des tests de non regressions. Enfin, nous verrons que cette démarche nous permettra d'avoir une documentation vivante et toujours à jour de notre système.
Idées pour tout de suite
Communication, Clarification par des Exemples concrets, Spécifications exécutables
"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019Boris SCHAPIRA
L’essor des usages mobiles change la donne du Web, entraînant une nouvel intérêt pour l’optimisation de l’expérience utilisateur, à commencer par la Performance Web. Mais pour appréhender la performance d’un site web, encore faut-il savoir quels indicateurs collecter, comment les interpréter et les améliorer.
Quand on travaille sur un CMS comme WordPress, il est aussi important d’évaluer ce qui peut mettre en danger cette performance, et les techniques à développer pour s’en prémunir.
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.
Support de notre séminaire du 08/10/2009.
- Présentation technique de la notion de portail, portlet JSR168, JSR286
- Présentation du marché
- Zoom sur les principaux acteurs Open Source du monde du portail JEE
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.
The quest for global design principles (SymfonyLive Berlin 2015)Matthias Noback
If you’re a programmer you make design decisions every second. You need to think, and often think hard, about everything. Luckily there are many useful design principles and patterns that you can apply. But some of them merely expose code smells. Others only help you design your classes. And some are applicable to packages only. Wouldn’t it be nice to have some more general, always useful, invariably applicable, foundational design principles? In this talk we’ll look at software from many different perspectives, and while we’re zooming in and out, we’ll discover some of the deeper principles that form the basis of proper object-oriented design. After attending this talk you will be able to make better design decisions by reflecting on the stream of messages that is flowing from object to object, and from application to application.
Replacing dependents with doubles is a central part of testing that every developer has to master. This talk goes over the different types of doubles and explains their place in testing, how to implement them in a mainstream mocking framework, and which strategies or doubles to use in different message exchange scenarios between objects. After this talk you will have moved a step forward in your understanding of testing in the context of object oriented programming.
Marcello reflects over the craftsmanship manifesto and its elements to uncover some interesting insights regarding the application of the underlying principles in real life projects and in the context of organisations and communities struggling to live up to the expectations it creates.
Writing infinite scalability web applications with PHP and PostgreSQLGabriele Bartolini
PostgreSQL 9.2 introduced native support for the JSON data type, as well as V8/Javascript and Coffeescript procedural languages.
Learn how you can write web applications in PHP using an intelligent and horizontally sharded cluster of PostgreSQL databases, bringing you infinite scalability and parallel processing.
This talk will guide you through the development lifecycle of the application, focusing on architecture, technologies, testing and deployment.
Si le tdd est mort alors pratiquons une autopsie mix-it 2015Bruno Boucard
Si Michel-Ange avait été développeur quels auraient été ses secrets. Quelle était la posture de cet artiste ? Quelle place occupent nos modèles mentaux lorsque nous développons ? La notion de design émergent qui accompagne les approches test-first (TDD, BDD,…) peut rendre plus d’une personne sceptique. En effet, comment concilier nos intuitions et projections mentales avec cette approche a priori minimaliste et contre-intuitive ?
L'ABC du BDD (Behavior Driven Development)Arnauld Loyer
Une introduction au Behavior Driven Development, avec plein d'idées pour tout de suite! et applicable à tout projet. Il sera question:
* de passer de l'incompréhension à savoir qu'on ne sait pas
* des westerns spaghetti aux Three Amigos,
* de reléguer le Comment au second plan pour laisser sa place au Pourquoi!
* de rendre des spécifications exécutables
* de découvrir qu'un concombre n'est pas qu'un Cucurbitacée aux feuilles tri-lobées
* d'automatisation comme outil de non-regression
Au cours de cette session, nous expliquerons ce qu'est le BDD. Nous verrons qu'il n'est pas question d'outils ou de tests, mais de collaboration et de discussion entre les différentes parties prenantes: du métier aux développeurs en passant par les testeurs. Cette presentation s'adresse à l'ensemble de ces populations en expliquant l'importance qu'il y a à se comprendre, et qu'il n'est pas nécessaire d'avoir des outils sophistiqués pour avoir des bénéfices immédiats.
Nous verrons quelques pratiques de discussion qui permettent d'arriver à une meilleure compréhension et à une description du besoin. Nous verrons aussi comment des exemples concrets permettent de s'assurer d'une compréhension commune et comment ils permettent de construire un langage unique et non ambigu. Nous verrons comment rendre ces spécifications executables en réutilisant les exemples construits précédemment et en les automatisant. Ceux-ci viendront renforcer les tests d'acceptance et devenir des tests de non regressions. Enfin, nous verrons que cette démarche nous permettra d'avoir une documentation vivante et toujours à jour de notre système.
Idées pour tout de suite
Communication, Clarification par des Exemples concrets, Spécifications exécutables
PhpSpec is a SpecBDD tool that enables you to use a TDD workflow that can transform the way you write PHP. In this session we will look at the TDD workflow and see how PhpSpec can be used to speed up your development; add regression safety, and improve your object-oriented design.
The Wonderful World of Symfony ComponentsRyan Weaver
Wow, Symfony Components!
In this talk, we'll look at the history of PHP, and the struggles as a community to create shared libraries between our large community. Find out the significance of PSR-0 and Composer in *your* life and how you can leverage libraries from all of PHP in your projects.
We'll also look at the most fundamental Symfony2 components - HttpFoundation, HttpKernel, EventDispatcher, & Routing - including those that have been adopted by Drupal 8. We'll also check out a bunch of the other interesting Symfony2 components that can be used as tools in any PHP project.
The goal of this talk is to show you just how easy finding and using high quality libraries has become in PHP. By the end, you'll be excited and ready to high-five all of your PHP friends.
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)
Analyse de logs SEO : pour qui, pour quoi, comment ?Julien Deneuville
Conférence du 20 février 2016 au SEO Campus de Nantes.
En quoi consiste l'analyse de logs pour le SEO ?
A qui cela s'adresse-t-il ?
Comment s'y prendre ?
Quelles analyses effectuer, et comment réagir ?
Plus d'infos : http://blog.1-clic.info/referencement/analyse-de-logs-seocampus-nantes/
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.
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 !
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Peak Ace
Google a annoncé que le temps de téléchargement sur mobile risque d’être pris en compte dans son algo après la bascule vers le mobile first index. Et c’est déjà le cas sur desktop. Nous verrons comment diagnostiquer et corriger les causes les plus fréquentes de lenteur sur vos pages
Intervenant : Mathieu Chapon – Co-Fondateur – Search Foresight
Javascript : "Fullstack" le développement front, le développement back, les optimisations. Un framework nait tous les jours, ces planches présentent des solutions qui, fin 2015, sont adoptées et permettent la mise en place d'applications rapides, dynamiques, ergonomiques et simples.
"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir...Boris SCHAPIRA
L’essor des usages mobiles change la donne du Web, entraînant une nouvel intérêt pour l’optimisation de l’expérience utilisateur, à commencer par la Performance Web. Google multiplie les expérimentations sur ce sujet-clé pour l’entreprise, au risque de souffler un vent de panique sur le marché.
Mais pour appréhender la performance d’un site web, encore faut-il savoir quels indicateurs collecter, comment les interpréter et surtout comment les améliorer. Nous verrons également ensemble comment cette petite révolution va nécessiter, comme dans le reste de l’activité SEO, de l’agilité, de la veille, et une vraie volonté d’expérimentation.
En route pour un Web plus rapide !
Le cache côté client, le cache côté serveurs et leur impact sur le SEO et l'expérience utilisateur. Conférence effectuée lors du SEOCamp'us Paris 2017 avec Benoit Chevillot de Divioseo
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEOWeLoveSEO
Largest Contentful Paint (LCP), First Input Delay (FID) et Cumulative Layout Shift (CLS) : ce sont les 3 nouveaux indicateurs que Google a annoncé vouloir prendre en compte dès 2021 pour le ranking. Vous en avez sans doute pas mal entendu parler ces dernières semaines non ?
L'objectif derrière cette mise à jour : mesurer la performance et l'expérience utilisateur pour en faire des critères #SEO. Ce qui en soit est une bonne chose !
Mais c'est sujet à débat : est-ce une révolution SEO ou au contraire, une modification minime de l’algorithme ? Que signifient réellement ces KPI, comment les mesurer et comment les améliorer ?
Talk sur la "Performance Web : Enjeux, techniques et méthodologie" pour @RennesJS
Rappel du programme :
"Après la découverte de quelques success stories sur la performance web - des éléments pour se convaincre et savoir convaincre de l'importance de la webperf - nous aborderons les techniques élémentaires pour mettre vos pages web au régime (compression, optimisation des images, politique de cache, etc).
Ce sera aussi l'occasion d'aborder HTTP/2 : les bonnes pratiques de performance ne sont peut être plus celles que vous croyez et vos habitudes vont devoir changer, nous verrons pourquoi !
Nous n'oublierons pas d'évoquer les différents indicateurs de performance (speedindex, start render, etc), et il est fort possible que je m'égare à l'occasion sur d'autres outils de qualité front-end, comme la Content Security Policy...
En conclusion, on parlera de budget. Pas celui de la soirée, mais du budget de performance, à appliquer sur vos projets, pour créer une véritable culture de la performance web dans votre équipe !"
Agenda :
Les enjeux de la performance d'un site Web
Les différents éléments de performance d'un site Web
Infrastructure, architecture technique, tuning, architecture applicative, WebPerf
L'obsession de la mesure
Les outils
Les quickwins
Caches, upscaling, outscaling, sharding
La démarche de test de charge
Méthodologie, outils, types de test, données de test
La démarche PDCA
Intégrer les tests de charge au cycle de développement
Environnement éphémère
Oxalide MorningTech #2 - Démarche de performance
2ème MorningTech @Oxalide, animé par Adrien Le Priol (@Priolix) et Ludovic Piot (@lpiot), le 28 février 2017.
Une vue d'ensemble sur la démarche et les outils pour aborder et maîtriser la performance de son site Web.
En 2012, Amazon publiait une étude indiquant que chaque seconde de performance perdue sur son site de commerce lui coûtait $1.6 milliards de chiffre d'affaire.
Par delà ce chiffre colossal avancé par le géant du Web, il est une réalité business : plus un site est lent, et moins les utilisateurs sont enclin à naviguer dessus. Les smartphones et le SoLoMo exacerbent cette réalité avec encore plus depuis 10 ans maintenant.
Sur le terrain, l'architecture technique des sites Web, de plus en plus complexe, rendent ses performances impossibles à prédire : complexité des développements applicatifs, multitude des composants impliqués dans l'architecture technique, recours à des services tiers (issus du SI de votre entreprise, ou de services tiers), big data, machine learning…
Une seule façon de prédire les performances : tester… en situation réelle.
A travers les différentes étapes d'une démarche d'optimisation des performances d'un site Web, les enjeux et les écueils d'une telle démarche vous seront détaillés.
Subject: Oxalide's MorningTech talk about an overview of how to deal with performance in a Web site.
Date: 28-feb-2017
Speakers: Adrien Le Priol (@Priolix, @Oxalide) and Ludovic Piot (@lpiot, @Oxalide)
Language: french
Lien SpeakerDeck : https://speakerdeck.com/lpiot/oxalide-morning-tech-number-2-demarche-performance
Lien SlideShare : https://www.slideshare.net/LudovicPiot/morning-tech-2-demarche-performance-slides
YouTube Video capture: https://youtu.be/a8jSbvyBzYU
Main topics:
* Les enjeux de la performance d'un site Web
* Les différents éléments de performance d'un site Web
** Infrastructure, architecture technique, tuning, architecture applicative, WebPerf
* L'obsession de la mesure
* Les outils
* Les quickwins
** Caches, upscaling, outscaling, sharding
* La démarche de test de charge
** Méthodologie, outils, types de test, données de test
* La démarche PDCA
** Intégrer les tests de charge au cycle de développement
** Environnement éphémère
* Questions / Réponses
Similaire à Techniques d'accélération des pages web (20)
• 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.
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
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. Techniques d’accélération des pages Web
Jean-Pierre VINCENT
Consultant indépendant
#WebPerf - @theystolemynick
Braincracking.org
2. Bonjour, je m’appelle Jean-Pierre
● 5 10 13 ans de Web
● PHP, JavaScript, HTML5, CSS
● Ex :
– startups, Yahoo!, houra.fr
● Expert frontend indépendant
● Veilleur :
– braincracking.org
– @theystolemynick
3. Performance Web ?
Les 10 14 35 commandements
http://developer.yahoo.com/performance/rules.html
4. Comment faire le tri ?
● Yahoo! Best Practices (35 ● Nouveaux navigateurs
● Nouveaux besoins
règles)
● Mobile
● Google PageSpeed (31 règles)
● Test Opquast (41 règles)
● En vrai : 500+ pratiques
5. Pourquoi la performance ?
● SEO
– 1 critère de référencement
chez Google
– Métrique : temps « onload »
– Mesurée par les utilisateurs
http://googlewebmastercentral.blogspot.fr/2010/04/using-site-speed-in-web-search-ranking.html
12. Combien coûte une seconde ?
Search
● Bing : 1 s =
- 3 % de CA
● Yahoo! : 1 s =
+ 10 % de rebond
13. Combien coûte une seconde ?
Mobile
● 1 s = -10% de pages vues
● Après 4 s : 60% d'abandon
http://www.themediabriefing.com/article/2012-10-02/speed-is-a-feature-why-a-slow-mobile-web-experience-means-lost-revenue
http://www.strangeloopnetworks.com/resources/infographics/2012-state-of-mobile-ecommerce-performance/poster
/
20. Les utilisateurs
● Grand public français :
● IE 7 is dead !
● Arrivée via réseaux mobiles
● Connexions moyennes :
ADSL Mobiles
Débit 4, 8 Mb/s 2,5 Mb/s
Latence 95 ms 200 ms
21. Les utilisateurs
Répartition des débits (ligne fixe)
• La moyenne n’est pas
représentative 5-10 Mb/s
> 10 Mb/s < 1 Mb/s
1 - 2 Mb/s
● 25% des utilisateurs
ont moins de 2,5 Mb/s
4 - 5 Mb/s 2 - 3 Mb/s
3 - 4 Mb/s
22. Les utilisateurs
Connexion réseau à cibler :
ADSL Mobiles
Débit 2,5 Mb/s 2,5 Mb/s
Latence 110 ms 200 ms
+25% de perte
Navigateurs à cibler :
IE 8
Safari iOS
Android 2.3.x et 4.x
23. Les techniques
Par où commencer ?
Yahoo! Best Practices (35 règles)
Google PageSpeed (31 règles)
Test Opquast (41 règles)
En vrai : 500+ pratiques
24. Configuration serveur
1. Configuration du keep-alive :
KeepAlive On
KeepAliveTimeout 5
Timeout 10
2. Activer la compression
26. Gérer son cache
Efficace mais :
50% des sites oublient
30% ont un TTL < 30
jours
27. Gérer son cache
« Vide ton cache »
Sans cache :
• Phases de recette interne
• Environnements de
développement
Cache agressif :
• Cache utilisateur
• Chaîne de cache réseau
28. Gérer son cache
Cache : invalidation standard
● Serveur
eTag: "xxxxxx"
Ou
Last-Modified: DATE_W3C
• Client
If-None-Match: "xxxxxx"
Ou
If-Modified-Since: DATE_W3C
• Serveur
200 OK
Ou
304 Not Modified
29. Gérer son cache
Cache : invalidation standard
Sert à des cas spéciaux
• Polling
• Revalidation de session
• Environnement de dév.
30. Gérer son cache
Invalidation des caches longs
● Maîtrise totale des URL Mise en cache long :
● HTML
● CSS
Expires : +1 an
● JS
Cache-control :
● Processus de compilation public
● URL rendues uniques par : Vary : xxx
● Numéro de release
● Md5 du fichier
31. Gérer son cache
Le super cache
API Application Cache
● 1 application = 1 pack de
fichiers
● 1 fichier de règles
● 1 API de gestion du
cache
● Surtout sur mobiles
38. Pages semi-dynamiques
● Cache sur les parties statiques
● Envoyer ASAP
● XHR ou SSI pour les parties dynamiques
● Ne pas oublier l'interface
Référencement
43. Le chemin critique
Polices
● Les supprimer …
● Les valider :
● poids,
● utilisée
● compatibilité
● Chargement asynchrone
44. SPOF
Dépendances à des serveurs tiers qui peuvent
bloquer le rendu
Usual suspect :
●http://platform.twitter.com/widgets.js
●https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/j
query.min.js
●http://html5shiv.googlecode.com/svn/trunk/html5.js
45. SPOF-O-Matic
Teste la fragilité aux ralentissements
des serveurs tiers
démo
51. Inclure JavaScript
Javascript asynchrone
Conditions :
● Chargeur mis inline
● Gestion d'une file de téléchargement
● Remplacer les dépendances inline par des
callback
● Découpe par module
● Téléchargement dépriorisé
● Au top: concaténation + module + asynchrone
66. Images
Optimisations :
● Ne pas les charger !
● Charger à la demande
● Compression manuelle
● Compression automatique
67. Ne pas charger
Méthode de lazy-load :
●
charger les images visibles
mobiles
https://github.com/fasterize/lazyload
68. Remplacer les icônes
Caractères unicode
►★✓⇢✎♥☎♻⚠☻☺⇨
●Taille et couleur adaptable
⚠ servir en UTF-8
⚠ dépend du couple OS / navigateur
http://ikwebdesigner.com/special-characters/
73. Compression manuelle
Connaître les formats
● PNG toujours meilleur que GIF
● PNG : ultra efficace avec des aplats de couleur
● JPG : mauvais pour le texte si il est en couleurs
● Jamais de PNG entrelacé
● PNG8 alpha
● WebP : mal supporté
79. Rendu fluide
Alléger le DOM
Surveiller 2 métriques
● La profondeur max et moyenne ( < 12 )
● Le nombre de nœuds (< 1500 )
Outil : DOM Monster, WPT
● Long et périlleux si fait après coup
● Sensibilisation des intégrateurs
80. Rendu fluide - JavaScript
● Bonnes pratiques
● Peu de requêtes DOM
● Caching
● En dehors des boucles
● Manipulation du DOM par batch
● Application de classes VS $.css()
● Limiter la taille des requêtes
● $(doc.ById('monID')).find('>
div.maClasse');
● Privilégier document.querySelector()
● JavaScript lui même est rarement un problème
81. Rendu fluide
La technique du setTimeout( 0 )
En cas de blocage de l'interface :
● « casser » les boucles toutes les 50 ms
● Y revenir lorsque le navigateur est libre
82. Rendu fluide - Web Worker
Pour du calcul lourd
● Crée un nouveau thread
● Communication par événements
var worker = new Worker('my_task.js');
worker.onmessage = function(event) {
console.log("Called !n");
};
● Compatibilité navigateurs
● Organisation du code spécifique
83. S’auto-forme
r
En anglais En français
● http
● http://www.perfplanet.com/
://checklists.opquast.com/webper
● http
f/
://developer.yahoo.com/perfo ● https://groups.google.com/foru
rmance/rules.html m/?fromgroups#!forum/performan
● https://
ce-web
developers.google.com/speed/ ● @webperf_fr
docs/best-practices/rules_in et
tro ● @WebperfParis
● http:// ● https://
www.webpagetest.org/forum
github.com/edas/webperf-book
s ● http://braincracking.org