diff --git a/src/_includes/head.html b/src/_includes/head.html
index d331eeb6..1c5b5bae 100644
--- a/src/_includes/head.html
+++ b/src/_includes/head.html
@@ -6,11 +6,26 @@
     {% endif %}
     <link rel="alternate" type="application/rss+xml" title="Bitcraze » Feed" href="/feed/" data-proofer-ignore>
     <link rel="alternate" type="application/rss+xml" title="Bitcraze » Comments Feed" href="/comments/feed/" data-proofer-ignore>
-    <!-- Load KaTeX CSS. Note this must match the version of katex in the docker-web-builder -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.3/katex.min.css" type='text/css' media='all'>
+    <!-- Speed up the third-party CSS connections (DNS + TLS) before they are requested -->
+    <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+    <!-- Critical site styles: kept render-blocking to avoid a flash of unstyled content -->
     <link rel='stylesheet' href='/css/kraken.css?t={{ site.time | date: "%Y%m%d-%H%M%S"}}' type='text/css' media='all' />
-    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,400,700,900|Cairo:400,300,500,600,700|Quantico:400,300,500,600,700|Droid Sans:300,400,700;' type='text/css' media='screen' />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+
+    <!-- Non-critical CSS: loaded asynchronously so it no longer blocks first render / LCP.
+         The media="print" + onload swap trick lets the browser fetch them at low priority
+         and apply them once ready; the <noscript> fallback covers JS-disabled clients. -->
+    <!-- Load KaTeX CSS. Note this must match the version of katex in the docker-web-builder -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.3/katex.min.css" media="print" onload="this.media='all'">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" media="print" onload="this.media='all'">
+    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,400,700,900|Cairo:400,300,500,600,700|Quantico:400,300,500,600,700|Droid Sans:300,400,700;&display=swap' media="print" onload="this.media='screen'" />
+    <noscript>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.3/katex.min.css" type='text/css' media='all'>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+        <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,400,700,900|Cairo:400,300,500,600,700|Quantico:400,300,500,600,700|Droid Sans:300,400,700;&display=swap' type='text/css' media='screen' />
+    </noscript>
 
     <script type='text/javascript' src='/javascripts/bootstrap.bundle.min.js' defer></script>
     <script type='text/javascript' src='/js/cookiepopup.js?t={{ site.time | date: "%Y%m%d-%H%M%S"}}' defer></script>
diff --git a/src/applications/aerial-manipulation.md b/src/applications/aerial-manipulation.md
index 502b3905..3e1a7875 100644
--- a/src/applications/aerial-manipulation.md
+++ b/src/applications/aerial-manipulation.md
@@ -35,7 +35,7 @@ redirects:
 <!-- ── Section 2: From Concept to Controlled Autonomy ───────────────────── -->
 <div class="app-concept-row">
   <div class="app-concept-img-bleed">
-    <img src="/images/applications/appl-card-aerial.jpg" alt="Aerial Manipulation">
+    <img src="/images/applications/appl-card-aerial.webp" alt="Aerial Manipulation">
   </div>
   <div class="container">
     <div class="row align-items-stretch">
diff --git a/src/applications/applications-landing.md b/src/applications/applications-landing.md
index 30217ba1..d5f14dcb 100644
--- a/src/applications/applications-landing.md
+++ b/src/applications/applications-landing.md
@@ -26,7 +26,7 @@ redirects:
   <div class="appl-cards-grid">
     <div class="appl-card appl-card--swarm">
       <div class="appl-card-img-wrap">
-        <img src="/images/applications/appl-card-swarm.jpg" alt="Swarm Robotics">
+        <img src="/images/applications/appl-card-swarm-card.webp" alt="Swarm Robotics">
       </div>
       <div class="appl-card-header">
         <i class="fa-solid fa-circle-nodes appl-card-icon"></i>
@@ -37,7 +37,7 @@ redirects:
     </div>
     <div class="appl-card appl-card--autosys">
       <div class="appl-card-img-wrap">
