Skip to content

Commit 502f823

Browse files
dewanakldewanakl
authored
Merge pull request #77 from dewanakl/improve-lcp
feat: remove fetch and decoding img tag
2 parents 90c3117 + 71a3e6a commit 502f823

1 file changed

Lines changed: 17 additions & 17 deletions

File tree

‎index.html‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -98,13 +98,13 @@
9898
<div class="d-flex position-absolute w-100 h-100">
9999
<div class="position-relative overflow-hidden vw-100">
100100
<div class="position-absolute h-100 w-100 slide-desktop" style="opacity: 0;">
101-
<img src="./assets/images/placeholder.webp" data-src="https://picsum.photos/1000/1000?random=7" fetchpriority="high" decoding="async" alt="bg" class="bg-cover-home" style="mask-image: none; opacity: 30%;">
101+
<img src="./assets/images/placeholder.webp" data-src="https://picsum.photos/1000/1000?random=7" alt="bg" class="bg-cover-home" style="mask-image: none; opacity: 30%;">
102102
</div>
103103
<div class="position-absolute h-100 w-100 slide-desktop" style="opacity: 0;">
104-
<img src="./assets/images/placeholder.webp" data-src="https://picsum.photos/1000/1000?random=8" fetchpriority="high" decoding="async" alt="bg" class="bg-cover-home" style="mask-image: none; opacity: 30%;">
104+
<img src="./assets/images/placeholder.webp" data-src="https://picsum.photos/1000/1000?random=8" alt="bg" class="bg-cover-home" style="mask-image: none; opacity: 30%;">
105105
</div>
106106
<div class="position-absolute h-100 w-100 slide-desktop" style="opacity: 0;">
107-
<img src="./assets/images/placeholder.webp" data-src="https://picsum.photos/1000/1000?random=9" fetchpriority="high" decoding="async" alt="bg" class="bg-cover-home" style="mask-image: none; opacity: 30%;">
107+
<img src="./assets/images/placeholder.webp" data-src="https://picsum.photos/1000/1000?random=9" alt="bg" class="bg-cover-home" style="mask-image: none; opacity: 30%;">
108108
</div>
109109
</div>
110110
</div>
@@ -123,12 +123,12 @@ <h2 class="font-esthetic mb-4" style="font-size: 2rem;">Wahyu &amp; Riski</h2>
123123

124124
<!-- Home -->
125125
<section id="home" class="bg-light-dark position-relative overflow-hidden p-0 m-0">
126-
<img src="./assets/images/placeholder.webp" data-src="./assets/images/bg.webp" fetchpriority="high" decoding="async" alt="bg" class="position-absolute opacity-25 top-50 start-50 translate-middle bg-cover-home">
126+
<img src="./assets/images/placeholder.webp" data-src="./assets/images/bg.webp" alt="bg" class="position-absolute opacity-25 top-50 start-50 translate-middle bg-cover-home">
127127

128128
<div class="position-relative text-center bg-overlay-auto" style="background-color: unset;">
129129
<h1 class="font-esthetic pt-5 pb-4 fw-medium" style="font-size: 2.25rem;">Undangan Pernikahan</h1>
130130

131-
<img src="./assets/images/placeholder.webp" data-src="./assets/images/bg.webp" fetchpriority="high" decoding="async" alt="bg" onclick="undangan.guest.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto cursor-pointer">
131+
<img src="./assets/images/placeholder.webp" data-src="./assets/images/bg.webp" alt="bg" onclick="undangan.guest.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto cursor-pointer">
132132

133133
<h2 class="font-esthetic my-4" style="font-size: 2.25rem;">Wahyu &amp; Riski</h2>
134134
<p class="my-2" style="font-size: 1.25rem;">Rabu, 15 Maret 2023</p>
@@ -171,7 +171,7 @@ <h2 class="font-esthetic py-4 m-0" style="font-size: 2rem;">Assalamualaikum Wara
171171
</div>
172172

