forked from cmda-minor-web/project-2-1819
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
206 lines (198 loc) · 7.8 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>presentation</title>
<link rel="stylesheet" href="pres.css" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div class="grid-container">
<section>
<img class="big" src="./assets/0.auditbeforecriticalcss.png">
</section>
<section>
<h1>The assignment</h1>
<h3>
Optimize the website volkswagen.nl on a better performance and accessibility.
</h3>
<p>By Marcel Fleuren</p>
</section>
<section>
<img class="small" src="./presAssets/0.beforecriticalcss.png">
</section>
<section>
<h2>The Problem</h2>
<p>
When loading the website on my iphone 6, the page takes about 12 to 15 seconds to display something
useful. I, as a user
of the site, was pretty annoyed it took so long to load in the website..
</p>
</section>
<section>
<div style="width:100%;height:0;padding-bottom:52%;position:relative;"><iframe
src="https://giphy.com/embed/oEwHb3zl2pumY" width="100%" height="100%" style="position:absolute"
frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>
</section>
<section>
<h2>The Solution</h2>
<p>
Reduce the time of the first meaningful paint, first contentful paint and thus, time to interactive.
While also giving the user a better sense of percieved performance.
</p>
</section>
<section>
<ul>
<li>Critical Css and font-face: swap</li>
<li>Compression</li>
<li>Intersection Observer</li>
<li>Image optimisation</li>
<li>Preloading fonts</li>
<li>Caching</li>
</ul>
</section>
<section>
</section>
<section>
<h2>Critical Css and font-face: swap</h2>
<h3>and the critical render path</h3>
</section>
<section>
</section>
<section>
<h3>
Deciding which css has to be loaded to show content the 'above the fold' content is key in optimizing
the critical
render path.
</h3>
</section>
<section>
</section>
<section>
<div style="width:100%;height:0;padding-bottom:71%;position:relative;"><iframe
src="https://giphy.com/embed/YhRUf5E5NLGAE" width="100%" height="100%" style="position:absolute"
frameBorder="0" class="giphy-embed big" allowFullScreen></iframe></div>
</section>
<section>
<h3>Font-face:swap</h3>
<p>Instructs the browser to use the fallback font to display the text until the custom font has fully
downloaded. This is
also known as a "flash of unstyled text".</p>
</section>
<section>
<img class="big" src="./presAssets/1.auditaftercriticalcss.png">
</section>
<section>
<h3>first contentful paint went from 3.2s to 1.4s</h3>
</section>
<section>
<h3>Compression</h3>
<p>There are different types of compression, consider multiple variants.</p>
</section>
<section>
<h3>Brotli</h3>
<h3>Gzip</h3>
</section>
<section>
<h3>Intersection observer</h3>
</section>
<section>
<h3>For true lazy loading</h3>
<p>improvement of percieved performance</p>
<p>With a proper lazy loading effect, the images get fetched only if the images are in the viewport.
the intersection observer api in the browser lets us execute proper lazy loading functions. I've
implemented the lazy
loading function on images below the fold. This reduced only the Time to Interactive.</p>
</section>
<section>
<img class="big" src="./presAssets/3.afterintersectionobserverlazyloading.png">
</section>
<section>
<p>reduction Time to interactive of 5s</p>
</section>
<section>
<h3>image optimisation to next gen format</h3>
</section>
<section>
<p>
One problem on the current Volkswagen site is that the images are not in a next-gen format and are not
properly sized.
To get extra performance points, the images have to properly sized for the website.
</p>
</section>
<section>
<code>
gulp.task('images', function () {
return gulp.src('./public/imagesOld/**/*')
.pipe(imagemin({ progressive: true }))
.pipe(gulp.dest('./public/images/'))
.pipe(webp())
.pipe(gulp.dest('./public/images/'))
});
</code>
</section>
<section>
<h3>Gulp!</h3>
</section>
<section>
<img class="big" src="./presAssets/4.afterimagenextgenformat.png">
</section>
<section>
<p>reduced time to interactive and estimated input latency</p>
</section>
<section>
<h3>Preloading fonts</h3>
<p>By using the Preload on a
link tag, we can tell the browser that we definitly need to start download webfonts earlier on the page
rendering
than the
default let us.</p>
</section>
<section>
</section>
<section>
<img class="big" src="./presAssets/5.afterpreloadingfonts.png">
</section>
<section>
<p>slight increase in the first contentful paint. The rest decreasedy</p>
</section>
<section>
<h3>HTTP Caching</h3>
<p>Every time the server sends a response we have to include the correct HTTP_header with information about
how long the
browser has to store the data in the browsers's cache. The http-header contains information about the
type of content,
the length and some instructions about the cache memory.</p>
</section>
<section>
</section>
<section>
<code>
app.use((req, res, next) => {
res.setHeader('Cache-Control', 'max-age=' + 365 * 24 * 60 * 60); next();
});
</code>
</section>
<section>
<p>Caching only has real effect after the first page load. But it will make loading the page much faster for
returning
visitors.</p>
</section>
<section>
<img class="big" src="./presAssets/7.auditaftercaching.png">
</section>
<section>
<h3>Http-caching</h3>
<p>After the needed requests are done, the first contentful paint will be 0s</p>
</section>
<section>
<img class="big" src="./presAssets/chart.png">
</section>
<section>
<h3>The results</h3>
<p>After the needed requests are done, the first contentful paint will be 0s</p>
</section>
</div>
</body>
</html>