La conférence « Velocity Europe 2013 » a eu lieu en Novembre 2013. Il est grand temps de faire un petit retour de la dernière journée de cette conférence. Le thème de cette conférence est la performance web (back, front, système).
La conférence « Velocity Europe 2013 » a eu lieu en Novembre 2013. Il est grand temps de faire un petit retour de la dernière journée de cette conférence. Le thème de cette conférence est la performance web (back, front, système).
Extreme Image Optimisation: WebP & JPEG XR par Ido Safruti (Akamai)
http://www.youtube.com/watch?feature=player_embedded&v=Y5ZOogjHpbk
Pour le mobile, 65% du poids des pages sont des images, 62% pour le desktop. Le format des images sont très vieux. Le GIF date de 1987 (quelle merveilleuse année !), le PNG de 1996 et le JPEG de 1992. Cependant de nouveaux formats d’images apparaissent mais le déployer et le rendre accessible par tous les navigateurs est très durs.
Dans cette présentation, on va parler de deux formats d’images :
- WebP qui date de 2011
- JXP qui date de 2009
Le WebP est en moyenne 45% moins lours que le JPEG alors que le JXP est quand à lui 27% moins lourd.
En fait, on utilise pas ces formats car ils ne sont pas supportés par les navigateurs :
- Le WebP est compatible avec Chrome >=23 et Opera >=12.1
- Le JXP est supporté par Internet Explorer >=10
Pour information, Facebook avait mis en place WebP mais la retirer car les facebookeurs sous Internet Explorer ne voyait plus les images uploader à partir d’un chrome.
SLOWING DOWN TO GO FASTER: Responsive Web Design And The Problem Of Agility vs Robustness par Tom Maslen (BBC News)
Cette présentation est un retour d’expérience de la BBC concernant la prise en compte du responsive dans leurs développements.
- Développer en Responsive prend plus de temps ( Coef multiplicateur de 3) (design, test, développement, etc)
- Utilisation de Grunt pour automatiser des tâches
- Fournir les bonnes images en fonction du device : Imager.js
- Versionner les assets : grunt-version
Ils ont mis au point un outils qui permet de voir les comparaisons de screenshots : Wraith
Automating The Removal Of Unused CSS par Addy Osmani (Google Chrome)
http://www.youtube.com/watch?v=833xr1MyE30
Comment savoir si dans notre site web, on a des règles CSS qui ne sont pas utilisées ? Comment savoir si j’enlève une régle CSS, je ne vais pas modifier le style d’un élément dans mon site ?
Avec l’avènement des frameworks CSS comme bootstrap, on a des fichiers CSS énormes.
Addy propose deux outils :
- On peut voir les CSS inutiles pour la page en cours depuis le web tools de Chrome dans l’onglet « Audit » puis « Run » puis « Remove unused CSS rule »
- On peut aussi parler de Grunt-uncss qui d’enlever toutes les règles CSS qui sont inutiles pour tous le site.
Conclusion
Cette troisième journée a été moins enrichissante que les deux premières. Elle s’est basé sur le développement front notamment avec les nouveaux formats d’images et des outils permettant de faire le ménage dans les CSS. La prise en compte du responsive dans les développement alourdit la charge de travail.
Extreme Image Optimisation: WebP & JPEG XR par Ido Safruti (Akamai)
http://www.youtube.com/watch?feature=player_embedded&v=Y5ZOogjHpbk
Pour le mobile, 65% du poids des pages sont des images, 62% pour le desktop. Le format des images sont très vieux. Le GIF date de 1987 (quelle merveilleuse année !), le PNG de 1996 et le JPEG de 1992. Cependant de nouveaux formats d’images apparaissent mais le déployer et le rendre accessible par tous les navigateurs est très durs.
Dans cette présentation, on va parler de deux formats d’images :
- WebP qui date de 2011
- JXP qui date de 2009
Le WebP est en moyenne 45% moins lours que le JPEG alors que le JXP est quand à lui 27% moins lourd.
En fait, on utilise pas ces formats car ils ne sont pas supportés par les navigateurs :
- Le WebP est compatible avec Chrome >=23 et Opera >=12.1
- Le JXP est supporté par Internet Explorer >=10
Pour information, Facebook avait mis en place WebP mais la retirer car les facebookeurs sous Internet Explorer ne voyait plus les images uploader à partir d’un chrome.
SLOWING DOWN TO GO FASTER: Responsive Web Design And The Problem Of Agility vs Robustness par Tom Maslen (BBC News)
Cette présentation est un retour d’expérience de la BBC concernant la prise en compte du responsive dans leurs développements.
- Développer en Responsive prend plus de temps ( Coef multiplicateur de 3) (design, test, développement, etc)
- Utilisation de Grunt pour automatiser des tâches
- Fournir les bonnes images en fonction du device : Imager.js
- Versionner les assets : grunt-version
Ils ont mis au point un outils qui permet de voir les comparaisons de screenshots : Wraith
Automating The Removal Of Unused CSS par Addy Osmani (Google Chrome)
http://www.youtube.com/watch?v=833xr1MyE30
Comment savoir si dans notre site web, on a des règles CSS qui ne sont pas utilisées ? Comment savoir si j’enlève une régle CSS, je ne vais pas modifier le style d’un élément dans mon site ?
Avec l’avènement des frameworks CSS comme bootstrap, on a des fichiers CSS énormes.
Addy propose deux outils :
- On peut voir les CSS inutiles pour la page en cours depuis le web tools de Chrome dans l’onglet « Audit » puis « Run » puis « Remove unused CSS rule »
- On peut aussi parler de Grunt-uncss qui d’enlever toutes les règles CSS qui sont inutiles pour tous le site.
Conclusion
Cette troisième journée a été moins enrichissante que les deux premières. Elle s’est basé sur le développement front notamment avec les nouveaux formats d’images et des outils permettant de faire le ménage dans les CSS. La prise en compte du responsive dans les développement alourdit la charge de travail.
