This is a personal template to start a new front-end project and also for learning purpose.
A development version (without a server) that watches changes can be started
with npm start. To build the project into the "dist" folder run npm run build.
The project can be deployed with npm run deploy but first needs SSH configuration
and path adjustments, see deploy folder.
Use native image lazy loading. Only for images that are not above the fold.
<img
src="image.jpg"
srcset="image-480.jpg 480w, image-960.jpg 960w, image-1200 1200w"
sizes="(max-width: 480px) 100vw, 960px"
alt="Alt"
width="1200"
height="675"
loading="lazy"
decoding="async"
style="background-image: url('preview.jpg'); background-size: cover;"
/>The priority of the LCP image can be boosted with attribute fetchpriority="high".
See index.html, css/styles/settings-fonts.css and css/styles/settings-variables.css for embedding.