Update

backend/templates/_base.html

@@ -41,22 +41,22 @@
     <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/cash-dom/dist/cash.min.js"></script>
     <script>(function(){const{protocol:n,host:o,pathname:t,search:a,hash:h}=window.location;t.endsWith("/")||t.endsWith(".html")||window.location.replace(`${n}//${o}${t}/${a}${h}`)})()</script>
-    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
     <script src="https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js"></script>
 
     <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />
-    <script src="https://unpkg.com/@popperjs/core@2"></script>
-    <script src="https://unpkg.com/tippy.js@6"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js"></script>
+    <script src="https://unpkg.com/@popperjs/core@2" defer></script>
+    <script src="https://unpkg.com/tippy.js@6" defer></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js" defer></script>
     <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1549230942850511"
      crossorigin="anonymous"></script>
      <link
+        rel="preload"
         rel="stylesheet"
         href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"
       />
       <!-- Include Choices.js JavaScript from CDN -->
-      <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/motion.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"  defer></script>
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/motion.js" defer></script>
       <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1549230942850511" crossorigin="anonymous"></script>
       <script type="text/javascript">
         (function (f, b) { if (!b.__SV) { var e, g, i, h; window.mixpanel = b; b._i = []; b.init = function (e, f, c) { function g(a, d) { var b = d.split("."); 2 == b.length && ((a = a[b[0]]), (d = b[1])); a[d] = function () { a.push([d].concat(Array.prototype.slice.call(arguments, 0))); }; } var a = b; "undefined" !== typeof c ? (a = b[c] = []) : (c = "mixpanel"); a.people = a.people || []; a.toString = function (a) { var d = "mixpanel"; "mixpanel" !== c && (d += "." + c); a || (d += " (stub)"); return d; }; a.people.toString = function () { return a.toString(1) + ".people (stub)"; }; i = "disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split( " "); for (h = 0; h < i.length; h++) g(a, i[h]); var j = "set set_once union unset remove delete".split(" "); a.get_group = function () { function b(c) { d[c] = function () { call2_args = arguments; call2 = [c].concat(Array.prototype.slice.call(call2_args, 0)); a.push([e, call2]); }; } for ( var d = {}, e = ["get_group"].concat( Array.prototype.slice.call(arguments, 0)), c = 0; c < j.length; c++) b(j[c]); return d; }; b._i.push([e, f, c]); }; b.__SV = 1.2; e = f.createElement("script"); e.type = "text/javascript"; e.async = !0; e.src = "undefined" !== typeof MIXPANEL_CUSTOM_LIB_URL ? MIXPANEL_CUSTOM_LIB_URL : "file:" === f.location.protocol && "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//) ? "https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js" : "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js"; g = f.getElementsByTagName("script")[0]; g.parentNode.insertBefore(e, g); } })(document, window.mixpanel || []);
@@ -206,7 +206,7 @@ <h3 class="text-lg font-medium leading-6 text-white">Cookie Consent</h3>
           localStorage.setItem('bannerHideDuration', randomDuration);
         });
       });
-    </script>    
+    </script> 
 
     <script>
       setTimeout(function() {

backend/templates/pages/home.html

@@ -10,7 +10,7 @@
     <div id="parallax-container" class="relative w-full h-[295px] lg:h-[408px] header-section overflow-hidden border border-gray-300">
       <picture>
         <source srcset="{% static 'images/circuit-board.webp' %}" type="image/webp">
-        <img style="max-width:none;" id="parallax-image" src="{% static 'images/circuit-board.jpg' %}" alt="Circuit board background" class="object-custom-center">
+        <img style="max-width:none;" id="parallax-image" src="{% static 'images/circuit-board.jpg' %}" alt="Circuit board background" class="object-custom-center" loading="lazy">>
       </picture>
       <div style="opacity: 0.85" class="absolute inset-0 flex items-center justify-center h-screen bg-white"></div>
       <div class="absolute inset-0 flex items-center justify-center">

frontend/src/pages/Components.tsx

@@ -25,6 +25,7 @@ import useGetUserCurrency from "../services/useGetUserCurrency";
 import { useSearchParams } from "react-router-dom";
 import useUserInventoryQuantity from "../services/useGetUserInventoryQuantity";
 import AddComponentForm from "../components/user_submissions/AddComponentForm";
+import { Helmet } from "react-helmet-async";
 import cv from "classnames";
 
 const customStyles = {
@@ -40,6 +41,10 @@ const customStyles = {
   },
 };
 
+const pageTitle = "Browse Components for DIY Synth Projects | BOM Squad";
+const pageDescription = "Explore a vast library of components for DIY synth projects. Filter by type, manufacturer, supplier, and more. Add components to your inventory and shopping list.";
+const pageKeywords = "DIY synth components, modular synth parts, guitar pedal components, build your own synth";
+
 const Components: React.FC = () => {
   const [notification, setNotification] = useState<{
     show: boolean;
@@ -415,6 +420,11 @@ const Components: React.FC = () => {
 
   return (
     <>
+      <Helmet>
+        <title>{pageTitle}</title>
+        <meta content={pageDescription} name="description" />
+        <meta content={pageKeywords} name="keywords" />
+      </Helmet>
       <div className="mb-8">
         <div className="w-full py-12">
           <div className="p-10 bg-gray-100 rounded-lg" id="dataElem">
@@ -491,13 +501,13 @@ const Components: React.FC = () => {
         customButtons={
           <div className="flex justify-end space-x-4">
             <button
-              className="mt-4 px-4 py-2 text-sm font-medium text-gray-900 bg-gray-200 rounded-md hover:bg-gray-300"
+              className="px-4 py-2 mt-4 text-sm font-medium text-gray-900 bg-gray-200 rounded-md hover:bg-gray-300"
               onClick={() => setFullPageModalOpen(false)}
             >
               Cancel
             </button>
             <button
-              className="mt-4 px-4 py-2 text-sm font-medium text-white bg-brandgreen-600 border border-transparent rounded-md shadow-sm hover:bg-brandgreen-700"
+              className="px-4 py-2 mt-4 text-sm font-medium text-white border border-transparent rounded-md shadow-sm bg-brandgreen-600 hover:bg-brandgreen-700"
               onClick={handleFormSubmit}
             >
               <p className={cv({ "animate-pulse": isSubmitting })}>

frontend/src/pages/ModuleDetail.tsx

@@ -97,6 +97,7 @@ const ModuleDetail: React.FC = () => {
               <img
                 alt={module.name}
                 className="max-h-[30rem] object-contain"
+                loading="lazy"
                 src={`${module.large_image_jpeg}`}
               />
             </picture>