Improve image performance

HudsonGraeme · Jun 22, 2023 · 0d634cd · 0d634cd
1 parent 37688ab
commit 0d634cd
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,8 +7,7 @@ import Blog from './Pages/Blog'
 import BlogPost from './Pages/BlogPost'
 import Home from './Pages/Home'
 import './styles.css'
-
-function App() {
+const App = () => {
   return (
     <HopeProvider
       config={{

diff --git a/src/Components/Image.tsx b/src/Components/Image.tsx
@@ -30,6 +30,7 @@ import { createEffect, createSignal, For, Show } from 'solid-js'
 import { toDataURL } from '../utilities'
 import Crash from './Asset/crash'
 import Loading from './Asset/Loading'
+
 const Image = ({ src, alt, ...otherProps }: ImageProps) => {
   const [loaded, setLoaded] = createSignal(false)
   const [error, setError] = createSignal(false)
@@ -147,6 +148,7 @@ const Image = ({ src, alt, ...otherProps }: ImageProps) => {
       </Modal>
       <Show when={!error()}>
         <HopeImage
+          loading="lazy"
           src={dataURL()}
           onLoad={() => setLoaded(true)}
           onError={() => setError(true)}

diff --git a/src/styles.css b/src/styles.css
@@ -1,5 +1,6 @@
 * {
   box-sizing: border-box;
+  scroll-behavior: smooth;
 }
 
 td {
@@ -32,3 +33,7 @@ table {
   border-spacing: 0 15px !important;
   border-radius: 1rem !important;
 }
+
+img {
+  will-change: transform;
+}