responsive webdesign performant

Download Responsive WebDesign performant

Post on 16-Apr-2017

838 views

Category:

Internet

1 download

Embed Size (px)

TRANSCRIPT

Slide 1

Responsive Web DesignPerformant8 juin 2016

1

Thomas SOUDAZFondateur de la socit Refficience, Consultant WebPerf et SEOSite : Refficience.com Email : ts@refficience.comtwitter : @tsoudaz

2

Dfinition WebPerfomance Dlai peru par linternaute entre laction (ex: un touch) et une rponse intelligible

Dlai peru par linternaute entre laction (ex: un touch) et une rponse intelligibleThe delay perceived by the website visitor between an action (e.g click) and a meaningful response Dfinition traduit de langlais Stephen Thair @TheOpsMgr3

Actualit SEO

Source : twitter.com/methode/status/737891772504887296

Jennifer est ditrice de Thesempost, methode est en charge de la communication auprs des webmasters chez Google

4

SpeedIndex < 2000

5

Webpagest.org raliser un test avec une connectivit mobile6

En mulant un mobile Nexus7

Identifier le SpeedIndex sur la page de rsultat de test8

SpeedindexMesure la moyenne de temps daffichage des lments visibles de la page

Mesure la moyenne de temps daffichage des lments visibles de la page9

SpeedindexPrend en compte la progressivit du chargement visuel

Pourcentage de compltionChrono en secondes

+ dinfos : https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-indexStart render 1.1secondesVisually complete 4,8 secondes

10

Latence rseau Qualit du signal Capacit CPU Mmoire/ disque limit Consommation de batterie Tailles dcrans rduites Tap delay InApp web Forfaits Data / RoamingLimites du mobile

Latence sur mobile ~150msPertes de paquet : de 0 1 %CPU 2,3,10x puissant quun ordinateur de bureauMmoire vive, cache navigateur, espace disqueBatterie qui va raccourcir la dure des sessions27% des utilisateurs dpassent le forfait Data.Wifi Hotspot Scurit11

Poids moyen dune page web mobileHTMLCSSJSImagesFonts personnalisesTags/tracking/pubsRessources tierces

En moyenne 117 requtesSource : mobile.httparchive.org

Moi, qui poste une photo sur facebook depuis mon telEchec de lenvoi. RessayezMoi, qui tend le bras pour tenter de mieux capterSource : reposti.com/p/bxE

39% des utilisateurs mobiles sont mcontents de leur exprience web mobile 57% ont des problmes en utilisant leur mobile 75% des utilisateurs estiment que le mobile est plus lent que le desktop 46% ne retournent pas sur un site lent.

Seulement 9% des utilisateurs prfrent acheter sur mobile

Les stats qui font mal :(Source : akama

Etude Akama14

1 sec de dlai pnalise la conversion

Source : Soasta

Taux de conversionTaux de conversion

Temps de chargement (secondes)VisitesTaux de conversion (%)Visites faible qualit VisitesConversions

1 seconde de dlai sur mobile cest 0,4pts de taux de conversion en moins = 27% de conversion en plus

15

Plutt que de faire un site responsive, on va demander nos clients dacheter des mobiles avec des crans plus grands !

Mobile RageSource : tude Harris Interactive pour le compte dIBMComment se comporte lutilisateur face au temps de chargement lents sur mobile ?

Vous avez dj casser la vitre de votre smartphone ? O:-)18

Solutions techniquesPas de site mobileSite mobile+url ddieSite RWD Adaptive delivery

Optimis

RWD = 0 redirection Top 10 FrTechnoURLSurcot !LeboncoinRWDUniqueSurcot faibleLefigaroRWDUniqueSur tlchargement / 2moCreditAgricole.frRWDUniqueSur tlchargement / 1.2moAllocinRWDUniqueSurcot moyen / 650koOrangeredirection serveur > site m.2 Urls150/200 msLeparisienredirection javascript > site m.2 Urls400/500 msLequiperedirection javascript > site m.2 Urls400/500 msLemonderedirection fichier JS > site m.2 Urls500/700 msPages JaunesRESSUniqueSfrAdaptive + Tablet RWDUnique

Tests raliss avec connectivit 3G - 150ms

Allocin est enfin Responsive !20

Site ddi en m. ?

Une redirection 301 + une redirection 302 = 1,3 secondes

Le plus gros problme des sites mobiles ddis21

Site ddi m. - take 2Partage sur facebook/twitter ?

Site mobile sur desktop ? il faut au moins prvoir une redirection Aller/Retour22

RWD : image & principes

ConceptionGrilles fluidesImages flexiblesMediaQueriesTechniqueUrl uniqueHTML unique

Version smartphone < 480

Version 480 html , css , SVG et pas de font icon Lazyloading !!!

La mode est au interface pure et imageless 32

Mediaqueries et imagesLes navigateurs ont quasi tous des comportements diffrentsLa plupart tlcharge les images en display:noneLes images responsives sont trop souvent charges avec :

max-width : empche limage de dpasser de son conteneur tout en prenant le maximum de place possible.height: auto : permet limage ne pas tre dforme par le redimensionnement.

Utilisez la balise picture pour servir des petites images

Support par seulement 78% du parc mobile franaisPerformance des images RWD

34

LA bonne image tousHomemadeScript de redimensionnement ( la vole ou pr-gnration lupload)Polyfill : picturefill / imagerjsSolutions tiersFait le travail pour vous Mod_pagespeed, Akamai Ion , cloudinary.com , Thme RWD optimis

Smashing magazine qualifie picturefill de The perfect polyfill

WebP !35

Contenu masqu

Et pendant ce temps l sur mobile :

36

Chargement conditionnelLe Javascript la rescousse matchmediaAvantagesPas de surtlchargementCompatible avec 98% des navigateurs (IE