-        <img src="/images/applications/appl-card-auto.jpg" alt="Autonomous Systems">
+        <img src="/images/applications/appl-card-auto-card.webp" alt="Autonomous Systems">
       </div>
       <div class="appl-card-header">
         <i class="fa-solid fa-robot appl-card-icon"></i>
@@ -48,7 +48,7 @@ redirects:
     </div>
     <div class="appl-card appl-card--percept">
       <div class="appl-card-img-wrap">
-        <img src="/images/applications/appl-card-perc-nav.jpg" alt="Perception and Navigation">
+        <img src="/images/applications/appl-card-perc-nav-card.webp" alt="Perception and Navigation">
       </div>
       <div class="appl-card-header">
         <i class="fa-solid fa-compass appl-card-icon"></i>
@@ -59,7 +59,7 @@ redirects:
     </div>
     <div class="appl-card appl-card--aerial">
       <div class="appl-card-img-wrap">
-        <img src="/images/applications/appl-card-aerial.jpg" alt="Aerial Manipulation">
+        <img src="/images/applications/appl-card-aerial-card.webp" alt="Aerial Manipulation">
       </div>
       <div class="appl-card-header">
         <i class="fa-solid fa-hand appl-card-icon"></i>
@@ -70,7 +70,7 @@ redirects:
     </div>
     <div class="appl-card appl-card--stem">
       <div class="appl-card-img-wrap">
-        <img src="/images/applications/appl-card-stem.jpg" alt="STEM and Higher Education">
+        <img src="/images/applications/appl-card-stem-card.webp" alt="STEM and Higher Education">
       </div>
       <div class="appl-card-header">
         <i class="fa-solid fa-graduation-cap appl-card-icon"></i>
@@ -81,7 +81,7 @@ redirects:
     </div>
     <div class="appl-card appl-card--hri">
       <div class="appl-card-img-wrap">
-        <img src="/images/applications/appl-card-hri.jpg" alt="Human-Robot Interaction">
+        <img src="/images/applications/appl-card-hri-card.webp" alt="Human-Robot Interaction">
       </div>
       <div class="appl-card-header">
         <i class="fa-solid fa-people-arrows appl-card-icon"></i>
diff --git a/src/applications/autonomous-systems.md b/src/applications/autonomous-systems.md
index 8af1f5fa..abe64e44 100644
--- a/src/applications/autonomous-systems.md
+++ b/src/applications/autonomous-systems.md
@@ -37,7 +37,7 @@ redirects:
 <!-- ── Section 2: From Concept to Controlled Autonomy ───────────────────── -->
 <div class="app-concept-row">
   <div class="app-concept-img-bleed">
-    <img src="/images/applications/appl-card-auto.jpg" alt="Autonomous Systems">
+    <img src="/images/applications/appl-card-auto.webp" alt="Autonomous Systems">
   </div>
   <div class="container">
     <div class="row align-items-stretch">
diff --git a/src/applications/human-robot-interaction.md b/src/applications/human-robot-interaction.md
index e80019b3..2dab2d85 100644
--- a/src/applications/human-robot-interaction.md
+++ b/src/applications/human-robot-interaction.md
@@ -36,7 +36,7 @@ redirects:
 <!-- ── Section 2: From Concept to Controlled Autonomy ───────────────────── -->
 <div class="app-concept-row">
   <div class="app-concept-img-bleed">
-    <img src="/images/applications/appl-card-hri.jpg" alt="Human-Robot Interaction">
+    <img src="/images/applications/appl-card-hri.webp" alt="Human-Robot Interaction">
   </div>
   <div class="container">
     <div class="row align-items-stretch">
diff --git a/src/applications/perception-navigation.md b/src/applications/perception-navigation.md
index 1c4fa565..48ce6fda 100644
--- a/src/applications/perception-navigation.md
+++ b/src/applications/perception-navigation.md
@@ -35,7 +35,7 @@ redirects:
 <!-- ── Section 2: From Concept to Controlled Autonomy ───────────────────── -->
 <div class="app-concept-row">
   <div class="app-concept-img-bleed">
