I've been getting this error that "This is the largest contentful element painted within the viewport" and takes about 21 seconds to load. I've tried resolving this with fetchpriority=high but it doesn't seem to work.
Should i use this instead to load scripts, images, CSS as and when needed?
<title>JS and CSS preload example</title>
<link rel="preload" href="style.css" as="style" />
<link rel="preload" href="main.js" as="script" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>bouncing balls</h1>
<canvas></canvas>
<script src="main.js" defer></script>
and similar structure for images?
I've tried resolving this with fetchpriority=high but it doesn't seem to work. Browser is still rendering the complete page and is not prioritizing the LCP element.