diff --git a/nietzsche-beta-app/src/app/app.module.ts b/nietzsche-beta-app/src/app/app.module.ts
index 5858660..dbf5f71 100644
--- a/nietzsche-beta-app/src/app/app.module.ts
+++ b/nietzsche-beta-app/src/app/app.module.ts
@@ -1,66 +1,68 @@
 import { AppComponent } from './app.component';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule, ReactiveFormsModule} from '@angular/forms';
 import { NgModule } from '@angular/core';
 import {MatCardModule} from '@angular/material/card';
 import { MatToolbarModule, MatButtonModule} from '@angular/material';
 import { MatExpansionModule } from '@angular/material/expansion';
 import {MatIconModule} from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatMenuModule} from '@angular/material/menu';
 import { MatSidenavModule } from '@angular/material';
 import { MatSelectModule } from '@angular/material/select';
 import {MatTabsModule} from '@angular/material/tabs';
 import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { QueryService } from './services/query.service';
 import {routing} from './app.routing';
 import {HomeComponent} from './home.component';
 import { ManuscriptViewComponentComponent } from './manuscript-view-component/manuscript-view-component.component';
 import { ContentViewTabComponentComponent } from './content-view-tab-component/content-view-tab-component.component';
 import { RhizomeViewComponentComponent } from './rhizome-view-component/rhizome-view-component.component';
 import { MainMenuComponentComponent } from './main-menu-component/main-menu-component.component';
 import { PageViewWrapperComponent } from './page-view-wrapper-component/page-view-wrapper.component';
 import { NavigationListComponentComponent } from './navigation-list-component/navigation-list-component.component';
 import {NavigationServiceService} from './services/navigation-service.service';
 import { TlnEditionModule} from './tln-edition/tln-edition.module';
 import { NavTree } from './navigation-list-component/navtree-directive.directive';
+import { LazyImageLoadDirectiveDirective } from './content-view-tab-component/lazy-image-load-directive.directive';
 
 
 @NgModule({
   declarations: [
      AppComponent,
      HomeComponent,
      ManuscriptViewComponentComponent,
      ContentViewTabComponentComponent,
      RhizomeViewComponentComponent,
      MainMenuComponentComponent,
      PageViewWrapperComponent,
      NavigationListComponentComponent,
-     NavTree
+     NavTree,
+     LazyImageLoadDirectiveDirective
   ],
   imports: [
     routing,
     BrowserModule,
     BrowserAnimationsModule,
     CommonModule,
     HttpClientModule,
     MatButtonModule,
     MatCardModule,
     MatExpansionModule,
     MatIconModule,
     MatListModule,
     MatMenuModule,
     MatSelectModule, // for themes selection
     MatSidenavModule,
     MatTabsModule,
     MatToolbarModule,
     FormsModule,
     TlnEditionModule,
     ReactiveFormsModule
   ],
   providers: [ NavigationServiceService, QueryService ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.ts b/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.ts
index 5f0a2a7..322844b 100644
--- a/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.ts
+++ b/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.ts
@@ -1,85 +1,92 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Params, Router} from '@angular/router';
 import {Subscription} from "rxjs/index";
 import { TlnQueryParams} from '../models/models';
 import {NavigationServiceService} from "../services/navigation-service.service";
 import { TLN_CROSSREF_ROUTE, TLN_MANUSCRIPT_ROUTE, TLN_VIEWER_ROUTE } from '../tln-edition/constants';
 
 @Component({
   selector: 'app-content-view-tab-component',
   templateUrl: './content-view-tab-component.component.html',
   styleUrls: ['./content-view-tab-component.component.scss'],
   providers: [ NavigationServiceService ]
 })
 export class ContentViewTabComponentComponent implements OnInit {
   // navigation tabs for the content view (manuscript view, page view, rhizome view)
   navTabLinks: any[];
   // navbar on th left for navigating
   navBarOpenState: boolean;
   navBarOpenMode = 'push'; // side || over || push
 
   queryParams: TlnQueryParams;
   queryParamSubscription: Subscription;
 
   constructor(private router: Router,
               private activatedRoute: ActivatedRoute,
               private naviService: NavigationServiceService) {
 
     // The links/tabs for routing the correct view-component
     this.navTabLinks = [
       {
         label: 'Manuskriptansicht',
         link: TLN_MANUSCRIPT_ROUTE,
         index: 0
       }, {
         label: 'Seitenansicht',
         link: TLN_VIEWER_ROUTE,
         index: 1
       }, {
         label: 'Querverweise',
         link: TLN_CROSSREF_ROUTE,
         index: 2
       },
     ];
   }
 
   ngOnInit() {
+    // this.mesurePerformance();
     this.setParamsOnInit();
 
     // If url pasted or page refreshed --> resetting this.queryparams to the query params of the url;
     // needed for active routing in the nav tabs & for general use in the template
     this.queryParamSubscription = this.activatedRoute.queryParams.subscribe( (queryParams: Params ) => {
       this.queryParams = new TlnQueryParams(
         queryParams.navBarOpenState,
         queryParams.navContext,
         queryParams.manuscript,
         queryParams.page,
         queryParams.selectedLines,
         queryParams.selectedWords,
         queryParams.viewMode,
         queryParams.fullscreen,
         queryParams.zoom
       );
     });
   }
 
+  mesurePerformance(){
+    const perfData = window.performance.timing;
+    const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
+    console.log('content load performance is: ', pageLoadTime);
+  }
+
   setParamsOnInit() {
     const qParams: Params = {};
     // Set the NavBarOpenstate to false if it is false in the url query param onInit. In every other case we toggle it open actively.
     if (this.activatedRoute.snapshot.queryParamMap.get('navBarOpenState') === 'false') {
       this.navBarOpenState = false; } else {
       this.navBarOpenState = true; }
     qParams.navBarOpenState = this.navBarOpenState;
     // viewMode
     if (!this.activatedRoute.snapshot.queryParamMap.get('viewMode')) {
       qParams.viewMode = 'Transkription/Faksimile';
     }
     this.naviService.updateRoute(qParams);
   }
 
   toggleNavDrawer() {
     this.navBarOpenState = !this.navBarOpenState;
     this.naviService.updateRoute({navBarOpenstate: this.navBarOpenState.toString()});
   }
 
 }
diff --git a/nietzsche-beta-app/src/app/content-view-tab-component/lazy-image-load-directive.directive.ts b/nietzsche-beta-app/src/app/content-view-tab-component/lazy-image-load-directive.directive.ts
new file mode 100644
index 0000000..2cf78f6
--- /dev/null
+++ b/nietzsche-beta-app/src/app/content-view-tab-component/lazy-image-load-directive.directive.ts
@@ -0,0 +1,20 @@
+import { Directive, ElementRef } from '@angular/core';
+
+@Directive({
+  selector: 'img'
+})
+
+export class LazyImageLoadDirectiveDirective {
+
+  constructor({ nativeElement }: ElementRef<HTMLImageElement>) {
+    const supports = 'loading' in HTMLImageElement.prototype;
+    if (supports) {
+      nativeElement.setAttribute('loading', 'lazy');
+    }
+  }
+}
+
+// IF NOT SUPPORTED IN CHROME: Open chrome://flags in Chromium or Chrome Canary.
+//   Search for lazy.
+//   Enable both the “Enable lazy image loading” and the “Enable lazy frame loading” flag.
+//   Restart the browser with the button in the lower right corner of the screen.