-    <img src="/images/applications/appl-card-perc-nav.jpg" alt="Perception and Navigation">
+    <img src="/images/applications/appl-card-perc-nav.webp" alt="Perception and Navigation">
   </div>
   <div class="container">
     <div class="row align-items-stretch">
diff --git a/src/applications/stem-education.md b/src/applications/stem-education.md
index ff16bea4..81c096df 100644
--- a/src/applications/stem-education.md
+++ b/src/applications/stem-education.md
@@ -35,7 +35,7 @@ redirects:
 <!-- ── Section 2: From Concept to Controlled Autonomy ───────────────────── -->
 <div class="app-concept-row">
   <div class="app-concept-img-bleed">
-    <img src="/images/applications/appl-card-stem.jpg" alt="STEM and Higher Education">
+    <img src="/images/applications/appl-card-stem.webp" alt="STEM and Higher Education">
   </div>
   <div class="container">
     <div class="row align-items-stretch">
diff --git a/src/applications/swarm-robotics.md b/src/applications/swarm-robotics.md
index b56a6125..76fd329a 100644
--- a/src/applications/swarm-robotics.md
+++ b/src/applications/swarm-robotics.md
@@ -34,7 +34,7 @@ redirects:
 <!-- ── Section 2: Research Opportunities ─────────────────────────────────── -->
 <div class="app-concept-row">
   <div class="app-concept-img-bleed">
-    <img src="/images/applications/appl-card-swarm.jpg" alt="Swarm Robotics">
+    <img src="/images/applications/appl-card-swarm.webp" alt="Swarm Robotics">
   </div>
   <div class="container">
     <div class="row align-items-stretch">
