It's worth taking a look at some web application architecture. I am including a few links on the subject for you to read. It's a good idea to have a general understanding of how a single page web app is built. Also how a PWA is build. We should also know the difference between Server Side Rendered Pages and Staticlly Generated Pages. We will get to these topics later in the course.
- Front End PRPL Pattern
- App Shell Modal Single Page Application
- Progressive Web App Architecture
- web dev
Yup images they will be the bain of your existance. Basically compress the ^%#() out of them. Use an image service like Cloudinary or take control of the images yourself and use a compression tool like Squoosh.
Make sure you keep on top of your css for front end development. It's moving quickley. Google support the content-visibility property and you can use it now. This will give you an instant performance boost for clients viewing your projects on Chrome browsers.
Use the dev tools there is a reason why there in the browser. Monitor you builds using the various tools provided to you.
- animation
- rendering
- javascript profiler
- paint flash
- layout shift
- performance monitor
- paint flash
- layout shift
- performance monitor
- paint flash
- layout shift
- various techniques I personally create a view with template literal build the dom node and add it to an array
- then build a container add the node elements to the container
- add the container to the DOM
- try to add all content at once and not a piece at a time.