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.
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.
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.
"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.
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
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.
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.
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.
"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.
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
1. Récupérer votre site avec OpenShift
1.1 Intaller RHC (Red Hat Client tools) sous Windows
1.1.1 Installer Ruby
1.1.2 Installer Git
1.1.3 Installer OpenShift gem et configurer RHC
1.2 Récupérer le code de votre site
1.3 Récupérer les données de votre site
2. Configurer votre hébergement chez OVH
2.1 Créer des adresses e-mail
2.2 Créer une redirection des messages
2.3 Créer une redirection vers le webmail
3. Sauvegarde et restauration avec OVH
3.1 Sauvegarde et restauration du code avec net2ftp
3.2 Sauvegarde et restauration des données avec phpMyAdmin
3.3 Connecter le site à la base de données
4. Optimiser le référencement de votre site
4.1 Configurer le module Metatag
4.2 Créer une XML sitemap
4.3 Configurer Google Analytics
4.3.1 Créer un compte Google Analytics
4.3.2 Configurer le module Google Analytics
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. Créer un compte OpenShift et configurer un site Drupal
1.1 Créer un compte OpenShift
1.2 Créer une application PHP et importer les sources
1.3 Ajouter une cartouche MySQL et une cartouche phpMyAdmin
1.4 Importer la base de données
2. Comprendre le fonctionnement général du site
2.1 Un tout petit peu de théorie
2.2 Connecter le site à la base de données
2.3 Un aperçu de l'interface de Drupal
3. Personnaliser votre site
3.1 Configurer votre site
3.2 Ajouter un thème
3.3 Ajouter et modifier du contenu, gérer la structure
3.3.1 Personnaliser la page d'accueil
3.3.2 Créer une page « Services » et un premier service
3.3.3 Intégrer une carte Google Map
3.3.4 Gérer le menu général
3.3.5 Gérer les blocs
3.3.6 Ajouter une actualité
3.4 Mettre en place une newsletter avec MailChimp
3.4.1 Créer un compte MailChimp
3.4.2 Créer une liste et une clé
3.4.3 Connecter votre site à votre compte
3.4.4 Intégrer le formulaire d'inscription à votre site
3.4.5 Créer un modèle et une campagne
3.5 Mettre à jour vos modules et thèmes
4. Réserver un nom de domaine et un hébergement chez OVH
Bien débuter dans la conception d'un thème WordPressAurélien Denis
10 conseils pour apprendre à concevoir votre thème WordPress de A à Z en partant sur de bonnes bases.
Présentation du 18 janvier 2014 lors du WordCamp Paris.
La majorité des problèmes rencontrés en production auraient pu être anticipées en amont. Rapide aperçu du process entre le développement et la mise en production.
Déboguer une application web peut rapidement devenir fastidieux. L'utilisation d'un débogueur simplifie ce processus mais il n'est pas toujours possible d'en utiliser un. FirePHP est une extension Firefox qui permet de fournir des informations de déboguage sans interférer avec l'affichage de l'application web. Cela est particulièrement pratique pour déboguer de l'Ajax par exemple.
"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.
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
1. Récupérer votre site avec OpenShift
1.1 Intaller RHC (Red Hat Client tools) sous Windows
1.1.1 Installer Ruby
1.1.2 Installer Git
1.1.3 Installer OpenShift gem et configurer RHC
1.2 Récupérer le code de votre site
1.3 Récupérer les données de votre site
2. Configurer votre hébergement chez OVH
2.1 Créer des adresses e-mail
2.2 Créer une redirection des messages
2.3 Créer une redirection vers le webmail
3. Sauvegarde et restauration avec OVH
3.1 Sauvegarde et restauration du code avec net2ftp
3.2 Sauvegarde et restauration des données avec phpMyAdmin
3.3 Connecter le site à la base de données
4. Optimiser le référencement de votre site
4.1 Configurer le module Metatag
4.2 Créer une XML sitemap
4.3 Configurer Google Analytics
4.3.1 Créer un compte Google Analytics
4.3.2 Configurer le module Google Analytics
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. Créer un compte OpenShift et configurer un site Drupal
1.1 Créer un compte OpenShift
1.2 Créer une application PHP et importer les sources
1.3 Ajouter une cartouche MySQL et une cartouche phpMyAdmin
1.4 Importer la base de données
2. Comprendre le fonctionnement général du site
2.1 Un tout petit peu de théorie
2.2 Connecter le site à la base de données
2.3 Un aperçu de l'interface de Drupal
3. Personnaliser votre site
3.1 Configurer votre site
3.2 Ajouter un thème
3.3 Ajouter et modifier du contenu, gérer la structure
3.3.1 Personnaliser la page d'accueil
3.3.2 Créer une page « Services » et un premier service
3.3.3 Intégrer une carte Google Map
3.3.4 Gérer le menu général
3.3.5 Gérer les blocs
3.3.6 Ajouter une actualité
3.4 Mettre en place une newsletter avec MailChimp
3.4.1 Créer un compte MailChimp
3.4.2 Créer une liste et une clé
3.4.3 Connecter votre site à votre compte
3.4.4 Intégrer le formulaire d'inscription à votre site
3.4.5 Créer un modèle et une campagne
3.5 Mettre à jour vos modules et thèmes
4. Réserver un nom de domaine et un hébergement chez OVH
Bien débuter dans la conception d'un thème WordPressAurélien Denis
10 conseils pour apprendre à concevoir votre thème WordPress de A à Z en partant sur de bonnes bases.
Présentation du 18 janvier 2014 lors du WordCamp Paris.
La majorité des problèmes rencontrés en production auraient pu être anticipées en amont. Rapide aperçu du process entre le développement et la mise en production.
Déboguer une application web peut rapidement devenir fastidieux. L'utilisation d'un débogueur simplifie ce processus mais il n'est pas toujours possible d'en utiliser un. FirePHP est une extension Firefox qui permet de fournir des informations de déboguage sans interférer avec l'affichage de l'application web. Cela est particulièrement pratique pour déboguer de l'Ajax par exemple.
"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.
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
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é.
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 !
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.
[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...Clément OUDOT
Prendre un moteur de blog pour faire son site web n'est pas forcément le meilleur choix ! On peut aussi générer quelques pages statiques et travailler sur l'apparence du site avec du CSS.
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.
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/
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 !"
Similaire à Retours sur le concours Webperf 2010 (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
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
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.
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
14. Les bases
● Cache navigateur
● Compression gzip
● Le cookie
• 0.5Ko
TEST=ok; OrderInSession=0; accept=ok;
UID=0E3649C79-3AFD-18B8-7817-FA868BC99668;
SID=e85f0b48-ae1d-a5f5-aa15-fbffdc4e1c1a;
TTL=241020101353; s_cc=true; campaign=FnacAff;
s_ev14=%5B%5B%27FnacAff%27%2C%271291388510515%27%5D
%5D; s_cpc=1; s_sq=%5B%5BB%5D%5D
115 fois
15. Les bases
● Cache navigateur
● Compression gzip
● Le cookie
• Sous-domaines pour statiques
•
16. Les bases
● Cache navigateur
● Compression gzip
● Le cookie
• Sous-domaines pour statiques
• Redéfinir le cookie sur www.*
17. Les bases
● Cache navigateur
● Compression gzip
● Le cookie
● Les images
• Origine : 80 images pour 500Ko
•
18. Les bases
● Cache navigateur
● Compression gzip
● Le cookie
● Les images
• Origine : 80 images pour 500Ko
• Jouable : 250Ko
19. Les bases
● Cache navigateur
● Compression gzip
● Le cookie
● Les images
• Passage en PNG 8bit
• Réduction du nombre de couleurs
• Outils (jpgtran, pngcrush ...)
20. Les bases
● Cache navigateur
● Compression gzip
● Le cookie
● Les images
● Concaténer, minifier JS et CSS
• Outils !
21. Les bases
● Cache navigateur
● Compression gzip
● Le cookie
● Les images
● Concaténer, minifier JS et CSS
• Outils !
55. Savoir coder
Page de départ :
● 213Ko
● 2000 noeuds DOM
● Validateur : 2300 parse error
« Sensation » de lenteur
56. Savoir coder
Refactoring complet du HTML :
● Poids -50%
● nœuds DOM -50%
● Correction des erreurs
● Plus d'imbrication de tableaux
= « Sensation » de fluidité
57. Savoir coder
Refactoring complet du CSS :
● Reset pour supprimer des règles
● Suppression des filter()
● Dégradation gracieuse acceptée
● Utilisation de :before
● Dégradé avec un png transparent
58. Conclusions
● Temps d'affichage divisé par 10
● Techniques universelles : 70% du gain
● Temps > connaissances
● Bonnes pratiques : #win
● L'ère des grandes découvertes est finie ?
● À quand le prochain concours ?