Rules: definition of internal default rules

[rdpanek]

IDEA

Canarytrace Listener will be automatically check the rules of quality a web application.

Sources:

• https://httparchive.org
• https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/

[rdpanek]

CSS & JS

• must be compresed by gzip or br

[Tomas-Kostka]

HTTP/2

• all assets run over HTTP/2
  -- see https://almanac.httparchive.org/en/2020/http2#http2-impact, https://http2.github.io/faq/
• all requests use a single HTTP/2 connection
• mind the proper deployment of HTTP/2
  -- see https://ldnwebperf.org/sessions/bringing-http-2-to-gov-uk/, https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/#http2

Verifiable by Listener	✔️

[Tomas-Kostka]

Brotli text/plain compression

• br (or at least gzip) is used for plain text compression
• Browsers will accept Brotli (=br) only if the user is visiting a website over HTTPS
• Brotli with setting 4 is both significantly smaller AND compresses faster than gzip
  -- see https://expeditedsecurity.com/blog/nginx-brotli/

Verifiable by Listener	✔️

[Tomas-Kostka]

HPACK compression for HTTP/2

• If using HTTP/2, HPACK compression for HTTP response headers is used
• a note: Some HTTP/2 servers may not fully support the specification.

Verifiable by Listener	❓

[Tomas-Kostka]

HTTP/2 Server Push - NOT recommended

• HTTP/2 Server Push is being removed from Chrome
  -- see https://groups.google.com/a/chromium.org/g/blink-dev/c/K3rYLvmQUBY/m/vOWBKZGoAQAJ
  -- or https://almanac.httparchive.org/en/2020/http2#goodbye-server-push

Verifiable by Listener	❓

[Tomas-Kostka]

HTTP/3

• HTTP/3 provides a number of improvements compared to HTTP/2
  -- see https://blog.cloudflare.com/http3-the-past-present-and-future/
• HTTP/3 is still work in progress. But major browsers have implementations ready. Some CDNs support QUIC and HTTP/3 too. Google services are already running over HTTP/3.
• You can check if your server is running on HTTP/3 on https://http3check.net/ (e.g. www.youtube.com)

Verifiable by Listener	✔️

[Tomas-Kostka]

Response code 404

• you have NO Not found resources on your site

Verifiable by Listener	✔️

• if it happens we come across 404:
  -- response body size for 404 is small

Verifiable by Listener	✔️

• examine the caching strategy for 404 pages. (the goal is to serve HTML to the browser only when it expects an HTML response, and return a small error payload for all other responses)

• the best way might be the cached version served by a CDN
  --- see https://nooshu.github.io/blog/2020/08/25/you-should-be-testing-your-404-pages-web-performance/

• a note: nclude a 404 error page in your test suite, and track its score over time

[Tomas-Kostka]

well known (or suspicious) - low-hanging fruits

• lazy-loaded images
• unsized images
• legacy format images
• synchronous scripts
• web fonts that are not used
• icon fonts
  -- see https://gist.github.com/tkadlec/683b26344cde774170b94c0fcf0088b4

[Tomas-Kostka]

Never more 404 on favicon.ico

• By default a browser automatically looks for the favicon.ico in the websites root directory (if a isn’t present). If no icon is found, a server will respond with a 404 page.
  -- see https://love2dev.com/blog/web-performance-tip-make-sure-you-have-a-favicon/

Verifiable by Listener	✔️

[Tomas-Kostka]

LCP (Largest Contentful Paint) < 2.5s

-- see https://web.dev/vitals/#core-web-vitals

Verifiable by Listener	✔️

[Tomas-Kostka]

FID (First Input Delay) < 100ms

-- see https://web.dev/vitals/#core-web-vitals

Verifiable by Listener	✔️

[Tomas-Kostka]

CLS (Cumulative Layout Shift) < 0.1

-- see https://web.dev/vitals/#core-web-vitals

Verifiable by Listener	✔️

[Tomas-Kostka]

Removed unused CSS/JavaScript.

• use CSS and JavaScript code coverage in Chrome to learn which code has been executed/applied and which hasn’t. Once you've detected unused code,find those modules and lazy load with import().

Verifiable by Listener	❓

[Tomas-Kostka]

Constrained the impact of third-party scripts

• A single third-party script may call a long tail of scripts.
  -- Consider using service workers by racing the resource download with a timeout.
  -- Establish a Content Security Policy (CSP) to restrict the impact of third-party scripts, e.g. disallowing the download of audio or video.
  -- Embed scripts via iframe, so scripts don't have access to the DOM. Sandbox them, too.
  -- Load third-party scripts only once the app has initialized.
  -- Watch out for anti-flicker snippets.
  see https://andydavies.me/blog/2020/10/02/reducing-the-site-speed-impact-of-third-party-tags/ , https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/

Verifiable by Listener	❌

[Tomas-Kostka]

HTTP headers set properly

• Without proper HTTP cache headers (=Cache-Control) setting, browsers will set them automatically

Verifiable by Listener	✔️

• No unnecessary headers (e.g. server, expires, x-powered-by, pragma, x-frame-options, X-XSS-Protection, x-cache, via, p3p, x-aspnet-version, x-ua-compatible and others)
  -- see https://www.fastly.com/blog/headers-we-dont-want

[Tomas-Kostka]

use defer instead of async to load critical JavaScript asynchronously

• With defer, browser doesn’t execute scripts until HTML is parsed.
  -- So, unless you need JavaScript to execute before start render, it’s better to use defer
  see https://calendar.perfplanet.com/2016/prefer-defer-over-async/#attributes

Verifiable by Listener	❌

[Tomas-Kostka]

Not use BOTH async and defer

• whenever both attributes are used, async will always win.
  see https://twitter.com/csswizardry/status/1331721659498319873

Verifiable by Listener	❌

[Tomas-Kostka]

used resource hints to speed up delivery

• with dns-lookup, preconnect, prefetch, preload and prerender
  see https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf,

Verifiable by Listener	❌

[Tomas-Kostka]

assets cached in a service worker cache (ToDo)

• assets such as fonts, styles, JavaScript and images

Verifiable by Listener	❓

[Tomas-Kostka]

Optimized images

• with Squoosh, mozjpeg, guetzli, pingo and SVGOMG,
• AVIF/WebP served with an image CDN

[Tomas-Kostka]

budget for critical-path resources (CSS, JS, HTML, and data) should be max. 170KB gzipped

• to reach TTI under 5 seconds for first load (on 3G network + midrange Android)
  see https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/

Verifiable by Listener	✔️

[Tomas-Kostka]

Serve legacy code only to legacy browsers

• with <script type="module"> and module/nomodule pattern
  see https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/ look up script type="module"

Verifiable by Listener	❌

[rdpanek]

Final table

#	title	Index	Condition	Min count /hour	Score
1	Failed check your page!	c.report	test step failed	2	10
2	Encoding of response with Javascript files must contains gzip or brotli compression.	c.response	gzip or br missing in headers.content-encoding	10	40
3	Encoding of response with CSS files must contains gzip or brotli compression.	c.response	gzip or br missing in headers.content-encoding	10	40
4	Higher response time.	c.performance-entries	> 3000ms	10	40
5	WebVitals LCP exceeded.	c.audit	> 2500ms	5	40
6	WebVitals TTI exceeded.	c.audit	> 5000ms	5	40
7	WebVitals CLS exceeded.	c.audit	> 0.1	5	40
8	LoadEventEnd exceeded.	c.performance-entries	> 4000ms	5	40