Deployed on https://acme-note.netlify.app

• Project is all about a web based note-taking application.
• project has 5 sections namely:-
  • Hero Section with tagline and banner image.
  • AboutSec with some desciptive text.
  • IpadSec as ipads with apple pencil are most versatile devices for note-taking
  • Compatibility section as being a webapp acme note is compatible on nearly every device that can run a browser.

• Framework used in this project is Reactjs v18.2.0.
• Used Vite + yarn for devlopment. As this combo is blasing fast as compared to CRA(Create-React-App).
• Used GSAP3/GreenSock3 as an animation engine ( its paid for some internal plugins but gives awesome plugins like scrollTrigger for free which simply is the best.).Its really great at optimizing its animations context which makes the animations look really awesome.
• Used TailwindCSS for its utility classes , as writing whole css would have resulted in bigger bundle size as using tailwind with webpack allows us to take advantage of Tree Shaking where unused css is removed while making optimized build. And less bundle size results into fast load times.

Before doing anything and using best practices my load time measured using lighthouse tool is as follows.

• Performance is at --> 95%.
  • Performance metrices are as below.
    • FCP (First Contentful Paint) is at --> 1.4sec.
    • Speed Index is at --> 1.9sec.
    • LCP (Largest Contentful Paint) is at --> 2.4sec.
    • Time to Interactive is at --> 1.6sec.
    • TBT (Total Blocking Time) is at --> 190ms.
    • Cumulative Layout Shift is at --> 0.043.
• Accessibility is at --> 75%.
• Best Practices is at --> 92%.
• SEO is at --> 83%.
• PWA ( Progressive Web App ) - none.

• Performance is at --> 97%.( 2% optimized )
  • Performance metrices are as below.
    • FCP (First Contentful Paint) is at --> 1.4sec.
    • Speed Index is at --> 1.9sec.
    • LCP (Largest Contentful Paint) is at --> 1.7sec. (29.2% optimized )
    • Time to Interactive is at --> 1.6sec.
    • TBT (Total Blocking Time) is at --> 190ms.
    • Cumulative Layout Shift is at --> 0.043.

• Performance is at --> 97%.
  • Performance metrices are as below.
    • FCP (First Contentful Paint) is at --> 1.4sec.
    • Speed Index is at --> 1.9sec.
    • LCP (Largest Contentful Paint) is at --> 1.7sec.
    • Time to Interactive is at --> 1.6sec.
    • TBT (Total Blocking Time) is at --> 70ms.63% optimized
    • Cumulative Layout Shift is at --> 0.043.

• after all of the changes like alt attribute in images and aria-label on buttons
• Now all metrices look like this.
• Performance is at --> 97%.
  • Performance metrices are as below.
    • FCP (First Contentful Paint) is at --> 1.4sec.
    • Speed Index is at --> 1.9sec.
    • LCP (Largest Contentful Paint) is at --> 1.7sec.
    • Time to Interactive is at --> 1.6sec.
    • TBT (Total Blocking Time) is at --> 70ms.
    • Cumulative Layout Shift is at --> 0.043.
• Accessibility is at --> 96%. 11% optimized
• Best Practices is at --> 92%.
• SEO is at --> 92%. 9% optimized
• PWA ( Progressive Web App ) - none.

• Grade --> A
• Performance --> 94%
• Structure --> 94%
• LCP --> 757ms ( which must be less than 1200ms).
• TBT --> 0ms ( which must be less than 150ms).
• CLS --> 0.14 ( which must be less than 0.1 ) needs improvement.

heres the link for overall result --> https://gtmetrix.com/reports/acme-note.netlify.app/AJw4X1uB/