Add performance optimizations: gzip, cache headers, WOFF2 fonts, lazy loading
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 38s
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 38s
Enable gzip compression in nginx, add cache-control headers for static assets, convert fonts to WOFF2 with font-display swap, preload fonts, add lazy loading to below-fold images, and remove unused font files. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -5,6 +5,8 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>AF</title>
|
||||
<link rel="icon" type="/img/x-icon" href="/img/favicon.ico" />
|
||||
<link rel="preload" href="/fonts/big_noodle_titling.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="preload" href="/fonts/CreatoDisplay-Bold.woff2" as="font" type="font/woff2" crossorigin />
|
||||
</head>
|
||||
<body id="app">
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
|
||||
Binary file not shown.
Binary file not shown.
BIN
vue/public/fonts/CreatoDisplay-Bold.woff2
Normal file
BIN
vue/public/fonts/CreatoDisplay-Bold.woff2
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
vue/public/fonts/big_noodle_titling.woff2
Normal file
BIN
vue/public/fonts/big_noodle_titling.woff2
Normal file
Binary file not shown.
Binary file not shown.
@@ -33,16 +33,18 @@
|
||||
/* FONTS */
|
||||
@font-face {
|
||||
font-family: "big_noodle_titling";
|
||||
src: url("/fonts/big_noodle_titling.ttf") format("truetype");
|
||||
src: url("/fonts/big_noodle_titling.woff2") format("woff2");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "CreatoDisplay";
|
||||
src: url("/fonts/CreatoDisplay-Bold.otf") format("opentype");
|
||||
src: url("/fonts/CreatoDisplay-Bold.woff2") format("woff2");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* END OF FONTS */
|
||||
|
||||
@@ -21,7 +21,7 @@ const { gitFeed: feed, loaded } = storeToRefs(homeData);
|
||||
class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden"
|
||||
>
|
||||
<h3>Last git activity</h3>
|
||||
<img :src="feed.avatarUrl" alt="User avatar" class="avatar" />
|
||||
<img :src="feed.avatarUrl" alt="User avatar" class="avatar" loading="lazy" />
|
||||
<Link :href="feed.repoUrl">
|
||||
<h3>repo: {{ feed.repoName }}</h3>
|
||||
</Link>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="a4page-portrait bdr-1 flex flex-col relative overflow-scroll">
|
||||
<RouterLink to="/" class="bdr-2">
|
||||
<img src="/img/memes/epic.jpeg" />
|
||||
<img src="/img/memes/epic.jpeg" loading="lazy" />
|
||||
</RouterLink>
|
||||
<h1>Click her, she will take you home</h1>
|
||||
<span style="height: 100px"></span>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
>
|
||||
<h1>404</h1>
|
||||
<RouterLink to="/" class="bdr-2">
|
||||
<img src="/img/memes/epic.jpeg" />
|
||||
<img src="/img/memes/epic.jpeg" loading="lazy" />
|
||||
</RouterLink>
|
||||
<h1>Click her, she will take you home</h1>
|
||||
</div>
|
||||
|
||||
@@ -226,16 +226,18 @@ import Project from "./Project.vue";
|
||||
/* Fonts */
|
||||
@font-face {
|
||||
font-family: "big_noodle_titling";
|
||||
src: url("/fonts/big_noodle_titling.ttf") format("truetype");
|
||||
src: url("/fonts/big_noodle_titling.woff2") format("woff2");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "CreatoDisplay";
|
||||
src: url("/fonts/CreatoDisplay-Bold.otf") format("opentype");
|
||||
src: url("/fonts/CreatoDisplay-Bold.woff2") format("woff2");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* Variables */
|
||||
|
||||
@@ -84,7 +84,7 @@ onUnmounted(() => {
|
||||
alt="jacobbarron.xyz"
|
||||
/>
|
||||
</Link>
|
||||
<img v-for="src in srcs" :src="src" />
|
||||
<img v-for="src in srcs" :src="src" loading="lazy" />
|
||||
</div>
|
||||
</Touchscreen>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user