diff --git a/src/images/applications/appl-card-aerial-card.webp b/src/images/applications/appl-card-aerial-card.webp
new file mode 100644
index 00000000..aac77dbd
Binary files /dev/null and b/src/images/applications/appl-card-aerial-card.webp differ
diff --git a/src/images/applications/appl-card-aerial.jpg b/src/images/applications/appl-card-aerial.jpg
deleted file mode 100644
index cdbbf9d1..00000000
Binary files a/src/images/applications/appl-card-aerial.jpg and /dev/null differ
diff --git a/src/images/applications/appl-card-aerial.webp b/src/images/applications/appl-card-aerial.webp
new file mode 100644
index 00000000..bdff14b6
Binary files /dev/null and b/src/images/applications/appl-card-aerial.webp differ
diff --git a/src/images/applications/appl-card-auto-card.webp b/src/images/applications/appl-card-auto-card.webp
new file mode 100644
index 00000000..309344ac
Binary files /dev/null and b/src/images/applications/appl-card-auto-card.webp differ
diff --git a/src/images/applications/appl-card-auto.jpg b/src/images/applications/appl-card-auto.jpg
deleted file mode 100644
index 292fd335..00000000
Binary files a/src/images/applications/appl-card-auto.jpg and /dev/null differ
diff --git a/src/images/applications/appl-card-auto.webp b/src/images/applications/appl-card-auto.webp
new file mode 100644
index 00000000..721a9d7a
Binary files /dev/null and b/src/images/applications/appl-card-auto.webp differ
diff --git a/src/images/applications/appl-card-hri-card.webp b/src/images/applications/appl-card-hri-card.webp
new file mode 100644
index 00000000..4b641ece
Binary files /dev/null and b/src/images/applications/appl-card-hri-card.webp differ
diff --git a/src/images/applications/appl-card-hri.jpg b/src/images/applications/appl-card-hri.jpg
deleted file mode 100644
index 1d0dbcaf..00000000
Binary files a/src/images/applications/appl-card-hri.jpg and /dev/null differ
diff --git a/src/images/applications/appl-card-hri.webp b/src/images/applications/appl-card-hri.webp
new file mode 100644
index 00000000..c592cf9a
Binary files /dev/null and b/src/images/applications/appl-card-hri.webp differ
diff --git a/src/images/applications/appl-card-perc-nav-card.webp b/src/images/applications/appl-card-perc-nav-card.webp
new file mode 100644
index 00000000..3b0cde5e
Binary files /dev/null and b/src/images/applications/appl-card-perc-nav-card.webp differ
diff --git a/src/images/applications/appl-card-perc-nav.jpg b/src/images/applications/appl-card-perc-nav.jpg
deleted file mode 100644
index 564133f4..00000000
Binary files a/src/images/applications/appl-card-perc-nav.jpg and /dev/null differ
diff --git a/src/images/applications/appl-card-perc-nav.webp b/src/images/applications/appl-card-perc-nav.webp
new file mode 100644
index 00000000..9293b48e
Binary files /dev/null and b/src/images/applications/appl-card-perc-nav.webp differ
diff --git a/src/images/applications/appl-card-stem-card.webp b/src/images/applications/appl-card-stem-card.webp
new file mode 100644
index 00000000..aa1f34fa
Binary files /dev/null and b/src/images/applications/appl-card-stem-card.webp differ
diff --git a/src/images/applications/appl-card-stem.jpg b/src/images/applications/appl-card-stem.jpg
deleted file mode 100644
index 697657d8..00000000
Binary files a/src/images/applications/appl-card-stem.jpg and /dev/null differ
diff --git a/src/images/applications/appl-card-stem.webp b/src/images/applications/appl-card-stem.webp
new file mode 100644
index 00000000..d9923049
Binary files /dev/null and b/src/images/applications/appl-card-stem.webp differ
diff --git a/src/images/applications/appl-card-swarm-card.webp b/src/images/applications/appl-card-swarm-card.webp
new file mode 100644
index 00000000..fb6a40de
Binary files /dev/null and b/src/images/applications/appl-card-swarm-card.webp differ
diff --git a/src/images/applications/appl-card-swarm.jpg b/src/images/applications/appl-card-swarm.jpg
deleted file mode 100644
index fc2e0efb..00000000
Binary files a/src/images/applications/appl-card-swarm.jpg and /dev/null differ
diff --git a/src/images/applications/appl-card-swarm.webp b/src/images/applications/appl-card-swarm.webp
new file mode 100644
index 00000000..2aae2cdf
Binary files /dev/null and b/src/images/applications/appl-card-swarm.webp differ
diff --git a/src/images/frontpage/ant-bridge-narrow.png b/src/images/frontpage/ant-bridge-narrow.png
deleted file mode 100644
index cad0b7ab..00000000
Binary files a/src/images/frontpage/ant-bridge-narrow.png and /dev/null differ
diff --git a/src/images/frontpage/ant-bridge-narrow.webp b/src/images/frontpage/ant-bridge-narrow.webp
new file mode 100644
index 00000000..5ef8e7fa
Binary files /dev/null and b/src/images/frontpage/ant-bridge-narrow.webp differ
diff --git a/src/images/frontpage/ant-bridge-wide.png b/src/images/frontpage/ant-bridge-wide.png
deleted file mode 100644
index ffb102d6..00000000
Binary files a/src/images/frontpage/ant-bridge-wide.png and /dev/null differ
diff --git a/src/images/frontpage/ant-bridge-wide.webp b/src/images/frontpage/ant-bridge-wide.webp
new file mode 100644
index 00000000..72e08290
Binary files /dev/null and b/src/images/frontpage/ant-bridge-wide.webp differ
diff --git a/src/images/frontpage/ant-bridge_2302146k.png b/src/images/frontpage/ant-bridge_2302146k.png
deleted file mode 100644
index 3b29068b..00000000
Binary files a/src/images/frontpage/ant-bridge_2302146k.png and /dev/null differ
diff --git a/src/images/frontpage/ant-bridge_2302146k.webp b/src/images/frontpage/ant-bridge_2302146k.webp
new file mode 100644
index 00000000..38b0c03a
Binary files /dev/null and b/src/images/frontpage/ant-bridge_2302146k.webp differ
diff --git a/src/images/frontpage/front-cf-bl.png b/src/images/frontpage/front-cf-bl.png
deleted file mode 100644
index 15b18eb2..00000000
Binary files a/src/images/frontpage/front-cf-bl.png and /dev/null differ
diff --git a/src/images/frontpage/front-cf-bl.webp b/src/images/frontpage/front-cf-bl.webp
new file mode 100644
index 00000000..7868eff0
Binary files /dev/null and b/src/images/frontpage/front-cf-bl.webp differ
diff --git a/src/images/frontpage/front-ecosystem.png b/src/images/frontpage/front-ecosystem.png
deleted file mode 100644
index 007ce49a..00000000
Binary files a/src/images/frontpage/front-ecosystem.png and /dev/null differ
diff --git a/src/images/frontpage/front-ecosystem.webp b/src/images/frontpage/front-ecosystem.webp
new file mode 100644
index 00000000..bdb835fa
Binary files /dev/null and b/src/images/frontpage/front-ecosystem.webp differ
diff --git a/src/images/frontpage/front-expansion.png b/src/images/frontpage/front-expansion.png
deleted file mode 100644
index 4fa895df..00000000
Binary files a/src/images/frontpage/front-expansion.png and /dev/null differ
diff --git a/src/images/frontpage/front-expansion.webp b/src/images/frontpage/front-expansion.webp
new file mode 100644
index 00000000..1a67d924
Binary files /dev/null and b/src/images/frontpage/front-expansion.webp differ
diff --git a/src/images/frontpage/front-open-source.png b/src/images/frontpage/front-open-source.png
deleted file mode 100644
index 6b4843d4..00000000
Binary files a/src/images/frontpage/front-open-source.png and /dev/null differ
diff --git a/src/images/frontpage/front-open-source.webp b/src/images/frontpage/front-open-source.webp
new file mode 100644
index 00000000..859e481b
Binary files /dev/null and b/src/images/frontpage/front-open-source.webp differ
diff --git a/src/images/frontpage/front-positioning.png b/src/images/frontpage/front-positioning.png
deleted file mode 100644
index 0495f13a..00000000
Binary files a/src/images/frontpage/front-positioning.png and /dev/null differ
diff --git a/src/images/frontpage/front-positioning.webp b/src/images/frontpage/front-positioning.webp
new file mode 100644
index 00000000..2d281098
Binary files /dev/null and b/src/images/frontpage/front-positioning.webp differ
diff --git a/src/index.md b/src/index.md
index fd8bf9c2..e8f9112b 100644
--- a/src/index.md
+++ b/src/index.md
@@ -17,7 +17,7 @@ page_id: home
 
       <div class="header_image">
         <a href="/products/crazyflie-2-1-brushless/">
