Merge pull request #196 from felixicaza/performance

feat: add performance optimizations

astro.config.ts

@@ -6,7 +6,7 @@ import { defineConfig } from 'astro/config';
 export default defineConfig({
   site: 'https://anarangel.github.io',
   image: {
-    domains: ['media.licdn.com'],
+    domains: ['media.licdn.com', 'avatars.githubusercontent.com'],
   },
   vite: {
     build: {

src/components/Cards/SimpleCard/SimpleCard.astro

@@ -22,11 +22,21 @@ interface Props {
    */
   cardText?: string;
 
+  /**
+   * The text of the alt image.
+   */
+  altText?: string;
+
   /**
    * The image URL for the card.
    */
   cardImage?: string;
 
+  /**
+   * The aspect ratio of the image.
+   */
+  aspectRatio?: string;
+
   /**
    * The URL to navigate to when the card is clicked.
    */
@@ -39,7 +49,9 @@ const {
   hasBorder = true,
   isInverted = false,
   cardText,
+  altText,
   cardImage,
+  aspectRatio,
   url,
   hasHover = false,
 } = Astro.props;
@@ -68,7 +80,18 @@ const {
               iconStyle={IconStyle.bold}
             />
           </div>
-          <img src={cardImage} alt="hey" slot="content" />
+          <picture style={`aspect-ratio: ${aspectRatio}`}>
+            <source srcset={`${cardImage}.avif`} type="image/avif" />
+            <source srcset={`${cardImage}.webp`} type="image/webp" />
+            <img
+              src={`${cardImage}.webp`}
+              alt={altText}
+              decoding="async"
+              loading="lazy"
+              fetchpriority="low"
+              style={`aspect-ratio: ${aspectRatio}`}
+            />
+          </picture>
         </div>
       </a>
     )
@@ -84,10 +107,8 @@ const {
     align-items: center;
     justify-content: space-between;
 
-
     color: white;
     padding: 3rem 3rem 0 3rem;
-
   }
 
   .card-container:has(p) {

src/layouts/Base.astro

@@ -21,6 +21,8 @@ const ogImage = new URL('/img/og.jpg', baseUrl);
   <meta charset="UTF-8" />
   <meta name="description" content={description} />
 
+  <slot name="preload" />
+
   <meta name="viewport" content="width=device-width" />
   <meta name="theme-color" content="#0a0a0a" />
   <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

src/layouts/Layout.astro

@@ -12,6 +12,7 @@ const { title } = Astro.props;
 ---
 
 <BaseLayout title={title}>
+  <slot name="preload" slot="preload" />
   <Navbar />
   <slot />
   <Footer />

src/pages/_Sections/Contributors/Contributors.astro

@@ -61,10 +61,13 @@ const images = import.meta.glob<{ default: ImageMetadata }>('/src/img/avatars/*.
                 class="contributor"
                 title={contributor.login}
               >
-                <img
+                <Picture
+                  class="contributors__img"
                   src={contributor.avatar_url}
+                  formats={['avif', 'webp']}
                   alt={`Avatar ${contributor.login}`}
-                  class="contributors__img"
+                  width={45}
+                  height={45}
                 />
               </a>
             ))

src/pages/_Sections/Hero/Hero.astro

@@ -114,6 +114,9 @@ import { t } from 'i18n:astro';
   .hero-headline.flow {
     --flow-spacer: 0.5rem;
     color: white;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 
     @media (width >= 992px) {
       --duration: 11s;

src/pages/_Sections/Profession/Profession.astro

@@ -15,13 +15,7 @@ import { getLocalePath, t } from 'i18n:astro';
       <Button invert tag="anchor" href={getLocalePath('/sobre-mi')} target="_self">
         {t('profession_button')}
         <!-- Se agrega el SVG de manera provisoria ya que el componente button da problemas para implementar el icono mediante props -->
-        <svg
-          width="12"
-          height="13"
-          viewBox="0 0 12 13"
-          fill="white"
-          xmlns="http://www.w3.org/2000/svg"
-        >
+        <svg width="12" height="13" viewBox="0 0 12 13" fill="white">
           <path
             fill-rule="evenodd"
             clip-rule="evenodd"
@@ -30,7 +24,17 @@ import { getLocalePath, t } from 'i18n:astro';
         </svg>
       </Button>
     </div>
-    <img class="svg-container" src="/svg/interface-description.svg" alt="" />
+    <picture style="aspect-ratio: 591/470">
+      <source srcset="/img/home/interface-description.avif" type="image/avif" />
+      <source srcset="/img/home/interface-description.webp" type="image/webp" />
+      <img
+        src="/img/home/interface-description.webp"
+        alt="Interface description"
+        decoding="async"
+        loading="lazy"
+        fetchpriority="low"
+      />
+    </picture>
   </div>
 </article>
 

src/pages/_Sections/StudyCases/StudyCases.astro

@@ -10,17 +10,32 @@ import { t } from 'i18n:astro';
       src="/svg/latam-airlines-logo.svg"
       alt="Latam airlines Logo"
       width="285"
+      height="91"
     />
     <h3>{t('study_case_title')}</h3>
     <p>
       {t('study_case_desc')}
     </p>
-    <img class="logo-img" src="/svg/latam-airlines-1.svg" alt="Latam airlines Logo" />
+    <picture style="aspect-ratio: 512/228">
+      <source srcset="/img/home/latam-airlines-1.avif" type="image/avif" />
+      <source srcset="/img/home/latam-airlines-1.webp" type="image/webp" />
+      <img
+        class="logo-img"
+        src="/img/home/latam-airlines-1.webp"
+        alt="Latam airlines - Ana Rangel"
+        decoding="async"
+        loading="lazy"
+        fetchpriority="low"
+        style="aspect-ratio: 512/228"
+      />
+    </picture>
   </section>
   <!-- TODO: arreglar que la imagen dentro del componente quede en la posicion correcta -->
   <SimpleCard
     cardText={t('project_cta')}
-    cardImage="/svg/latam-airlines.svg"
+    cardImage="/img/home/latam-airlines"
+    aspectRatio="512/384"
+    altText="Latam airlines"
     isInverted={true}
     url="/latam-airlines"
     hasHover
@@ -50,7 +65,7 @@ import { t } from 'i18n:astro';
   .study-cases .card-container:not(.latam-airlines) {
     block-size: initial;
 
-    & img {
+    & picture {
       @media (width >= 992px) {
         margin-top: 9.8rem;
         translate: -3rem 0;

src/pages/_Sections/Thunder/Thunder.astro

@@ -15,7 +15,17 @@ import { t } from 'i18n:astro';
       </div>
     </div>
 
-    <img class="svg-container" src="/svg/thunder-buttons.svg" alt="" />
+    <picture style="aspect-ratio: 739/529">
+      <source srcset="/img/home/thunder-buttons.avif" type="image/avif" />
+      <source srcset="/img/home/thunder-buttons.webp" type="image/webp" />
+      <img
+        src="/img/home/thunder-buttons.webp"
+        alt="Thunder Design System - Ana Rangel"
+        decoding="async"
+        loading="lazy"
+        fetchpriority="low"
+      />
+    </picture>
   </div>
 </article>
 
@@ -35,6 +45,7 @@ import { t } from 'i18n:astro';
 
     @media (width >= 992px) {
       width: 100%;
+      padding-bottom: 10px;
     }
   }
 

src/routes/index.astro

@@ -12,6 +12,29 @@ import { GradientColor } from '../components/GradientBackground/GradientBackgrou
 ---
 
 <Layout title="UX Ana Rangel">
+  <link rel="preload" href="/svg/notion-maze.svg" as="image" type="image/svg+xml" slot="preload" />
+  <link
+    rel="preload"
+    href="/svg/figma-useberry.svg"
+    as="image"
+    type="image/svg+xml"
+    slot="preload"
+  />
+  <link
+    rel="preload"
+    href="/img/home/interface-description.avif"
+    as="image"
+    type="image/avif"
+    slot="preload"
+  />
+  <link
+    rel="preload"
+    href="/img/home/interface-description.webp"
+    as="image"
+    type="image/webp"
+    slot="preload"
+  />
+
   <main>
     <GradientBackground color={GradientColor.blue} />
     <Hero />
@@ -23,16 +46,20 @@ import { GradientColor } from '../components/GradientBackground/GradientBackgrou
 
         <SimpleCard
           cardText={t('project_cta')}
-          cardImage="/svg/img-ripley.svg"
+          cardImage="/img/home/img-ripley"
           isInverted={true}
+          altText={t('project_ripley_title')}
+          aspectRatio="512/265"
           variant={CardVariant.secondary}
           url="/banco-ripley"
           hasHover
         />
 
         <SimpleCard
           cardText={t('project_cta')}
-          cardImage="/svg/frame_4.svg"
+          cardImage="/img/home/img-cencosud"
+          altText={t('project_cencosud_title')}
+          aspectRatio="512/251"
           variant={CardVariant.tertiary}
           isInverted={true}
           url="/planograma"