#WebPerformance / 9 juin 2018 @guillaumeehret > 3 sec sur mobile ⇒ 57% des users en moins 0 : 03 DoubleClick, “The Need for Mobile Speed”, September 2016 https://giphy.com
#WebPerformance / 9 juin 2018 @guillaumeehret 2010 2017 2016 2015 2014 2013 2012 2011 http://httparchive.org mars 2017 Taille moyenne des ressources d’un site web
#WebPerformance / 9 juin 2018 @guillaumeehret Webpagetest.org, , February 2016 Temps mobile 10s 3/4 19s moy 200 moy Les performances sur mobile ne sont pas toujours au rendez vous
#WebPerformance / 9 juin 2018 @guillaumeehret first paint JavaScript Autres JavaScript Autres ... 1 HTML https://monsite/ HTML parsing parsing compile render JavaScript Autres CSS render JavaScript Autres CSS ...
#WebPerformance / 9 juin 2018 @guillaumeehret 2 HTTP2 et Java 1. Container compatible Jetty 9.2, Undertow (JBoss) 1.3, Tomcat > 8.5 2. Activer le mode HTTP 2 3. Avoir un certificat 4. Ajouter le jar ALPN au jdk (lib pour Jdk < 9)
#WebPerformance / 9 juin 2018 @guillaumeehret 3 public class SessionDto { public String title; public String summary; public String lang; public String format; public String description; public Instant start; public Instant room; ... } des DTO qui collent à l’API
#WebPerformance / 9 juin 2018 @guillaumeehret 3 public class SessionDto { public String title; public String summary; public String lang; public String format; public String description; public Instant start; public Instant room; ... } public class SessionListDto { public String title; public String summary; ... } des DTO qui collent à l’API
#WebPerformance / 9 juin 2018 @guillaumeehret 3 Quelques astuces Modularité frameworks Apprenez CSS CSS is awesome de Igor Laborie Nettoyage automatique avec uncss CSS
#WebPerformance / 9 juin 2018 @guillaumeehret Transparence Couleurs Compression Animation Use case GIF 256 sans perte animation PNG au choix sans perte fond transp. PNG 8 bit 256 sans perte couleur limité JPEG toutes au choix photos SVG toutes sans perte indirectement logo, diag Les formats classiques 3 Images
#WebPerformance / 9 juin 2018 @guillaumeehret propriété srcset 3 srcset="img/mixit/mixit-amphi_640.jpg 640w, img/mixit/mixit-amphi_1024.jpg 1024w, img/mixit/mixit-amphi_2048.jpg"> la largeur de la fenêtre nombre entier suivi par 'w' (640w), par défaut c’est l’infini la densité de pixel nombre entier suivi par 'x' (2x), par défaut c’est 1x. Images
#WebPerformance / 9 juin 2018 @guillaumeehret 3 Fonts Format Extension Exemple Font Roboto Compression EOT .eot 179 ko TrueType .ttf 179 ko WOFF .woff 89 ko >10 WOFF2 .woff2 64ko 30% + que WOFF >10 >10 SVG .svg 743 ko IE Edge Firefox Chrome Safari Opera Opera Mini Android Browser iOS Safari Chrome for Android
#WebPerformance / 9 juin 2018 @guillaumeehret Novembre 2010 Taille moyenne 113 Ko moy 420 Ko JS moy JS Novembre 2016 3 JavaScript medium article Osmany, 2017
#WebPerformance / 9 juin 2018 @guillaumeehret 3 JavaScript JS Téléchargemen t Parsing 05 3C FE BA 44 C1 Génération bytecode Optimisation Compilation Exécution Pas que le chargement
#WebPerformance / 9 juin 2018 @guillaumeehret import('./module').then( module => {...} ).catch( error => {...} ); Dynamic import 3 JavaScript https://github.com/tc39/proposal-dynamic-import est passé au dernier stade avant adoption
#WebPerformance / 9 juin 2018 @guillaumeehret @guillaumeehret #WebPerformance / 9 juin 2018 La ressource la plus rapide et la mieux optimisée est une ressource qui n'est pas envoyée. 4
#WebPerformance / 9 juin 2018 @guillaumeehret Service worker 5 sw-precache module node générant la configuration sw-toolbox lib JS qui fournit des utilitaires pour gérer le cache avec différentes stratégies : networkFirst, cacheFirst, fastest, cacheOnly, networkOnly
#WebPerformance / 9 juin 2018 @guillaumeehret Service worker 5 sw-precache module node générant la configuration sw-toolbox lib JS qui fournit des utilitaires pour gérer le cache avec différentes stratégies : networkFirst, cacheFirst, fastest, cacheOnly, networkOnly
#WebPerformance / 9 juin 2018 @guillaumeehret 5 Ensemble de librairies et d’outils vous aidant à gérer les ressources de vos sites sur les devices de vos utilisateurs - aide à gérer le mode offline ou un réseau défaillant - améliore les performances quand une personne revient sur votre site
#WebPerformance / 9 juin 2018 @guillaumeehret @guillaumeehret #WebPerformance / 9 juin 2018 Charger le plus important tout de suite et le reste plus tard
#WebPerformance / 9 juin 2018 @guillaumeehret @guillaumeehret #WebPerformance / 9 juin 2018 First do it, then do it right, then do it better... Addy Osmani
javamind
tomoaki25
daikimori
line_developers
sheep_san_white
ramimac
i524
huffon
shotatsuge
nagix
sadonosake
bengo4com
eiki
marcduiker
addyosmani
zenorocha
mthomps
holman
smashingmag
mclloyd
jensimmons
ddemaree
jnunemaker
phodgson
lauravandoore