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.
Présentation donnée à l'Aperotech Oxalide, le 24 juin 2013.
Qu'est-ce que NodeJS ? pourquoi en parle-t-on autant ? quand l'utiliser ? qu'est-ce que l'asynchrone ? quelle est le contexte actuel du marché du js / NodeJS ?
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
Dans la vraie vie, (nous) développeurs, devons maîtriser un grand nombres de langages, pour le frontend, le backend, nous devons produire parfois très rapidement, sur des infrastructures non adaptées, trop peu performantes pour accueillir nos bons vieux CMS ! Voyons comment NodeJS, peut nous aider (dans la vraie vie)
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.
Présentation donnée à l'Aperotech Oxalide, le 24 juin 2013.
Qu'est-ce que NodeJS ? pourquoi en parle-t-on autant ? quand l'utiliser ? qu'est-ce que l'asynchrone ? quelle est le contexte actuel du marché du js / NodeJS ?
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
Dans la vraie vie, (nous) développeurs, devons maîtriser un grand nombres de langages, pour le frontend, le backend, nous devons produire parfois très rapidement, sur des infrastructures non adaptées, trop peu performantes pour accueillir nos bons vieux CMS ! Voyons comment NodeJS, peut nous aider (dans la vraie vie)
"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.
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...Nicolas Silberman
Retour d'experience du Groupe Express Roularta sur l'intégration de Puppet (mais finalement Chef) dans leur système d'information, permettant en quelques cliques et quelques minutes de mettre en place une ou plusieurs machines de développement parfaitement fonctionnelle et à jour, le tout hébergé sur le cloud Amazon.
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.
Responsible Design ou Le web moderne à destination de tousjwajsberg
Après avoir présenté la situation actuelle, j'essaie d'expliquer comment on peut utiliser les technologies récentes du web tout en supportant tous les navigateurs, qu'ils soient anciens ou minoritaires.
Développer pour une version d'un navigateur c'est facile. Développer pour plusieurs navigateurs aux capacités parfois franchement différentes, c'est une autre histoire. Plutôt que de pester toute la journée nous verrons comment il est possible de minimiser les effets de bords, voir de trouver ça plaisant. Mobile, Desktop, site web, applications web, bonne pratiques, outils d'aides à la production, bibliothèques JavaScript indispensables, stratégie de test... nous passerons en revu tout tout ce qu'il faut savoir et ce qui permet de coder pour tous les navigateurs (presque) sans douleurs.
Découvrez Spring Batch, sa simplicité, les concepts de bases ainsi que les notions avancées. Tout tout tout, vous saurez tout sur Spring Batch!
Intervenant : Olivier Bazoud @obazoud
Présentation donnée lors du WordCamp 2016 de Montréal. La structure d'un site WordPress. Comment faire des sauvegarde, restauration, migration d'un site WordPress de façon manuelle et avec des plugins. Environnement de test : pourquoi. Qui fait quoi comment et à quels $
1400 nouvelles extensions internet quels enjeux et opportunites - CCI Bordeau...polenumerique33
Ateliers "1400 nouvelles extensions internet quels enjeux et opportunités" organisé le 10 juin 2014 par le Pôle Numérique de la CCI Bordeaux avec Inpi - Ipsphere - Keepalert
"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.
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...Nicolas Silberman
Retour d'experience du Groupe Express Roularta sur l'intégration de Puppet (mais finalement Chef) dans leur système d'information, permettant en quelques cliques et quelques minutes de mettre en place une ou plusieurs machines de développement parfaitement fonctionnelle et à jour, le tout hébergé sur le cloud Amazon.
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.
Responsible Design ou Le web moderne à destination de tousjwajsberg
Après avoir présenté la situation actuelle, j'essaie d'expliquer comment on peut utiliser les technologies récentes du web tout en supportant tous les navigateurs, qu'ils soient anciens ou minoritaires.
Développer pour une version d'un navigateur c'est facile. Développer pour plusieurs navigateurs aux capacités parfois franchement différentes, c'est une autre histoire. Plutôt que de pester toute la journée nous verrons comment il est possible de minimiser les effets de bords, voir de trouver ça plaisant. Mobile, Desktop, site web, applications web, bonne pratiques, outils d'aides à la production, bibliothèques JavaScript indispensables, stratégie de test... nous passerons en revu tout tout ce qu'il faut savoir et ce qui permet de coder pour tous les navigateurs (presque) sans douleurs.
Découvrez Spring Batch, sa simplicité, les concepts de bases ainsi que les notions avancées. Tout tout tout, vous saurez tout sur Spring Batch!
Intervenant : Olivier Bazoud @obazoud
Présentation donnée lors du WordCamp 2016 de Montréal. La structure d'un site WordPress. Comment faire des sauvegarde, restauration, migration d'un site WordPress de façon manuelle et avec des plugins. Environnement de test : pourquoi. Qui fait quoi comment et à quels $
1400 nouvelles extensions internet quels enjeux et opportunites - CCI Bordeau...polenumerique33
Ateliers "1400 nouvelles extensions internet quels enjeux et opportunités" organisé le 10 juin 2014 par le Pôle Numérique de la CCI Bordeaux avec Inpi - Ipsphere - Keepalert
IV Seminario - Fortaleciendo las Capacidades del Concejal ChaqueñoFundación CiGob
Presentación realizada por CiGob en el IV Seminario - Fortaleciendo las Capacidades del Concejal Chaqueño. Organizado por el Consejo Económico y Social del Chaco.
Résultats enquête de satisfaction Repères décembre 2012François Abiven
Repères est un institut d'études marketing certifié ISO. Notre démarche qualité intègre une interrogation de nos clients sur leur satisfaction vis-à--vis de nos prestations.
Nous avons le plaisir de partager ces résultats...
Blogs y Redes Sociales - Clase especial en UCES - 26 agosto 2009Alejandro Marticorena
Impacto de las nuevas tecnologías en la Comunicación - Blogs y redes sociales, ¿controlar o participar? De cómo la irrupción de los "social media" implican un cambio de paradigma en la gestión de la comunicación corporativa que va desde la dinámica del "control total" de la comunicación a la dinámica de la participación y a la imposibilidad de mantener aquel control.
Taller dirigido a profesionales del campo de la investigación de mercados, marketing, comunicaciones, publicidad y áreas comerciales interesados en obtener capacitación sobre técnicas y herramientas de obtención de consumer insights para la generación de nuevos productos, ideas y estrategias de negocio. El taller contempla revisión de principales técnicas de indagación cualitativa, etnografía, y técnicas proyectivas. Taller dictado por la MBA Cristina Quiñones, Titular Gerente de Consumer Insights – Desnudando la mente del consumidor, consultoría especializada en conocimiento del consumidor. Más información en www.consumer-insights.blogspot.com / info@consumer-insights.com.pe
Cours de 1h30 pour HETIC - H4.
Architecture Web.
Présentation générale de l'architecture web, bons et mauvais exemples.
Présentation des load balancers & proxys
Présentation des caches (memcached, varnish...)
Cloud
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
Introduction to Rust in Production - Servo Mozilla project (Talk)Quentin Frémeaux
FRENCH - Talk made at the OVH Meetup on the 4th April, see the slides with the same name.
This presentation was made by a Mozilla Reps and not an employee working on the project.
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
En plus de coder dans un langage incompréhensible pour les non-initiés, les développeurs ont imaginé un jargon qui leur est hermétique…
Vous êtes en relation avec des développeurs et vous vous sentez parfois perdus ? Vous soupçonnez vos équipes techniques de délibérément employer des termes ou des concepts que vous ne comprenez pas ? Reprenez la main !
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 ?
Les containers docker vu par un chef cuisinier et un mécanicienRachid Zarouali
Les containers docker sont partout aujourd'hui, nos boites mails google/office365, nos applications web, notre accès pour les rendez-vous médicaux, les avions, ...
Ils sont partout mais pourtant pas toujours facile a appréhender, et pourtant, ils ont beaucoup plus de similitude avec des métiers de notre quotidien qu'il n'y parait.
Lors de ce webinar, je vous presenter ces fameux containers Docker, vu par un chef cuisiner et un mécanicien automobile et vous ferez qu'il a beaucoup de points communs.
Amélioration des performances eCommerce - Webinaire par aYalineaYaline
Quelles actions pour améliorer les performances d'affichage de votre site dans les navigateurs Web ? Comment augmenter son chiffre d'affaires en augmentant les performances de son site e-commerce. Le contenu de ce webinaire est focalisé sur les leviers techniques d'amélioration des performances.
Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...Paris, France
Deliverance permet de réaliser l'habillage graphique d'un site Plone sans nécessiter de développement particulier. Nous présentons ici la partie technique ainsi que les avantages d'une telle technologie d'un point de vue client et utilisateur.Conférence de Jérôme Petazzoni et Jeremie Cayla (Pilot Systems) au Word Plone Day.
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 !"
cours Systèmes de Gestion des Identités.pdfHajer Boujezza
Ce cours enrichit vos connaissances en sécurité informatique au niveau du contrôle d'accès et gestion des identités. Dans ce cours nous présentons une étude complète de classification des IDMS dans le contexte de l'Internet des Objets: IoT
L'Autorité de la Concurrence présente son nouveau guide "Protéger son environnement numérique" pour aider les internautes à repérer facilement la désinformation et à agir contre les contenus potentiellement illégaux comme les discours de haine et les deep fakes.
👉 [Bonne pratique] une Charte de Bonnes Pratiques informatique est un outil fondamental pour gérer de manière proactive les risques informatiques, optimiser les performances et promouvoir une culture de travail éthique et sécurisée au sein de l'organisation.
✅ Elle fournit un ensemble clair de procédures et de standards à suivre, assurant ainsi la cohérence dans les pratiques de travail et la gestion des ressources informatiques.
✅ En définissant des pratiques sécuritaires pour l'utilisation des systèmes et la gestion des données, la charte aide à prévenir les violations de sécurité, les pertes de données et les attaques informatiques.
✅ Elle sensibilise à l'importance de protéger les données sensibles et personnelles, conformément aux réglementations en vigueur (comme le RGPD en Europe), minimisant ainsi les risques de fuites d'informations et les conséquences légales qui pourraient en découler.
✅ La charte promeut une utilisation efficace et responsable des ressources informatiques, aidant à réduire les coûts et à éviter le gaspillage.
✅ Elle établit clairement les droits et les responsabilités de chaque utilisateur, promouvant une culture de responsabilité et d'engagement envers les pratiques informatiques éthiques et professionnelles.
✅ En fournissant des directives claires, la charte facilite la communication entre les utilisateurs, le personnel informatique et la direction sur les attentes et les procédures à suivre.
✅ Elle aide à prévenir les conflits en fournissant des directives claires sur l'utilisation acceptable des ressources informatiques, évitant ainsi les malentendus et les abus.
✅ La charte peut servir de base pour la formation des employés et des utilisateurs sur les bonnes pratiques informatiques, améliorant ainsi les compétences et la sensibilisation générales.
✅ En assurant la protection des données et la sécurité des systèmes, la charte contribue à maintenir une image positive de l'organisation, renforçant la confiance des clients, des partenaires et des employés.
✅ Elle aide les organisations à se conformer aux lois et réglementations en vigueur concernant l'utilisation des technologies de l'information et la protection des données.
Augmentez vos conversions en ligne : les techniques et outils qui marchent vr...OsharaInc
Au cours de cette session interactive, nos experts en marketing digital vous dévoileront les meilleures pratiques et les dernières tendances pour transformer vos visiteurs en clients.
Contrôle d’accès et Gestion des identités: Terminologies et Protocoles d’auth...
Un site web rapide ?
1. Un site web rapide ?
C’est pas sorcier !
Mathieu Pillard m@skyrock.com
Anthony Ricaud haricot@skyrock.com
Paris Web 2007 - 17 novembre 2007
2. Nous
Mathieu Pillard
m@skyrock.com
Anthony Ricaud
irc.freenode.net #openweb
haricot@skyrock.com
Telefun
skyrock.com
2
3. Le problème
Sites de plus en plus beaux, plus en plus interactifs...
...Mais en plus lourds et gourmands en ressources!
Les concepteurs de sites font de moins en moins attention
à ca...
...Pourtant tout le monde n’a pas une connexion internet
très haut débit (21% de bas débit, sans compter les
mobiles) et un PC multi-core
“Arg, y en a marre de ces sites où faut charger dix mille
trucs avant de voir quelque chose” (Lolo 15/10/07)
3
4. Pourquoi c’est important ?
Pour vos visiteurs
C’est la première chose que l’on remarque
Ce qui se passe à La Poste sur les quais pendant les
grèves SNCF se passe aussi devant un écran: les gens
sont impatients, s’énervent à force d’attendre...
Limite théorique des 2 secondes
Les visiteurs avec de vieilles machines vous remercieront
Bas débit, mobiles
4
5. Pourquoi c’est important ?
Pour vous
Plus de trafic avec les mêmes machines
Plus vos frontaux sont rapides à servir des pages, moins
les serveurs derrière les attendent...
La satisfaction du travail bien fait :-)
5
6. Objectifs de cet atelier
Sujet vaste, concentrons nous sur les points simples et
rapides à mettre en place pour des développeurs
Le but n’est pas de configurer des serveurs aux petits
oignons, mais d’expliquer les démarches y menant
La perception de la rapidité est aussi importante que la
rapidité elle même pour vos visiteurs
Yahoo “Exceptional Performance” : promis, on n’a pas tout
copié :)
Les cordonniers sont toujours les plus mal chaussés...
6
8. Le but
Pour chaque page
Le moins de requêtes possible
Le moins de trafic possible
Quelques fois, c’est en opposition...
8
9. Réduire les requêtes HTTP
Établir une connexion coûte cher au serveur comme au
client
HTTP Pipelining : oui mais...
Moins de fichiers
Combiner les fichiers
CSS, JavaScript
Images Maps
CSS Sprites
Éviter les redirections
9
10. Réduire les requêtes DNS
Avant chaque requête HTTP, il faut connaître l’adresse du
serveur et ça prend encore du temps
~20-120ms
Cache navigateur : 30 minutes pour IE, 1 minute pour
Firefox
Même pour les sous-domaines...
Attention aux CNAME
server1 IN A 192.168.0.3
www IN CNAME server1
10
11. Réduire vos envois
Gzip, Deflate
~ 70% de gain
HTML, CSS, JavaScript
Surtout pas les images
Mais réduire ce n’est pas que compresser
11
13. Fraîcheur - Expires
Expires
Temps absolu
Expires: Sat, 17 Nov 2007 11:30:41 GMT
Mais on peut régler son serveur
Temps relatif au dernier accès
Temps relatif à la dernière modification
Cache-Control
max-age
Cache-Control: max-age=3600
13
14. Validation
Last-Modified
If-Modified-Since
Etag
Identifiant unique du contenu de la page
Etag: quot;81ba2d31d2a55ff57fbb136a767ff6221195260435quot;
If-None-Match
14
15. Bien les utiliser
URLs propres
Attention aux POST, SSL
Expiration loin dans le temps pour tout ce qui n’est pas
HTML
Ne changez que les fichiers nécessaires
Attention aux Etag sur différents serveurs
15
16. Séparer statique et dynamique
2 requêtes par domaine HTTP 1.1 : téléchargement
parallèle possible
2 domaines est un bon compromis
Pas besoin de cookies pour récupérer du statique
Réglages simplifiés (cache, compression)
16
17. Temps de réponse
Taille
(delta)
0 octets 78 ms (0 ms)
500 octets 79 ms (+1 ms)
1000 octets 94 ms (+16 ms)
1500 octets 109 ms (+31 ms)
2000 octets 125 ms (+47 ms)
2500 octets 141 ms (+63 ms)
3000 octets 156 ms (+78 ms)
16
18. Séparer statique et dynamique
2 requêtes par domaine HTTP 1.1 : téléchargement
parallèle possible
2 domaines est un bon compromis
Pas besoin de cookies pour récupérer du statique
Réglages simplifiés (cache, compression)
16
20. Problèmatique
Donner l’impression au visiteur que le site est rapide: lui
montrer ce qu’il veut voir en priorité
Trouver des astuces pour que le navigateur passe moins
de temps à afficher une page
Rester réactif une fois le site chargé
18
21. Comprendre le chargement
d’une page web
Téléchargement -> Parsing -> Affichage -> Fini!
L’affichage d’une page:
Tous les navigateurs bloquent sur les <script>, à cause
notamment de document.write()
Certains bloquent sur les CSS aussi (Gecko)
Certains ont des délais avant d’afficher quoi que ce soit
pour éviter le “FOUC” (Gecko, Webkit)
L'événement “onload” ne s'exécute que lorsque la page et
tous ses éléments (styles, scripts, images) sont chargés
19
22. Coté (X)HTML
Réduisez la soupe de balise inutiles
Evitez les tableaux imbriqués
La taille du document compte: réduisez vos pages!
Evitez les tableaux pour la mise en page, utilisez les CSS
Attention à l’ordre des éléments dans l’HTML si vos pages
sont longues. Choisissez ce que l’utilisateur verra en
premier
Ça va de soit, mais plus il y a d’éléments à charger et plus
ils sont gros, plus ça prendra de temps, alors réduisez
aussi vos images, flashs, etc.
20
23. Coté CSS
Evitez à tout prix les expression() sous Internet Explorer
Factorisez vos règles
Evitez la multiplication des fichiers une fois en production,
surtout si ils se retrouvent tous sur vos pages
Les styles sont la chose la plus importante pour l’affichage
d’une page, le plus haut ils sont placés dans le document,
le mieux c’est
Profitez du cache du navigateur, faites des feuilles externes
21
24. Scripts
Chaque <script> est bloquant, le moins vous en avez le
mieux c’est!
De même, si l’affichage de la page est plus important,
mettez vos scripts le plus bas possible pour que l’affichage
commence tôt
Idem que pour les CSS, vive les scripts externes
Compressez vos scripts avec gzip et éventuellement un
“packer” (attention, différentes méthodes, différents
résultats).
22
26. Scripts, reloaded
Utilisez les variables locales
Evitez d’accéder plusieurs fois à une propriété d’un
élément, faites le maximum de choses en une seule fois
Bannissez “with”, évitez “eval” autant que possible.
Attention aux memory leaks, surtout sous Internet Explorer
N’abusez pas du XmlHttpRequest: une requête asynchrone
n’est pas forcément instantanée (oui, j’ai volé cette ligne à
Yahoo)
24
27. Scripts, exemple
function test {
str = “coucou”;
document.getElementById(“test”).innerHTML = str;
document.getElementById(“test”).innerHTML += “mat”;
}
function test {
var str = “coucou” + mat;
var element = document.getElementById(“test”);
element.innerHTML = str;
}
25
28. Scripts, revolutions
Effets Web 2.0 (fade, etc): c’est joli, mais attention:
Est ce que ca tourne bien sur les vieilles machines?
Est ce que ca impose un délai inutile à l’utilisateur?
Frameworks: gagner du temps, c’est bien, mais attention
aux performances!
Attention à la multiplication de fichiers et à leur tailles.
Testez avec tous les navigateurs, certains sont vraiment
lents sous Internet Explorer
Dans bien des cas le DOM suffit, même avec le support
limité d’Internet Explorer 26