diff --git a/_includes/head.html b/_includes/head.html
index be1b0a9..7b192f0 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -20,9 +20,10 @@
 
     <link rel="preload" as="style" href="{{ " /assets/css/style.css" | relative_url }}">
     <link rel="stylesheet" href="{{ " /assets/css/style.css" | relative_url }}">
-    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="preload" as="style" href='https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap'>
-    <link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
+    <noscript><link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet"></noscript>
     <link
         href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAAMQAAADECAMAAAD3eH5ZAAACqVBMVEUAAAAYGCQSEhwSEhoTExoTExoSEhoSEhsSEhsSEhoUFB4SEhsSEhsSEhoUFCcUFBsTExogICAUFBwSEhv///8SEhoTExoaGiISEhoWFh4TExoSEhpVVVUUFBsTExs5LiqWb1DXnGrzsHb/uHoXFhybclH9t3rBjWGPkJjZ2uIvLzcUFBzg4Ony8/t1dX1HSFC7u8OOj5bw8fkjJCvU1d1nZ285OUKtrraBgorp6vMbGyLHyM9ZWmEuLjafoKhzc3vh4uoVFR25usJLS1MjIyvv8PiRkpplZW3W19+rq7Q9PUaDg4tXV1/Ky9KcnaWIiJDb3OQwMDjh4eo4OEGkpa12dn5ISVHk5e1sbXW8vMSOj5eys7s1Nj0kJSzV1t5+f4ff4OhoaHA6OkNKSlKoqLGur7eCg4txcXnq6/McHCPIydDExc1aW2KQkZni4+ugoal0dHxdXWWtrba6u8MpKTFMTFQ+PkaSk5tmZm6io6vl5u/X2OCsrLVub3exsro7O0R5eoKEhIxXWF/l5u4TExtDQ0vLzNOdnqbn6PG0tb12dn9JSlJ8fYW9vcVERE2pqbIWFh5paXFwcHm2t7+vsLiCgoo2Nz7JytHd3uZFRU5bXGOhoqpqa3MxMTlNTVXY2eGTlJyen6eYmKA/P0crKzSFhY1YWWDQ0dnMzdSUlZx3d4AfHye+vsbBwsrx8volJS1panE8PEWwsbno6fIXFx/r7PQdHSTu7/fc3eVcXWTj5OxOTlbZ2uFAQEiGho7NztUyMjp4eIG/v8cmJi5panJRUVmjpKwsLDRPT1bT1NyVlZ2amqIYGCBfX2hBQUm3uMCHh499fobNzdZEREwzMzvm5/B5eYIgICi/wMfFxs6LjJPs7fUeHiVdXWY1NT1QUFeWlp4tLTVCQkruvchoAAAAH3RSTlMAFVN+pcvf7Pn/M43S/g1z1RCA7gFh6h7EO+liA46xMZn/HgAABcpJREFUeAHUz9Vh5jAYBMD9WWtmZuy/wmO+yE7e9E0HA53L9XZ/PF+KBlCv5+N+u17wIZbtuDSO69gW3snzAxor8D2cC6OYRoujEMeSNKPxsjTBgbygCEUOrbKiEFUJjVpRDFXjLU1LUdrmjUNHYbr/Fy3FafGPmgLV+EupKJAq8Ye8okhVjl+SgkIVCX5KKVaKH8KMYmUhvosoWIRvvJiCxR6+8imaj68CihbgC4vCWQBsCmcDcCicA1xcGqMfxmn+wzQOPU+5F1xpimXd5v9s68IzV9yMOezzm/bTxQ13GmKdNVaeuONBM/TbrLH1PPbAk2YYZq2Bx5540QzjrDXy2AuKZphmrYnHFGiI+TM7dm3GABTDQLjOJiGFmRn2XygTWK++L7oN/s6WqdMoiCCCCCKIIIII4t8Q/gCEIPwpDkG4pwiDcO8pBuGHAgrCTzYQhB/PKAg/Y3oEvSBM3V5VH4MYDFU1wiDGKptgEFOVzeYUxEJ1SwhiJdMagtjItN0xEHu5DgjEUbYTAnGW7XIlIG7y3QGIx1O+FwDxVqMPAPFVqx8795g8WRYEUPxzrmR4xnbbtm3btm3btu0e29hI/62bWZh4EXWzI95vB6f4Lhu7j/joQ3Jp4j6iKTk1cx/RnECLloRaOY94pTWBNm0JtXMe0Z5AB+lIqJPziM4EukhXQm918x3RnUAPkZ6EermO6E2oj0hfQv1cR/QnUO8jkQGEBg7yHDGYwBB7pDfUccTLhIZJseGERjiOGElolBQbbQ8qnEaMITRWirVDGec24u237Mfu8SgT3EZMJDRJSrwymdAUtxFTCU2TUtNRxjuNMIYSM6TUTJRZTiNmE5ozV0rNQ5nvNGJBxseLWgtRWrmMqPVF5oHDIpTFLiOWoMyQcktRlrmMeJHQF1JhOcagwmNEQ0IrpMLKD1FWOYyYgbJaKq1BWeswYh3KeqnUA2XgIH8RGwhtlCqb0Da7i2iF0laq1JqDssVdxGsoW7M/VzG8lreIN1C2STXT0LY7i9BDCXZIddvQdjqLeBdll5qRUpnOIkajTJQadqPtcRUxaCDKXqlhM9o+VxH7UQ6E3xq0g64idqEcksB8tG2OImp9gbJfAhPQDjuK6IPy1hEJDEU76ihiGMoxCb2NdvyEn4gpef3wzEc76SbiFNoSUSagnXYT0QTlzFlRhqKdO+8lohnKhR3aRQyXnES0IoFJTiLakcDllT4iOpHEFRcR3d4iiUMuInqRyFUXEe+TzDUHEYMGksx1BxGfkNANBxGfkdTN6BG1hpPUregRdUjsdvSI+iR2/E7siB0kdzdyRGOSY3rkiFkkx7nzcSPmox1slMUcDKOiRmzDcE+yGIHhftSIxWgXzksW79qDipgRy/73z/4DLA8jRpw4jjZLsnqE4XHEiFUY+khWTzBcjRjRD23gU8nqSyxfRYs4fw7ta8nuDpZvokUMxfCt5HADw3fRIkZg+F5ymIDlh0gRKy+j/VhLctiP5adIEeMwnJZcfj6O4ZdIERMwLJacfrUHFXEirmI4JTn9hmVrlIjxGL6Q3O5h6RIlYh+GvpLboAsYfv8jRsRBDNMkD0ex/Bkh4iaWvyQPTbC0jRBxGENLyccSLB1WFj7iKIYtko+nA7H8XfCIO8cx9JK8rMHyT8EjTmL5V/KyFMtLBY9Yi+Edyc88TP+lVyM979KINCKNSCPSiDQijUgj0og0oqi7uyaAKAaAILrhz8zkX+ZVx9xlMw6eguELEb8hguNHOFh+hIXhRxhofoSG4kcoSH6EhMjZDbkIYVQZyjKUf94ayEaXf2gczlqaf/LNv1sPaXyPbmI1TB0ujQunYRlx0xwxGqIZd62MiBUP7XyGHY9tB5vh2PCs2LkM+4ZXrREPIVrxpnlhMSwz3jZOHIZpxIe6fvCfMPQdPlc3rd+EtqnxvaKs/CVUZYEfS9Is9w+QZ2mCvxJSaWNdFHtQ5KzRSgq86QQV8UUzmeCE7wAAAABJRU5ErkJggg=="
         rel="icon" type="image/x-icon" />
