Whenever you use HTML in React (i.e. return (<div>asd</div>)) you need to use the .jsx file format.
Created Image component
When you don't add explicit width and height props to images, the website will shift around and resize as elements are loaded into the page. This reduces accessibility and lowers your Google ranking. See CLS.
Images are loaded dynamically: images will not download if they're not visible to the user.
You guys keep using class instead of className. Class is a reserved JavaScript keyword, if you're writing HTML in JS/JSX you MUST use className.
Added linter
The linter automatically formats all of your code.
Run npm run fix to automatically format all JS files in the project.
Run npm run lint to check for styling errors.
Refactored a bunch of stuff
There is no point to using React if you're just going to copy/paste elements across different files.
If you find yourself copying or rewriting the same thing, then make it into a component.
Each page should have its own CSS files. Some components were combining CSS from multiple files. This introduces a lot of duplicates and pollutes the DOM. Use one isolated CSS file for every component.
WebVitals performance
Before
After
Conclusion
Improved performance by quite a lot, but theres still a lot of work to do. Next steps would be to fix responsiveness.
From now on, please use <Image /> instead of <img /> with EXPLICIT width and height props. Otherwise, you are seriously compromising performance.
.jsfiles to.jsxreturn (<div>asd</div>)) you need to use the.jsxfile format.Imagecomponentwidthandheightprops to images, the website will shift around and resize as elements are loaded into the page. This reduces accessibility and lowers your Google ranking. See CLS.classinstead ofclassName. Class is a reserved JavaScript keyword, if you're writing HTML in JS/JSX you MUST useclassName.npm run fixto automatically format all JS files in the project.npm run lintto check for styling errors.WebVitals performance
Before
After
Conclusion
Improved performance by quite a lot, but theres still a lot of work to do. Next steps would be to fix responsiveness.
From now on, please use
<Image />instead of<img />with EXPLICIT width and height props. Otherwise, you are seriously compromising performance.