 |
requestmetrics.com.rss.xml - sfeed_tests - sfeed tests and RSS and Atom files |
 |
git clone git://git.codemadness.org/sfeed_tests |
 |
Log |
|
Files |
|
Refs |
|
README |
|
LICENSE |
|
--- |
|
requestmetrics.com.rss.xml (187688B) |
|
--- |
|
1 <?xml version="1.0" encoding="UTF-8"?> |
|
2 <rss version="2.0" |
|
3 xmlns:atom="http://www.w3.org/2005/Atom" |
|
4 xmlns:content="http://purl.org/rss/1.0/modules/content/" |
|
5 xmlns:media="http://search.yahoo.com/mrss/" |
|
6 xmlns:webfeeds="http://webfeeds.org/rss/1.0"> |
|
7 <channel> |
|
8 <title>Web Performance | Request Metrics</title> |
|
9 <link rel="alternate">https://requestmetrics.com/web-performance/</l… |
|
10 <atom:link rel="self" href="https://requestmetrics.com/web-performan… |
|
11 <description>Learn about performance on the web with tutorials on th… |
|
12 <category>Web Performance</category> |
|
13 <image> |
|
14 <url>https://requestmetrics.com/assets/images/request_metrics_logo… |
|
15 <title>Web Performance | Request Metrics</title> |
|
16 <link>https://requestmetrics.com/web-performance/</link> |
|
17 </image> |
|
18 <webfeeds:cover image="https://requestmetrics.com/assets/images/shar… |
|
19 <webfeeds:icon>https://requestmetrics.com/assets/images/favicon/appl… |
|
20 <webfeeds:logo>https://requestmetrics.com/assets/images/request_metr… |
|
21 <webfeeds:accentColor>4879D9</webfeeds:accentColor> |
|
22 <webfeeds:related layout="card" target="browser"/> |
|
23 <webfeeds:analytics id="UA-42539664-5" engine="GoogleAnalytics" /> |
|
24 <language>en-us</language> |
|
25 <managingEditor>[email protected] (Request Metrics)</managing… |
|
26 <webMaster>[email protected] (Request Metrics)</webMaster> |
|
27 <copyright>2019-2021 TrackJS LLC. All rights reserved.</copyright> |
|
28 <pubDate>Wed, 15 Dec 2021 15:23:05 +0000</pubDate> |
|
29 <lastBuildDate>Wed, 15 Dec 2021 15:23:05 +0000</lastBuildDate> |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 <item> |
|
36 <title>HTTP/3 is Fast</title> |
|
37 <link>https://requestmetrics.com/web-performance/http3-is-fast</li… |
|
38 <guid isPermaLink="true">https://requestmetrics.com/web-performanc… |
|
39 <description> |
|
40 HTTP/3 is here, and it’s a big deal for web performance. See just how… |
|
41 |
|
42 </description> |
|
43 <media:content url="https://requestmetrics.com/assets/images/webpe… |
|
44 <enclosure url="https://requestmetrics.com/assets/images/webperf/h… |
|
45 <content:encoded><![CDATA[ |
|
46 <div><img src="https://requestmetrics.com/assets/images/webperf/… |
|
47 |
|
48 <p>HTTP/3 is here, and it’s a big deal for web performance. See just … |
|
49 |
|
50 <!--more--> |
|
51 |
|
52 <p>Wait, wait, wait, what happened to HTTP/2? Wasn’t that all the rag… |
|
53 |
|
54 <p>Ok, but does HTTP/3 actually make things faster? It sure does, and w… |
|
55 |
|
56 <h2 id="a-quick-preview">A Quick Preview</h2> |
|
57 <p>Before we get too deep in the details, let’s look at a quick previe… |
|
58 |
|
59 <p>You can clearly see the performance improvement as each new version o… |
|
60 |
|
61 <figure class="wide flex"> |
|
62 <div class="image-wrap-3x wide-wrap"> |
|
63 <img src="https://requestmetrics.com/assets/images/webperf/http3/ny-… |
|
64 </div> |
|
65 </figure> |
|
66 |
|
67 <p>And the changes become even more pronounced when requesting resources… |
|
68 |
|
69 <p>But before we can get fully in to all the HTTP/3 benchmark minutiae, … |
|
70 |
|
71 <h2 id="a-brief-history-of-http">A Brief History of HTTP</h2> |
|
72 |
|
73 <p>The <a href="https://datatracker.ietf.org/doc/html/rfc1945">first off… |
|
74 |
|
75 <blockquote> |
|
76 <p>However, HTTP/1.0 does not sufficiently take into consideration the… |
|
77 </blockquote> |
|
78 |
|
79 <p>It would be 18 more years before a new version of HTTP was released. … |
|
80 |
|
81 <h3 id="one-file-at-a-time">One File at a Time</h3> |
|
82 <p>If a web page requires 10 javascript files, the web browser needs to … |
|
83 |
|
84 <p>To work around this, browsers can open multiple TCP connections to th… |
|
85 |
|
86 <h3 id="multiplexing-with-http2">Multiplexing with HTTP/2</h3> |
|
87 <p>HTTP/2’s big selling point was multiplexing. It fixed <em>applicati… |
|
88 |
|
89 <p>Unfortunately HTTP/2 still suffers from a head-of-line blocking issue… |
|
90 |
|
91 <blockquote> |
|
92 <p>However, because the parallel nature of HTTP/2’s multiplexing is … |
|
93 </blockquote> |
|
94 |
|
95 <p>In fact, in high packet loss environments, HTTP/1.1 performs better b… |
|
96 |
|
97 <h3 id="true-multiplexing-with-http3-and-quic">True Multiplexing with HT… |
|
98 <p>Enter HTTP/3. The major difference between HTTP/2 and HTTP/3 is whic… |
|
99 |
|
100 <figure class="wide"> |
|
101 <img src="https://requestmetrics.com/assets/images/webperf/http3/udp-j… |
|
102 </figure> |
|
103 |
|
104 <blockquote> |
|
105 <p>The QUIC transport protocol incorporates stream multiplexing and pe… |
|
106 </blockquote> |
|
107 |
|
108 <p>And improve the performance of HTTP it does! <a href="#so-how-fast-i… |
|
109 |
|
110 <h2 id="benchmarking-http3">Benchmarking HTTP/3</h2> |
|
111 <p>To see just what sort of performance difference HTTP/3 makes, a bench… |
|
112 <h3 id="the-html">The HTML</h3> |
|
113 <p>In order to more closely approximate actual usage, the test setup con… |
|
114 |
|
115 <ul> |
|
116 <li>Small Site |
|
117 <ul> |
|
118 <li><strong>10</strong> JS files from 2kb to 100kb</li> |
|
119 <li><strong>10</strong> images from 1kb to 50kb</li> |
|
120 <li>Total payload size <strong>600kb</strong>, 20 blocking resourc… |
|
121 </ul> |
|
122 </li> |
|
123 <li>Content Site |
|
124 <ul> |
|
125 <li><strong>50</strong> JS files from 2kb to 1mb</li> |
|
126 <li><strong>55</strong> images ranging in size from 1kb to 1mb.</l… |
|
127 <li>Total payload size <strong>10MB</strong>, 105 resources total … |
|
128 </ul> |
|
129 </li> |
|
130 <li>Single Page Application |
|
131 <ul> |
|
132 <li><strong>85</strong> JS files from 2kb to 1mb</li> |
|
133 <li><strong>30</strong> images ranging in size from 1kb to 50kb.</… |
|
134 <li>Total payload size <strong>15MB</strong>, 115 resources total … |
|
135 </ul> |
|
136 </li> |
|
137 </ul> |
|
138 |
|
139 <h3 id="the-server">The Server</h3> |
|
140 <p><a href="https://caddyserver.com/">Caddy</a> was used to serve all as… |
|
141 |
|
142 <ul> |
|
143 <li>All responses were served with <code class="language-plaintext hig… |
|
144 <li>TLS 1.2 was used for HTTP/1.1 and HTTP/2</li> |
|
145 <li><a href="https://www.rfc-editor.org/rfc/rfc9001.html">TLS 1.3</a> … |
|
146 <li><a href="https://www.rfc-editor.org/rfc/rfc9001.html#name-0-rtt">0… |
|
147 </ul> |
|
148 |
|
149 <h3 id="the-locations">The Locations</h3> |
|
150 <p>The tests were conducted from my computer in Minnesota, to three sepa… |
|
151 |
|
152 <ul> |
|
153 <li>New York, USA</li> |
|
154 <li>London, England</li> |
|
155 <li>Bangalore, India</li> |
|
156 </ul> |
|
157 |
|
158 <h3 id="the-client">The Client</h3> |
|
159 <p>I automated the browser to request the same page 20 times in a row, w… |
|
160 |
|
161 <h2 id="so-how-fast-is-http3">So How Fast Is HTTP/3?</h2> |
|
162 <h3 id="new-york-usa">New York, USA</h3> |
|
163 <p>Here’s the response times of HTTP/2 vs. HTTP/3 when requesting the … |
|
164 |
|
165 <figure class="wide"> |
|
166 <div class="wide-wrap"> |
|
167 <img src="https://requestmetrics.com/assets/images/webperf/http3/ny-… |
|
168 </div> |
|
169 </figure> |
|
170 |
|
171 <p>HTTP/3 is:</p> |
|
172 <ul> |
|
173 <li><strong>200ms</strong> faster for the Small Site</li> |
|
174 <li><strong>325ms</strong> faster for the Content Site</li> |
|
175 <li><strong>300ms</strong> faster for the Single Page Application</li> |
|
176 </ul> |
|
177 |
|
178 <p>The distance from Minnesota to New York is 1,000 miles, which is pret… |
|
179 |
|
180 <h3 id="london-england">London, England</h3> |
|
181 <p>I’ve included the HTTP/1.1 benchmarking run for London in the resul… |
|
182 |
|
183 <figure class="wide"> |
|
184 <div class="wide-wrap"> |
|
185 <img src="https://requestmetrics.com/assets/images/webperf/http3/lon… |
|
186 </div> |
|
187 </figure> |
|
188 |
|
189 <p>As you can see, the speed increase is even more pronounced when great… |
|
190 <ul> |
|
191 <li><strong>600ms</strong> faster for the Small Site (<strong>3x</stro… |
|
192 <li><strong>1200ms</strong> faster for the Content Site (over <strong>… |
|
193 <li><strong>1000ms</strong> faster for the Single Page Application (ov… |
|
194 </ul> |
|
195 |
|
196 <h3 id="bangalore-india">Bangalore, India</h3> |
|
197 <p>The performance improvement with HTTP/3 is extremely pronounced when … |
|
198 |
|
199 <figure class="wide"> |
|
200 <div class="wide-wrap"> |
|
201 <img src="https://requestmetrics.com/assets/images/webperf/http3/ind… |
|
202 </div> |
|
203 </figure> |
|
204 |
|
205 <p>HTTP/3 continues to pull ahead when larger geographies and more netwo… |
|
206 |
|
207 <p>In every case HTTP/3 was faster than its predecessor!</p> |
|
208 |
|
209 <h3 id="why-is-http3-so-much-faster">Why is HTTP/3 so Much Faster?</h3> |
|
210 |
|
211 <h4 id="real-multiplexing">Real Multiplexing</h4> |
|
212 <p>The true multiplexed nature of HTTP/3 means that there is no Head-of-… |
|
213 |
|
214 <h4 id="0-rtt-is-a-game-changer">0-RTT Is a Game Changer</h4> |
|
215 <p>Additionally, HTTP/3 supports <a href="https://www.rfc-editor.org/rfc… |
|
216 |
|
217 <blockquote> |
|
218 <p>The 0-RTT feature in QUIC allows a client to send application data … |
|
219 </blockquote> |
|
220 |
|
221 <p>However, 0-RTT should not be blindly enabled. There are some <a href… |
|
222 |
|
223 <blockquote> |
|
224 <p>The security properties for 0-RTT data are weaker than those for ot… |
|
225 <ol> |
|
226 <li>This data is not forward secret, as it is encrypted solely under… |
|
227 <li>There are no guarantees of non-replay between connections.</li> |
|
228 </ol> |
|
229 </blockquote> |
|
230 |
|
231 <h2 id="can-i-use-http3-today">Can I Use HTTP/3 Today?</h2> |
|
232 <p>Maybe! While the protocol is currently in <em>Internet-Draft</em> st… |
|
233 |
|
234 <p>I specifically chose <strong>Caddy</strong> for these benchmarks beca… |
|
235 |
|
236 <p>NGINX also has experimental support and is <a href="https://www.nginx… |
|
237 |
|
238 <p>The big tech players like Google and Facebook are serving their traff… |
|
239 |
|
240 <p>For those folks stuck in the Windows ecosystem, supposedly Windows Se… |
|
241 |
|
242 <h2 id="conclusion">Conclusion</h2> |
|
243 <p>HTTP/3 can make a big difference in how users experience your site. … |
|
244 |
|
245 |
|
246 ]]></content:encoded> |
|
247 <pubDate>Mon, 29 Nov 2021 11:00:00 +0000</pubDate> |
|
248 <author>[email protected] (Request Metrics)</author> |
|
249 </item> |
|
250 |
|
251 |
|
252 <item> |
|
253 <title>Using HTTP Caching: 2021 Guide</title> |
|
254 <link>https://requestmetrics.com/web-performance/http-caching</lin… |
|
255 <guid isPermaLink="true">https://requestmetrics.com/web-performanc… |
|
256 <description>The fastest website is the website that is already lo… |
|
257 |
|
258 </description> |
|
259 <media:content url="https://requestmetrics.com/assets/images/webpe… |
|
260 <enclosure url="https://requestmetrics.com/assets/images/webperf/h… |
|
261 <content:encoded><![CDATA[ |
|
262 <div><img src="https://requestmetrics.com/assets/images/webperf/… |
|
263 <p>The fastest website is the website that is already loaded, an… |
|
264 |
|
265 <!--more--> |
|
266 |
|
267 <p>HTTP caching is controlled by headers returned as part of the server … |
|
268 |
|
269 <h2 id="how-to-use-the-browser-cache">How to use the Browser Cache</h2> |
|
270 <p>The browser calculates “Cache Freshness” using headers in the HTT… |
|
271 |
|
272 <h3 id="the-cache-control-header">The <code class="language-plaintext hi… |
|
273 <p>The <code class="language-plaintext highlighter-rouge">Cache-Control<… |
|
274 |
|
275 <figure class="code oneliner" id="code-79"> |
|
276 <div class="code-wrap"> |
|
277 <pre class="prettyprint lang-bsh"> |
|
278 # Cache this response for 10 minutes (600 seconds). |
|
279 Cache-Control: max-age=600</pre> |
|
280 <!-- <button type="button" class="btn copy-button yes-js"> |
|
281 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
282 <span class="label">Copy</span> |
|
283 </button> --> |
|
284 |
|
285 </div> |
|
286 </figure> |
|
287 |
|
288 <h3 id="the-expires-header">The <code class="language-plaintext highligh… |
|
289 <p>The <code class="language-plaintext highlighter-rouge">Expires</code>… |
|
290 |
|
291 <figure class="code oneliner" id="code-147"> |
|
292 <div class="code-wrap"> |
|
293 <pre class="prettyprint lang-bsh"> |
|
294 # This response can be cached for 1 hour (Expires - Date == freshness). |
|
295 Expires: Tue, 09 Nov 2021 21:09:28 GMT |
|
296 Date: Tue, 09 Nov 2021 20:09:28 GMT</pre> |
|
297 <!-- <button type="button" class="btn copy-button yes-js"> |
|
298 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
299 <span class="label">Copy</span> |
|
300 </button> --> |
|
301 |
|
302 </div> |
|
303 </figure> |
|
304 |
|
305 <h2 id="the-browsers-automatic-caching">The Browser’s Automatic Cachin… |
|
306 <p>Even if you don’t use the <code class="language-plaintext highlight… |
|
307 |
|
308 <p>One method that browser’s use is to assume a resource is “fresh�… |
|
309 |
|
310 <figure class="code oneliner" id="code-179"> |
|
311 <div class="code-wrap"> |
|
312 <pre class="prettyprint lang-bsh"> |
|
313 # Freshness = 2 hours (20 hours since last modified) |
|
314 # (Date - Last-Modified) * 10% == freshness |
|
315 Last-Modified: Tue, 09 Nov 2021 02:00:00 GMT |
|
316 Date: Tue, 09 Nov 2021 22:00:00 GMT</pre> |
|
317 <!-- <button type="button" class="btn copy-button yes-js"> |
|
318 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
319 <span class="label">Copy</span> |
|
320 </button> --> |
|
321 |
|
322 </div> |
|
323 </figure> |
|
324 |
|
325 <!-- class="wide"> |
|
326 <div class="wrap callout left flex"> |
|
327 <div class="picture"> |
|
328 <img loading="lazy" class="lazyload" src="https://requestmetrics.c… |
|
329 https://requestmetrics.com/assets/images/illustrati… |
|
330 </div> |
|
331 <div class="blurb"> |
|
332 <h2>Check Your Caching Headers!</h2> |
|
333 <p> |
|
334 Check how your caching is configured right now! We made a neat t… |
|
335 </p> |
|
336 <div class="flex cta-buttons"> |
|
337 <a class="btn btn-big btn-grey" href="/tools/http-cache-checker"> |
|
338 Test My Cache |
|
339 </a> |
|
340 </div> |
|
341 </div> |
|
342 </div> |
|
343 --> |
|
344 |
|
345 <h2 id="handling-expired-resources">Handling Expired Resources</h2> |
|
346 |
|
347 <p>What happens when a resource “expires”? This is referred to as a … |
|
348 |
|
349 <p>There are a couple ways this validation can happen, depending on whic… |
|
350 |
|
351 <h3 id="validating-with-the-etag-header">Validating With the <code class… |
|
352 <p>The <code class="language-plaintext highlighter-rouge">ETag</code> he… |
|
353 |
|
354 <p>When a resource expires that had an ETag, the browser will send a val… |
|
355 |
|
356 <figure class="code " id="code-172"> |
|
357 <div class="code-wrap"> |
|
358 <pre class="prettyprint lang-bsh"> |
|
359 # In original resource response headers: |
|
360 ETag: "123abc987654" |
|
361 |
|
362 # Browser sends in the validation request headers: |
|
363 If-None-Match: "123abc987654" |
|
364 </pre> |
|
365 <!-- <button type="button" class="btn copy-button yes-js"> |
|
366 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
367 <span class="label">Copy</span> |
|
368 </button> --> |
|
369 |
|
370 <figcaption><a href="#code-172">Cache Validation Using ETag</a><… |
|
371 |
|
372 </div> |
|
373 </figure> |
|
374 |
|
375 <h3 id="validating-with-the-modified-date-header">Validating With the <c… |
|
376 <p>When an ETag is unavailable, web servers may send a <code class="lang… |
|
377 |
|
378 <p>The server returns an empty 304 (Not Modified) response if the conten… |
|
379 |
|
380 <figure class="code " id="code-224"> |
|
381 <div class="code-wrap"> |
|
382 <pre class="prettyprint lang-bsh"> |
|
383 # In original resource response headers: |
|
384 Modified-Date: Tue, 09 Nov 2021 20:00:00 GMT |
|
385 |
|
386 # Browser sends in the validation request headers: |
|
387 If-Modified-Since: Tue, 09 Nov 2021 20:00:00 GMT |
|
388 </pre> |
|
389 <!-- <button type="button" class="btn copy-button yes-js"> |
|
390 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
391 <span class="label">Copy</span> |
|
392 </button> --> |
|
393 |
|
394 <figcaption><a href="#code-224">Cache Validation Using Modified-… |
|
395 |
|
396 </div> |
|
397 </figure> |
|
398 |
|
399 <h3 id="no-validation">No Validation</h3> |
|
400 <p>If the original resource had neither <code class="language-plaintext … |
|
401 |
|
402 <h2 id="busting-the-browsers-cache">Busting the Browsers Cache</h2> |
|
403 <p>When something changes, such as a new image, refreshed session, or an… |
|
404 |
|
405 <h3 id="1-changing-the-url-to-the-resource">1. Changing the URL to the R… |
|
406 |
|
407 <p>The most common cache busting strategy is just to change the name of … |
|
408 |
|
409 <figure class="code " id="code-58"> |
|
410 <div class="code-wrap"> |
|
411 <pre class="prettyprint lang-bsh">scripts.e7686eaf.min.js</pre> |
|
412 <!-- <button type="button" class="btn copy-button yes-js"> |
|
413 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
414 <span class="label">Copy</span> |
|
415 </button> --> |
|
416 |
|
417 <figcaption><a href="#code-58">Example filename ready to be bust… |
|
418 |
|
419 </div> |
|
420 </figure> |
|
421 |
|
422 <h3 id="2-adding-a-query-parameter">2. Adding a Query Parameter</h3> |
|
423 |
|
424 <p>If you can’t change the name of your resources, you can add a query… |
|
425 |
|
426 <figure class="code " id="code-62"> |
|
427 <div class="code-wrap"> |
|
428 <pre class="prettyprint lang-bsh">/my/images.png?v=2021119</pre> |
|
429 <!-- <button type="button" class="btn copy-button yes-js"> |
|
430 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
431 <span class="label">Copy</span> |
|
432 </button> --> |
|
433 |
|
434 <figcaption><a href="#code-62">Example querystring ready to be b… |
|
435 |
|
436 </div> |
|
437 </figure> |
|
438 |
|
439 <p>If you have a look at the source of our page here, you’ll see what … |
|
440 |
|
441 <h3 id="3-using-the-vary-header">3. Using the <code class="language-plai… |
|
442 |
|
443 <p>The <code class="language-plaintext highlighter-rouge">Vary</code> he… |
|
444 |
|
445 <p>The browser will never be able to use its cached responses if the hea… |
|
446 |
|
447 <figure class="code " id="code-251"> |
|
448 <div class="code-wrap"> |
|
449 <pre class="prettyprint lang-bsh"> |
|
450 # Good: A common value that should not impact caching |
|
451 # Caches gzip vs non-gzip responses separately |
|
452 Vary: Accept-Encoding |
|
453 |
|
454 # Bad: Probably not what you want. |
|
455 # Any change to X-App-Version will invalidate your cache! |
|
456 Vary: X-App-Version |
|
457 </pre> |
|
458 <!-- <button type="button" class="btn copy-button yes-js"> |
|
459 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
460 <span class="label">Copy</span> |
|
461 </button> --> |
|
462 |
|
463 <figcaption><a href="#code-251">Vary Examples</a></figcaption> |
|
464 |
|
465 </div> |
|
466 </figure> |
|
467 |
|
468 <h2 id="http-caching-recipes">HTTP Caching Recipes</h2> |
|
469 <p>Different resources are cached differently. Here’s how to accomplis… |
|
470 |
|
471 <h3 id="1-never-cache-anything">1. Never Cache Anything!</h3> |
|
472 <p>Some resources are dynamic or time sensitive and should never be cach… |
|
473 |
|
474 <figure class="code oneliner" id="code-23"> |
|
475 <div class="code-wrap"> |
|
476 <pre class="prettyprint lang-bsh">Cache-Control: no-store</pre> |
|
477 <!-- <button type="button" class="btn copy-button yes-js"> |
|
478 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
479 <span class="label">Copy</span> |
|
480 </button> --> |
|
481 |
|
482 </div> |
|
483 </figure> |
|
484 |
|
485 <h3 id="2-cache-but-always-revalidate">2. Cache, But Always Revalidate</… |
|
486 <p>Some resources are cacheable, but change often enough that they shoul… |
|
487 |
|
488 <figure class="code oneliner" id="code-97"> |
|
489 <div class="code-wrap"> |
|
490 <pre class="prettyprint lang-bsh"> |
|
491 Cache-Control: no-cache |
|
492 |
|
493 # no-cache is equivalent to: |
|
494 Cache-Control: max-age=0, must-revalidate |
|
495 </pre> |
|
496 <!-- <button type="button" class="btn copy-button yes-js"> |
|
497 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
498 <span class="label">Copy</span> |
|
499 </button> --> |
|
500 |
|
501 </div> |
|
502 </figure> |
|
503 |
|
504 <h3 id="3-cache-for-a-day">3. Cache For A Day</h3> |
|
505 <p>Some resources change, but do so slowly. Setting a “just right” <… |
|
506 |
|
507 <figure class="code oneliner" id="code-28"> |
|
508 <div class="code-wrap"> |
|
509 <pre class="prettyprint lang-bsh">Cache-Control: max-age=86400</… |
|
510 <!-- <button type="button" class="btn copy-button yes-js"> |
|
511 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
512 <span class="label">Copy</span> |
|
513 </button> --> |
|
514 |
|
515 </div> |
|
516 </figure> |
|
517 |
|
518 <h3 id="4-cache-forever">4. Cache “Forever”</h3> |
|
519 <p>You probably don’t want to do this unless you are using a cache-bus… |
|
520 |
|
521 <figure class="code oneliner" id="code-65"> |
|
522 <div class="code-wrap"> |
|
523 <pre class="prettyprint lang-bsh"> |
|
524 # Cache this resource for a year |
|
525 Cache-Control: max-age=31536000</pre> |
|
526 <!-- <button type="button" class="btn copy-button yes-js"> |
|
527 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
528 <span class="label">Copy</span> |
|
529 </button> --> |
|
530 |
|
531 </div> |
|
532 </figure> |
|
533 |
|
534 <hr /> |
|
535 |
|
536 <h2 id="conclusion">Conclusion</h2> |
|
537 <p>That’s it! You can use these headers and recipes to greatly acceler… |
|
538 |
|
539 ]]></content:encoded> |
|
540 <pubDate>Fri, 19 Nov 2021 08:00:00 +0000</pubDate> |
|
541 <author>[email protected] (Request Metrics)</author> |
|
542 </item> |
|
543 |
|
544 |
|
545 <item> |
|
546 <title>Synthetic Testing and Real User Monitoring</title> |
|
547 <link>https://requestmetrics.com/web-performance/synthetic-testing… |
|
548 <guid isPermaLink="true">https://requestmetrics.com/web-performanc… |
|
549 <description> |
|
550 Synthetic Testing and Real User Monitoring are the most important tools … |
|
551 |
|
552 </description> |
|
553 <media:content url="https://requestmetrics.com/assets/images/webpe… |
|
554 <enclosure url="https://requestmetrics.com/assets/images/webperf/s… |
|
555 <content:encoded><![CDATA[ |
|
556 <div><img src="https://requestmetrics.com/assets/images/webperf/… |
|
557 |
|
558 <p>Synthetic Testing and Real User Monitoring are the most important too… |
|
559 |
|
560 <!--more--> |
|
561 |
|
562 <p>Let’s look at these tools, what they measure, and when to use them.… |
|
563 |
|
564 <h2 id="synthetic-testing">Synthetic Testing</h2> |
|
565 <p><em>Synthetic Testing</em> measures the performance of a website unde… |
|
566 |
|
567 <p>For a Synthetic Test to be accurate and valuable, you need to know th… |
|
568 |
|
569 <p>The internet is a big and diverse place, and developers don’t alway… |
|
570 |
|
571 <figure class=""> |
|
572 <img src="https://requestmetrics.com/assets/images/webperf/synthetic-t… |
|
573 </figure> |
|
574 |
|
575 <p>Plus, you likely have <em>more than one kind of user</em> that should… |
|
576 |
|
577 <p>The biggest benefit of a this kind of tool is that you can <a href="h… |
|
578 |
|
579 <p>The test will be flawed, and that’s okay because it will give you a… |
|
580 |
|
581 <h2 id="real-user-monitoring">Real User Monitoring</h2> |
|
582 <p>Real User Monitoring is just that: <strong>real</strong>. Real User M… |
|
583 |
|
584 <p>Real User Monitoring is more accurate than Synthetic Testing, but the… |
|
585 |
|
586 <p>RUM data will inherently include data from <em>all users</em>, even t… |
|
587 |
|
588 <!-- class="wide"> |
|
589 <div class="wrap callout left flex"> |
|
590 <div class="picture" style="border: 1px solid #DDE4EB; border-radius… |
|
591 <img src="https://requestmetrics.com/assets/images/webperf/synthet… |
|
592 https://requestmetrics.com/assets/images/webperf/sy… |
|
593 https://requestmetrics.com/assets/images/webperf/sy… |
|
594 </div> |
|
595 <div class="blurb"> |
|
596 <p> |
|
597 RUM tools like Request Metrics do the statistics for you! This d… |
|
598 </p> |
|
599 <div class="flex cta-buttons"> |
|
600 <a class="btn btn-big btn-grey" href="https://app.requestmetrics… |
|
601 Live Demo |
|
602 </a> |
|
603 </div> |
|
604 </div> |
|
605 </div> |
|
606 --> |
|
607 |
|
608 <p>The biggest limitation of RUM is the delay. RUM can’t tell you how … |
|
609 |
|
610 <p>Some folks at Google even looked at this, <a href="https://philipwalt… |
|
611 |
|
612 <h2 id="signal-vs-noise">Signal vs Noise</h2> |
|
613 <p>Synthetic Testing and Real User Monitoring is about <em>Signal vs Noi… |
|
614 |
|
615 <p>But as the Google research showed, there is not a lot of signal in th… |
|
616 |
|
617 <p>Real User Monitoring is the opposite. Each bit of data you get from R… |
|
618 |
|
619 <p>The trick is, which users do you care about? If you are building a si… |
|
620 |
|
621 <hr /> |
|
622 |
|
623 <p>Both Synthetic Testing and Real User Monitoring are valuable tools fo… |
|
624 |
|
625 <p>And use <a href="https://requestmetrics.com">Real User Monitoring too… |
|
626 |
|
627 ]]></content:encoded> |
|
628 <pubDate>Wed, 10 Nov 2021 09:00:00 +0000</pubDate> |
|
629 <author>[email protected] (Request Metrics)</author> |
|
630 </item> |
|
631 |
|
632 |
|
633 <item> |
|
634 <title>Advertising's Performance Tradeoffs</title> |
|
635 <link>https://requestmetrics.com/web-performance/advertising-perfo… |
|
636 <guid isPermaLink="true">https://requestmetrics.com/web-performanc… |
|
637 <description>Advertising is everywhere on the web and users have n… |
|
638 |
|
639 </description> |
|
640 <media:content url="https://requestmetrics.com/assets/images/webpe… |
|
641 <enclosure url="https://requestmetrics.com/assets/images/webperf/p… |
|
642 <content:encoded><![CDATA[ |
|
643 <div><img src="https://requestmetrics.com/assets/images/webperf/… |
|
644 <p>Advertising is everywhere on the web and users have noticed. … |
|
645 |
|
646 <!--more--> |
|
647 |
|
648 <h2 id="getting-real-measurements">Getting Real Measurements</h2> |
|
649 <p>We picked <a href="https://www.yahoo.com/">Yahoo</a>, <a href="https:… |
|
650 |
|
651 <h2 id="what-users-want">What Users Want</h2> |
|
652 <p>Users expect pages to show something quickly, finish loading fast and… |
|
653 |
|
654 <p>The user’s perception of page performance is influenced by many asp… |
|
655 |
|
656 <h3 id="quick-main-content-paints">Quick Main Content Paints</h3> |
|
657 <p>The more quickly a site can get main content pieces displayed to the … |
|
658 |
|
659 <p>Surprisingly, ads did not notably impact these first paints! To top i… |
|
660 |
|
661 <figure class="border"> |
|
662 <img src="https://requestmetrics.com/assets/images/webperf/perf-ads/fc… |
|
663 <figcaption>FCP is hardly impacted by ads</figcaption> |
|
664 </figure> |
|
665 |
|
666 <figure class="border"> |
|
667 <img src="https://requestmetrics.com/assets/images/webperf/perf-ads/lc… |
|
668 <figcaption>LCP doesn't care about ads either</figcaption> |
|
669 </figure> |
|
670 |
|
671 <h3 id="fast-page-loads">Fast Page Loads</h3> |
|
672 <p>Pages with fast first paints still feel slow if the last piece of con… |
|
673 |
|
674 <p>Less surprisingly, loading the entire page does take longer when ads … |
|
675 |
|
676 <figure class="border"> |
|
677 <img src="https://requestmetrics.com/assets/images/webperf/perf-ads/lo… |
|
678 <figcaption>Load times are heavily impacted by Advertisements </figcap… |
|
679 </figure> |
|
680 |
|
681 <h3 id="no-jank">No Jank</h3> |
|
682 <p>Fast loading pages can still feel slow to a user if content is asynch… |
|
683 |
|
684 <figure> |
|
685 <video controls="" muted="" preload="metadata"> |
|
686 <source src="/assets/images/webperf/perf-ads/bbc-jank.mp4" type=… |
|
687 </video> |
|
688 <figcaption>The BBC demonstrating some egregious layout shift.</figc… |
|
689 </figure> |
|
690 |
|
691 <p>All tested sites asynchronously loaded advertisements. This has the m… |
|
692 |
|
693 <figure class="border"> |
|
694 <img src="https://requestmetrics.com/assets/images/webperf/perf-ads/cl… |
|
695 <figcaption>Cumulative Layout Shift shows the advert jank</figcaption> |
|
696 </figure> |
|
697 |
|
698 <h2 id="no-metric-tells-the-whole-story">No Metric Tells the Whole Story… |
|
699 <p>Advertisements don’t impact all aspects of page performance equally… |
|
700 |
|
701 <h2 id="performance-is-a-tradeoff">Performance Is a Tradeoff</h2> |
|
702 <p>While initial content renders were not notably impacted by ads, total… |
|
703 |
|
704 <p>Many sites depend on the revenue from ads for their very survival. An… |
|
705 |
|
706 ]]></content:encoded> |
|
707 <pubDate>Tue, 28 Sep 2021 00:00:00 +0000</pubDate> |
|
708 <author>[email protected] (Request Metrics)</author> |
|
709 </item> |
|
710 |
|
711 |
|
712 <item> |
|
713 <title>High Performance Images: 2021 Guide</title> |
|
714 <link>https://requestmetrics.com/web-performance/high-performance-… |
|
715 <guid isPermaLink="true">https://requestmetrics.com/web-performanc… |
|
716 <description> |
|
717 Images engage users, drive clicks, and generally make everything better�… |
|
718 |
|
719 |
|
720 |
|
721 Images are big. Really big. The bytes required for an image dwarf most s… |
|
722 <media:content url="https://requestmetrics.com/assets/images/webpe… |
|
723 <enclosure url="https://requestmetrics.com/assets/images/webperf/h… |
|
724 <content:encoded><![CDATA[ |
|
725 <div><img src="https://requestmetrics.com/assets/images/webperf/… |
|
726 |
|
727 <p>Images engage users, drive clicks, and generally make everything bett… |
|
728 |
|
729 <!-- more --> |
|
730 |
|
731 <p>Images are big. Really big. The bytes required for an image dwarf mos… |
|
732 |
|
733 <figure class="border"> |
|
734 <a href="https://requestmetrics.com/web-performance/largest-contentful… |
|
735 <img src="https://requestmetrics.com/assets/images/metrics/lcp_range… |
|
736 </a> |
|
737 <a href="https://requestmetrics.com/web-performance/cumulative-layout-… |
|
738 <img src="https://requestmetrics.com/assets/images/metrics/cls_range… |
|
739 </a> |
|
740 <figcaption>LCP and CLS metric ranges</figcaption> |
|
741 </figure> |
|
742 |
|
743 <p>This guide covers optimizing your <em>image format</em>, <em>resoluti… |
|
744 |
|
745 <hr /> |
|
746 |
|
747 <h2 id="1-image-format">1. Image Format</h2> |
|
748 |
|
749 <p>First and foremost, your images need to be in the correct format. Ima… |
|
750 |
|
751 <p>A good general rule is to <strong>use jpg for photographs</strong> an… |
|
752 |
|
753 <figure class="border"> |
|
754 <img src="https://requestmetrics.com/assets/images/webperf/high-perfor… |
|
755 <img src="https://requestmetrics.com/assets/images/webperf/high-perfor… |
|
756 <figcaption>Sloth Photograph and Graphic</figcaption> |
|
757 </figure> |
|
758 |
|
759 <p>On the left is a photograph of our buddy Sam, the sloth. As a JPG, th… |
|
760 |
|
761 <p>The right is an illustration of Sam, and is better served as a PNG. I… |
|
762 |
|
763 <p>Note that graphic illustrations tend to be significantly smaller than… |
|
764 |
|
765 <p>There’s <a href="https://developer.mozilla.org/en-US/docs/Web/Media… |
|
766 |
|
767 <h2 id="2-responsive-image-resolution">2. Responsive Image Resolution</h… |
|
768 |
|
769 <p>Your website will not be viewed the same way by everyone. Some of you… |
|
770 |
|
771 <figure class="border"> |
|
772 <img src="https://requestmetrics.com/assets/images/webperf/high-… |
|
773 https://requestmetrics.com/assets/images/webperf/high-p… |
|
774 https://requestmetrics.com/assets/images/webperf/high-p… |
|
775 <figcaption>Responsive Image Resolution</figcaption> |
|
776 </figure> |
|
777 |
|
778 <p>Why not scale down the images <em>before</em> your users download the… |
|
779 |
|
780 <figure class="code " id="code-259"> |
|
781 <div class="code-wrap"> |
|
782 <pre class="prettyprint lang-html"> |
|
783 <img src="picture-1200.jpg" |
|
784 srcset="picture-600.jpg 600w, |
|
785 picture-900.jpg 900w, |
|
786 picture-1200.jpg 1200w" |
|
787 sizes="(max-width: 900px) 100vw, 1200px" |
|
788 alt="my awesome picture" height="900" width="… |
|
789 </pre> |
|
790 <!-- <button type="button" class="btn copy-button yes-js"> |
|
791 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
792 <span class="label">Copy</span> |
|
793 </button> --> |
|
794 |
|
795 <figcaption><a href="#code-259">Using Responsive Image Markup</a… |
|
796 |
|
797 </div> |
|
798 </figure> |
|
799 |
|
800 <p>In this case, the base image is 1200px wide, and that’s also the de… |
|
801 |
|
802 <p>Most image tools, like Photoshop, <a href="https://www.gimp.org/">Gim… |
|
803 |
|
804 <h3 id="hiding-images-on-mobile">Hiding Images on Mobile</h3> |
|
805 |
|
806 <p>For some websites, you may not want to show an image on mobile device… |
|
807 |
|
808 <figure class="code " id="code-269"> |
|
809 <div class="code-wrap"> |
|
810 <pre class="prettyprint lang-html"> |
|
811 <img src="picture-1200.jpg" |
|
812 srcset="picture-600.jpg 600w, |
|
813 picture-900.jpg 900w, |
|
814 picture-1200.jpg 1200w" |
|
815 sizes="(max-width: 600px) 0, 600px" |
|
816 alt="my awesome picture" height="900" width="… |
|
817 </pre> |
|
818 <!-- <button type="button" class="btn copy-button yes-js"> |
|
819 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
820 <span class="label">Copy</span> |
|
821 </button> --> |
|
822 |
|
823 <figcaption><a href="#code-269">Hiding images on mobile and savi… |
|
824 |
|
825 </div> |
|
826 </figure> |
|
827 |
|
828 <p>For screen sizes less than 600px, the frame of the image is 0px wide.… |
|
829 |
|
830 <h2 id="3-image-quality">3. Image Quality</h2> |
|
831 |
|
832 <p>Aside from image format and resolution, there are often settings to a… |
|
833 |
|
834 <figure class="border"> |
|
835 <img src="https://requestmetrics.com/assets/images/webperf/high-… |
|
836 <figcaption>Image Optimization</figcaption> |
|
837 </figure> |
|
838 |
|
839 <p>This reduction is accomplished by pulling out unused colors, or by co… |
|
840 |
|
841 <!-- class="wide"> |
|
842 <div class="wrap callout left flex"> |
|
843 <div class="picture"> |
|
844 <img loading="lazy" class="lazyload" src="https://requestmetrics.c… |
|
845 https://requestmetrics.com/assets/images/callouts/c… |
|
846 https://requestmetrics.com/assets/images/callouts/c… |
|
847 </div> |
|
848 <div class="blurb"> |
|
849 <h2>Core Web Vital Performance Monitoring</h2> |
|
850 <p> |
|
851 Let us handle your performance work. Monitor your real-user Core… |
|
852 <strong>Request Metrics</strong>. The fastest, easiest, and chea… |
|
853 </p> |
|
854 <div class="flex cta-buttons"> |
|
855 <a class="btn btn-big btn-grey" href="https://requestmetrics.com… |
|
856 Learn about the Core Web Vitals |
|
857 </a> |
|
858 </div> |
|
859 </div> |
|
860 </div> |
|
861 --> |
|
862 |
|
863 <h2 id="4-embedding-images">4. Embedding Images</h2> |
|
864 |
|
865 <p>Sometimes an image is essential for a webpage to be useful, such as a… |
|
866 |
|
867 <p>You embed an image by converting it into a <em>base64 string</em> and… |
|
868 |
|
869 <figure class="code " id="code-210"> |
|
870 <div class="code-wrap"> |
|
871 <pre class="prettyprint lang-html"> |
|
872 <img src="data:image/png;base64; iVBORw0KGgoAAAANSUhEUgAAAAUA |
|
873 AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO |
|
874 9TXL0Y4OHwAAAABJRU5ErkJggg==" |
|
875 alt="my awesome picture" /> |
|
876 </pre> |
|
877 <!-- <button type="button" class="btn copy-button yes-js"> |
|
878 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
879 <span class="label">Copy</span> |
|
880 </button> --> |
|
881 |
|
882 <figcaption><a href="#code-210">Embedded image</a></figcaption> |
|
883 |
|
884 </div> |
|
885 </figure> |
|
886 |
|
887 <p>This may look strange, but it’s 100% supported as a <em>data url</e… |
|
888 |
|
889 <figure class="border"> |
|
890 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAA… |
|
891 <figcaption>Example HTML embedded image</figcaption> |
|
892 </figure> |
|
893 |
|
894 <p>Pop open devtools and look at the source of the image above, it’s e… |
|
895 |
|
896 <p>Google uses embedded images frequently in the display of search resul… |
|
897 |
|
898 <p>Here’s a <a href="https://www.base64-image.de/">handy web tool for … |
|
899 |
|
900 <h2 id="5-lazy-loading-images">5. Lazy-Loading Images</h2> |
|
901 |
|
902 <p>Websites have a lot of images that don’t need to be loaded right aw… |
|
903 |
|
904 <p>Instead, tell the browser to be lazy! Lazy-loading is a technique to … |
|
905 |
|
906 <p>The HTML spec is experimenting with a <a href="https://developer.mozi… |
|
907 |
|
908 <p>There are a few lazy-loading libraries, like <a href="https://github.… |
|
909 |
|
910 <figure class="code " id="code-459"> |
|
911 <div class="code-wrap"> |
|
912 <pre class="prettyprint lang-javascript"> |
|
913 var lazyEls = [].slice.call(document.querySelectorAll("[data-src]&q… |
|
914 |
|
915 var lazyObserver = new IntersectionObserver(function(entries) { |
|
916 entries.forEach(function(entry) { |
|
917 if (entry.isIntersecting) { |
|
918 var el = entry.target; |
|
919 var src = el.getAttribute("data-src"); |
|
920 if (src) { el.setAttribute("src", src); } |
|
921 lazyObserver.unobserve(el); |
|
922 } |
|
923 }); |
|
924 }); |
|
925 |
|
926 lazyEls.forEach(function(el) { |
|
927 lazyObserver.observe(el); |
|
928 }); |
|
929 </pre> |
|
930 <!-- <button type="button" class="btn copy-button yes-js"> |
|
931 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
932 <span class="label">Copy</span> |
|
933 </button> --> |
|
934 |
|
935 <figcaption><a href="#code-459">Lazy-loading images</a></figcapt… |
|
936 |
|
937 </div> |
|
938 </figure> |
|
939 |
|
940 <p>This code uses the <a href="https://developer.mozilla.org/en-US/docs/… |
|
941 |
|
942 <p>You utilize this by renaming the <code class="language-plaintext high… |
|
943 |
|
944 <figure class="code " id="code-100"> |
|
945 <div class="code-wrap"> |
|
946 <pre class="prettyprint lang-html"> |
|
947 <img src="picture-1200.jpg" |
|
948 loading="lazy" class="lazy" /> |
|
949 </pre> |
|
950 <!-- <button type="button" class="btn copy-button yes-js"> |
|
951 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
952 <span class="label">Copy</span> |
|
953 </button> --> |
|
954 |
|
955 <figcaption><a href="#code-100">Decorating an image for lazy loa… |
|
956 |
|
957 </div> |
|
958 </figure> |
|
959 |
|
960 <p>This markup uses both the experimental <code class="language-plaintex… |
|
961 |
|
962 <h3 id="layout-sizing">Layout Sizing</h3> |
|
963 |
|
964 <p>With late-loading images, it is even more important to specify the si… |
|
965 |
|
966 <p>You prevent this by specifying a <code class="language-plaintext high… |
|
967 |
|
968 <figure class="code " id="code-126"> |
|
969 <div class="code-wrap"> |
|
970 <pre class="prettyprint lang-html"> |
|
971 <img src="picture-1200.jpg" |
|
972 loading="lazy" class="lazy" |
|
973 width="1200" height="900" /> |
|
974 </pre> |
|
975 <!-- <button type="button" class="btn copy-button yes-js"> |
|
976 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
977 <span class="label">Copy</span> |
|
978 </button> --> |
|
979 |
|
980 <figcaption><a href="#code-126">Specifying the height and width<… |
|
981 |
|
982 </div> |
|
983 </figure> |
|
984 |
|
985 <p>Notice that the height and width attributes. It’s not 1200px, it’… |
|
986 |
|
987 <p>So if your layout only has 800px wide for the image, the browser will… |
|
988 |
|
989 <hr /> |
|
990 |
|
991 <h2 id="conclusion">Conclusion</h2> |
|
992 |
|
993 <p>These techniques will greatly speed your website and images. The corr… |
|
994 |
|
995 ]]></content:encoded> |
|
996 <pubDate>Tue, 25 May 2021 00:00:00 +0000</pubDate> |
|
997 <author>[email protected] (Request Metrics)</author> |
|
998 </item> |
|
999 |
|
1000 |
|
1001 <item> |
|
1002 <title>Fix Your First Contentful Paint: Cheat Sheet</title> |
|
1003 <link>https://requestmetrics.com/web-performance/fix-first-content… |
|
1004 <guid isPermaLink="true">https://requestmetrics.com/web-performanc… |
|
1005 <description> |
|
1006 Are slow FCP scores getting you down? Worried that website performance i… |
|
1007 |
|
1008 First Contentful Paint (FCP) is a measurement of how long it takes to sh… |
|
1009 |
|
1010 If you’re not yet familiar with th...</description> |
|
1011 <media:content url="https://requestmetrics.com/assets/images/webpe… |
|
1012 <enclosure url="https://requestmetrics.com/assets/images/webperf/f… |
|
1013 <content:encoded><![CDATA[ |
|
1014 <div><img src="https://requestmetrics.com/assets/images/webperf/… |
|
1015 |
|
1016 <p>Are slow FCP scores getting you down? Worried that website performanc… |
|
1017 |
|
1018 <p>First Contentful Paint (FCP) is a measurement of how long it takes to… |
|
1019 |
|
1020 <p>If you’re not yet familiar with the FCP metric, check out <a href="… |
|
1021 |
|
1022 <hr /> |
|
1023 |
|
1024 <p>You can improve your FCP scores by making your <strong>servers quick<… |
|
1025 |
|
1026 <figure class="border"> |
|
1027 <img src="https://requestmetrics.com/assets/images/webperf/fix-first-c… |
|
1028 https://requestmetrics.com/assets/images/webperf/fix-fi… |
|
1029 https://requestmetrics.com/assets/images/webperf/fix-fi… |
|
1030 <figcaption>Improving FCP Scores</figcaption> |
|
1031 </figure> |
|
1032 |
|
1033 <p><strong>Here are the 6 best ways to improve your FCP and LCP scores</… |
|
1034 |
|
1035 <h2 id="1-reduce-server-work">1. Reduce Server Work</h2> |
|
1036 |
|
1037 <p>Whether your server is WordPress, ASP.NET, or a node.js service runni… |
|
1038 |
|
1039 <p>Do you make database requests return static HTML content? You can sav… |
|
1040 |
|
1041 <p>Maybe your server is making requests to some API to assemble the docu… |
|
1042 |
|
1043 <h2 id="2-return-smaller-documents">2. Return Smaller Documents</h2> |
|
1044 |
|
1045 <p>Every byte returned by your server needs to be transferred, checked, … |
|
1046 |
|
1047 <p>Compression is an easy way to make your documents smaller without muc… |
|
1048 |
|
1049 <p>Compression makes sense for documents larger than about <strong>4 kil… |
|
1050 |
|
1051 <p>Depending on the kind of file you’re returning, there may be other … |
|
1052 |
|
1053 <figure class="border"> |
|
1054 <img src="https://requestmetrics.com/assets/images/webperf/fix-first-c… |
|
1055 <figcaption>Image Optimization</figcaption> |
|
1056 </figure> |
|
1057 |
|
1058 <h2 id="3-send-less-css">3. Send Less CSS</h2> |
|
1059 |
|
1060 <p>Most websites have an obnoxious amount of files needed before the bro… |
|
1061 |
|
1062 <p>Maybe you don’t need all of that, at least not at the beginning.</p> |
|
1063 |
|
1064 <p>If you have your whole website’s CSS in a single file, it’s likel… |
|
1065 |
|
1066 <p>When you break apart your CSS, avoid using <code class="language-plai… |
|
1067 |
|
1068 <p>If your CSS is still huge, consider hunting down unused styles from y… |
|
1069 |
|
1070 <!-- class="wide"> |
|
1071 <div class="wrap callout left flex"> |
|
1072 <div class="picture"> |
|
1073 <img loading="lazy" class="lazyload" src="https://requestmetrics.c… |
|
1074 https://requestmetrics.com/assets/images/callouts/c… |
|
1075 https://requestmetrics.com/assets/images/callouts/c… |
|
1076 </div> |
|
1077 <div class="blurb"> |
|
1078 <h2>FCP Performance Monitoring</h2> |
|
1079 <p> |
|
1080 Let us handle the hard stuff. Monitor your real-user metrics lik… |
|
1081 <strong>Request Metrics</strong>. |
|
1082 </p> |
|
1083 <div class="flex cta-buttons"> |
|
1084 <a class="btn btn-big btn-grey" href="https://requestmetrics.com… |
|
1085 Learn about the Core Web Vitals |
|
1086 </a> |
|
1087 </div> |
|
1088 </div> |
|
1089 </div> |
|
1090 --> |
|
1091 |
|
1092 <h2 id="4-use-fewer-and-more-efficient-fonts">4. Use Fewer and More Effi… |
|
1093 |
|
1094 <p>Fonts are expensive to download, even if you’re using <a href="http… |
|
1095 |
|
1096 <figure class="code " id="code-139"> |
|
1097 <div class="code-wrap"> |
|
1098 <pre class="prettyprint lang-html"> |
|
1099 <link href="https://fonts.googleapis.com/..." rel="sty… |
|
1100 media="only screen and (min-width: 600px)"> |
|
1101 </pre> |
|
1102 <!-- <button type="button" class="btn copy-button yes-js"> |
|
1103 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
1104 <span class="label">Copy</span> |
|
1105 </button> --> |
|
1106 |
|
1107 <figcaption><a href="#code-139">Using Media Queries with Fonts</… |
|
1108 |
|
1109 </div> |
|
1110 </figure> |
|
1111 |
|
1112 <p>Most mobile devices have a good set of default fonts, and the savings… |
|
1113 |
|
1114 <h2 id="5-serve-content-through-a-cdn">5. Serve Content Through a CDN</h… |
|
1115 |
|
1116 <p>Regardless of the size of your documents, they all need to cross the … |
|
1117 |
|
1118 <p>If your servers are in San Francisco and the user is in New York, it … |
|
1119 |
|
1120 <figure class="border"> |
|
1121 <img src="https://requestmetrics.com/assets/images/webperf/fix-first-c… |
|
1122 https://requestmetrics.com/assets/images/webperf/fix-fi… |
|
1123 https://requestmetrics.com/assets/images/webperf/fix-fi… |
|
1124 <figcaption>Saving Network Hops with a CDN</figcaption> |
|
1125 </figure> |
|
1126 |
|
1127 <p>Using a CDN allows <em>some</em> of your documents to be stored near … |
|
1128 |
|
1129 <h2 id="6-set-browser-caching">6. Set Browser Caching</h2> |
|
1130 |
|
1131 <p>Once a user has waited for your webpage to load once, don’t make th… |
|
1132 |
|
1133 <p>For example, if you’d like your users to remember an image for at l… |
|
1134 |
|
1135 <div class="language-plaintext highlighter-rouge"><div class="highlight"… |
|
1136 </code></pre></div></div> |
|
1137 |
|
1138 <p>You can configure most platforms to attach these headers by the type … |
|
1139 |
|
1140 <p>Warning! Browser caching can also cause problems when you change your… |
|
1141 |
|
1142 <hr /> |
|
1143 |
|
1144 <h2 id="conclusion">Conclusion</h2> |
|
1145 |
|
1146 <p>Apply these techniques to your website and your FCP scores will impro… |
|
1147 |
|
1148 ]]></content:encoded> |
|
1149 <pubDate>Mon, 17 May 2021 00:00:00 +0000</pubDate> |
|
1150 <author>[email protected] (Request Metrics)</author> |
|
1151 </item> |
|
1152 |
|
1153 |
|
1154 <item> |
|
1155 <title>Using First Contentful Paint - FCP</title> |
|
1156 <link>https://requestmetrics.com/web-performance/first-contentful-… |
|
1157 <guid isPermaLink="true">https://requestmetrics.com/web-performanc… |
|
1158 <description> |
|
1159 First Contentful Paint, or FCP, measures the time take to render the fir… |
|
1160 |
|
1161 </description> |
|
1162 <media:content url="https://requestmetrics.com/assets/images/webpe… |
|
1163 <enclosure url="https://requestmetrics.com/assets/images/webperf/f… |
|
1164 <content:encoded><![CDATA[ |
|
1165 <div><img src="https://requestmetrics.com/assets/images/webperf/… |
|
1166 |
|
1167 <p>First Contentful Paint, or FCP, measures the time take to render the … |
|
1168 |
|
1169 <!--more--> |
|
1170 |
|
1171 <p>FCP is one of the <strong>Core Web Vital</strong> performance metrics… |
|
1172 |
|
1173 <h2 id="first-contentful-paint-metric">First Contentful Paint Metric</h2> |
|
1174 |
|
1175 <p>The First Contentful Paint metric considers all the steps required to… |
|
1176 |
|
1177 <p>In this case, <em>Contentful</em> refers to any text or image element… |
|
1178 |
|
1179 <p>Check out this example <strong>waterfall chart</strong>, and where FC… |
|
1180 |
|
1181 <figure class="border"> |
|
1182 <img src="https://requestmetrics.com/assets/images/webperf/fcp/fcp_loa… |
|
1183 https://requestmetrics.com/assets/images/webperf/fcp/fc… |
|
1184 https://requestmetrics.com/assets/images/webperf/fcp/fc… |
|
1185 <figcaption>FCP in the Loading Waterfall</figcaption> |
|
1186 </figure> |
|
1187 |
|
1188 <p>Loading webpage images is not needed for FCP, but the browser does ne… |
|
1189 |
|
1190 <figure class="border"> |
|
1191 <img src="https://requestmetrics.com/assets/images/metrics/fcp_range_4… |
|
1192 <figcaption>FCP Metric Range</figcaption> |
|
1193 </figure> |
|
1194 |
|
1195 <p>Google defines the acceptable ranges for FCP to be less than <strong>… |
|
1196 |
|
1197 <h2 id="measuring-fcp-with-performanceobserver">Measuring FCP with Perfo… |
|
1198 |
|
1199 <p>First Contentful Paint is measured using the <a href="https://develop… |
|
1200 |
|
1201 <p>Here’s a little code to illustrate the API:</p> |
|
1202 |
|
1203 <figure class="code " id="code-197"> |
|
1204 <div class="code-wrap"> |
|
1205 <pre class="prettyprint lang-javascript"> |
|
1206 new PerformanceObserver((entryList) => { |
|
1207 console.log(entryList.getEntriesByName("first-contentful-paint&… |
|
1208 }).observe({ type: "paint", buffered: true }); |
|
1209 </pre> |
|
1210 <!-- <button type="button" class="btn copy-button yes-js"> |
|
1211 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
1212 <span class="label">Copy</span> |
|
1213 </button> --> |
|
1214 |
|
1215 <figcaption><a href="#code-197">Example of First Contentful Pain… |
|
1216 |
|
1217 </div> |
|
1218 </figure> |
|
1219 |
|
1220 <p>Unlike the <a href="https://requestmetrics.com/web-performance/larges… |
|
1221 |
|
1222 <figure class="border"> |
|
1223 <img src="https://requestmetrics.com/assets/images/webperf/fcp/fcp_obs… |
|
1224 <figcaption>FCP Performance Entry</figcaption> |
|
1225 </figure> |
|
1226 |
|
1227 <p>Note that the measurement value is <code class="language-plaintext hi… |
|
1228 |
|
1229 <h3 id="quirks-gotchas-and-unexpected-behavior">Quirks, Gotchas, and Une… |
|
1230 |
|
1231 <p>Likely, you won’t be measuring FCP yourself. You’ll rely on a lib… |
|
1232 |
|
1233 <!-- class="wide"> |
|
1234 <div class="wrap callout left flex"> |
|
1235 <div class="picture"> |
|
1236 <img loading="lazy" class="lazyload" src="https://requestmetrics.c… |
|
1237 https://requestmetrics.com/assets/images/callouts/c… |
|
1238 https://requestmetrics.com/assets/images/callouts/c… |
|
1239 </div> |
|
1240 <div class="blurb"> |
|
1241 <h2>FCP Performance Monitoring</h2> |
|
1242 <p> |
|
1243 Let us handle the hard stuff. Monitor your real-user metrics lik… |
|
1244 <strong>Request Metrics</strong>. |
|
1245 </p> |
|
1246 <div class="flex cta-buttons"> |
|
1247 <a class="btn btn-big btn-grey" href="https://requestmetrics.com… |
|
1248 Learn about the Core Web Vitals |
|
1249 </a> |
|
1250 </div> |
|
1251 </div> |
|
1252 </div> |
|
1253 --> |
|
1254 |
|
1255 <h4 id="1-dont-measure-background-pages">1. Don’t Measure Background P… |
|
1256 |
|
1257 <p>Pages that are loaded in the background, such as opened in another ta… |
|
1258 |
|
1259 <p>You can detect whether a page is in the background and filter out met… |
|
1260 |
|
1261 <figure class="code " id="code-550"> |
|
1262 <div class="code-wrap"> |
|
1263 <pre class="prettyprint lang-javascript"> |
|
1264 var hiddenTime = document.visibilityState === 'hidden' ? 0 : Inf… |
|
1265 |
|
1266 document.addEventListener('visibilitychange', (event) => { |
|
1267 hiddenTime = Math.min(hiddenTime, event.timeStamp); |
|
1268 }, { once: true }); |
|
1269 |
|
1270 new PerformanceObserver(entryList => { |
|
1271 entryList.getEntriesByName("first-contentful-paint").forEa… |
|
1272 if (entry.startTime < hiddenTime) { |
|
1273 // This entry occurred before the page was hidden |
|
1274 console.log(entry); |
|
1275 } |
|
1276 }; |
|
1277 }).observe({ type: "paint", buffered: true }); |
|
1278 </pre> |
|
1279 <!-- <button type="button" class="btn copy-button yes-js"> |
|
1280 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
1281 <span class="label">Copy</span> |
|
1282 </button> --> |
|
1283 |
|
1284 <figcaption><a href="#code-550">Don't Background Pages</a></figc… |
|
1285 |
|
1286 </div> |
|
1287 </figure> |
|
1288 |
|
1289 <h4 id="2-always-use-feature-detection">2. Always Use Feature Detection<… |
|
1290 |
|
1291 <p>Many (most) browser do not support <code class="language-plaintext hi… |
|
1292 |
|
1293 <figure class="code " id="code-317"> |
|
1294 <div class="code-wrap"> |
|
1295 <pre class="prettyprint lang-javascript"> |
|
1296 try { |
|
1297 new PerformanceObserver(entryList => { |
|
1298 console.log(entryList.getEntriesByName("first-contentful-pa… |
|
1299 }) |
|
1300 // Some browsers throw when 'type' is passed: |
|
1301 .observe({ type: "paint", buffered: true }); |
|
1302 } |
|
1303 catch (e) { /* Not Supported */ } |
|
1304 </pre> |
|
1305 <!-- <button type="button" class="btn copy-button yes-js"> |
|
1306 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
1307 <span class="label">Copy</span> |
|
1308 </button> --> |
|
1309 |
|
1310 <figcaption><a href="#code-317">Detect Largest Contentful Paint … |
|
1311 |
|
1312 </div> |
|
1313 </figure> |
|
1314 |
|
1315 <h4 id="3-styles-to-the-document-dont-count">3. Styles to the Document D… |
|
1316 |
|
1317 <p>Some pages will apply inline styles to their <code class="language-pl… |
|
1318 |
|
1319 <h2 id="improving-your-fcp-scores">Improving Your FCP Scores</h2> |
|
1320 |
|
1321 <p>FCP includes all the time waiting and fetching the document, CSS file… |
|
1322 |
|
1323 <ul> |
|
1324 <li>Reduce server work and cache expensive actions</li> |
|
1325 <li>Use compression on your HTML, CSS, and other resources</li> |
|
1326 <li>Reduce the critical CSS required to render the page</li> |
|
1327 <li>Use fewer and more efficient fonts</li> |
|
1328 <li>Serve content through a CDN</li> |
|
1329 <li>Use efficient http caching settings</li> |
|
1330 </ul> |
|
1331 |
|
1332 <p>All the improvements that you make to FCP will also help your <a href… |
|
1333 |
|
1334 <h2 id="conclusion">Conclusion</h2> |
|
1335 |
|
1336 <p>The First Contentful Paint metric is an important part of the web per… |
|
1337 |
|
1338 ]]></content:encoded> |
|
1339 <pubDate>Mon, 10 May 2021 00:00:00 +0000</pubDate> |
|
1340 <author>[email protected] (Request Metrics)</author> |
|
1341 </item> |
|
1342 |
|
1343 |
|
1344 <item> |
|
1345 <title>Measuring Web Performance in 2021: The Definitive Guide</ti… |
|
1346 <link>https://requestmetrics.com/web-performance/measure-web-perfo… |
|
1347 <guid isPermaLink="true">https://requestmetrics.com/web-performanc… |
|
1348 <description> |
|
1349 This is the complete guide to the metrics, methods, and measurements of … |
|
1350 |
|
1351 If you run a website, this guide has all the fundamental ideas you need … |
|
1352 |
|
1353 |
|
1354 |
|
1355 |
|
1356 |
|
1357 Contents |
|
1358 |
|
1359 |
|
1360 |
|
1361 |
|
1362 |
|
1363 |
|
1364 |
|
1365 Chapter 1 |
|
1366 Web Performance Fundamentals |
|
1367 |
|
1368 |
|
1369 |
|
1370 |
|
1371 |
|
1372 |
|
1373 |
|
1374 Chapter 2 |
|
1375 Web Performance Metrics |
|
1376 |
|
1377 |
|
1378 |
|
1379 |
|
1380 |
|
1381 |
|
1382 |
|
1383 Chapter 3 |
|
1384 Kinds of Web Performance Data |
|
1385 |
|
1386 |
|
1387 |
|
1388 |
|
1389 |
|
1390 |
|
1391 |
|
1392 Chapter 4 |
|
1393 ...</description> |
|
1394 <media:content url="https://requestmetrics.com/assets/images/webpe… |
|
1395 <enclosure url="https://requestmetrics.com/assets/images/webperf/m… |
|
1396 <content:encoded><![CDATA[ |
|
1397 <div><img src="https://requestmetrics.com/assets/images/webperf/… |
|
1398 |
|
1399 <p>This is the complete guide to the metrics, methods, and measurements … |
|
1400 |
|
1401 <p>If you run a website, this guide has all the fundamental ideas you ne… |
|
1402 |
|
1403 <!-- more --> |
|
1404 |
|
1405 <hr /> |
|
1406 |
|
1407 <h2 style="border: none;">Contents</h2> |
|
1408 |
|
1409 <ol class="toc"> |
|
1410 <li class="toc-item"> |
|
1411 <a href="#chapter-1-web-performance-fundamentals"> |
|
1412 <div class="chapter-img blue"> |
|
1413 <img src="https://requestmetrics.com/ass… |
|
1414 </div> |
|
1415 <div class="chapter-num">Chapter 1</div> |
|
1416 <div class="chapter-text">Web Performance Fundam… |
|
1417 </a> |
|
1418 </li> |
|
1419 <li class="toc-item"> |
|
1420 <a href="#chapter-2-web-performance-metrics"> |
|
1421 <div class="chapter-img green"> |
|
1422 <img src="https://requestmetrics.com/ass… |
|
1423 </div> |
|
1424 <div class="chapter-num">Chapter 2</div> |
|
1425 <div class="chapter-text">Web Performance Metric… |
|
1426 </a> |
|
1427 </li> |
|
1428 <li class="toc-item"> |
|
1429 <a href="#chapter-3-kinds-of-web-performance-data"> |
|
1430 <div class="chapter-img red"> |
|
1431 <img src="https://requestmetrics.com/ass… |
|
1432 </div> |
|
1433 <div class="chapter-num">Chapter 3</div> |
|
1434 <div class="chapter-text">Kinds of Web Performan… |
|
1435 </a> |
|
1436 </li> |
|
1437 <li class="toc-item"> |
|
1438 <a href="#chapter-4-common-web-performance-tools"> |
|
1439 <div class="chapter-img indigo"> |
|
1440 <img src="https://requestmetrics.com/ass… |
|
1441 </div> |
|
1442 <div class="chapter-num">Chapter 4</div> |
|
1443 <div class="chapter-text">Common Web Performance… |
|
1444 </a> |
|
1445 </li> |
|
1446 |
|
1447 </ol> |
|
1448 |
|
1449 <h2 class="blue" id="chapter-1-web-performance-fundamentals"><small>Chap… |
|
1450 <div class="chapter-intro blue"> |
|
1451 <div class="text"> |
|
1452 <p> |
|
1453 In this first chapter, we'll start with the basi… |
|
1454 </p> |
|
1455 <p> |
|
1456 You'll see why web performance has never been mo… |
|
1457 </p> |
|
1458 </div> |
|
1459 <div class="illustration"> |
|
1460 <img src="https://requestmetrics.com/assets/images/webpe… |
|
1461 </div> |
|
1462 </div> |
|
1463 |
|
1464 <h3 id="what-is-web-performance">What is Web Performance?</h3> |
|
1465 |
|
1466 <p>Web performance is about how fast your website <em>feels</em> to your… |
|
1467 |
|
1468 <p>Feelings are difficult to measure. Each person can have a different e… |
|
1469 |
|
1470 <p><a href="https://www.youtube.com/watch?v=7i_yQyHdxUo">Simon Hearne sh… |
|
1471 |
|
1472 <figure class="border"> |
|
1473 <img src="https://requestmetrics.com/assets/images/webperf/measu… |
|
1474 https:/… |
|
1475 https://reque… |
|
1476 <figcaption>Psychology of Waiting</figcaption> |
|
1477 </figure> |
|
1478 |
|
1479 <h4 id="1-people-want-to-get-started">1. People want to get started</h4> |
|
1480 |
|
1481 <p>You’re excited about an idea, or you’ve finally overcome procrast… |
|
1482 |
|
1483 <h4 id="2-bored-waits-feel-longer">2. Bored waits feel longer</h4> |
|
1484 |
|
1485 <p>You’re sitting in the back seat on a long road trip. Back in the da… |
|
1486 |
|
1487 <p>Same with a website. When you’re avoiding your work and scrolling t… |
|
1488 |
|
1489 <h4 id="3-anxious-waits-feel-longer">3. Anxious waits feel longer</h4> |
|
1490 |
|
1491 <p>When you are nervous about the content of a page or the results of a … |
|
1492 |
|
1493 <h4 id="4-unexplained-waits-feel-slower">4. Unexplained waits feel slowe… |
|
1494 |
|
1495 <p>You’ve probably bought lots of things on the internet, and you know… |
|
1496 |
|
1497 <h4 id="5-uncertain-wait-times-feel-slower">5. Uncertain wait times feel… |
|
1498 |
|
1499 <p>You submit a form and see a loading spinner with the text, “please … |
|
1500 |
|
1501 <h4 id="6-people-wait-longer-for-value">6. People wait longer for value<… |
|
1502 |
|
1503 <p>When you click on that hot celebrity gossip link at TMZ, you’ll wai… |
|
1504 |
|
1505 <p>So you open your work GMail account. GMail is a big webapp, and somet… |
|
1506 |
|
1507 <h3 id="why-is-web-performance-important">Why is Web Performance Importa… |
|
1508 |
|
1509 <p>You’ve probably seen the case studies. Lots of <a href="https://www… |
|
1510 |
|
1511 <p>Slow web pages frustrate users and make them less likely to stick aro… |
|
1512 |
|
1513 <figure class="border"> |
|
1514 <img src="https://requestmetrics.com/assets/images/webperf/measu… |
|
1515 https:/… |
|
1516 https://reque… |
|
1517 <figcaption>Performance is Important</figcaption> |
|
1518 </figure> |
|
1519 |
|
1520 <h3 id="why-does-google-care-about-my-performance">Why Does Google Care … |
|
1521 |
|
1522 <p>Google wants search results to be as relevant and useful as possible�… |
|
1523 |
|
1524 <p>Performance is such a strong signal to Google that website performanc… |
|
1525 |
|
1526 <p>How does Google measure your website performance? The next chapter co… |
|
1527 |
|
1528 <h2 class="green" id="chapter-2-web-performance-metrics"><small>Chapter … |
|
1529 <div class="chapter-intro green"> |
|
1530 <div class="text"> |
|
1531 <p> |
|
1532 Now that you know <em>why</em> your website need… |
|
1533 </p> |
|
1534 <p> |
|
1535 This chapter will show you the common metrics us… |
|
1536 </p> |
|
1537 </div> |
|
1538 <div class="illustration"> |
|
1539 <img src="https://requestmetrics.com/assets/images/webpe… |
|
1540 </div> |
|
1541 </div> |
|
1542 |
|
1543 <h3 id="page-load-time">Page Load Time</h3> |
|
1544 |
|
1545 <p>In the beginning, there was PageLoad. Website performance was measure… |
|
1546 |
|
1547 <figure class="border"> |
|
1548 <img src="https://requestmetrics.com/assets/images/webperf/measu… |
|
1549 https:/… |
|
1550 https://reque… |
|
1551 <figcaption>Pageload Metric on Geocities.com</figcaption> |
|
1552 </figure> |
|
1553 |
|
1554 <p>But PageLoad doesn’t fully describe performance. Some sites initial… |
|
1555 |
|
1556 <p>Worse, PageLoad was easy to manipulate. Developers could improve thei… |
|
1557 |
|
1558 <p>What do we do instead?</p> |
|
1559 |
|
1560 <p>There are lots of ways a website can feel slow: slow to start, slow t… |
|
1561 |
|
1562 <h3 id="the-core-web-vitals">The Core Web Vitals</h3> |
|
1563 |
|
1564 <p>In 2019, Google introduced a set of metrics intent on measuring the a… |
|
1565 |
|
1566 <figure class="border"> |
|
1567 <img src="https://requestmetrics.com/assets/images/webperf/measu… |
|
1568 https:/… |
|
1569 https://reque… |
|
1570 <figcaption>The Core Web Vital Metrics</figcaption> |
|
1571 </figure> |
|
1572 |
|
1573 <p>They are measured in all Chrome-based browsers, including the Googleb… |
|
1574 |
|
1575 <p>Note that <em>only</em> Chrome-based browsers support these metrics f… |
|
1576 |
|
1577 <h4 id="first-contentful-paint-fcp">First Contentful Paint (FCP)</h4> |
|
1578 |
|
1579 <p>“First Contentful Paint” measures how long it takes to show the u… |
|
1580 |
|
1581 <figure class="border"> |
|
1582 <img src="https://requestmetrics.com/assets/images/webperf/measu… |
|
1583 https:/… |
|
1584 https://reque… |
|
1585 <figcaption>First Contentful Paint</figcaption> |
|
1586 </figure> |
|
1587 |
|
1588 <p>FCP encourages websites to respond quickly to requests. Learn more ab… |
|
1589 |
|
1590 <figure class="border"> |
|
1591 <img src="https://requestmetrics.com/assets/images/metrics/fcp_r… |
|
1592 <figcaption>FCP Metric Range</figcaption> |
|
1593 </figure> |
|
1594 |
|
1595 <p>Google recommends that your FCP should be less than <strong>1.0 secon… |
|
1596 |
|
1597 <h4 id="largest-contentful-paint-lcp">Largest Contentful Paint (LCP)</h4> |
|
1598 |
|
1599 <p>“Largest Contentful Paint” measures how long it takes until the b… |
|
1600 |
|
1601 <p>It would be more accurate if you measured the time until the <em>most… |
|
1602 |
|
1603 <p>An example, navigating to the homepage of NPR News has a few differen… |
|
1604 |
|
1605 <figure class="border"> |
|
1606 <img src="https://requestmetrics.com/assets/images/webperf/measu… |
|
1607 https:/… |
|
1608 https://reque… |
|
1609 <figcaption>Largest Contentful Paint</figcaption> |
|
1610 </figure> |
|
1611 |
|
1612 <p>The advertisement is probably not what the user is looking for, but t… |
|
1613 |
|
1614 <p>LCP encourages websites to <em>finish quickly</em> by emphasizing the… |
|
1615 |
|
1616 <figure class="border"> |
|
1617 <img src="https://requestmetrics.com/assets/images/metrics/lcp_r… |
|
1618 <figcaption>LCP Metric Range</figcaption> |
|
1619 </figure> |
|
1620 |
|
1621 <p>Google recommends that your LCP should be less than <strong>2.5 secon… |
|
1622 |
|
1623 <h4 id="cumulative-layout-shift-cls">Cumulative Layout Shift (CLS)</h4> |
|
1624 |
|
1625 <p>“Cumulative Layout Shift” is a little harder to understand becaus… |
|
1626 |
|
1627 <figure class="border"> |
|
1628 <img src="https://requestmetrics.com/assets/images/webperf/measu… |
|
1629 <figcaption>CLS Example</figcaption> |
|
1630 </figure> |
|
1631 |
|
1632 <p>Layout Shifts measure how late-rendered content affects the user expe… |
|
1633 |
|
1634 <p>CLS discourages websites from moving content around once the user see… |
|
1635 |
|
1636 <figure class="border"> |
|
1637 <img src="https://requestmetrics.com/assets/images/metrics/cls_r… |
|
1638 <figcaption>CLS Metric Range</figcaption> |
|
1639 </figure> |
|
1640 |
|
1641 <p>Your CLS score should be less than <strong>0.1</strong> and no worse … |
|
1642 |
|
1643 <h4 id="first-input-delay-fid">First Input Delay (FID)</h4> |
|
1644 |
|
1645 <p>“First Input Delay” measures whether the page is really done when… |
|
1646 |
|
1647 <figure class="border"> |
|
1648 <img src="https://requestmetrics.com/assets/images/webperf/measu… |
|
1649 https:/… |
|
1650 https://reque… |
|
1651 <figcaption>First Input Delay</figcaption> |
|
1652 </figure> |
|
1653 |
|
1654 <p>FID discourages websites from loading too much JavaScript before the … |
|
1655 |
|
1656 <figure class="border"> |
|
1657 <img src="https://requestmetrics.com/assets/images/metrics/fid_r… |
|
1658 <figcaption>FID Metric Range</figcaption> |
|
1659 </figure> |
|
1660 |
|
1661 <p>Interaction delays are easily noticeable by most people, so you shoul… |
|
1662 |
|
1663 <h3 id="other-common-performance-metrics">Other Common Performance Metri… |
|
1664 |
|
1665 <p>Aside from the Core Web Vitals, there are several other metrics that … |
|
1666 |
|
1667 <figure> |
|
1668 <img src="https://requestmetrics.com/assets/images/webperf/measu… |
|
1669 <figcaption>Common Performance Metrics</figcaption> |
|
1670 </figure> |
|
1671 |
|
1672 <h4 id="time-to-first-byte-ttfb">Time to First Byte (TTFB)</h4> |
|
1673 |
|
1674 <p>Time to First Byte measures the time until your server returns it’s… |
|
1675 |
|
1676 <p>TTFB is a subset of the <em>First Contentful Paint</em> metric, which… |
|
1677 <h4 id="time-to-interactive-tti">Time to Interactive (TTI)</h4> |
|
1678 |
|
1679 <p>Time to Interactive is a measurement from Chrome Lighthouse that meas… |
|
1680 |
|
1681 <p>TTI includes both the <em>Largest Contentful Paint</em>, the <em>Firs… |
|
1682 |
|
1683 <p>Google recommends a TTI of less than 3.8 seconds to be considered fas… |
|
1684 |
|
1685 <h4 id="total-blocking-time-tbt">Total Blocking Time (TBT)</h4> |
|
1686 |
|
1687 <p>Total Blocking Time is the time where user input is delayed due to br… |
|
1688 |
|
1689 <h4 id="speed-index">Speed Index</h4> |
|
1690 |
|
1691 <p>Speed Index is a popular metric used by WebPageTest and Google perfor… |
|
1692 |
|
1693 <hr /> |
|
1694 |
|
1695 <p>Now that you know the web performance metrics, what they measure, and… |
|
1696 |
|
1697 <h2 class="red" id="chapter-3-kinds-of-web-performance-data"><small>Chap… |
|
1698 <div class="chapter-intro red"> |
|
1699 <div class="text"> |
|
1700 <p> |
|
1701 There are different ways to measure web performa… |
|
1702 </p> |
|
1703 <p> |
|
1704 Before you jump into performance tools, you need… |
|
1705 </p> |
|
1706 </div> |
|
1707 <div class="illustration"> |
|
1708 <img src="https://requestmetrics.com/assets/images/webpe… |
|
1709 </div> |
|
1710 </div> |
|
1711 |
|
1712 <h3 id="lab-data-and-field-data">Lab Data and Field Data</h3> |
|
1713 |
|
1714 <p>There are two types of web performance data: <em>lab data</em> and <e… |
|
1715 |
|
1716 <p>Lab performance data is gathered with a controlled test, such as a Li… |
|
1717 |
|
1718 <figure class="border"> |
|
1719 <img src="https://requestmetrics.com/assets/images/webperf/measu… |
|
1720 https:/… |
|
1721 https://reque… |
|
1722 <figcaption>Synthetic Lab Performance Data</figcaption> |
|
1723 </figure> |
|
1724 |
|
1725 <p>This kind of data is often called <strong>“Synthetic Testing”</st… |
|
1726 |
|
1727 <p>Field performance data is gathered directly from the users of the web… |
|
1728 |
|
1729 <figure class="border"> |
|
1730 <img src="https://requestmetrics.com/assets/images/webperf/measu… |
|
1731 https:/… |
|
1732 https://reque… |
|
1733 <figcaption>Real-User Field Performance Data</figcaption> |
|
1734 </figure> |
|
1735 |
|
1736 <p>Field data is often called <strong>“Real User Monitoring”</strong… |
|
1737 |
|
1738 <p>Field data can produce <em>a lot</em> of data, and not all of it is r… |
|
1739 |
|
1740 <h3 id="interpreting-performance-data-with-statistics">Interpreting Perf… |
|
1741 |
|
1742 <p>The <em>easiest</em> way to understand sets of data is with <strong>a… |
|
1743 |
|
1744 <p>Look at an example. An average Lighthouse score of <strong>80</strong… |
|
1745 |
|
1746 <figure class="border"> |
|
1747 <img src="https://requestmetrics.com/assets/images/webperf/measu… |
|
1748 https:/… |
|
1749 https://reque… |
|
1750 <figcaption>Averaging Data is Misleading</figcaption> |
|
1751 </figure> |
|
1752 |
|
1753 <p>These tell very different stories. The top scores describe a site tha… |
|
1754 |
|
1755 <p>So what can we do instead?</p> |
|
1756 |
|
1757 <h3 id="median-and-percentiles">Median and Percentiles</h3> |
|
1758 |
|
1759 <p>Imagine if all your performance scores were sorted from best to worse… |
|
1760 |
|
1761 <p>Median can also be called the <em>50th Percentile</em> or p50 because… |
|
1762 |
|
1763 <p>Performance numbers are often measured by their p50, p75, and p95 sco… |
|
1764 |
|
1765 <p>Some code might help. The Lighthouse score of 10 tests is stored in a… |
|
1766 |
|
1767 <figure class="code " id="code-342"> |
|
1768 <div class="code-wrap"> |
|
1769 <pre class="prettyprint lang-javascript"> |
|
1770 // Performance scores, sorted. |
|
1771 var lighthouseScores = [100, 100, 90, 90, 90, 80, 70, 70, 60, 50]; |
|
1772 |
|
1773 // Desired percentile to calculate. |
|
1774 var percentile = 0.75; |
|
1775 |
|
1776 // Find the index 75% into the array. |
|
1777 var idx = Math.round( (lighthouseScores.length - 1) * percentile ); |
|
1778 |
|
1779 var p75Score = lighthouseScores[idx]; |
|
1780 </pre> |
|
1781 <!-- <button type="button" class="btn copy-button yes-js"> |
|
1782 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
1783 <span class="label">Copy</span> |
|
1784 </button> --> |
|
1785 |
|
1786 <figcaption><a href="#code-342">Calculating percentiles in JavaS… |
|
1787 |
|
1788 </div> |
|
1789 </figure> |
|
1790 |
|
1791 <p>Or you might have your data in a spreadsheet, where you can use the <… |
|
1792 |
|
1793 <p>Ok, enough background. On to the tools!</p> |
|
1794 |
|
1795 <h2 class="indigo" id="chapter-4-common-web-performance-tools"><small>Ch… |
|
1796 <div class="chapter-intro indigo"> |
|
1797 <div class="text"> |
|
1798 <p> |
|
1799 Now that you understand the metrics and the meth… |
|
1800 </p> |
|
1801 <p> |
|
1802 How do you know what tool to use, what it measur… |
|
1803 </p> |
|
1804 </div> |
|
1805 <div class="illustration"> |
|
1806 <img src="https://requestmetrics.com/assets/images/webpe… |
|
1807 </div> |
|
1808 </div> |
|
1809 |
|
1810 <p>These are some of the best web performance tools available. Each meas… |
|
1811 |
|
1812 <h4 id="1-google-lighthouse">1. Google Lighthouse</h4> |
|
1813 |
|
1814 <div class="type-label"> |
|
1815 <span class="name">Type</span> |
|
1816 <span class="value synthetic">Synthetic Lab Data</span> |
|
1817 </div> |
|
1818 |
|
1819 <p><a href="https://developers.google.com/web/tools/lighthouse">Lighthou… |
|
1820 |
|
1821 <figure class="border"> |
|
1822 <img src="https://requestmetrics.com/assets/images/webperf/measu… |
|
1823 https:/… |
|
1824 https://reque… |
|
1825 <figcaption>Google Lighthouse</figcaption> |
|
1826 </figure> |
|
1827 |
|
1828 <p>It’s run from you local computer, so it’s measuring the performan… |
|
1829 |
|
1830 <p>Lighthouse is most useful for development-time testing of your site o… |
|
1831 |
|
1832 <h4 id="2-webpagetest">2. WebPageTest</h4> |
|
1833 |
|
1834 <div class="type-label"> |
|
1835 <span class="name">Type</span> |
|
1836 <span class="value synthetic">Synthetic Lab Data</span> |
|
1837 </div> |
|
1838 |
|
1839 <p><a href="https://www.webpagetest.org/" rel="nofollow">WebPageTest</a>… |
|
1840 |
|
1841 <figure class="border"> |
|
1842 <img src="https://requestmetrics.com/assets/images/webperf/measu… |
|
1843 https:/… |
|
1844 https://reque… |
|
1845 <figcaption>WebPageTest Result</figcaption> |
|
1846 </figure> |
|
1847 |
|
1848 <p>It also produces a more detailed (and more complex) report with netwo… |
|
1849 |
|
1850 <p>WebPageTest is great for auditing live websites to better understand … |
|
1851 |
|
1852 <h4 id="3-google-search-console">3. Google Search Console</h4> |
|
1853 |
|
1854 <div class="type-label"> |
|
1855 <span class="name">Type</span> |
|
1856 <span class="value synthetic">Synthetic Lab Data</span> |
|
1857 </div> |
|
1858 |
|
1859 <p><a href="https://search.google.com/search-console">Google Search Cons… |
|
1860 |
|
1861 <figure class="border"> |
|
1862 <img src="https://requestmetrics.com/assets/images/webperf/measu… |
|
1863 https:/… |
|
1864 https://reque… |
|
1865 <figcaption>Google Search Console Web Vital Report</figcaption> |
|
1866 </figure> |
|
1867 |
|
1868 <p>Although the Search Console metrics are synthetic, they are what Goog… |
|
1869 |
|
1870 <p>The metrics you’ll see in Search Console will be quite slow to upda… |
|
1871 |
|
1872 <p>You need to use Search Console to see how Google ranks your performan… |
|
1873 |
|
1874 <h4 id="4-chrome-user-experience-report-crux">4. Chrome User Experience … |
|
1875 |
|
1876 <div class="type-label"> |
|
1877 <span class="name">Type</span> |
|
1878 <span class="value real">Real-User Field Data</span> |
|
1879 </div> |
|
1880 |
|
1881 <p>The Chrome browser itself collects performance metrics from opt-in us… |
|
1882 |
|
1883 <figure class="border"> |
|
1884 <img src="https://requestmetrics.com/assets/images/webperf/measu… |
|
1885 https:/… |
|
1886 https://reque… |
|
1887 <figcaption>Chrome User Experience (CrUX) Report</figcaption> |
|
1888 </figure> |
|
1889 |
|
1890 <p>The data is really interesting, but it’s only published monthly and… |
|
1891 |
|
1892 <p>CrUX data is useful to see historical website performance, or compare… |
|
1893 |
|
1894 <h4 id="5-request-metrics">5. Request Metrics</h4> |
|
1895 |
|
1896 <div class="type-label"> |
|
1897 <span class="name">Type</span> |
|
1898 <span class="value real">Real-User Field Data</span> |
|
1899 </div> |
|
1900 |
|
1901 <p><a href="https://requestmetrics.com/">Request Metrics</a> is a real-u… |
|
1902 |
|
1903 <figure class="border"> |
|
1904 <img src="https://requestmetrics.com/assets/images/webperf/measu… |
|
1905 https:/… |
|
1906 https://reque… |
|
1907 <figcaption>Request Metrics Core Web Vitals</figcaption> |
|
1908 </figure> |
|
1909 |
|
1910 <p>The charts are useful and easy to understand. The tool breaks down th… |
|
1911 |
|
1912 <p>Request Metrics is best for active monitoring of your website perform… |
|
1913 |
|
1914 <h2 class="pink" id="conclusion">Conclusion</h2> |
|
1915 <div class="chapter-intro pink"> |
|
1916 <div class="text"> |
|
1917 <p> |
|
1918 That's everything you need to know to start meas… |
|
1919 </p> |
|
1920 <p> |
|
1921 Which performance metric is most meaningful to y… |
|
1922 </p> |
|
1923 </div> |
|
1924 <div class="illustration"> |
|
1925 <img src="https://requestmetrics.com/assets/images/webpe… |
|
1926 </div> |
|
1927 </div> |
|
1928 |
|
1929 <style> |
|
1930 .type-label { |
|
1931 font-family: "Muli", Helvetica, Arial, sans-serif; |
|
1932 font-size: 0.8em; |
|
1933 font-weight: bold; |
|
1934 display: flex; |
|
1935 flex-direction: row; |
|
1936 margin: 0 0 30px 0; |
|
1937 background-color: #F3F6FA; |
|
1938 border: 2px solid #DDE4EB; |
|
1939 border-radius: 6px; |
|
1940 width: fit-content; |
|
1941 } |
|
1942 .type-label .name { |
|
1943 padding: 2px 20px; |
|
1944 border-right: 2px solid #DDE4EB; |
|
1945 } |
|
1946 .type-label .value { |
|
1947 padding: 2px 20px; |
|
1948 } |
|
1949 .type-label .value.synthetic { |
|
1950 background-color: #F5C0BE; |
|
1951 color: #7E191F |
|
1952 } |
|
1953 .type-label .value.real { |
|
1954 background-color: #F1FCF6; |
|
1955 color: #2F6959 |
|
1956 } |
|
1957 </style> |
|
1958 |
|
1959 |
|
1960 ]]></content:encoded> |
|
1961 <pubDate>Mon, 03 May 2021 00:00:00 +0000</pubDate> |
|
1962 <author>[email protected] (Request Metrics)</author> |
|
1963 </item> |
|
1964 |
|
1965 |
|
1966 <item> |
|
1967 <title>Tutorial: Monitoring Your Core Web Vitals</title> |
|
1968 <link>https://requestmetrics.com/web-performance/monitoring-core-w… |
|
1969 <guid isPermaLink="true">https://requestmetrics.com/web-performanc… |
|
1970 <description>Web performance used to be easy. You’d time how lon… |
|
1971 |
|
1972 But the rise of client-side JavaScript has introduced bold new ways for … |
|
1973 |
|
1974 Each of the Core Web Vitals measures a different aspect of how a web app… |
|
1975 <media:content url="https://requestmetrics.com/assets/images/webpe… |
|
1976 <enclosure url="https://requestmetrics.com/assets/images/webperf/m… |
|
1977 <content:encoded><![CDATA[ |
|
1978 <div><img src="https://requestmetrics.com/assets/images/webperf/… |
|
1979 <p>Web performance used to be easy. You’d time how long a page… |
|
1980 |
|
1981 <p>But the rise of client-side JavaScript has introduced bold new ways f… |
|
1982 |
|
1983 <p>Each of the Core Web Vitals measures a different aspect of how a web … |
|
1984 |
|
1985 <!--more--> |
|
1986 |
|
1987 <h2 id="what-youll-learn">What you’ll learn</h2> |
|
1988 <p>In this tutorial you’ll learn about:</p> |
|
1989 |
|
1990 <ul> |
|
1991 <li>Some of the different ways modern websites can have poor performan… |
|
1992 <li>The new emerging metrics for web performance, the Core Web Vitals,… |
|
1993 <li>How to collect Core Web Vitals in your own application.</li> |
|
1994 </ul> |
|
1995 |
|
1996 <h2 id="contentful-paint">Contentful Paint</h2> |
|
1997 <p>Once a web browser has downloaded and parsed your content, it will re… |
|
1998 |
|
1999 <p>Each paint event could be important for your application, but general… |
|
2000 |
|
2001 <h3 id="first-contentful-paint">First Contentful Paint</h3> |
|
2002 <p>The <a href="https://requestmetrics.com/web-performance/first-content… |
|
2003 |
|
2004 <p>This time represents the first visible indication to the user that th… |
|
2005 |
|
2006 <p>For example, let’s take a look at the site for a major US retailer,… |
|
2007 |
|
2008 <figure> |
|
2009 <img src="https://requestmetrics.com/assets/images/webperf/monitorin… |
|
2010 <figcaption>First Contentful Paint on Target.com</figcaption> |
|
2011 </figure> |
|
2012 |
|
2013 <p>The initial document request contains a basic skeleton of the page, w… |
|
2014 |
|
2015 <h3 id="largest-contentful-paint">Largest Contentful Paint</h3> |
|
2016 <p>The <a href="https://requestmetrics.com/web-performance/largest-conte… |
|
2017 |
|
2018 <p>This time is a proxy for when the user thinks the page is substantial… |
|
2019 |
|
2020 <p>Return to Target.com. As the page continues to load, the Largest Cont… |
|
2021 |
|
2022 <figure> |
|
2023 <img src="https://requestmetrics.com/assets/images/webperf/monitorin… |
|
2024 <figcaption>Largest Contentful Paint on Target.com</figcaption> |
|
2025 </figure> |
|
2026 |
|
2027 <p>The page is much more complete, showing that it knows about the user,… |
|
2028 |
|
2029 <p>Wait, isn’t LCP just like the old <code class="language-plaintext h… |
|
2030 |
|
2031 <p>Because the LCP value will be updated as larger paint events occur la… |
|
2032 |
|
2033 <p>Both the LCP and <code class="language-plaintext highlighter-rouge">o… |
|
2034 |
|
2035 <h2 id="cumulative-layout-shift">Cumulative Layout Shift</h2> |
|
2036 <p>The <a href="https://requestmetrics.com/web-performance/cumulative-la… |
|
2037 |
|
2038 <p>Unlike other performance metrics, layout shift cannot be measured as … |
|
2039 |
|
2040 <p>A large, asynchronous site like Target.com will have lots of layout s… |
|
2041 |
|
2042 <h2 id="first-input-delay">First Input Delay</h2> |
|
2043 <p>Once the page has painted something to the screen the user will try t… |
|
2044 |
|
2045 <p>This performance metric is a little harder to understand. It’s not … |
|
2046 |
|
2047 <p>Consider Target.com again. After the Largest Contentful Paint event, … |
|
2048 |
|
2049 <p>If you click on a coupon, which triggers an <code class="language-pla… |
|
2050 |
|
2051 <p>FID is a measure of both when the user thinks the page is ready and h… |
|
2052 |
|
2053 <h2 id="compatibility-and-limitations">Compatibility and limitations</h2> |
|
2054 <p>Google is the driving force behind the Core Web Vital metrics, and ha… |
|
2055 |
|
2056 <p>Web Vitals are currently a draft in the W3C, and have not started the… |
|
2057 |
|
2058 <p>If you decide to start capturing performance data, Web Vital metrics … |
|
2059 |
|
2060 <h2 id="lab-performance-vs-field-performance">Lab Performance vs. Field … |
|
2061 <p>As you build your website, you probably have an intrinsic feeling for… |
|
2062 |
|
2063 <p>But what is more relevant is how fast your users experience your webs… |
|
2064 |
|
2065 <p>In the next section you’ll see how you can gather field performance… |
|
2066 |
|
2067 <h2 id="case-study-the-really-slow-website">Case Study: The Really Slow … |
|
2068 <p>This tutorial has a demonstration website, and it’s really slow. It… |
|
2069 |
|
2070 <figure> |
|
2071 <img src="https://requestmetrics.com/assets/images/webperf/monitorin… |
|
2072 <figcaption>The Really Slow Website™</figcaption> |
|
2073 </figure> |
|
2074 |
|
2075 <p>You’re going to write a performance monitoring script for the websi… |
|
2076 |
|
2077 <p>You can use your own website for this exercise if you prefer.</p> |
|
2078 |
|
2079 <h3 id="prerequisites">Prerequisites</h3> |
|
2080 <p>The Really Slow Website™ consists of some static content served fro… |
|
2081 |
|
2082 <ul> |
|
2083 <li>Git and a Github account – To clone the example repository.</li> |
|
2084 <li>Node.js. This example uses the current LTS version, 14.15.0</li> |
|
2085 <li>Google Chrome. – Version 87 or higher.</li> |
|
2086 <li>Visual Studio Code – or the code editor of your choice.</li> |
|
2087 </ul> |
|
2088 |
|
2089 <p>You should have a working knowledge of Git, HTML, and JavaScript. See… |
|
2090 |
|
2091 <p>If you get stuck along the way, the complete solution is in the <a hr… |
|
2092 |
|
2093 <h3 id="getting-started">Getting started</h3> |
|
2094 <p>If you’re going to use my Really Slow Website™, you’ll need to … |
|
2095 |
|
2096 <figure class="code " id="code-153"> |
|
2097 <div class="code-wrap"> |
|
2098 <pre class="prettyprint lang-bash"> |
|
2099 git clone https://github.com/toddhgardner/monitoring-core-web-vitals.git |
|
2100 cd monitoring-core-web-vitals |
|
2101 npm install |
|
2102 npm start |
|
2103 </pre> |
|
2104 <!-- <button type="button" class="btn copy-button yes-js"> |
|
2105 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
2106 <span class="label">Copy</span> |
|
2107 </button> --> |
|
2108 |
|
2109 <figcaption><a href="#code-153">Loading the example project</a><… |
|
2110 |
|
2111 </div> |
|
2112 </figure> |
|
2113 |
|
2114 <p>This will install the dependencies for the website and start the serv… |
|
2115 |
|
2116 <p>If you prefer to use your own website for this exercise, make sure yo… |
|
2117 |
|
2118 <h3 id="troubleshooting">Troubleshooting</h3> |
|
2119 <p>Here are some solutions to common problems you might encounter:</p> |
|
2120 |
|
2121 <ul> |
|
2122 <li><code class="language-plaintext highlighter-rouge">Command not fou… |
|
2123 <li><code class="language-plaintext highlighter-rouge">Command not fou… |
|
2124 <li>npm errors – Make sure you are running a current version of Node… |
|
2125 </ul> |
|
2126 |
|
2127 <h2 id="creating-the-performance-monitoring-script">Creating the perform… |
|
2128 <p>Go to the monitoring-core-web-vitals/public directory and create a ne… |
|
2129 |
|
2130 <figure class="code " id="code-226"> |
|
2131 <div class="code-wrap"> |
|
2132 <pre class="prettyprint lang-javascript"> |
|
2133 (function perf() { |
|
2134 |
|
2135 var data = { |
|
2136 url: window.location.href, |
|
2137 fcp: 0, |
|
2138 lcp: 0, |
|
2139 cls: 0, |
|
2140 fid: 0 |
|
2141 }; |
|
2142 |
|
2143 console.log("Starting performance monitoring on " + data.url… |
|
2144 |
|
2145 })(); |
|
2146 </pre> |
|
2147 <!-- <button type="button" class="btn copy-button yes-js"> |
|
2148 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
2149 <span class="label">Copy</span> |
|
2150 </button> --> |
|
2151 |
|
2152 <figcaption><a href="#code-226">Skeleton of the performance scri… |
|
2153 |
|
2154 </div> |
|
2155 </figure> |
|
2156 |
|
2157 <p>The code creates an <a href="https://developer.mozilla.org/en-US/docs… |
|
2158 |
|
2159 <p>Go to index.html in the public directory and add the following <code … |
|
2160 |
|
2161 <figure class="code " id="code-68"> |
|
2162 <div class="code-wrap"> |
|
2163 <pre class="prettyprint lang-html"> |
|
2164 <script src="perf.js"></script> |
|
2165 </pre> |
|
2166 <!-- <button type="button" class="btn copy-button yes-js"> |
|
2167 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
2168 <span class="label">Copy</span> |
|
2169 </button> --> |
|
2170 |
|
2171 <figcaption><a href="#code-68">Adding the perf script to your pa… |
|
2172 |
|
2173 </div> |
|
2174 </figure> |
|
2175 |
|
2176 <p>Open Chrome and navigate to http://localhost:3000/. Open the Develope… |
|
2177 |
|
2178 <figure class="code " id="code-80"> |
|
2179 <div class="code-wrap"> |
|
2180 <pre class="prettyprint lang-bash"> |
|
2181 Starting performance monitoring on http://localhost:3000/ |
|
2182 </pre> |
|
2183 <!-- <button type="button" class="btn copy-button yes-js"> |
|
2184 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
2185 <span class="label">Copy</span> |
|
2186 </button> --> |
|
2187 |
|
2188 <figcaption><a href="#code-80">Server running output</a></figcap… |
|
2189 |
|
2190 </div> |
|
2191 </figure> |
|
2192 |
|
2193 <p>The perf.js script is working!</p> |
|
2194 |
|
2195 <h2 id="monitoring-first-contentful-paint">Monitoring First Contentful P… |
|
2196 <p>FCP, like many of the Core Web Vital metrics, is exposed via the <a h… |
|
2197 |
|
2198 <p>Go to the perf.js file and add the following code after the <code cla… |
|
2199 |
|
2200 <figure class="code " id="code-176"> |
|
2201 <div class="code-wrap"> |
|
2202 <pre class="prettyprint lang-javascript"> |
|
2203 var fcpObserver = new PerformanceObserver(function handleFCP(entryList… |
|
2204 // TODO Handle FCP Entry |
|
2205 }).observe({ type: "paint", buffered: true }); |
|
2206 </pre> |
|
2207 <!-- <button type="button" class="btn copy-button yes-js"> |
|
2208 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
2209 <span class="label">Copy</span> |
|
2210 </button> --> |
|
2211 |
|
2212 <figcaption><a href="#code-176">FCP Observer function</a></figca… |
|
2213 |
|
2214 </div> |
|
2215 </figure> |
|
2216 |
|
2217 <p>This creates a <code class="language-plaintext highlighter-rouge">Per… |
|
2218 |
|
2219 <p>Fill in the body of the <code class="language-plaintext highlighter-r… |
|
2220 |
|
2221 <figure class="code " id="code-257"> |
|
2222 <div class="code-wrap"> |
|
2223 <pre class="prettyprint lang-javascript"> |
|
2224 var entries = entryList.getEntries() || []; |
|
2225 entries.forEach(function(entry) { |
|
2226 if (entry.name === "first-contentful-paint") { |
|
2227 data.fcp = entry.startTime; |
|
2228 console.log("Recorded FCP Performance: " + data.fcp); |
|
2229 } |
|
2230 }); |
|
2231 </pre> |
|
2232 <!-- <button type="button" class="btn copy-button yes-js"> |
|
2233 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
2234 <span class="label">Copy</span> |
|
2235 </button> --> |
|
2236 |
|
2237 <figcaption><a href="#code-257">FCP Event Handler</a></figcaptio… |
|
2238 |
|
2239 </div> |
|
2240 </figure> |
|
2241 |
|
2242 <p>The <code class="language-plaintext highlighter-rouge">getEntries()</… |
|
2243 |
|
2244 <p>Go back to Chrome and refresh the page. You should see the new FCP va… |
|
2245 |
|
2246 <h2 id="monitoring-largest-contentful-paint">Monitoring Largest Contentf… |
|
2247 <p>Just like FCP, the LCP is exposed via the <code class="language-plain… |
|
2248 |
|
2249 <p>Other than the names, the code is very similar. Go back to perf.js an… |
|
2250 |
|
2251 <figure class="code " id="code-406"> |
|
2252 <div class="code-wrap"> |
|
2253 <pre class="prettyprint lang-javascript"> |
|
2254 var lcpObserver = new PerformanceObserver(function handleLCP(entryList… |
|
2255 var entries = entryList.getEntries() || []; |
|
2256 entries.forEach(function(entry) { |
|
2257 if (entry.startTime > data.lcp) { |
|
2258 data.lcp = entry.startTime; |
|
2259 console.log("Recorded LCP Performance: " + data.lcp); |
|
2260 } |
|
2261 }); |
|
2262 }).observe({ type: "largest-contentful-paint", buffered: tru… |
|
2263 </pre> |
|
2264 <!-- <button type="button" class="btn copy-button yes-js"> |
|
2265 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
2266 <span class="label">Copy</span> |
|
2267 </button> --> |
|
2268 |
|
2269 <figcaption><a href="#code-406">LCP Observer function</a></figca… |
|
2270 |
|
2271 </div> |
|
2272 </figure> |
|
2273 |
|
2274 <p>The difference between FCP and LCP is that you don’t necessarily kn… |
|
2275 |
|
2276 <p>Refresh the page in Chrome. In addition to the previous console messa… |
|
2277 |
|
2278 <h2 id="monitoring-cumulative-layout-shift">Monitoring Cumulative Layout… |
|
2279 <p>The Cumulative Layout Shift is also available with a <code class="lan… |
|
2280 |
|
2281 <p>You also need to check to see if the layout shift is in response to a… |
|
2282 |
|
2283 <p>Fortunately, there’s an API for that.</p> |
|
2284 |
|
2285 <p>In perf.js, add the following below the <code class="language-plainte… |
|
2286 |
|
2287 <figure class="code " id="code-387"> |
|
2288 <div class="code-wrap"> |
|
2289 <pre class="prettyprint lang-javascript"> |
|
2290 var clsObserver = new PerformanceObserver(function handleCLS(entryList… |
|
2291 var entries = entryList.getEntries() || []; |
|
2292 entries.forEach(function(entry) { |
|
2293 if (!entry.hadRecentInput) { |
|
2294 data.cls += entry.value; |
|
2295 console.log("Increased CLS Performance: " + data.cls); |
|
2296 } |
|
2297 }); |
|
2298 }).observe({ type: "layout-shift", buffered: true }); |
|
2299 </pre> |
|
2300 <!-- <button type="button" class="btn copy-button yes-js"> |
|
2301 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
2302 <span class="label">Copy</span> |
|
2303 </button> --> |
|
2304 |
|
2305 <figcaption><a href="#code-387">CLS Observer function</a></figca… |
|
2306 |
|
2307 </div> |
|
2308 </figure> |
|
2309 |
|
2310 <p>Refresh the page in Chrome again. You’ll see several additional mes… |
|
2311 |
|
2312 <h2 id="monitoring-first-input-delay">Monitoring First Input Delay</h2> |
|
2313 <p>As you might expect, as a Core Web Vital, the First Input Delay is ex… |
|
2314 |
|
2315 <p>In perf.js, add the following below <code class="language-plaintext h… |
|
2316 |
|
2317 <figure class="code " id="code-365"> |
|
2318 <div class="code-wrap"> |
|
2319 <pre class="prettyprint lang-javascript"> |
|
2320 var fidObserver = new PerformanceObserver(function handleFID(entryList… |
|
2321 var entries = entryList.getEntries() || []; |
|
2322 entries.forEach(function(entry) { |
|
2323 data.fid = entry.processingStart - entry.startTime; |
|
2324 console.log("Recorded FID Performance: " + data.fid); |
|
2325 }); |
|
2326 }).observe({ type: "first-input", buffered: true }); |
|
2327 </pre> |
|
2328 <!-- <button type="button" class="btn copy-button yes-js"> |
|
2329 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
2330 <span class="label">Copy</span> |
|
2331 </button> --> |
|
2332 |
|
2333 <figcaption><a href="#code-365">FID Observer function</a></figca… |
|
2334 |
|
2335 </div> |
|
2336 </figure> |
|
2337 |
|
2338 <p>The delay in first-input is the difference between when the entry sta… |
|
2339 |
|
2340 <p>Refresh the page in Chrome. You won’t see the FID console message y… |
|
2341 |
|
2342 <p>Play around with clicking at different phases of the loading process.… |
|
2343 |
|
2344 <h2 id="sending-the-data-with-a-beacon">Sending the Data with a Beacon</… |
|
2345 <p>Now that you have some performance metrics, you need to save them som… |
|
2346 |
|
2347 <p>This works particularly well for performance data because it guarante… |
|
2348 |
|
2349 <p>To use the Beacon, you wait for a <code class="language-plaintext hig… |
|
2350 |
|
2351 <p>Add this below the observers in perf.js:</p> |
|
2352 |
|
2353 <figure class="code " id="code-205"> |
|
2354 <div class="code-wrap"> |
|
2355 <pre class="prettyprint lang-javascript"> |
|
2356 window.addEventListener("beforeunload", function() { |
|
2357 navigator.sendBeacon("/vitals", JSON.stringify(data)); |
|
2358 console.log("Sending performance beacon...", data); |
|
2359 }); |
|
2360 </pre> |
|
2361 <!-- <button type="button" class="btn copy-button yes-js"> |
|
2362 <img src="/assets/images/copy.svg" alt="Copy" /> |
|
2363 <span class="label">Copy</span> |
|
2364 </button> --> |
|
2365 |
|
2366 <figcaption><a href="#code-205">Sending data with the Beacon</a>… |
|
2367 |
|
2368 </div> |
|
2369 </figure> |
|
2370 |
|
2371 <p>Go back to the site in Chrome and refresh it a few times. You probabl… |
|
2372 |
|
2373 <p>If you want to see the values in Chrome, you can turn on the “Prese… |
|
2374 |
|
2375 <p>Or, you can pop over to the terminal where you started the website. E… |
|
2376 |
|
2377 <h2 id="understanding-the-data">Understanding the Data</h2> |
|
2378 <p>As you saw with the Really Slow Website™ case study, field performa… |
|
2379 |
|
2380 <p>Some of the data you receive will be from users with really fast comp… |
|
2381 |
|
2382 <p>For the Core Web Vitals, <a href="https://web.dev/vitals/">Google has… |
|
2383 |
|
2384 <figure> |
|
2385 <img src="https://requestmetrics.com/assets/images/webperf/monitorin… |
|
2386 <figcaption>Google's recommended ranges for vital metrics</figcaptio… |
|
2387 </figure> |
|
2388 |
|
2389 <p>But this is just a starting point!</p> |
|
2390 |
|
2391 <p>You need to decide for yourself what is appropriate for your website,… |
|
2392 |
|
2393 <figure> |
|
2394 <img src="https://requestmetrics.com/assets/images/webperf/monitorin… |
|
2395 <figcaption>Web Vital histogram chart from Request Metrics</figcapti… |
|
2396 </figure> |
|
2397 |
|
2398 <p>You may also want to combine the Web Vital data with more traditional… |
|
2399 |
|
2400 <h2 id="summary">Summary</h2> |
|
2401 <p>In this post you learned about the new Core Web Vital performance met… |
|
2402 |
|
2403 <p>Web Performance is a complex topic and you should learn more about it… |
|
2404 |
|
2405 ]]></content:encoded> |
|
2406 <pubDate>Thu, 03 Dec 2020 00:00:00 +0000</pubDate> |
|
2407 <author>[email protected] (Request Metrics)</author> |
|
2408 </item> |
|
2409 |
|
2410 |
|
2411 <item> |
|
2412 <title>How Hacker News Crushed DavidWalshBlog</title> |
|
2413 <link>https://requestmetrics.com/web-performance/how-hackernews-cr… |
|
2414 <guid isPermaLink="true">https://requestmetrics.com/web-performanc… |
|
2415 <description>Earlier this month, David’s heartfelt posting about… |
|
2416 |
|
2417 |
|
2418 |
|
2419 DavidWalsh.name Technology |
|
2420 David’s site uses WordPress. It serves most content from...</descripti… |
|
2421 <media:content url="https://requestmetrics.com/assets/images/webpe… |
|
2422 <enclosure url="https://requestmetrics.com/assets/images/webperf/h… |
|
2423 <content:encoded><![CDATA[ |
|
2424 <div><img src="https://requestmetrics.com/assets/images/webperf/… |
|
2425 <p>Earlier this month, <a href="https://davidwalsh.name/leaving-… |
|
2426 |
|
2427 <!-- more --> |
|
2428 |
|
2429 <h2 id="davidwalshname-technology">DavidWalsh.name Technology</h2> |
|
2430 <p>David’s site uses WordPress. It serves most content from a MySQL da… |
|
2431 |
|
2432 <p>Cloudflare does this by taking control of DNS and routing requests th… |
|
2433 |
|
2434 <h2 id="monitoring-the-spike">Monitoring the Spike</h2> |
|
2435 <p>Traffic began to surge to the page around 7:40 AM (local time), and t… |
|
2436 |
|
2437 <p>By 7:50 AM, traffic hit the limit of the technology, around 100 page … |
|
2438 |
|
2439 <p>Here’s the alert that went off in Request Metrics:</p> |
|
2440 |
|
2441 <figure> |
|
2442 <img src="https://requestmetrics.com/assets/images/webperf/hackernews/… |
|
2443 <figcaption>Performance Alert</figcaption> |
|
2444 </figure> |
|
2445 |
|
2446 <p>If you tried to read his post during that time, you had a frustrating… |
|
2447 |
|
2448 <figure> |
|
2449 <img src="https://requestmetrics.com/assets/images/webperf/hackernews/… |
|
2450 <figcaption>Core Web Vitals</figcaption> |
|
2451 </figure> |
|
2452 |
|
2453 <p>Clearly, it was slow. But why? Why couldn’t it serve more than 100 … |
|
2454 |
|
2455 <h2 id="page-performance-history">Page Performance History</h2> |
|
2456 |
|
2457 <p>The performance report below for David’s Mozilla post shows a 48-ho… |
|
2458 |
|
2459 <figure> |
|
2460 <img src="https://requestmetrics.com/assets/images/webperf/hackernews/… |
|
2461 <figcaption>Page Performance Report</figcaption> |
|
2462 </figure> |
|
2463 |
|
2464 <p>Before the surge of traffic, the page had a median load time of 4-6 s… |
|
2465 |
|
2466 <p>Opening the site in and checking the document request in network devt… |
|
2467 |
|
2468 <figure> |
|
2469 <img src="https://requestmetrics.com/assets/images/webperf/hackernews/… |
|
2470 <figcaption>Request Headers</figcaption> |
|
2471 </figure> |
|
2472 |
|
2473 <p>The server is returning a <code class="language-plaintext highlighter… |
|
2474 |
|
2475 <p>The net effect of this is that Cloudflare has made the site <strong>s… |
|
2476 |
|
2477 <h2 id="api-endpoint-performance">API Endpoint Performance</h2> |
|
2478 |
|
2479 <p>The page performance report above also shows that an API endpoint, <c… |
|
2480 |
|
2481 <figure> |
|
2482 <img src="https://requestmetrics.com/assets/images/webperf/hackernews/… |
|
2483 <figcaption>API Endpoint Report</figcaption> |
|
2484 </figure> |
|
2485 |
|
2486 <p>Checking this endpoint in devtools, it returns an HTML snippet of wha… |
|
2487 |
|
2488 <p>By rendering the sidebar with an asynchronous uncacheable request, th… |
|
2489 |
|
2490 <h2 id="web-performance-lessons">Web Performance Lessons</h2> |
|
2491 |
|
2492 <p>Your website is different from this one, but there are some common id… |
|
2493 |
|
2494 <h3 id="1-reduce-dynamic-content">1. Reduce Dynamic Content</h3> |
|
2495 <p>This site was producing the sidebar content dynamically. It probably … |
|
2496 |
|
2497 <p>Dynamic content is slow. It’s hard to cache and it often has to be … |
|
2498 |
|
2499 <p>Look for dynamic content and make sure it’s really worth the perfor… |
|
2500 |
|
2501 <h3 id="2-test-your-configuration">2. Test Your Configuration</h3> |
|
2502 <p>This site was set up to be cached by Cloudflare at one point, but ove… |
|
2503 |
|
2504 <p>Software systems are complex and ever-changing. Be sure to test thing… |
|
2505 |
|
2506 <h3 id="3-there-is-no-silver-bullet">3. There Is No Silver Bullet</h3> |
|
2507 <p>Simply adding Cloudflare to the site did not solve the performance is… |
|
2508 |
|
2509 <p>Performance isn’t something you buy or bolt on later. It’s a prin… |
|
2510 |
|
2511 |
|
2512 ]]></content:encoded> |
|
2513 <pubDate>Wed, 25 Nov 2020 04:00:00 +0000</pubDate> |
|
2514 <author>[email protected] (Request Metrics)</author> |
|
2515 </item> |
|
2516 |
|
2517 |
|
2518 </channel> |
|
2519 </rss> |