diff --git a/_layouts/home.html b/_layouts/home.html
index aad54ed..d421a28 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -26,7 +26,7 @@ <h2>Design Director at GitHub Copilot <span class="ampersand">&amp;</span> start
   {% include home-navigation.html %}
   {% include home-work.html %}
 
-  <script type="text/javascript" src="/assets/js/ios.js"></script>
-  <script type="text/javascript" src="/assets/js/s.js"></script>
+  <script defer type="text/javascript" src="/assets/js/ios.js"></script>
+  <script defer type="text/javascript" src="/assets/js/s.js"></script>
 </body>
 </html>
diff --git a/_sass/_base.scss b/_sass/_base.scss
index 8e63ba0..90ad5e7 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -127,8 +127,8 @@ ul{
 a {
   color: var(--brand-color);
   text-decoration: none;
-  -webkit-transition: none;
-          transition: none;
+  -webkit-transition: color 0s, text-decoration 0s;
+          transition: color 0s, text-decoration 0s;
 
   &:visited {
     color: var(--brand-color);
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index 59f91e3..329a826 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -7,12 +7,16 @@ body {
 
   padding: 0 var(--body-padding);
   animation: body-animation 1.6s;
+  will-change: opacity;
 }
 
 @keyframes body-animation {
   from {
     opacity: 0;
   }
+  to {
+    opacity: 1;
+  }
 }
 
 img {
@@ -94,7 +98,7 @@ pre {
   text-decoration: none;
   padding: 2rem 1.4rem;
   position: relative;
-  transition: all var(--base-trans-slow) ease-in-out;
+  transition: color var(--base-trans-slow) ease-in-out;
 }
 
 .home-navigation a:hover {
@@ -114,11 +118,12 @@ pre {
   fill: var(--text-color);
   visibility: hidden;
   opacity: 0;
-  transition: all var(--base-trans) ease-in-out;
+  transition: opacity var(--base-trans) ease-in-out, visibility var(--base-trans) ease-in-out;
   position: fixed;
   bottom: 5.2rem;
   right: 4.8rem;
   z-index: 2;
+  will-change: transform;
 }
 
 .home-intro-scroll.visible {
@@ -131,8 +136,6 @@ pre {
 }
 
 @keyframes home-intro-scroll {
-  20% {
-  }
   45% {
     transform: translateY(0);
   }
@@ -142,8 +145,6 @@ pre {
   65% {
     transform: translateY(0);
   }
-  75% {
-  }
 }
 
 @keyframes navigation-animation {
@@ -189,7 +190,7 @@ pre {
     color: var(--title-color);
     text-decoration: none;
     outline: none;
-    transition: all var(--base-trans-slow) ease-in-out;
+    transition: color var(--base-trans-slow) ease-in-out;
   }
 }
 
@@ -262,7 +263,7 @@ pre {
   position: relative;
   text-decoration: none;
   font-weight: 500;
-  transition: all var(--base-trans) ease-in-out;
+  transition: color var(--base-trans) ease-in-out;
 }
 
 .post a:before {
@@ -272,7 +273,7 @@ pre {
   bottom: 0;
   left: 0;
   right: 0;
-  transition: all var(--base-trans) ease-in-out;
+  transition: background-color var(--base-trans) ease-in-out;
 }
 
 .post a:hover:before {
@@ -426,7 +427,7 @@ pre {
   padding: 1.6rem 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  transition: all var(--base-trans-mid) ease-in-out;
+  transition: padding-left var(--base-trans-mid) ease-in-out, color var(--base-trans-mid) ease-in-out;
 }
 
 .blog-list-item a:before {
diff --git a/assets/js/s.js b/assets/js/s.js
index dbd33f9..6472c84 100644
--- a/assets/js/s.js
+++ b/assets/js/s.js
@@ -19,8 +19,8 @@
       }
     }
 
-    // scrolling event
-    document.addEventListener("scroll", scrollHandler);
+    // scrolling event with passive listener for better performance
+    document.addEventListener("scroll", scrollHandler, { passive: true });
 
     function scrollHandler() {
       // scroll hint
@@ -43,6 +43,7 @@
     const start = window.pageYOffset;
     const startTime = "now" in window.performance ? performance.now() : new Date().getTime();
 
+    // Cache document height calculations
     const documentHeight = Math.max(
       document.body.scrollHeight,
       document.body.offsetHeight,
@@ -60,7 +61,8 @@
       documentHeight - destinationOffset < windowHeight
         ? documentHeight - windowHeight
         : destinationOffset
-    )
+    );
+    
     if (start >= destinationOffsetToScroll) { // going up
       destinationOffsetToScroll -= extraPadding;
     }
@@ -81,13 +83,16 @@
         Math.ceil(timeFunction * (destinationOffsetToScroll - start) + start)
       );
 
+      const currentPosition = Math.round(window.pageYOffset);
+      const targetPosition = Math.ceil(destinationOffsetToScroll);
+      
       if (start >= destinationOffsetToScroll) { // going up
-        if (Math.round(window.pageYOffset) <= Math.ceil(destinationOffsetToScroll)) {
+        if (currentPosition <= targetPosition) {
           return;
         }
       }
       else { // going down
-        if (Math.round(window.pageYOffset) >= Math.ceil(destinationOffsetToScroll)) {
+        if (currentPosition >= targetPosition) {
           return;
         }
       }