-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
969 lines (742 loc) · 34.9 KB
/
index.html
File metadata and controls
969 lines (742 loc) · 34.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webperf2.0</title>
<meta name="description" content="A Fasterize presentation">
<meta name="author" content="Fasterize">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/fasterize.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>Webperf 2.0</h1>
<h3>Aller plus loin que les règles classiques</h3>
<br>
<br>
<br>
<br>
<p>
<h2>ParisWeb 2015</h2>
</p>
<p>
<small>@stefounet</small>
</p>
</section>
<section>
Ce dont je ne parlerai pas :
<ul style="text-align:left">
<li>in-page perf (rendering, layout, JS, requestAnimationFrame, web workers, memory)
<li>backend
<li>TLS (session reuse, cache, tls record, certificate size)
<li>TCP (slow start, tcp window scaling, disable slow start after idle)
<li>WebRTC
<li>resources timing, navigation timing
</ul>
</section>
<section>
<section>
<h2>Petite</h2><h1>introduction</h1>
<h3>(pour ceux qui vivraient encore dans des datacenters)</h3>
<aside class="notes">
Rapidement, c'est quoi la webperf ?
Moi j'ai une définition simple
</aside>
</section>
<section>
Faire que les sites Web se chargent plus rapidement,
<span class="fragment">sur tous les navigateurs,</span>
<span class="fragment">tous les devices,</span>
<span class="fragment">toutes les connexions,</span>
<span class="fragment">pour tous les utilisateurs</span>
</section>
<section>
<h2>backend/frontend</h2>
<img src="assets/waterfall.png" width="600">
<aside class="notes">
<p>On peut agir à deux niveaux : backend et frontend
<p>Je parlerai essentiellement de frontend
<p>Vous savez tous ce qu'est un waterfall ?
</aside>
</section>
<section>
mais pourquoi on fait ça ?
<aside class="notes">
en ce qui me concerne c'est parce que j'ai codé en 1982 sur un ZX Spectrum avec 16Ko de RAM et aussi parce que j'ai un business là dessus ;-)
mais sinon ...
</aside>
</section>
<section>
<img src="assets/parce que.jpg">
<aside class="notes">
ah, et sinon pour de vrai, ben c'est pour les utilisateurs, parce qu'on n'aime pas attendre
</aside>
</section>
<section data-transition="fast" data-background="assets/wait.jpg">
<aside class="notes">
<p>et donc ça a un impact sur le business
<p>Y'a beaucoup d'études dont le fameux 100ms d'amazon qui montrent qu'il y a un impact négatif sur le business quand on ralentit un site web
<p>De notre côté, nous on a montré l'inverse : qu'il y avait un impact positif quand on accélérait un site !
<p>Par exemple, on voit la corrélation chez un client dans le secteur de la mode.
</aside>
</section>
<section data-transition="fast">
<img src="assets/conversion rate vs loadtime.jpg">
<aside class="notes">
<p>distribution des temps de chargement vs le taux de conversion et on voit donc clairement qu'un internaute qui charge le site rapidement transforme mieux.
<p>A noter que cette distribution n'est pas une gaussienne et donc mesurer des moyennes de temps de chargement n'est pas très pertinent dans notre métier
</aside>
</section>
<section data-transition="fast">
<img src="assets/pageviews vs loadtime.jpg">
<aside class="notes">
on peut même le mesurer avec des tests A/B !
</aside>
</section>
<section data-transition="fast">
<img src="assets/ABtest.png">
<aside class="notes">
et dernier graphique que je trouve vraiment super intéressant c'est le funnel où on mesure ce qui se passe pour les utilisateurs à chaque étape en terme de temps de chargement
</aside>
</section>
<section data-transition="fast">
<img src="assets/funnel.png">
<aside class="notes">
ah oui et pour ceux qui se posent la question, ce n'est pas près de s'arrêter
</aside>
</section>
<section>
<video controls src="assets/video Cdiscount.ogg">
</section>
<section data-transition="fast">
<img src="assets/evolution size.png">
<aside class="notes">
<p>ça montre l'évolution du poids et de la complexité des pages depuis environ 4 ans
<p> on est passé de 700ko a 2Mo
</aside>
</section>
<section data-transition="fast">
<img src="assets/evolution size JS.png">
<aside class="notes">
ça vaut pour les JS
</aside>
</section>
<section data-transition="fast">
<img src="assets/evolution size CSS.png">
<aside class="notes">
pour les CSS
</aside>
</section>
<section data-transition="fast">
<img src="assets/evolution size image.png">
<aside class="notes">
pour les images
</aside>
</section>
<section data-transition="fast">
<img src="assets/evolution size font.png">
<aside class="notes">
et plus récemmment et peut être avec plus d'impact, pour les fonts
mais heureusement y'a des règles qui existent pour améliorer les perfs
</aside>
</section>
</section>
<section>
<section>
<h1>Les limites des règles actuelles</h1>
<h3>quand la webperf va à l'encontre de la webperf</h3>
<aside class="notes">
Les règles de la Webperf ont été édicté en 2007 par Steve Moise Souders dans un bouquin appelé "High Performance Websites"
</aside>
</section>
<section>
<img class="" src="assets/Moise.jpg" width="500" align="left" style="margin-bottom:400px;margin-right:50px">
<ul style="text-align:left;font-size:0.7em">
<li>Make Fewer HTTP Requests
<li>Use a Content Delivery Network
<li>Add an Expires Header
<li>Gzip Components
<li>Put Stylesheets at the Top
<li>Put Scripts at the Bottom
<li>Avoid CSS Expressions
<li>Make JavaScript and CSS External
<li>Reduce DNS Lookups
<li>Minify JavaScript
<li>Avoid Redirects
<li>Remove Duplicate Scripts
<li>Configure ETags
<li>Make AJAX Cacheable
</ul>
<aside class="notes">
Les règles de la Webperf ont été édicté en 2007 par Steve Moise Souders dans un bouquin appelé "High Performance Websites"
Elles ont été complétées et affinées au fur et à mesure
dans un second bouquin, collectif celui-là, "Even Faster websites"
</aside>
</section>
<section>
<img class="" src="assets/nouveau testament.jpg" width="400" align="left" style="margin-bottom:400px;margin-right:50px">
<ul class="bullets" style="font-size:0.7em">
<li>Ajax
<li>Responsive Web
<li>Split initial payload
<li>Defer JS (non blocking, async)
<li>Inline scripts position
<li>Minify HTML
<li>Optimize images
<li>Sharding
<li>Flush the document early
<li>Use iFrame sparingly
<li>Simplify CSS selectors
</ul>
<aside class="notes">
dans un second bouquin, collectif celui-là, "Even Faster websites"
Mais pourquoi ces règles existent, d'où elles sortent ?
</aside>
</section>
<section>
d'où elles viennent :
<ul>
<li class="fragment">latence</li>
<li class="fragment">TCP (handshake, slow start)</li>
<li class="fragment">limites des navigateurs</li>
<li class="fragment">HTTP1.1</li>
<li class="fragment">im-mobile</li>
</ul>
<aside class="notes">
<li>la latence, schématiquement c'est la longueur du tuyau, le fait qu'on doive forcément parcourir une distance pour transporter une informtation
<li>le protocole TCP, c'est la couche de transport de nos réseaux, celle qui s'assure qu'on reçoit bien ce qui a été envoyé
<li>les navigateurs, ben si vous avez connu un monde avec IE5.5, vous savez qu'il y en a des limites
<li>le protocole HTTP1.1 a des limitations sur la façon de se connecter, on peut dire qu'il est pas très connecté et en plus il est sujet a mille interprétations
<li>enfin tout ça a été rédigé en 2006, lancement du premier iphone : 2007
</aside>
</section>
<section>
<p>mais en fait, aujourd'hui</p>
<ul>
<li class="fragment">les navigateurs ont évolué en 10 ans (Firefox 40!)</li>
<li class="fragment">les terminaux ont changé </li>
<li class="fragment">les protocoles sont en train de changer (SPDY/HTTP2)</li>
<li class="fragment">même les couches réseaux sont remises en cause (QUIC)</li>
</ul>
<span class="fragment">et en plus</span>
<ul class="fragment">
<li>la manière de coder des sites a changé : SPA, RWD</li>
<li>les widgets ont explosé à cause des tags managers</li>
</ul>
<aside class="notes">
le mobile représente 50% du surf : on rigolait encore y'a 3 ans quand tous les ans le gartner prévoyait que 50% du surf serait sur mobile mais on y est
</aside>
</section>
<section data-background="assets/widgets.jpg">
<aside class="notes">
ce qui n'a pas disparu : latence
<p>et donc ça conduit à une situation où les règles classiques de la webperf, celles que tout le monde connait, sont devenues dans certains cas contre productives !
</aside>
</section>
<section>
<h2>Concatenation</h2>
<h3>
<span class="fragment">JS / CSS</span><span class="fragment">, Images</span>
</h3>
<ul>
<li class="fragment">un seul gros fichier peut ralentir la page</li>
</ul>
<img src="assets/bigCSS.png" class="fragment">
</section>
<section data-transition="fast">
<h2>Concatenation</h2>
<h3>
<span>JS / CSS, Images</span>
</h3>
<ul>
<li>un seul gros fichier peut ralentir la page</li>
<li>on tape les limites d'IE9</li>
<li class="fragment">impossible d'établir une priorité dans le code téléchargé</li>
<li class="fragment">ça pète le cache (et le flush est plus contraignant)</li>
<li class="fragment">maintenabilité</li>
</ul>
<img src="assets/divCombinedAndMinified.png" class="fragment" width="800">
<aside class="notes">
<p>ça concerne les JS et les CSS mais aussi les images avec la technique du spriting
<p>La concaténation vient de deux choses : nb de requêtes possibles en parallèle, latence, connexion TCP
<p>1. surtout le cas pour les ressrouces bloquantes. J'ai déjà croisé des CSS de 1Mo, à cause des fonts inlinées
<p>Le plus énervant c'est quand GTMetrix ou WPT vous dit que vous n'avez pas combiné vos CSS/JS : mais c'est ça que je veux faire !
<p>limites IE9 : 4096 sélecteurs/fichiers, max 278ko
</aside>
</section>
<section data-transition="fast">
<h2>Concatenation</h2>
<h3>
<span>JS / CSS, Images</span>
</h3>
<p><br>
<p><br>
<p>Trouver un intermédiaire en fonction de la taille et de la composition du site.</p>
<p class="fragment">Et aussi avoir un bon process de build</p>
<aside class="notes">
<p>ça concerne les JS et les CSS mais aussi les images avec la technique du spriting
<p>La concaténation vient de deux choses : nb de requêtes possibles en parallèle, latence, connexion TCP
<p>1. surtout le cas pour les ressrouces bloquantes. J'ai déjà croisé des CSS de 1Mo, à cause des fonts inlinées
<p>Le plus énervant c'est quand GTMetrix ou WPT vous dit que vous n'avez pas combiné vos CSS/JS : mais c'est ça que je veux faire !
<p>limites IE9 : 4096 sélecteurs/fichiers, max 278ko
</aside>
</section>
<section>
<h2>Sharding / Cookieless domain</h2>
<ul>
<li>introduit de nouvelles résolutions DNS, en général dans le <code><head></code></li>
<li>"low" vs high latency network</li>
</ul>
<p class="fragment">Vaut mieux éviter, surtout pour les ressources bloquantes</p>
<aside class="notes">
<p>Définition du sharding/cookieless domain
<p>ça vient de deux choses : nb de requêtes possibles en parallèle, upload limité, pas de compression des headers
<p>mais aujourd'hui les navigateurs sont passés de 2 à 6 requêtes en // par domaine
<p>low : mobile ou Chine
<p>deja vu : 4 ou 5 domaines statiques différents (cf. https://www.fasterize.com/en/website_configs/1998/hosts_mapping) => unsharding
<p>heureusement certains navigateurs détectent que c'est le même serveur derrière et ne refont pas de connexion TCP
</aside>
</section>
<section>
<h2>Lazyloading</h2>
<ul>
<li>Lazyloader les premières images est une mauvaise idée !</li>
<li>A réserver aux images en dessous de la ligne de flottaison</li>
</ul>
<aside class="notes">
l'explication est simple : le préparser/preloader/speculative parser va chercher les élements en avance de phase avant de construire le DOM
<p>en faisant du lazyloading, on masque les images à ce preloader et on délègue le chargement à un script qui va s'exécuter assez tard
</aside>
</section>
<section>
<h2>JS at the bottom</h2>
<aside class="notes">
l'explication est la même : le préparser/preloader/speculative parser va chercher les élements en avance de phase avant de construire le DOM
<p>c'est assez amusant de voir le JS tout en bas de page sortir en seconde requête :-)
</aside>
</section>
<section>
<h2>Minification</h2>
<ul>
<li class="fragment">aucun gain</li>
<li class="fragment">sauf si on minifie de façon agressive</li>
<li class="fragment">personne ne le fait parce que c'est trop dangereux</li>
</ul>
<aside class="notes">
c'est du markete de la perf, ça enquiquinne tout le monde et personne n'a fait d'étude pour savoir si ça avait un vrai impact sur le parsing (source map)
Au final, quand j'entends des gens qui se lancent aujourd'hui dans la minification et la concaténation JS/CSS, je leur dis "surtout pas malheureux !"
</aside>
</section>
</section>
<section>
<section>
<h1>et si on allait plus loin ?</h1>
<aside class="notes">
</aside>
</section>
</section>
<section>
<section>
<h1>cache cache</h1>
et pour commencer si on faisait plus de cache ?
<aside class="notes">
d'accord vous allez dire, on s'est fait avoir, webperf 2.0 mon oeil il va me dire de mettre mes pages en cache
<p>eh ben oui, exactement
<p>c'est pas la technique du futur c'est vrai mais ça a tellement d'avantage ...
<p>D'abord, cacher ce qui est cachable, ça semble évident mais bon ...
<p>ensuite
</aside>
</section>
<section>
<h2>Cookieless cache</h2>
<p><br>
<p><br>
<p class="fragment">Cacher les pages dynamiques pour les nouveaux utilisateurs ou les utilisateurs anonymes</p>
<aside class="notes">
pour les utilisateurs qui ne sont jamais venus sur votre site, pas besoin d'aller dans la base de données lui chercher un panier vide
<p> a noter que ça fonctionne aussi pour les bots ... je dis ça comme ça ...
</aside>
</section>
<section>
<h2>ESI/Ajax</h2>
<p><br>
<p><br>
<p class="fragment">Cacher les pages HTML et ajouter les parties dynamiques en Ajax</p>
<aside class="notes">
Là ça consiste à cacher le layout pour répondre instantanément et accélerer le start render et ensuite enrichir avec les données dynamiques
en fait ça revient à utiliser une technique plus générale, le chargement progressif
</aside>
</section>
</section>
<section>
<section>
<h1>Chargement progressif</h1>
<aside class="notes">
C'est d'ailleurs un thème majeur à suivre dans la webperf : le chargement progressif.
<p>ça consiste à charger la page avec des fonctionnalités minimales, un rendu suffisant pour tout ce qui est au dessus de la ligne de flottaison et ensuite de charger petit à petit le reste : les CSS manquants (pour les popups par ex), le JS pour l'interaction, les widgets, les CSS pour les autres pages, etc ...
<p>Attention ce sont des techniques de sioux mais ce sont surement celles qui donnent le plus de résultat aujourd'hui
</aside>
</section>
<section>
<h2>Techniques de <span style="font-size:0.7em">(petit)</span> sioux</h2>
<ul>
<li class="fragment">JS async/defer/iframe</li>
<li class="fragment">Lazyloading image/iframe</li>
</ul>
<aside class="notes">
<p>Y'a celles qu'on connait déjà
defer vs async:
</aside>
</section>
<section>
<h2>Techniques de <span style="font-size:1.2em">(grand)</span> sioux</h2>
<ul>
<li class="fragment">Async font loading</li>
<ul class="fragment">
<li>Chargement des fonts via loadCSS
<li>Application quand les fonts sont disponibles (font event / polyfill fontFaceObserver)
</ul>
<li class="fragment">Inline critical CSS/JS + async loading</li>
<ul class="fragment">
<li>Séparer ce qui est critique pour le rendu ATF
<li>Inliner ce qui est critique
<li>Charger le reste en asynchrone
<li>Charger la totale ensuite pour remplir le cache
</ul>
<li class="fragment">Inline first view</li>
</ul>
<aside class="notes">
C'est quand même assez difficile à automatiser !
</aside>
</section>
</section>
<section>
<section>
<h1>Pré-</h1>
<aside class="notes">
</aside>
</section>
<section>
<h2>3 types</h2>
<h3>preconnect, prefetch, prerender</h3>
<ul>
<li class="fragment">pas très bien supporté</li>
<li class="fragment">accessible en <link> ou en header Link:</li>
<li class="fragment">des fois accessible via JS</li>
<aside class="notes">
<p>gros potentiel mais bcp de difficultés à surmonter
<p>utile pour des pages connues à l'avance : soit par analyse statistiques, soit sur des tunnels
<p>le dns-prefetch ne sert pas à grand chose si le preparser peut les découvrir tout seul
ou si les domaines arrivent tôt dans la page
</aside>
</section>
</section>
<section>
<section>
<h1>HTTP2 est arrrrivééé</h1>
<audio src="assets/zorro.mp3" controls data-autoplay>
<aside class="notes">
</aside>
</section>
<section>
<p class="quote">"we’re not replacing all of HTTP — the methods, status codes, and most of the headers you use today will be the same. Instead, we’re re-defining how it gets used “on the wire” so it’s more efficient, and so that it is more gentle to the Internet itself ...." — @mnot</p>
<br>
<div align="left" style="float:left; width:50%;margin-bottom:400px;margin-right:50px">
<img src="assets/http2_2.png">
<img src="assets/http2_1.png">
</div>
<ul>
<li>New binary framing</li>
<li>One connection (session)</li>
<li>Many parallel requests (streams)</li>
<li>Header compression</li>
<li>Stream prioritization</li>
<li>Server push</li>
</ul>
<aside class="notes">
<p>qu'est-ce que ça veut dire du coup ?
<p>une requête n'est pas obligé d'attendre une réponse pour se lancer
<p>le serveur (donc l'application) peut décider quelles resources sont prioritaires et les prioriser dans le flux
<p>le serveur peut envoyer des resources qui n'ont pas encore été requêtées (avec un mécanisme d'annulation possible si le navigateur l'a dans le cache
<p> au niveau des règles ça veut dire quoi ?
</aside>
</section>
<section>
<h2>Impact sur le waterfall</h2>
<img src="assets/http vs spdy.jpg">
</section>
<section>
<h2>Impacts sur les règles</h2>
<ul>
<li>suppression de la concaténation</li>
<ul>
<li>démarrage du parsing et de l'exécution plus tôt</li>
<li>optimisation du cache entre les pages</li>
</ul>
<li>suppression du sharding</li>
<ul>
<li>limite le nb de résolutions DNS</li>
<li>limite le slow start des nouvelles connexions</li>
</ul>
</ul>
<aside class="notes">
sauf si vous avez 25 fichiers JS
<p>sauf si vous avez besoin d'un domain statique
</aside>
</section>
<section>
<h2>Nouvelles fonctionnalités</h2>
<ul>
<li>Use server hints to help browser load faster vip resources</li>
<li>Server push is powerful when resources are not already in browser cache</li>
</ul>
<aside class="notes">
un peu l'équivalent du Link en header mais avec le contenu en plus !
</aside>
</section>
</section>
<section>
<section>
<h1>Budget webperf</h1>
<aside class="notes">
Consiste à se donner une limite sur le chargement de la page
Pas seulement sur la mesure mais sur le run
</aside>
</section>
<section>
<h2>Service workers</h2>
<ul>
<li class="fragment">Sorte de proxy in-page
<li class="fragment">Repose sur la nouvelle API Fetch et les Promises
<li class="fragment">Arrive sur les navigateurs doucement
<li class="fragment">Seul bémol : pas de timeout ou de cancel
</ul>
<aside class="notes">
</aside>
</section>
<section>
<h2>Timeout sync scripts</h2>
<ul>
<li class="fragment">Certains scripts sont bloquants (A/B test)
<li class="fragment">Possibilité de les timeboxer (<250ms)
<li class="fragment">Kameleoon, Optimizely
</ul>
<aside class="notes">
</aside>
</section>
</section>
<section>
<section>
<h1>Et les images</h1>
<img src="assets/repartition poids des pages.png">
<aside class="notes">
</aside>
</section>
<section>
<h2>Nouveaux formats</h2>
<h3>JPG 2000, JPG-XR, WebP</h3>
<img src="assets/repartition format image.png" class="fragment">
<p class="fragment">WTF ???</p>
<aside class="notes">
Franchement ? Aucun intérêt
<p>en fait, assez facile à comprendre, les imges ce n'est pas que pour le web.
<p>Si certains n'ont pas les outils mour les lire aucun intérêt (l'expérience de FB sur le WebP est significative)
<p>Du coup il reste les anciens formats
</aside>
</section>
<section>
<h2>JPG</h2>
<ul>
<li>MozJPEG3.0</li>
<li>Compression avancée
<li>Meilleure qualité sur les dessins et les images Retina
</ul>
<aside class="notes">
Eh oui il y a encore du mouvement dans ce format !!
<p>notamment avec MozJpg
</aside>
</section>
<section data-transition="fast">
<h2>PNG</h2>
<img class="" src="assets/standards.png">
</section>
<section data-transition="fast">
<h2>JPG standard 1</h2>
<img class="" src="assets/standards1.jpg">
</section>
<section data-transition="fast">
<h2>JPG standard 2</h2>
<img class="" src="assets/standards2.jpg">
</section>
<section data-transition="fast">
<h2>MozJPEG</h2>
<img class="" src="assets/standards3.jpg">
</section>
<section>
<h2>GIF</h2>
Un seul outil : LossyGif (fork de GifSicle)
<ul>
<li>Possibilité de les transformer en PNG s'ils ne sont pas animés</li>
<li>Possibilité de les optimiser fortement sinon</li>
</ul>
<aside class="notes">
C'est bête mais on fait encore plein d'animations avec des GIf sur certains sites
<p>J'en ai même vu une de 13Mo sur le site d'Ikea il y a quelques semaines ...
<p>même pas obligé de changer les extension, c'est comme pour les WebP, il suffit de renvoyer le bon content-type
</aside>
</section>
</section>
<section>
<section>
<h1>Nouvelles métriques</h1>
<aside class="notes">
</aside>
</section>
<section>
<h2>Le load time c'est mort</h2>
<div align="left" style="width:50%;float:left;margin:0 50px 300px 0">
<img src="assets/correlation metrics load time.png">
<img src="assets/correlation metrics render.png">
</div>
<ul class="fragment">
<li>Speed Index
<li>Start Render
<li class="fragment">Disponible en RUM !
</ul>
<aside class="notes">
load time : exemple de la page blanche
Speed index mesure la vitesse de remplissage de la page
reste à améliorer mais c'est déjà ça
</aside>
</section>
<section data-transition="fast">
<h2>Speed Index</h2>
<img src="assets/speedindex1.png">
</section>
<section data-transition="fast">
<h2>Speed Index</h2>
<img src="assets/speedindex2.png">
</section>
<section data-transition="fast">
<h2>Speed Index</h2>
<img src="assets/speedindex3.png">
</section>
</section>
<section>
<section>
<h1>Conclusion</h1>
<aside class="notes">
On a encore du job pour un moment !
</aside>
</section>
<section>
<h2>ce qui est toujours d'actualité</h2>
<ul>
<li class="fragment">compression des pages : gzip, images
<li class="fragment">cache (expires, etags si bien configuré)
<li class="fragment">CDN
<li class="fragment">CSS on top / deferJS
</ul>
<aside class="notes">
Même dans la compression y'a des nouvelles techniques (SDCH)
</aside>
</section>
<section>
<h2>ce qui est à mettre en place</h2>
<ul>
<li class="fragment">chargement progressif
<li class="fragment">asynchrone
<li class="fragment">avec le moins de requetes DNS possible
<li class="fragment">et avec un budget webperf
</ul>
<aside class="notes">
</aside>
</section>
<section>
<h2>A prévoir</h2>
<ul>
<li class="fragment">suppression sharding
<li class="fragment">suppression concaténation
<li class="fragment">critical push
<li class="fragment">priorisation des éléments ATF
</ul>
<aside class="notes">
</aside>
</section>
</section>
<section data-background="assets/questions.jpg">
</section>
<section>
<h2>Sources / Links</h2>
<ul style="font-size:0.5em">
<li><a href="http://calendar.perfplanet.com/2014/mozjpeg-3-0/">MozJPEG 3.0</a>
<li><a href="http://httparchive.org/trends.php?s=All&minlabel=Jun+1+2011&maxlabel=May+15+2015#bytesTotal&reqTotal">HTTPArchive Trends</a>
<li><a href="https://justmarkup.com/log/2015/02/02/prioritize-loading-of-background-images/">Prioritize loading of background images</a>
<li><a href="http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html">Async vs Defer</a>
<li><a href="http://www.ravelrumba.com/blog/asynchronous-ad-loading-iframes/">Async ad loading iframes</a>
<li><a href="http://www.lognormal.com/blog/2012/12/12/the-script-loader-pattern/">Script loading patterns</a>
<li><a href="http://www.filamentgroup.com/lab/font-events.html">Font loading</a>
<li><a href="http://www.filamentgroup.com/lab/compressive-images.html">Compressive image</a>
<li><a href="https://pornel.net/lossygif">LossyGif</a>
<li><a href="https://github.com/pocketjoso/penthouse">Critical CSS generator</a>
<li><a href="https://gist.github.com/PaulKinlan/6284142">Critical CSS bookmarklet</a>
<li><a href="http://w3c.github.io/preload/">Preload</a>
<li><a href="https://github.com/filamentgroup/loadCSS">Async CSS loader</a>
<li><a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=27303"><code><link></code> in <code><body></code> (hack)</a>
</ul>
</section>
</div>
<div class="icon-bar" style="width:100%">
<a class="image" href="http://www.fasterize.com" style="font-size:20px; font-family: AvenirNext-Medium,Arial,sans-serif; color: #FFF;"><img src="assets/fasterize_logo_mini_blanc.svg" class="plain"/><span class="logo_title">fasterize</span></a>
<div align="right" style="float:right">
<a class="image" href="https://twitter.com/stefounet"><span>twitter</span></a>|
<a class="image" href="mailto:info@fasterize.com"><span>email</span></a>|
<a class="image" href="http://blog.fasterize.com/"><span>blog</span></a>
</div>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
slideNumber: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/print-pdf/print-pdf.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>