-          <img src="/images/frontpage/front-cf-bl.png" alt="Crazyflie 2.1 Brushless">
+          <img src="/images/frontpage/front-cf-bl.webp" alt="Crazyflie 2.1 Brushless">
         </a>
       </div>
 
@@ -35,7 +35,7 @@ page_id: home
 
   <div id="ecosystem-section" class="row what-we-do-section-padding section-content justify-content-center align-items-center">
     <div class="col-md-5 col-lg-4">
-      <img src="/images/frontpage/front-ecosystem.png" alt="The Crazyflie Ecosystem" class="w-100">
+      <img src="/images/frontpage/front-ecosystem.webp" alt="The Crazyflie Ecosystem" class="w-100">
     </div>
     <a href="/documentation/system/" class="col-md-4 col-lg-3 ms-n5 text-block-box text-box_open_source">
       <div class="header-text">
@@ -77,7 +77,7 @@ page_id: home
         <p><b>Explore All Decks <img src="/images/frontpage/front-arrow.png" alt="→" class="fp-arrow-img"></b></p>
       </div>
       <div class="col-md-4">
-        <img src="/images/frontpage/front-expansion.png" alt="Expansion Decks" class="w-100">
+        <img src="/images/frontpage/front-expansion.webp" alt="Expansion Decks" class="w-100">
       </div>
     </a>
   </div>
