only load content when it comes into view

src/components/ProjectsFeature.astro

@@ -113,6 +113,9 @@ projects.sort((a, b) => a.data.name.localeCompare(b.data.name));
     gap: 0.25rem;
     padding: 0.25rem;
     height: min-content;
+    content-visibility: auto;
+    contain-intrinsic-size: 96px;
+
     &:focus-within {
       background-color: #548e9b;
     }

src/components/SocialsWidget.astro

@@ -79,6 +79,8 @@
         padding: 0.5rem;
         gap: 0.25rem;
         border-radius: 0.25rem;
+        content-visibility: auto;
+        contain-intrinsic-size: 88px;
 
         span {
           color: var(--text-secondary);

src/components/ViewCounter.astro

@@ -135,7 +135,6 @@
     for (let i = 0; i < chars.length; i++) {
       const span = document.createElement("span");
       span.setAttribute("data-number", chars[i]);
-      span.setAttribute("aria-label", chars[i]);
       span.style.animationDelay = `${i * 0.05}s`;
       viewCounter.appendChild(span);
     }

src/pages/blog/[slug].astro

@@ -69,4 +69,10 @@ const permalink = `${Astro?.site?.href}blog/${slug}`;
     min-width: 100px;
     width: 30%;
   }
+
+  .content {
+      p {
+          content-visibility: auto;
+      }
+  }
 </style>

src/pages/blog/index.astro

@@ -53,6 +53,11 @@ const allPosts= posts.sort((a, b) => new Date(b.data.publishDate).valueOf() - ne
     margin-right: 16px;
   }
 
+  .post-item {
+      content-visibility: auto;
+      contain-intrinsic-size: 228px;
+  }
+
   hr {
     margin: 60px auto;
   }