From e8401b3324cea67e027eed1dbb936fd8a0d31a4c Mon Sep 17 00:00:00 2001
From: Alina Marquardt <lastfuture@lastfuture.de>
Date: Tue, 13 May 2025 20:21:24 +0200
Subject: [PATCH] optimizations
---
public_html/index.html | 14 +++++++-------
public_html/style.css | 19 +++++++++++++++----
2 files changed, 22 insertions(+), 11 deletions(-)
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;