@@ -85,7 +85,7 @@ page_id: home
   <div id="two" class="row positioning-section-bg what-we-do-section-padding section-content justify-content-center align-items-center">
     <a href="/documentation/system/positioning/" class="col-md-10 col-lg-8 d-flex align-items-center justify-content-center text-block-box text-box_positioning">
       <div class="col-md-4">
-        <img src="/images/frontpage/front-positioning.png" alt="Positioning Systems" class="w-100">
+        <img src="/images/frontpage/front-positioning.webp" alt="Positioning Systems" class="w-100">
       </div>
       <div class="col-md-6 fp-section-text">
         <h2>
@@ -109,7 +109,7 @@ page_id: home
         <p><b>Explore Software & Tools <img src="/images/frontpage/front-arrow.png" alt="→" class="fp-arrow-img"></b></p>
       </div>
       <div class="col-md-4">
-        <img src="/images/frontpage/front-open-source.png" alt="Open Source" class="w-100">
+        <img src="/images/frontpage/front-open-source.webp" alt="Open Source" class="w-100">
       </div>
     </a>
   </div>
@@ -179,7 +179,7 @@ page_id: home
   <div class="appl-cards-grid">
     <div class="appl-card appl-card--swarm">
       <div class="appl-card-img-wrap">
-        <img src="/images/applications/appl-card-swarm.jpg" alt="Swarm Robotics">
+        <img src="/images/applications/appl-card-swarm-card.webp" alt="Swarm Robotics">
       </div>
       <div class="appl-card-header">
         <i class="fa-solid fa-circle-nodes appl-card-icon"></i>
@@ -189,7 +189,7 @@ page_id: home
     </div>
     <div class="appl-card appl-card--hri">
       <div class="appl-card-img-wrap">
-        <img src="/images/applications/appl-card-hri.jpg" alt="Human-Robot Interaction">
+        <img src="/images/applications/appl-card-hri-card.webp" alt="Human-Robot Interaction">
       </div>
       <div class="appl-card-header">
         <i class="fa-solid fa-people-arrows appl-card-icon"></i>
@@ -199,7 +199,7 @@ page_id: home
     </div>
     <div class="appl-card appl-card--stem">
       <div class="appl-card-img-wrap">
-        <img src="/images/applications/appl-card-stem.jpg" alt="STEM and Higher Education">
+        <img src="/images/applications/appl-card-stem-card.webp" alt="STEM and Higher Education">
       </div>
       <div class="appl-card-header">
         <i class="fa-solid fa-graduation-cap appl-card-icon"></i>
@@ -209,7 +209,7 @@ page_id: home
     </div>
     <div class="appl-card appl-card--autosys">
       <div class="appl-card-img-wrap">
-        <img src="/images/applications/appl-card-auto.jpg" alt="Autonomous Systems">
+        <img src="/images/applications/appl-card-auto-card.webp" alt="Autonomous Systems">
       </div>
       <div class="appl-card-header">
         <i class="fa-solid fa-robot appl-card-icon"></i>
@@ -219,7 +219,7 @@ page_id: home
     </div>
     <div class="appl-card appl-card--percept">
       <div class="appl-card-img-wrap">
-        <img src="/images/applications/appl-card-perc-nav.jpg" alt="Perception and Navigation">
+        <img src="/images/applications/appl-card-perc-nav-card.webp" alt="Perception and Navigation">
       </div>
       <div class="appl-card-header">
         <i class="fa-solid fa-compass appl-card-icon"></i>
@@ -229,7 +229,7 @@ page_id: home
     </div>
     <div class="appl-card appl-card--aerial">
       <div class="appl-card-img-wrap">