173173
<div data-aos="fade-right" data-aos-duration="2000" class="pb-1">
174-
<img src="./assets/images/placeholder.webp" data-src="./assets/images/cowo.webp" fetchpriority="high" decoding="async" alt="cowo" onclick="undangan.guest.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto cursor-pointer">
174+
<img src="./assets/images/placeholder.webp" data-src="./assets/images/cowo.webp" alt="cowo" onclick="undangan.guest.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto cursor-pointer">
175175
<h2 class="font-esthetic m-0" style="font-size: 2.125rem;">Nama Wahyu Siapa</h2>
176176
<p class="mt-3 mb-1" style="font-size: 1.25rem;">Putra ke-1</p>
177177
<p class="mb-0" style="font-size: 0.95rem;">Bapak lorem ipsum</p>
@@ -198,7 +198,7 @@ <h2 class="font-esthetic mt-4" style="font-size: 4.5rem;">&amp;</h2>
198198
</div>
199199

200200
<div data-aos="fade-left" data-aos-duration="2000" class="pb-1">
201-
<img src="./assets/images/placeholder.webp" data-src="./assets/images/cewe.webp" fetchpriority="high" decoding="async" alt="cewe" onclick="undangan.guest.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto cursor-pointer">
201+
<img src="./assets/images/placeholder.webp" data-src="./assets/images/cewe.webp" alt="cewe" onclick="undangan.guest.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto cursor-pointer">
202202
<h2 class="font-esthetic m-0" style="font-size: 2.125rem;">Nama Riski Siapa</h2>
203203
<p class="mt-3 mb-1" style="font-size: 1.25rem;">Putri ke-2</p>
204204
<p class="mb-0" style="font-size: 0.95rem;">Bapak lorem ipsum</p>
@@ -401,13 +401,13 @@ <h2 class="font-esthetic text-center py-2 m-0" style="font-size: 2.25rem;">Galer
401401

402402
<div class="carousel-inner rounded-4">
403403
<div class="carousel-item active">
404-
<img src="./assets/images/placeholder.webp" data-src="https://picsum.photos/1280/720?random=1" fetchpriority="high" decoding="async" alt="image 1" class="d-block img-fluid cursor-pointer" onclick="undangan.guest.modal(this)">
404+
<img src="./assets/images/placeholder.webp" data-src="https://picsum.photos/1280/720?random=1" alt="image 1" class="d-block img-fluid cursor-pointer" onclick="undangan.guest.modal(this)">
405405
</div>
406406
<div class="carousel-item">
407-
<img src="./assets/images/placeholder.webp" data-src="https://picsum.photos/1280/720?random=2" fetchpriority="high" decoding="async" alt="image 2" class="d-block img-fluid cursor-pointer" onclick="undangan.guest.modal(this)">
407+
<img src="./assets/images/placeholder.webp" data-src="https://picsum.photos/1280/720?random=2" alt="image 2" class="d-block img-fluid cursor-pointer" onclick="undangan.guest.modal(this)">
408408
</div>
409409
<div class="carousel-item">
410-
<img src="./assets/images/placeholder.webp" data-src="https://picsum.photos/1280/720?random=3" fetchpriority="high" decoding="async" alt="image 3" class="d-block img-fluid cursor-pointer" onclick="undangan.guest.modal(this)">
410+
<img src="./assets/images/placeholder.webp" data-src="https://picsum.photos/1280/720?random=3" alt="image 3" class="d-block img-fluid cursor-pointer" onclick="undangan.guest.modal(this)">
411411
</div>
412412
</div>
413413

@@ -431,13 +431,13 @@ <h2 class="font-esthetic text-center py-2 m-0" style="font-size: 2.25rem;">Galer
431431

432432
<div class="carousel-inner rounded-4">
433433
<div class="carousel-item active">
434-
<img src="./assets/images/placeholder.webp" data-src="https://picsum.photos/1280/720?random=4" fetchpriority="high" decoding="async" alt="image 4" class="d-block img-fluid cursor-pointer" onclick="undangan.guest.modal(this)">
434+
<img src="./assets/images/placeholder.webp" data-src="https://picsum.photos/1280/720?random=4" alt="image 4" class="d-block img-fluid cursor-pointer" onclick="undangan.guest.modal(this)">
435435
</div>
436436
<div class="carousel-item">
437-
<img src="./assets/images/placeholder.webp" data-src="https://picsum.photos/1280/720?random=5" fetchpriority="high" decoding="async" alt="image 5" class="d-block img-fluid cursor-pointer" onclick="undangan.guest.modal(this)">
437+
<img src="./assets/images/placeholder.webp" data-src="https://picsum.photos/1280/720?random=5" alt="image 5" class="d-block img-fluid cursor-pointer" onclick="undangan.guest.modal(this)">
438438
</div>
439439
<div class="carousel-item">
440-
<img src="./assets/images/placeholder.webp" data-src="https://picsum.photos/1280/720?random=6" fetchpriority="high" decoding="async" alt="image 6" class="d-block img-fluid cursor-pointer" onclick="undangan.guest.modal(this)">
440+
<img src="./assets/images/placeholder.webp" data-src="https://picsum.photos/1280/720?random=6" alt="image 6" class="d-block img-fluid cursor-pointer" onclick="undangan.guest.modal(this)">
441441
</div>
442442
</div>
443443

