Merge pull request #468 from BeAPI/feat/lazysizes

feat (lazysizes): improves initial page load performance

Author: firestar300

assets/conf-img/tpl/default-picture-nolazyload-caption.tpl

@@ -1,6 +1,6 @@
 <picture>
     %%data-location%%
     %%sources%%
-    <img %%src%% fetchpriority="high" %%attributes%%>
+    <img %%src%% fetchpriority="high" decoding="async" %%attributes%%>
 </picture>
-<figcaption>%%caption%%</figcaption>
+<figcaption>%%caption%%</figcaption>

assets/conf-img/tpl/default-picture-nolazyload.tpl

@@ -1,5 +1,5 @@
 <picture>
     %%data-location%%
     %%sources%%
-    <img %%src%% fetchpriority="high" %%attributes%%>
+    <img %%src%% fetchpriority="high" decoding="async" %%attributes%%>
 </picture>

package.json

@@ -17,6 +17,7 @@
   "license": "GPL-2.0",
   "dependencies": {
     "@fontsource/poppins": "^5.0.5",
+    "lazysizes": "^5.3.2",
     "oneloop.js": "^5.2.1"
   },
   "devDependencies": {

src/js/index.js

@@ -1,3 +1,4 @@
+import 'lazysizes'
 import './classes/ScrollDirection'
 import './classes/ButtonSeoClick'
 import './classes/Header'

src/scss/04-utilities/_lazyload.scss

@@ -0,0 +1,77 @@
+@use "../01-abstract/variables" as *;
+@use "sass:math";
+
+.lazyload,
+.lazyloading {
+	background: $color-grey-200;
+	opacity: 0;
+}
+
+.lazyloaded {
+	opacity: 1;
+	transition: opacity .5s;
+}
+
+// css loading for bgset items
+// with basicspinner
+$loading-dimensions: 50px;
+
+[data-bgset] {
+	position: relative;
+	background-repeat: no-repeat;
+	background-position: 50% 50%;
+	background-size: cover;
+	opacity: 1;
+
+	&::before {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 2;
+		content: "";
+		background: $color-primary;
+		transition: opacity .5s, z-index .5s ease .5s;
+	}
+
+	&::after {
+		position: absolute;
+		top: calc(50% - #{math.div($loading-dimensions, 2)});
+		left: calc(50% - #{math.div($loading-dimensions, 2)});
+		z-index: 3;
+		width: $loading-dimensions;
+		height: $loading-dimensions;
+		content: "";
+		border: 5px solid $color-light;
+		border-top-color: transparent;
+		border-radius: $loading-dimensions;
+		opacity: 1;
+		transition: opacity .5s, z-index .5s ease .5s;
+		transform: translateX(-50%) translateY(-50%);
+		animation: loading .5s linear infinite;
+	}
+
+	&.lazyload {
+		opacity: 1;
+		transition: opacity .5s;
+	}
+
+	&.lazyloaded {
+		&::after,
+		&::before {
+			z-index: -1;
+			opacity: 0;
+		}
+	}
+}
+
+@keyframes loading {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}

src/scss/editor.scss

@@ -27,6 +27,7 @@ variables.$entry-file-name: "editor";
 
 @use "04-utilities/wp-admin-bar";
 @use "04-utilities/focus";
+@use "04-utilities/lazyload";
 @use "04-utilities/seo";
 @use "04-utilities/video-wrapper";
 @use "04-utilities/palette";

src/scss/style.scss

@@ -31,6 +31,7 @@ variables.$entry-file-name: "style";
 
 @use "04-utilities/wp-admin-bar";
 @use "04-utilities/focus";
+@use "04-utilities/lazyload";
 @use "04-utilities/seo";
 @use "04-utilities/video-wrapper";
 @use "04-utilities/palette";

yarn.lock

@@ -2272,6 +2272,7 @@ __metadata:
     imagemin-jpegtran: "npm:^7.0.0"
     imagemin-optipng: "npm:^8.0.0"
     imagemin-svgo: "npm:^10.0.1"
+    lazysizes: "npm:^5.3.2"
     mini-css-extract-plugin: "npm:^1.5.0"
     oneloop.js: "npm:^5.2.1"
     postcss: "npm:^8.4.24"
@@ -6703,6 +6704,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lazysizes@npm:^5.3.2":
+  version: 5.3.2
+  resolution: "lazysizes@npm:5.3.2"
+  checksum: 10/15dfa1cc8bf8c3a4393014d411f161cb1df96ab0888a0776ba4dc34d45c6ba9c5d2b2eca22683c14dfeee552c67173cb9a512d640d3424d9910c0246e15c4edc
+  languageName: node
+  linkType: hard
+
 "levn@npm:^0.4.1":
   version: 0.4.1
   resolution: "levn@npm:0.4.1"