-        <img src="/images/applications/appl-card-aerial.jpg" alt="Aerial Manipulation">
+        <img src="/images/applications/appl-card-aerial-card.webp" alt="Aerial Manipulation">
       </div>
       <div class="appl-card-header">
         <i class="fa-solid fa-hand appl-card-icon"></i>
@@ -249,7 +249,7 @@ page_id: home
       <!-- inject wp blog img 0 begin -->
       <a href="#" class="blog-card">
         <div class="blog-img-wrap">
-          <img src="/images/frontpage/ant-bridge_2302146k.png" alt="Blog post">
+          <img src="/images/frontpage/ant-bridge_2302146k.webp" alt="Blog post">
         </div>
         <div class="blog-tags">
           <span class="blog-tag">Category 1</span>
@@ -264,7 +264,7 @@ page_id: home
       <!-- inject wp blog img 1 begin -->
       <a href="#" class="blog-card">
         <div class="blog-img-wrap">
-          <img src="/images/frontpage/ant-bridge-narrow.png" alt="Blog post">
+          <img src="/images/frontpage/ant-bridge-narrow.webp" alt="Blog post">
         </div>
         <div class="blog-tags">
           <span class="blog-tag">Category 1</span>
@@ -279,7 +279,7 @@ page_id: home
       <!-- inject wp blog img 2 begin -->
       <a href="#" class="blog-card">
         <div class="blog-img-wrap">
-          <img src="/images/frontpage/ant-bridge-wide.png" alt="Blog post">
+          <img src="/images/frontpage/ant-bridge-wide.webp" alt="Blog post">
         </div>
         <div class="blog-tags">
           <span class="blog-tag">Category 3</span>
@@ -373,8 +373,9 @@ page_id: home
 <!-- Video Slogan Section Start -->
 <div class="container-fluid px-0 video-slogan-section">
   <div class="video-slogan-inner video-style video-no-controls">
-    <video autoplay muted loop playsinline webkit-playsinline aria-hidden="true">
-      <source src="/videos/front-hover.mp4" type="video/mp4">
+    <video muted loop playsinline webkit-playsinline aria-hidden="true"
+           preload="none" poster="/videos/front-hover-poster.webp" data-lazy-video>
+      <source data-src="/videos/front-hover.mp4" type="video/mp4" data-proofer-ignore>
     </video>
     <div class="video-slogan-overlay">
       <div class="container">
@@ -391,6 +392,40 @@ page_id: home
 <!-- Video Slogan Section End -->
 
 <!-- JS Scripts Start -->
