• Home
  • Nous contacter

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab
Outils

Compte rendu du Velocity Europe 2013 – Jour 3

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.

27/03/2014 40 MIN READ BY: Thomas ROGER 0 COMMENT
SHARE
LIRE LA SUITE

Thomas ROGER

Les microdatas HTML5

The need for speed

VOUS POURRIEZ AIMER

Outils Debuguer un code php sous eclipse avec xdebug

Mobile Outils Apple: créer et comprendre le provisionning profile de vos applications

Outils 5 trucs GIT que j’utilise tous les jours

Outils Création d’une extension chrome simplissime « keyboardClicker »

Outils Qu’est-ce que Composer ?

Outils Editer vos vidéos de vacances

A propos d’Adfab

Nous sommes un studio de production digitales et d’innovation digitales au service des agences et des annonceurs
Nous recherchons le scintillement dans les regards et le plaisir de réalisations sur-performantes
Nous sommes techno-agnostiques
Nous sommes Adfab

Le blog d'Adfab
Copyright © 2018 Adfab Connect