fix: performance

angular.json

@@ -26,8 +26,13 @@
             "assets": [
               {
                 "glob": "**/*",
-                "input": "src/assets",
-                "output": "assets"
+                "input": "src/assets/optimized",
+                "output": "assets/optimized"
+              },
+              {
+                "glob": "**/*",
+                "input": "src/assets/logos",
+                "output": "assets/logos"
               },
               {
                 "glob": "**/*",
@@ -108,8 +113,13 @@
             "assets": [
               {
                 "glob": "**/*",
-                "input": "src/assets",
-                "output": "assets"
+                "input": "src/assets/optimized",
+                "output": "assets/optimized"
+              },
+              {
+                "glob": "**/*",
+                "input": "src/assets/logos",
+                "output": "assets/logos"
               },
               {
                 "glob": "**/*",

package.json

@@ -24,10 +24,11 @@
     "check": "npm run build && npm run lint && npm run format:check && npm run version:check && npm run text:check",
     "fix": "npm run version:place && npm run lint:fix && npm run text:fix && npm run format",
     "------ BUILD": "",
+    "clean": "del-cli dist",
     "generate:static-files": "node scripts/generate-static-files.cjs",
     "generate:assets": "npm run generate:static-files",
     "compress:assets": "node scripts/compress-assets.cjs",
-    "build": "npm run generate:assets && ng build --configuration production && npm run compress:assets && node scripts/copy-static-root-files.cjs",
+    "build": "npm run clean && npm run generate:assets && ng build --configuration production && npm run compress:assets && node scripts/copy-static-root-files.cjs",
     "------ STARTUP": "",
     "test": "ng test",
     "dev": "npm run generate:assets && ng serve",

src/app/app.config.ts

@@ -1,7 +1,7 @@
 import type { ApplicationConfig } from '@angular/core';
-import { importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
+import { provideZoneChangeDetection } from '@angular/core';
 import { provideRouter, withInMemoryScrolling } from '@angular/router';
-import { BrowserModule, provideClientHydration, withEventReplay } from '@angular/platform-browser';
+import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
 
 import { routes } from './app.routes';
 
@@ -16,6 +16,5 @@ export const appConfig: ApplicationConfig = {
       }),
     ),
     provideClientHydration(withEventReplay()),
-    importProvidersFrom(BrowserModule),
   ],
 };

src/app/app.routes.ts

@@ -1,10 +1,17 @@
 import type { Routes } from '@angular/router';
 
-import { HomeComponent } from './home/home.component';
-import { ImprintComponent } from './imprint/imprint.component';
-
 export const routes: Routes = [
-  { path: '', component: HomeComponent, pathMatch: 'full' },
-  { path: 'imprint', component: ImprintComponent, pathMatch: 'full' },
+  {
+    path: '',
+    loadComponent: async () =>
+      (await import('./home/home.component')).HomeComponent,
+    pathMatch: 'full',
+  },
+  {
+    path: 'imprint',
+    loadComponent: async () =>
+      (await import('./imprint/imprint.component')).ImprintComponent,
+    pathMatch: 'full',
+  },
   { path: '**', redirectTo: '' },
 ];

src/app/home/home.component.html

@@ -64,13 +64,28 @@
             [title]="portraitHighlights.length > 1 ? 'Show next image' : 'Single image'"
           >
             <div class="portrait-media" [class.portrait-media-switching]="isPortraitSwitching">
-              <img
-                class="hero-feature-image"
-                [src]="currentPortraitHighlight.image"
-                width="560"
-                height="420"
-                [alt]="global.firstname + ' highlight'"
-              />
+              <picture>
+                <source
+                  type="image/avif"
+                  [attr.srcset]="currentPortraitHighlight.avifSrcset"
+                  sizes="(max-width: 640px) calc(100vw - 2rem), (max-width: 900px) min(560px, calc(100vw - 2rem)), 560px"
+                />
+                <source
+                  type="image/webp"
+                  [attr.srcset]="currentPortraitHighlight.webpSrcset"
+                  sizes="(max-width: 640px) calc(100vw - 2rem), (max-width: 900px) min(560px, calc(100vw - 2rem)), 560px"
+                />
+                <img
+                  class="hero-feature-image"
+                  [src]="currentPortraitHighlight.image"
+                  [attr.width]="currentPortraitHighlight.width"
+                  [attr.height]="currentPortraitHighlight.height"
+                  [alt]="currentPortraitHighlight.alt"
+                  fetchpriority="high"
+                  loading="eager"
+                  decoding="async"
+                />
+              </picture>
               @if (currentPortraitHighlightIndex === 0) {
                 <span class="portrait-click-hint">Click me!</span>
               }
@@ -148,7 +163,11 @@
               class="project-icon"
               [class.project-icon-circle]="project.CircleIcon !== false"
               [src]="project.icon"
+              [attr.width]="project.iconWidth ?? 108"
+              [attr.height]="project.iconHeight ?? 108"
               [alt]="project.title + ' icon'"
+              loading="lazy"
+              decoding="async"
             />
           }
 