@@ -500,7 +500,7 @@ <h2 class="font-esthetic pt-3 mb-4" style="font-size: 2.25rem;">Love Gift</h2>
500500
<div class="collapse" id="collapseQris">
501501
<hr class="my-2 py-1">
502502
<div class="d-flex justify-content-center align-items-center">
503-
<img src="./assets/images/placeholder.webp" data-src="./assets/images/donate.png" fetchpriority="high" decoding="async" alt="donate" class="img-fluid rounded-3 mx-auto bg-white">
503+
<img src="./assets/images/placeholder.webp" data-src="./assets/images/donate.png" alt="donate" class="img-fluid rounded-3 mx-auto bg-white">
504504
</div>
505505
</div>
506506
</div>
@@ -660,7 +660,7 @@ <h2 class="font-arabic pt-4" style="font-size: 2rem;">اَلْحَمْدُ لِ
660660
<div class="d-flex flex-column text-center">
661661
<h2 class="font-esthetic mb-4" style="font-size: 2.25rem;">The Wedding Of</h2>
662662

663-
<img src="./assets/images/placeholder.webp" data-src="./assets/images/bg.webp" fetchpriority="high" decoding="async" alt="background" class="img-center-crop rounded-circle border border-3 border-light shadow mb-4 mx-auto">
663+
<img src="./assets/images/placeholder.webp" data-src="./assets/images/bg.webp" alt="background" class="img-center-crop rounded-circle border border-3 border-light shadow mb-4 mx-auto">
664664

665665
<h2 class="font-esthetic mb-4" style="font-size: 2.25rem;">Wahyu &amp; Riski</h2>
666666
<div id="guest-name" data-message="Kepada Yth Bapak/Ibu/Saudara/i"></div>
@@ -687,7 +687,7 @@ <h2 class="font-esthetic mb-4" style="font-size: 2.25rem;">Wahyu &amp; Riski</h2
687687
<div class="loading-page bg-white-black" id="loading" style="opacity: 1;">
688688
<div class="d-flex justify-content-center align-items-center vh-100 overflow-y-auto">
689689
<div class="d-flex flex-column width-loading text-center">
690-
<img src="./assets/images/placeholder.webp" data-src="./assets/images/icon-192x192.png" data-fetch-img="high" class="img-fluid mb-3 mx-auto object-fit-cover opacity-0" fetchpriority="high" decoding="async" alt="icon" style="width: 3.5rem; height: 3.5rem;">
690+
<img src="./assets/images/placeholder.webp" data-src="./assets/images/icon-192x192.png" data-fetch-img="high" class="img-fluid mb-3 mx-auto object-fit-cover opacity-0" alt="icon" style="width: 3.5rem; height: 3.5rem;">
691691
<div class="progress" role="progressbar" style="height: 0.5rem;" aria-label="progress bar">
692692
<div class="progress-bar" id="progress-bar" style="width: 0%"></div>
693693
</div>
@@ -722,7 +722,7 @@ <h2 class="font-esthetic mb-4" style="font-size: 2.25rem;">Wahyu &amp; Riski</h2
722722
</button>
723723
</div>
724724

725-
<img src="./assets/images/placeholder.webp" class="img-fluid w-100 rounded-4 cursor-pointer" fetchpriority="high" decoding="async" alt="image" id="show-modal-image">
725+
<img src="./assets/images/placeholder.webp" class="img-fluid w-100 rounded-4 cursor-pointer" alt="image" id="show-modal-image">
726726
</div>
727727
</div>
728728
</div>

0 commit comments

Comments
 (0)