Fixed optimization warnings. (#1238)

Warning was from Lighthouse report.

Co-authored-by: Mia Bajić <[email protected]>

Author: nikoshell

package.json

@@ -16,7 +16,6 @@
     "@astrojs/mdx": "^4.2.6",
     "@astrojs/sitemap": "^3.3.1",
     "@astrojs/tailwind": "^5.1.5",
-    "@fontsource-variable/inter": "^5.2.5",
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@tailwindcss/typography": "^0.5.16",
     "astro": "^5.7.5",

pnpm-lock.yaml

@@ -57,7 +57,7 @@ const gitVersion = __GIT_VERSION__;
             Excited about our mission? Want to collaborate or contribute? Let's
             connect! We're open to partnership opportunities and would love to
             hear your ideas.
-            <a class="text-white" href="mailto:[email protected]"
+            <a class="text-white/80 hover:text-white underline" href="mailto:[email protected]"
               >[email protected]</a
             >
           </p>
@@ -88,7 +88,7 @@ const gitVersion = __GIT_VERSION__;
           links.terms.map((item) => (
             <a
               href={item.path}
-              class="text-gray-700 hover:text-primary-hover transition-colors duration-200 mx-2"
+              class="text-white/80 hover:text-primary-hover transition-colors duration-200 mx-2"
             >
               {item.name}
               {item.path.startsWith("http") && (
@@ -104,14 +104,14 @@ const gitVersion = __GIT_VERSION__;
           <SocialLinks
             socials={links["socials"]}
             variant="white"
-            class="opacity-40 pb-4"
+            class="opacity-60 pb-4"
           />
         )
       }
     </div>
   </div>
 
-  <p class="mb-16 text-text-inverted text-center">
+  <p class="mb-16 text-white/80 text-center">
     version: {gitVersion} @ {buildTimestamp}
   </p>
 </div>
@@ -122,6 +122,5 @@ const gitVersion = __GIT_VERSION__;
   }
   .terms {
     font-size: 0.8rem;
-    opacity: 0.4;
   }
 </style>

src/components/Footer.astro

@@ -54,9 +54,9 @@ const { items, inverted = false, level = 1 } = Astro.props;
           target={item.path?.startsWith("http") ? "_blank" : undefined}
           role="menuitem"
         >
-          <span>{item.name}</span>
+          {item.name}
           {item.path?.startsWith("http") && (
-            <span class="ml-1" aria-hidden="true">↗</span>
+            <span aria-hidden="true">↗</span>
           )}
         </a>
       ) : (
@@ -72,7 +72,7 @@ const { items, inverted = false, level = 1 } = Astro.props;
           )}
           role="menuitem"
         >
-          <span>{item.name}</span>
+          {item.name}
           {level === 2 && (
             <span aria-hidden="true">
               <Icon name="caret-right" />

src/components/NavItems.astro

@@ -1,5 +1,5 @@
 ---
-import { Image } from "astro:assets";
+import { Picture } from "astro:assets";
 import heroImage from "/public/images/conference_photo.jpg";
 
 import IconWithLabel from "./icon-label.astro";
@@ -135,10 +135,14 @@ const action2 = "/sponsorship/sponsor/";
       <div class="hero-image overflow-hidden -mt-12">
         <!-- Image with Rounded Corners and Shadow -->
         <div class="px-5 md:px-10 md:m-10">
-          <Image
+          <Picture
             src={heroImage}
             alt="EuroPython 2025 Conference"
+            layout='full-width'
+            formats={['avif', 'webp', 'jpeg']}
             class="w-full max-w-5xl lg:max-w-full h-auto lg:h-full rounded-2xl shadow-xl"
+            loading="eager"
+            priority={true}
           />
         </div>
       </div>

src/components/sections/hero/hero.astro

@@ -15,7 +15,7 @@ function getRandomSpeakers(speakers: CollectionEntry<"speakers">[], count: numbe
   return shuffled.slice(0, Math.min(count, speakers.length));
 }
 
-const featuredSpeakers = getRandomSpeakers(validSpeakers, 15);
+const featuredSpeakers = getRandomSpeakers(validSpeakers, 6);
 
 const sectionTitle = "Featured Speakers";
 const sectionSubtitle = "Meet some of our amazing speakers";

src/components/sections/speakers.astro

@@ -14,15 +14,15 @@ const { title, subtitle, url, image } = Astro.props;
 ---
 
 <div
-  class="prose-xl min-w-[250px] w-full md:w-[40%] lg:w-[30%] p-4 bg-[#D5D6E6] rounded-2xl text-center flex flex-col"
+  class="prose-xl min-w-[250px] w-full md:w-[40%] lg:w-[30%] p-4 bg-[#D5D6E6] rounded-2xl text-center flex flex-col max-w-[360px]"
 >
     <div class="relative w-full">
       <Image
         src={image}
         width={600}
         height={375}
           alt=`Card image - ${title}`
-        class="not-prose rounded-xl aspect-[3/2] w-full"
+        class="not-prose rounded-xl w-full"
         loading="lazy"
       />
     </div>

src/components/sections/updates/card.astro

@@ -4,10 +4,9 @@ import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 
 
+import "@fortawesome/fontawesome-free/css/all.min.css";
 import "@src/styles/global.css";
 import "@src/styles/search.css";
-import "@fontsource-variable/inter";
-import "@fortawesome/fontawesome-free/css/all.min.css";
 
 export interface Props {
   title: string;

src/layouts/Layout.astro

@@ -54,7 +54,6 @@ export default {
       fontFamily: {
         system: ["system-ui", "sans-serif"],
         title: [
-          "Inter Variable",
           "-apple-system",
           "BlinkMacSystemFont",
           "Segoe UI",