Refficience à QueDuWeb 2016

En téléchargement la présentation "RWD performant" réalisée Jeudi 08/06/2016 à l'occasion de QueduWeb Deauville avec les commentaires de slides.

Nous réalisons une analyse détaillée de votre site et donnons des recommandations concrètes pour améliorer durablement les temps de chargement de votre site.

› En savoir +

Téléchargez la présentation PowerPoint : 20160608-queduweb-RWD-Performant.pptx ou pdf

slide 3

« Délai perçu par l’internaute entre l’action (ex: un touch) et une réponse intelligible »
”The delay perceived by the website visitor between an action (e.g click) and a meaningful response” Définition traduit de l’anglais © Stephen Thair @TheOpsMgr

slide 4

Jennifer est éditrice de Thesempost.com, methode est en charge de la communication auprès des webmasters chez Google

slide 5

Votre objectif doit être de conserver un speedindex inférieur à 2000ms

slide 6

Webpagest.org réaliser un test avec une connectivité mobile

slide 7

En émulant un mobile Nexus le moteur de rendu est quasi identique à Chrome

slide 8

Identifier le SpeedIndex sur la page de résultat de test

slide 9

Mesure « la moyenne de temps d’affichage des éléments visibles de la page »

slide 10

+ d’infos sur le SpeedIndex
Start render 1.1secondes
Visually complete 4,8 secondes

slide 11

Latence sur mobile ~150ms<>
Pertes de paquet : de 0 à 1 %
CPU 2,3,10x puissant qu’un ordinateur de bureau
Mémoire vive, cache navigateur, espace disque
Batterie qui va raccourcir la durée des sessions
27% des utilisateurs dépassent le forfait Data.
Wifi… Hotspot… Sécurité…

slide 15

1 seconde de délai sur mobile c’est 0,4pts de taux de conversion en moins = 27% de conversion en plus 

slide 18

Vous avez déjà casser la vitre de votre smartphone ? O:-)

slide 20

Allociné le dernier de la liste à être passé Responsive ! mais pas encore optimisé...

slide 21

Le plus gros problème des sites mobiles dédiés : la ou les redirection(s)

slide 22

Site mobile sur desktop ?
il faut au moins prévoir une redirection Aller/Retour

slide 24 à 28

Excellent site RWD, axé performance : TheGuardian !

slide 29

PE = progressive enhancement
Les UX mobiles réussient ne s’adaptent pas elles se conçoivent !

slide 31

(805*453)/(320*180) = 6,3x trop de pixels téléchargés !

slide 32

La mode est au interface épurée et imageless :) travaillez main dans la main avec vos graphistes ! ils vont adorer bosser en vectoriel !

slide 35

Smashing magazine qualifie picturefill de “The perfect polyfill” le support de WebP ! est un GROS bonus (~-30% plus léger)

slide 38

Exemple de code permettant de ne pas charger des Javascripts sur mobile

<script data-mq="(min-width: 640px)" data-src="//ads.com/banner.js"></script>
<script data-mq="(min-width: 640px)" data-src="livechat.js" ></script>
<script>
var scripts = document.getElementsByTagName("script");
for(var i=0;i<scripts.length; i++)
{
// Test qui vérifie la validité de la mediaquerie
var mq = scripts[i].getAttribute("data-mq");
if (window.matchMedia(mq).matches)
{
// Si oui, on charge de façon asyncrhone le script
var s = document.createElement("script");
s.type = 'text/javascript';
s.src = scripts[i].getAttribute("data-src");
document.body.appendChild(s);
}
}
</script>

slide 39

HTTP2 améliore les performances mobile grâce à un protocole nouvelle génération qui optimise la connectivité serveur/client

slide 40

Responsive Design + Server Side Component = RESS

Auteur : Thomas SOUDAZ (Refficience)

Vous avez des questions ? N'hésitez pas à nous contacter »

Refficience à QueDuWeb 2016

Optimisez votre Speedindex