diff --git a/public_html/index.html b/public_html/index.html
index 4ed8f9b..1b43892 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -9,11 +9,11 @@
 	<meta name="author" content="alina marquardt" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-	<link rel="preload" fetchpriority="high" as="image" href="img/bg.jpg" type="image/jpeg">
-	<link rel="preload" fetchpriority="high" as="image" href="img/bg_blur.jpg" type="image/jpeg">
+	<link rel="preload" fetchpriority="high" as="image" href="img/bg.webp" type="image/jpeg">
+	<link rel="preload" fetchpriority="high" as="image" href="img/bg_blur.webp" type="image/jpeg">
 	<link rel="stylesheet" href="style.css" />
 
-	<script src="js/three.min.js"></script>
+	<script src="js/three.min.js" defer></script>
 	<script src="functions.js" defer></script>
 
 </head>
@@ -52,7 +52,7 @@
 
 			<article class="opaque whitebg album">
 				<a href="https://lastfuture.bandcamp.com/track/misinterpreter-2" target="_blank">
-					<img class="albumcover" src="img/album/lastfuture_-_misinterpreter.jpg" />
+					<img class="albumcover" src="img/album/lastfuture_-_misinterpreter.jpg" width="120" height="120" />
 					<h2>lastfuture <em>misinterpreter</em></h2>
 					<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
 				</a>
@@ -61,7 +61,7 @@
 			<div class="clearfix"></div>
 			<article class="opaque whitebg album">
 				<a href="https://lastfuture.bandcamp.com/album/signal-to-noise" target="_blank">
-					<img class="albumcover" src="img/album/lastfuture_-_signal_to_noise.jpg" />
+					<img class="albumcover" src="img/album/lastfuture_-_signal_to_noise.jpg" width="120" height="120" />
 					<h2>lastfuture <em>signal to noise</em></h2>
 					<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
 				</a>
@@ -70,7 +70,7 @@
 			<div class="clearfix"></div>
 			<article class="opaque whitebg album">
 				<a href="https://lastfuture.bandcamp.com/album/dreamshifter" target="_blank">
-					<img class="albumcover" src="img/album/lastfuture_-_dreamshifter.jpg" />
+					<img class="albumcover" src="img/album/lastfuture_-_dreamshifter.jpg" width="120" height="120" />
 					<h2>lastfuture <em>dreamshifter</em></h2>
 					<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
 				</a>
@@ -79,7 +79,7 @@
 			<div class="clearfix"></div>
 			<article class="opaque whitebg album">
 				<a href="https://lastfuture.bandcamp.com/album/reverse-kill" target="_blank">
-					<img class="albumcover" src="img/album/lastfuture_-_reverse_kill.jpg" />
+					<img class="albumcover" src="img/album/lastfuture_-_reverse_kill.jpg" width="120" height="120" />
 					<h2>lastfuture <em>reverse kill</em></h2>
 					<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
 				</a>
diff --git a/public_html/style.css b/public_html/style.css
index 30910e0..ec64fa7 100644
--- a/public_html/style.css
+++ b/public_html/style.css
@@ -291,6 +291,7 @@ p {
 	font-style: italic;
 	font-weight: 400;
 	src: local('Source Sans Pro'), url('fonts/SourceSansPro-It.woff') format('woff');
+	font-display: swap;
 }
 
 @font-face {
@@ -298,6 +299,7 @@ p {
 	font-style: normal;
 	font-weight: 200;
 	src: local('Source Sans Pro'), url('fonts/SourceSansPro-ExtraLight.woff') format('woff');
+	font-display: swap;
 }
 
 @font-face {
@@ -305,6 +307,7 @@ p {
 	font-style: italic;
 	font-weight: 200;
 	src: local('Source Sans Pro'), url('fonts/SourceSansPro-ExtraLightIt.woff') format('woff');
+	font-display: swap;
 }
 
 @font-face {
@@ -312,6 +315,7 @@ p {
 	font-style: normal;
 	font-weight: 300;
 	src: local('Source Sans Pro'), url('fonts/SourceSansPro-Light.woff') format('woff');
+	font-display: swap;
 }
 
 @font-face {
@@ -319,6 +323,7 @@ p {
 	font-style: italic;
 	font-weight: 300;
 	src: local('Source Sans Pro'), url('fonts/SourceSansPro-LightIt.woff') format('woff');
+	font-display: swap;
 }
 
 @font-face {
@@ -326,6 +331,7 @@ p {
 	font-style: normal;
 	font-weight: 600;
 	src: local('Source Sans Pro'), url('fonts/SourceSansPro-Semibold.woff') format('woff');
+	font-display: swap;
 }
 
 @font-face {
@@ -333,6 +339,7 @@ p {
 	font-style: italic;
 	font-weight: 600;
 	src: local('Source Sans Pro'), url('fonts/SourceSansPro-SemiboldIt.woff') format('woff');
+	font-display: swap;
 }
 
 @font-face {
@@ -340,6 +347,7 @@ p {
 	font-style: normal;
 	font-weight: 700;
 	src: local('Source Sans Pro'), url('fonts/SourceSansPro-Bold.woff') format('woff');
+	font-display: swap;
 }
 
 @font-face {
@@ -347,6 +355,7 @@ p {
 	font-style: italic;
 	font-weight: 700;
 	src: local('Source Sans Pro'), url('fonts/SourceSansPro-BoldIt.woff') format('woff');
+	font-display: swap;
 }
 
 @font-face {
@@ -354,6 +363,7 @@ p {
 	font-style: normal;
 	font-weight: 900;
 	src: local('Source Sans Pro'), url('fonts/SourceSansPro-Black.woff') format('woff');
+	font-display: swap;
 }
 
 @font-face {
@@ -361,6 +371,7 @@ p {
 	font-style: italic;
 	font-weight: 900;
 	src: local('Source Sans Pro'), url('fonts/SourceSansPro-BlackIt.woff') format('woff');
+	font-display: swap;
 }
 
 :root {
@@ -440,7 +451,7 @@ textarea:-moz-placeholder {
 
 body {
 	background-color: black;
-	/* background-image: url('img/bg.jpg'); */
+	/* background-image: url('img/bg.webp'); */
 	background-repeat: no-repeat;
 	background-position: top left;
 	background-attachment: fixed;
@@ -462,7 +473,7 @@ a {
 	left: 0;
 	height: 100%;
 	width: 100%;
-	background-image: url('img/bg.jpg');
+	background-image: url('img/bg.webp');
 	background-repeat: no-repeat;
 	background-position: top left;
 	background-attachment: fixed;
@@ -728,7 +739,7 @@ article.album .listenbuy {
 	padding: 0.25em 1em;
 	opacity: 0;
 	background-color: var(--button-color-hover);
-	background-image: url('img/bg_blur.jpg');
+	background-image: url('img/bg_blur.webp');
 	background-repeat: no-repeat;
 	background-attachment: fixed;
 	transition: opacity 0.25s, margin 0.25s, height 0.25s;
@@ -770,7 +781,7 @@ article.album a:hover {
 
 .blurgreen {
 	background-color: #437888;
-	background-image: url('img/bg_blur.jpg');
+	background-image: url('img/bg_blur.webp');
 	background-repeat: no-repeat;
 	background-attachment: fixed;
 	color: white;