Rules: definition of internal default rules

rdpanek commented 3 years ago

IDEA

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

Sources:

rdpanek commented 3 years ago

CSS & JS

must be compresed by gzip or br

Tomas-Kostka commented 3 years ago

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	:heavy_check_mark:

Tomas-Kostka commented 3 years ago

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	:heavy_check_mark:

Tomas-Kostka commented 3 years ago

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	:question:

Tomas-Kostka commented 3 years ago

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	:question:

Tomas-Kostka commented 3 years ago

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	:heavy_check_mark:

Tomas-Kostka commented 3 years ago

Response code 404

you have NO Not found resources on your site

Verifiable by Listener	:heavy_check_mark:

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

Verifiable by Listener	:heavy_check_mark:

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 commented 3 years ago

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 commented 3 years ago

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	:heavy_check_mark:

Tomas-Kostka commented 3 years ago

LCP (Largest Contentful Paint) < 2.5s

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

Verifiable by Listener	:heavy_check_mark:

Tomas-Kostka commented 3 years ago

FID (First Input Delay) < 100ms

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

Verifiable by Listener	:heavy_check_mark:

Tomas-Kostka commented 3 years ago

CLS (Cumulative Layout Shift) < 0.1

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

Verifiable by Listener	:heavy_check_mark:

Tomas-Kostka commented 3 years ago

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	:question:

Tomas-Kostka commented 3 years ago

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	:x:

Tomas-Kostka commented 3 years ago

HTTP headers set properly

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

Verifiable by Listener	:heavy_check_mark:

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 commented 3 years ago

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	:x:

Tomas-Kostka commented 3 years ago

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	:x:

Tomas-Kostka commented 3 years ago

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	:x:

Tomas-Kostka commented 3 years ago

assets cached in a service worker cache (ToDo)

assets such as fonts, styles, JavaScript and images

Verifiable by Listener	:question:

Tomas-Kostka commented 3 years ago

Optimized images

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

Tomas-Kostka commented 3 years ago

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	:heavy_check_mark:

Tomas-Kostka commented 3 years ago

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	:x:

rdpanek commented 3 years ago

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

canarytrace / documentation