Optimize images to WebP and enable lazy loading. Add security headers (HSTS, CSP, etc) for A+ SSL score.

resources/views/components/blocks/hero.blade.php

@@ -4,7 +4,7 @@
   <div class="container pt-36 xl:pt-[12.5rem] lg:pt-[12.5rem] md:pt-[12.5rem] pb-24 xl:pb-32 lg:pb-32 md:pb-32 !text-center !relative">
     @if(!empty($data['background_image']))
     <div class="absolute" style="top: -12%; left: 50%; transform: translateX(-50%);" data-cue="fadeIn">
-      <img src="{{ asset($data['background_image']) }}" alt="background">
+      <img src="{{ asset($data['background_image']) }}" alt="background" loading="lazy">
     </div>
     @endif
     
@@ -44,7 +44,7 @@
     
     @if(!empty($data['hero_image']))
     <div class="!mt-10">
-      <img class="max-w-full h-auto !relative m-[0_auto]" src="{{ asset($data['hero_image']) }}" alt="hero">
+      <img class="max-w-full h-auto !relative m-[0_auto]" src="{{ asset($data['hero_image']) }}" alt="hero" loading="lazy">
     </div>
     @endif
   </div>