Add OnTrack Performance Tracking and Optimization Proposal document

astro.config.mjs

@@ -243,6 +243,18 @@ export default defineConfig({
             directory: '/security',
           },
         },
+        {
+          label: 'Project Proposal',
+          autogenerate: {
+            directory: '/project_proposals',
+          },
+          items: [
+            {
+              label: 'OnTrack Performance Tracking and Optimization Proposal',
+              link: '/project_proposals/google_lighthouse_performance',
+            },
+          ],
+        },
       ],
     }),
   ],

src/content/docs/project_proposals/google_lighthouse_performance.md

@@ -0,0 +1,41 @@
+---
+title: OnTrack Performance Tracking and Optimization Proposal
+---
+
+## Tracking Performance
+
+### Google Lighthouse
+
+Google Lighthouse can be used to track performance of OnTrack on key
+metrics such as **Performance**, **Accessibility**, **Best Practice**,
+and **SEO**.\
+The most important metric would be **Performance** in this case
+(currently OnTrack scores **68/100** on the Home page and **62/100** on
+a Unit page) and relevant sub metrics such as *First Contentful Paint*,
+*Largest Contentful Paint*, and others.
+
+### Un-Lighthouse
+
+Un-Lighthouse is a spin-off from Google Lighthouse, which allows
+inspection of performance metrics of the **entire website**, rather than
+each page.\
+This tool can also be used alongside Google Lighthouse to track key
+metrics.
+
+### Web Vitals Plugin
+
+A Google Chrome extension which allows us to inspect specific elements
+in a page that cause bottlenecks when loading.
+
+------------------------------------------------------------------------
+
+## Performance Optimization
+
+The following are some of the suggestions but not limited to:
+
+-   Request and Response resource reduction\
+-   Using CDNs for static contents\
+-   Server-side rendering\
+-   Aggressive caching\
+-   Optimizing the asset delivery\
+-   Using tools for optimization