Merge pull request #33 from gluebi/27-reduce-largest-contentful-paint

27 reduce largest contentful paint
gluebi · Nov 17, 2022 · de9ebee · de9ebee
2 parents dc05ec2 + 00ef9a9
commit de9ebee
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-cookie-comply-with-reject",
   "description": "A Vue 3 component to handle cookie acceptance on your website",
-  "version": "0.1.0-beta.1",
+  "version": "0.0.6",
   "files": [
     "dist"
   ],

diff --git a/src/components/CookieComply.vue b/src/components/CookieComply.vue
@@ -182,20 +182,39 @@ export default {
 };
 </script>
 
-<style>
+<style lang="css">
 @import '../styles/variables.css';
 
+/* Render cookie comply out of viewport to reduce LCP */
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0.8;
+  }
+}
+@keyframes slide-up {
+  0% {
+    transform: translateY(110vh);
+  }
+  100% {
+    transform: translateY(0vh);
+  }
+}
+
 .cookie-comply-body-grey-out {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: #000;
-  opacity: .8;
+  opacity: 0;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
+  animation: fade-in 1s forwards;
 }
 
 .cookie-comply {
@@ -210,6 +229,8 @@ export default {
   box-shadow: var(--box-shadow);
   padding: var(--spacing-md);
   border-radius: var(--border-radius);
+  animation: slide-up 1s forwards;
+  transform: translateY(110vh);
 }
 
 .cookie-comply-edit {