+  <script>
+    // Lazy-load the below-the-fold background video: it only fetches and plays
+    // once it nears the viewport, keeping ~0.4 MB off the initial page load.
+    (function () {
+      const video = document.querySelector('video[data-lazy-video]');
+      if (!video) return;
+
+      function loadAndPlay() {
+        const source = video.querySelector('source[data-src]');
+        if (source && !source.src) {
+          source.src = source.dataset.src;
+          video.load();
+        }
+        const p = video.play();
+        if (p && p.catch) p.catch(function () {});
+      }
+
+      if ('IntersectionObserver' in window) {
+        const io = new IntersectionObserver(function (entries) {
+          entries.forEach(function (entry) {
+            if (entry.isIntersecting) {
+              loadAndPlay();
+              io.disconnect();
+            }
+          });
+        }, { rootMargin: '200px' });
+        io.observe(video);
+      } else {
+        // Fallback for browsers without IntersectionObserver
+        loadAndPlay();
+      }
+    })();
+  </script>
+
   <script>
     ['one', 'two', 'three', 'four', 'five', 'six'].forEach(function(id) {
       const el = document.getElementById(id);
diff --git a/src/js/cookiepopup.js b/src/js/cookiepopup.js
index 904abc0a..0798e933 100644
--- a/src/js/cookiepopup.js
+++ b/src/js/cookiepopup.js
@@ -27,7 +27,11 @@ var cookiepopup = {
     sessionKey: "CookiePolicyAccepted",
     start: function() {
         if (!cookiepopup.isCrawler() && !cookiepopup.hasUserAcceptedPolicy()) {
-            document.body.innerHTML = '<div id="cookiePolicyPopup" style="line-height: 1.5; position: fixed; bottom: 16px; right: 16px; width: 300px; background-color: #003000; color: white; font-family: Lato, sans-serif; font-size: 14px; padding: 16px; border: 2px solid #95C941; border-radius: 8px; z-index:999; box-shadow: 0 4px 24px rgba(0,0,0,0.4);"><span style="color:#95C941; font-weight:bold;">&gt;&gt;</span> We use cookies to give you a good experience when visiting bitcraze.io. By using our site, you agree to our <a href="https://www.bitcraze.io/cookies/" target="_blank" rel="noopener noreferrer" style="color:#95C941;">use of cookies</a>.<br><br><a onclick="cookiepopup.acceptCookiePolicy();" style="display:inline-block; cursor:pointer; text-decoration:none; color:#003000; background-color:#95C941; padding: 6px 20px; border-radius: 20px; font-weight: bold; font-size: 13px;">OK, got it!</a></div>' + document.body.innerHTML;
+            // Prepend the (position:fixed) popup without rebuilding the body.
+            // Reassigning document.body.innerHTML would re-parse the whole page,
+            // orphaning existing event listeners, IntersectionObservers and media
+            // element state (e.g. the lazy-loaded front-page background video).
+            document.body.insertAdjacentHTML('afterbegin', '<div id="cookiePolicyPopup" style="line-height: 1.5; position: fixed; bottom: 16px; right: 16px; width: 300px; background-color: #003000; color: white; font-family: Lato, sans-serif; font-size: 14px; padding: 16px; border: 2px solid #95C941; border-radius: 8px; z-index:999; box-shadow: 0 4px 24px rgba(0,0,0,0.4);"><span style="color:#95C941; font-weight:bold;">&gt;&gt;</span> We use cookies to give you a good experience when visiting bitcraze.io. By using our site, you agree to our <a href="https://www.bitcraze.io/cookies/" target="_blank" rel="noopener noreferrer" style="color:#95C941;">use of cookies</a>.<br><br><a onclick="cookiepopup.acceptCookiePolicy();" style="display:inline-block; cursor:pointer; text-decoration:none; color:#003000; background-color:#95C941; padding: 6px 20px; border-radius: 20px; font-weight: bold; font-size: 13px;">OK, got it!</a></div>');
         }
     },
     isCrawler: function() {
diff --git a/src/js/kraken.js b/src/js/kraken.js
index 6ca458bd..bd1ade3c 100644
--- a/src/js/kraken.js
+++ b/src/js/kraken.js
@@ -70,7 +70,10 @@ var kraken = {
   poplinkShowPopup: function(id, popupKey) {
     var container = document.getElementById("poplinkcontainer");
     if (container == null) {
-      document.body.innerHTML = '<div id="poplinkcontainer" class="poplinkcontainer"></div>' + document.body.innerHTML;
+      // Prepend without rebuilding the body: reassigning document.body.innerHTML
+      // would re-parse the whole page and orphan existing event listeners,
+      // IntersectionObservers and media element state.
+      document.body.insertAdjacentHTML('afterbegin', '<div id="poplinkcontainer" class="poplinkcontainer"></div>');
       container = document.getElementById("poplinkcontainer");
     }
 
diff --git a/src/videos/front-hover-poster.webp b/src/videos/front-hover-poster.webp
new file mode 100644
index 00000000..2b982d6f
Binary files /dev/null and b/src/videos/front-hover-poster.webp differ
diff --git a/src/videos/front-hover.mp4 b/src/videos/front-hover.mp4
index c50545c2..1d8d4ceb 100644
Binary files a/src/videos/front-hover.mp4 and b/src/videos/front-hover.mp4 differ