Thanks everybody for sharing your insights at our meetup! These were some of your suggestions and additions:
Total Blocking Time
TBT is the total time of any tasks that take over 50ms. So if you had 3 tasks that take 35ms, 55ms and 80ms the TBT would be 35ms (55-50 and 80 - 50)
CLS vs. web fonts
use variable fonts
preload regular font, other (bold, italic) to discover later if needed
HTTP Response Header makes browser request it (no server push):
link: <https://example.com/regular.woff2>; rel="preload"; as="font"; type="font/woff2"; crossorigin
image dimensions vs. art direction and older browsers
width height must only put the proper ratio
use aspect ratio/intrinsic ratio for the image dimension problem
aspect ratio attribute, control by media queries,
intrinsic ratio trick with padding-bottom for old devices
Thanks everybody for sharing your insights at our meetup! These were some of your suggestions and additions:
Total Blocking Time
CLS vs. web fonts
link: <https://example.com/regular.woff2>; rel="preload"; as="font"; type="font/woff2"; crossoriginimage dimensions vs. art direction and older browsers
image formats