serious performance problems

Hi, i have been told that i have the following problems with my site and that is the reason why it is slow, but i am not sure how to deal with this issues. can anyone please offer me some advice

PCITURES & IMAGES:

implement webp pictures (natively in DOM and if possible not by CF dynamically)
do not use images/icons/svg/jpg/png implemented as “Backgroundimage” or defined by CSS
use <picture> tags and overload them with responive images.
use <picture> tags and overload them with different formats (WEBP/HEIC/JP2) and native Images (PNG/JPG) as fallback
lazyload Images. (no this is currently not working correct for you, as you can see in the waterfall at GTMetrix)
scale images to the size they will be displayed
optimize Images natively and losslessly
prevent inline base64 images if its JPG or PNG and bigger then 4kb

CSS & JS

combine ALL css files into one big file
combine ALL js files into one big file
prevent inline JS (if possible), it most probably can be added to the combined file
compress the big css file at highest level (CloudFlare is doing this for you)
compress the big js file at highest level (CloudFlare is doing this for you)
(hint: compression get better and better the bigger the files)
put CSS into header
put JS right before closing tag.
remove unused css
9 remove unused js

FONTS:

prevent too many fonts. Try to go with just 1-2 fonts. You actually use 9 different fonts, which are ALL producing renderblocking.
implement font-display correct for each font.
remove unused fonts
optimize fonts natively and losslessly
compress fonts

DNS:

prevent too many external DNS lookups
combine files if possible to prevent requests

The page I need help with: [log in to see the link]