src/app/home/home.component.ts

@@ -22,7 +22,6 @@ import { FooterComponent } from '../footer/footer.component';
 export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
   private readonly sanitizer = inject(DomSanitizer);
   private readonly zone = inject(NgZone);
-  private preloadedImages: HTMLImageElement[] = [];
   private tallestPortraitAspectRatio: number | null = null;
   private lockedHeroSectionMinHeight: number = 0;
   private projectEntryObserver: IntersectionObserver | null = null;
@@ -82,7 +81,7 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.preloadImageAssets();
+    this.initPortraitAspectRatio();
     this.initNameGradientScrollAnimation();
 
     this.zone.runOutsideAngular((): void => {
@@ -181,88 +180,21 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
     this.scrollToElementById('contact-links', this.getResponsiveScrollOffset(0.05));
   }
 
-  private preloadImageAssets(): void {
-    if (typeof window === 'undefined') {
-      return;
-    }
+  private initPortraitAspectRatio(): void {
+    const minAspectRatio: number = this.portraitHighlights.reduce(
+      (minRatio: number, highlight: PortraitHighlight): number => {
+        if (highlight.width <= 0 || highlight.height <= 0) {
+          return minRatio;
+        }
 
-    const projectIcons: string[] = this.projects
-      .map((project: PortfolioProject): string | undefined => project.icon)
-      .filter((icon: string | undefined): icon is string => Boolean(icon));
-
-    const uniqueImageUrls: string[] = Array.from(
-      new Set<string>([
-        ...this.portraitHighlights.map((highlight: PortraitHighlight): string => highlight.image),
-        ...projectIcons,
-      ]),
+        const currentRatio: number = highlight.width / highlight.height;
+        return minRatio === 0 ? currentRatio : Math.min(minRatio, currentRatio);
+      },
+      0,
     );
 
-    this.preloadedImages = uniqueImageUrls.map((url: string): HTMLImageElement => {
-      const image = new Image();
-      image.decoding = 'async';
-      image.loading = 'eager';
-      image.src = url;
-      return image;
-    });
-
-    this.syncHeroHeightToLargestPortraitImage();
-  }
-
-  private syncHeroHeightToLargestPortraitImage(): void {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    const portraitImageUrls: Set<string> = new Set<string>(
-      this.portraitHighlights.map(
-        (highlight: PortraitHighlight): string =>
-          new URL(highlight.image, window.location.href).href,
-      ),
-    );
-
-    const portraitImages: HTMLImageElement[] = this.preloadedImages.filter(
-      (image: HTMLImageElement): boolean => portraitImageUrls.has(image.src),
-    );
-
-    if (portraitImages.length === 0) {
-      return;
-    }
-
-    const finalizeAspectRatio = (): void => {
-      const minAspectRatio: number = portraitImages.reduce(
-        (minRatio: number, image: HTMLImageElement): number => {
-          if (image.naturalWidth === 0 || image.naturalHeight === 0) {
-            return minRatio;
-          }
-
-          const currentRatio: number = image.naturalWidth / image.naturalHeight;
-          return minRatio === 0 ? currentRatio : Math.min(minRatio, currentRatio);
-        },
-        0,
-      );
-
-      if (minAspectRatio > 0) {
-        this.tallestPortraitAspectRatio = minAspectRatio;
-        this.scheduleHeroSectionHeightUpdate();
-      }
-    };
-
-    let pendingLoads: number = portraitImages.length;
-    const onImageSettled = (): void => {
-      pendingLoads -= 1;
-      if (pendingLoads === 0) {
-        finalizeAspectRatio();
-      }
-    };
-
-    for (const image of portraitImages) {
-      if (image.complete) {
-        onImageSettled();
-        continue;
-      }
-
-      image.addEventListener('load', onImageSettled, { once: true });
-      image.addEventListener('error', onImageSettled, { once: true });
+    if (minAspectRatio > 0) {
+      this.tallestPortraitAspectRatio = minAspectRatio;
     }
   }
 

src/global.ts

@@ -4,11 +4,18 @@ export interface PortfolioProject {
   description: string;
   languages: string[];
   icon?: string;
+  iconWidth?: number;
+  iconHeight?: number;
   CircleIcon?: boolean;
 }
 
 export interface PortraitHighlight {
   image: string;
+  avifSrcset: string;
+  webpSrcset: string;
+  width: number;
+  height: number;
+  alt: string;
   text: string;
 }
 
@@ -74,27 +81,69 @@ export const global: Global = {
   ],
   portraitHighlights: [
     {
-      image: 'assets/portrait/me.png',
+      image: 'assets/optimized/portrait/me-960.jpg',
+      avifSrcset:
+        'assets/optimized/portrait/me-480.avif 480w, assets/optimized/portrait/me-720.avif 720w, assets/optimized/portrait/me-960.avif 900w',
+      webpSrcset:
+        'assets/optimized/portrait/me-480.webp 480w, assets/optimized/portrait/me-720.webp 720w, assets/optimized/portrait/me-960.webp 900w',
+      width: 900,
+      height: 1154,
+      alt: 'Portrait of Julian Lechner',
       text: 'ME',
     },
     {
-      image: 'assets/portrait/love.jpg',
+      image: 'assets/optimized/portrait/love-960.jpg',
+      avifSrcset:
+        'assets/optimized/portrait/love-480.avif 480w, assets/optimized/portrait/love-720.avif 720w, assets/optimized/portrait/love-960.avif 960w',
+      webpSrcset:
+        'assets/optimized/portrait/love-480.webp 480w, assets/optimized/portrait/love-720.webp 720w, assets/optimized/portrait/love-960.webp 960w',
+      width: 960,
+      height: 1065,
+      alt: 'Julian with his partner',
       text: 'My Love',
     },
     {
-      image: 'assets/portrait/scuba.jpg',
+      image: 'assets/optimized/portrait/scuba-960.jpg',
+      avifSrcset:
+        'assets/optimized/portrait/scuba-480.avif 480w, assets/optimized/portrait/scuba-720.avif 720w, assets/optimized/portrait/scuba-960.avif 960w',
+      webpSrcset:
+        'assets/optimized/portrait/scuba-480.webp 480w, assets/optimized/portrait/scuba-720.webp 720w, assets/optimized/portrait/scuba-960.webp 960w',
+      width: 960,
+      height: 720,
+      alt: 'Julian scuba diving',
       text: 'Scuba Diving',
     },
     {
-      image: 'assets/portrait/trains.jpg',
+      image: 'assets/optimized/portrait/trains-960.jpg',
+      avifSrcset:
+        'assets/optimized/portrait/trains-480.avif 480w, assets/optimized/portrait/trains-720.avif 720w, assets/optimized/portrait/trains-960.avif 960w',
+      webpSrcset:
+        'assets/optimized/portrait/trains-480.webp 480w, assets/optimized/portrait/trains-720.webp 720w, assets/optimized/portrait/trains-960.webp 960w',
+      width: 960,
+      height: 1275,
+      alt: 'Julian traveling by train',
       text: 'Trains',
     },
     {
-      image: 'assets/portrait/traveling.jpg',
+      image: 'assets/optimized/portrait/traveling-960.jpg',
+      avifSrcset:
+        'assets/optimized/portrait/traveling-480.avif 480w, assets/optimized/portrait/traveling-720.avif 720w, assets/optimized/portrait/traveling-960.avif 960w',
+      webpSrcset:
+        'assets/optimized/portrait/traveling-480.webp 480w, assets/optimized/portrait/traveling-720.webp 720w, assets/optimized/portrait/traveling-960.webp 960w',
+      width: 960,
+      height: 720,
+      alt: 'Julian traveling',
       text: 'Traveling',
     },
     {
-      image: 'assets/portrait/culture.jpg',
+      image: 'assets/optimized/portrait/culture-960.jpg',
+      avifSrcset:
+        'assets/optimized/portrait/culture-480.avif 480w, assets/optimized/portrait/culture-720.avif 720w, assets/optimized/portrait/culture-960.avif 960w',
+      webpSrcset:
+        'assets/optimized/portrait/culture-480.webp 480w, assets/optimized/portrait/culture-720.webp 720w, assets/optimized/portrait/culture-960.webp 960w',
+      width: 960,
+      height: 723,
+      alt: 'Julian visiting cultural landmarks',
       text: 'Culture',
     },
   ],
@@ -114,7 +163,9 @@ export const global: Global = {
       description:
         'A support system integrating various platforms and media to offer employees a unified overview.',
       languages: ['TypeScript'],
-      icon: 'https://gerlach-systems.de/IMAGES/SYNHOST/SYNHOST_DARK.png',
+      icon: 'assets/logos/synhost-dark.webp',
+      iconWidth: 230,
+      iconHeight: 136,
       CircleIcon: false,
     },
     {
@@ -123,7 +174,9 @@ export const global: Global = {
       description:
         'A support system integrating various platforms and media to offer employees a unified overview.',
       languages: ['TypeScript'],
-      icon: 'https://gerlach-systems.de/IMAGES/SYNHOST/SYNHOST_DARK.png',
+      icon: 'assets/logos/synhost-dark.webp',
+      iconWidth: 230,
+      iconHeight: 136,
       CircleIcon: false,
     },
     {
@@ -132,7 +185,9 @@ export const global: Global = {
       description:
         'A support system integrating various platforms and media to offer employees a unified overview.',
       languages: ['TypeScript'],
-      icon: 'https://gerlach-systems.de/IMAGES/SYNHOST/SYNHOST_DARK.png',
+      icon: 'assets/logos/synhost-dark.webp',
+      iconWidth: 230,
+      iconHeight: 136,
       CircleIcon: false,
     },
   ],

src/index.html

@@ -5,7 +5,19 @@
     <meta charset="utf-8" />
     <base href="/" />
 
-    <link rel="icon" type="image/png" href="assets/portrait/me.png" />
+    <link rel="icon" type="image/webp" href="assets/optimized/portrait/me-480.webp" />
+    <link
+      rel="preload"
+      as="image"
+      href="assets/optimized/portrait/me-960.jpg"
+      imagesrcset="
+        assets/optimized/portrait/me-480.avif 480w,
+        assets/optimized/portrait/me-720.avif 720w,
+        assets/optimized/portrait/me-960.avif 900w
+      "
+      imagesizes="(max-width: 640px) calc(100vw - 2rem), (max-width: 900px) min(560px, calc(100vw - 2rem)), 560px"
+      fetchpriority="high"
+    />
     <title>Lechner Julian</title>
   </head>
   <body>

src/styles.scss

@@ -48,7 +48,12 @@ body {
     radial-gradient(circle at top left, rgba(217, 162, 140, 0.22), transparent 26%),
     radial-gradient(circle at bottom right, rgba(127, 78, 63, 0.28), transparent 28%),
     linear-gradient(180deg, rgba(9, 9, 12, 0.4), rgba(8, 8, 11, 0.82)),
-    url('assets/background.jpg') center / cover fixed no-repeat;
+    image-set(
+      url('assets/optimized/background-1920.avif') type('image/avif'),
+      url('assets/optimized/background-1920.webp') type('image/webp'),
+      url('assets/optimized/background-1920.jpg') type('image/jpeg')
+    )
+    center / cover no-repeat;
 }
 
 a {
@@ -151,20 +156,21 @@ hr {
   color: transparent;
   background-size: 100% 100%;
   background: linear-gradient(
-    to right,
-    #e40303 0%,
-    #e40303 16.66%,
-    #ff8c00 16.66%,
-    #ff8c00 33.33%,
-    #ffed00 33.33%,
-    #ffed00 50%,
-    #008026 50%,
-    #008026 66.66%,
-    #004dff 66.66%,
-    #004dff 83.33%,
-    #750787 83.33%,
-    #750787 100%
-  ) no-repeat 0 50%;
+      to right,
+      #e40303 0%,
+      #e40303 16.66%,
+      #ff8c00 16.66%,
+      #ff8c00 33.33%,
+      #ffed00 33.33%,
+      #ffed00 50%,
+      #008026 50%,
+      #008026 66.66%,
+      #004dff 66.66%,
+      #004dff 83.33%,
+      #750787 83.33%,
+      #750787 100%
+    )
+    no-repeat 0 50%;
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -296,20 +302,21 @@ hr {
   filter: blur(1.6px) saturate(0.88);
   background-size: 100% 100%;
   background: linear-gradient(
-    to right,
-    #e40303 0%,
-    #e40303 16.66%,
-    #ff8c00 16.66%,
-    #ff8c00 33.33%,
-    #ffed00 33.33%,
-    #ffed00 50%,
-    #008026 50%,
-    #008026 66.66%,
-    #004dff 66.66%,
-    #004dff 83.33%,
-    #750787 83.33%,
-    #750787 100%
-  ) 0 50%;
+      to right,
+      #e40303 0%,
+      #e40303 16.66%,
+      #ff8c00 16.66%,
+      #ff8c00 33.33%,
+      #ffed00 33.33%,
+      #ffed00 50%,
+      #008026 50%,
+      #008026 66.66%,
+      #004dff 66.66%,
+      #004dff 83.33%,
+      #750787 83.33%,
+      #750787 100%
+    )
+    0 50%;
   transform: translate(2px, 2px);
 }
 
@@ -927,6 +934,19 @@ hr {
 }
 
 @media (max-width: 900px) {
+  body {
+    background:
+      radial-gradient(circle at top left, rgba(217, 162, 140, 0.18), transparent 28%),
+      radial-gradient(circle at bottom right, rgba(127, 78, 63, 0.22), transparent 30%),
+      linear-gradient(180deg, rgba(9, 9, 12, 0.42), rgba(8, 8, 11, 0.84)),
+      image-set(
+        url('assets/optimized/background-1280.avif') type('image/avif'),
+        url('assets/optimized/background-1280.webp') type('image/webp'),
+        url('assets/optimized/background-1920.jpg') type('image/jpeg')
+      )
+      center / cover no-repeat;
+  }
+
   .hero-section,
   .story-grid,
   .legal-grid,