Peningkatan Peforma: Cara Memuat Gambar Menggunakan in-view.js

() translation by (you can also view the original English article)

Di tutorial ini saya akan menunjukkan cara meningkatkan peforma dari halaman situsmu menggunakan view,js. Pustaka JavaScript ini melaporkan kembali ketika sesuatu telah digulung ke viewport dan akan membantu kita memuat gambar secara dinamis sebagaimana mereka diperlukan.

Pentingnya Peforma

Peforma situs penting, terutama jika situsmu menyasar negara berkembang di mana koneksinya lambat dan paket data mahal. Beberapa tugas dasar yang biasanya dilakukan untuk meningkatkan performa situs termasuk memperkecil berkas JavaScript dan stylesheets, "gzipping" asset, mengkompres ukuran gambar, setelahnya kita telah hampir siap. Namun apakah benar begitu?

Linimasa waktu memuat laman dan browser inspector

Contoh inspector di atas menunjukkan sebuah halaman memuat 24 gambar dalam viewport seukuran ponsel dengan kecepatan 3G reguler. Dan seperti yang dapat kita lihat, halamannya selesai dimuat dalam sekitar 11 detik! Ini sangat lambat untuk sebuah halaman sederhana tanpa apapun selain bebera gambar dan sebuah stylesheet. Bahkan halamannya tidak dipenuhi dengan iklan maupun skrip pelacak yang biasanya memberatkan laman.

Ingat juga, bahwa ini hanyalah sebuah tiruan. Ini bahkan tidak menghitung pengaturan sever, latensi, dan masalah teknis lainnya. Performanya bisa jadi lebih buruk pada realitanya.

Jadi bagaimana kita bisa meningkatkan performa pemuatan laman?

Bottleneck

Pertama, kita memiliki beberapa gambar. Alasan dari halaman dimuat secara lama karena semua gambar membanjiri bersama dengan pemuatan laman pertama kalinya. Jika kamu melihat lebih dekat ke gambar sebelumnya, kamu akan melihat dia tidak terjadi secara parallel: beberapa gambar mulai di muat sementara yang lain sedang dirender, yang mengumpulkan laman sebagai sebuah kesatuan seluruhnya.

Jika kita memiliki banyak gambar dalam satu halaman, kita bisa mempertimbangkan memuat gambar tersebut secara asinkron dan hanya ketika pengguna membutuhkannya. Ini mengizinkan browser untuk menyelesaikan memuat halaman tanpa perlu menunggu semua gambar dirender, dan sekaligus menghemat bandwith pengguna.

Memulai

Untuk mengikuti ini, ambil index-starter.html dari repo. Ada juga css/styles-starter.css pendamping yang bisa kamu gunakan juga.

Untuk memulainya, kita perlu mengganti sumber gambar dengan gambar yang sangat kecil, kalau bisa yang di encode ke base64 untuk menghindari request HTTP tambahan apapun. Kita menggunakan gambar ini sebagai placeholder sebelum kita menyajikan gambar sesungguhnya. Yang telah dibilang, kita juga harus menyimpan sumber gambarsesungguhnya di attribut kostum bernama data-src.

1	<figure class="post__image">
2	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="./images/image-24.jpg" alt="" width="800" height="554">
3	</figure>

Ketika kamu telah melakukannya dan menyegarkan laman, kamu hars mencari gambar yang masih kosong dan dimensi mereka tidaklah harus berhubungan dengan yang gambar akhir kamu seharusnya miliki.

Chrome Browser Window with square blank image

Jadi mari kita perbaiki style-nya.

Menjaga Rasio Gambar

Gambar yang kita inginkan di atur ke 800 x 500 piksel. Kita akan membagi tinggi gambar (800px) dengan lebar gambar (500px) dan memperbesarnya hingga 100% Gunakan hasilnya untuk mengatur padding top dari elemen semu image container. Pada akhirna, kita harus mengatur posisi gambar ke absolute dan mengatur tinggi maksimal ke 100% sehingga itu tidak akan manambah tingginya.

figure {
   position: relative;
}
figure img {
   top: 0;
   left: 0;
   position: absolute;
   max-height: 100%;
}
figure:before {
   padding-top: 69.25%; // ( 554 / 800 ) * 100%
}

Hingga titik ini, dimensi gambar seharusnya telah tepat. Bagaimanapun, sumber gambar sesungguhnya masih tinggal di atribut kostum sehingga browser tidak bisa benar-benar mengambil gambar apapun.

Gambar pada rasio yang tepat, namun gambarnya belum dimuat.

Langkah selanjutnya kita akan menambahkan beberapa JavaScript yang akan memuat gambarnya.

Memuat Gambarnya

Pertama, kita perlu memual in-view.js ke laman. Seperti yang telah disebut, pustaka ringan ini (yang tidak bergantung pada jQuery atau pustaka utama seperti Waypoints) mendeteksi apakah sebuah elemen berada di dalam atau di luar viewport.

Sekarang buat sebuah berkas JavaScript baru di mana kita akan menulis JavaScript kita dan memuatnya setelah in-view.js, sebagai berikut:

1	<script src="./js/in-view.min.js"></script>
2	<script src="./js/scripts.js"></script>

Methods dan Functions

Pustaka in-view.js mengekspos fungsi inView() yang akan menggunakan selector sebagai argumennya. Dalam kasus ini, kita akan melewatkan elemen figure; elemen yang membungkus gambar. Alasan kita memilih elemen wrapper adalah karena kita akan menambahkan beberapa class untuk menjalakan transisi-ini jadi lebih mudah ketika class-nya berada di elemen wrapper ketimbang di gambarnya sendiri, sehingga:

1	inView('figure')

Selanjutnya, gunakan metode .on() untuk mengikat elemen dalam event enter untuk mengecek apakah elemen berada di dalam viewport. Tambahannya, in-view.js juga mengekspos event exit yang melakukan kebalikannya; dia mendeteksi ketika sebuah elemen keluar dari viewport.

inView( 'figure' ).on( 'enter', function( figure ) {

     var img = figure.querySelector( 'img' ); // 1

     if (  'undefined' !== typeof img.dataset.src ) { // 2

         figure.classList.add( 'is-loading' ); // 3

         // 4
         newImg = new Image();
         newImg.src = img.dataset.src;

         newImg.addEventListener( 'load', function() {

            figure.innerHTML = ''; // 5
            figure.appendChild( this );

            // 6
            setTimeout( function() {
               figure.classList.remove( 'is-loading' );
               figure.classList.add( 'is-loaded' );
            }, 300 );
         } );
     }
} );

Event enter akan memicu sebuah fungsi yang akan melakukan sebagai berikut:

Memilih gambar di dalam figure.
Memastikan bahwa dia memiliki atribut data-src.
Menambahkan is-loading ke elemen wrapper, figure.
Muat sebuah gambar baru dengan sumber yang didapat dari atribut data-src.
Ketika termuat tambahkan gambar ke container-nya.
Terakhir, mengganti class is-loading dengan is-loaded.

Kami Ingin Memuat

Seperti yang bisa kamu lihat dari kode di atas, kita telah mengenalku dua class baru yaitu is-loading dan is-loaded. Kita menggunakan class is-loading untuk menambah sebuah spinner animation selama gambar sedang dimuat. Lalu kita menggunakan class is-load, yang seperti namanya, berguna untuk menambahkan efek transisi ke gambarnya ketika gambar telah berhasil dimuat.

1	figure.is-loaded img {
2	animation: fadeIn 0.38s linear 1s forwards;
3	}
4	figure.is-loading {
5	position: relative;
6	}
7	figure.is-loading:after {
8	content: '';
9	display: block;
10	color: #ddd;
11	font-size: 30px;
12	text-indent: -9999em;
13	overflow: hidden;
14	width: 1em;
15	height: 1em;
16	border-radius: 50%;
17	margin: auto;
18	position: absolute;
19	top: 50%;
20	left: 50%;
21	margin-left: -0.5em;
22	margin-top: -0.5em;
23	transform: translateZ(0);
24	animation: loading 1.7s infinite ease;
25	}
26	@keyframes loading {
27	0% {
28	transform: rotate(0deg);
29	box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
30	}
31
32	5%,
33	95% {
34	box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
35	}
36	10%,
37	59% {
38	box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
39	}
40	20% {
41	box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
42	}
43	38% {
44	box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
45	}
46	100% {
47	transform: rotate(360deg);
48	box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
49	}
50	}
51	@keyframes fadeIn {
52	0% {
53	opacity: 0;
54	}
55
56	100% {
57	opacity: 1;
58	}
59	}

Fallback

Berharap pada yang terbaik, tapi berencana untuk yang terburuk. Jadi hanya dalam kasus JavaScript dimatikan (kasus yang jarang, tapi tentu saja mungkin) kita perlu memastikan gambarnya masih bisa ditampilkan. Gunakan elemen <noscript> dengan sumber gambar setelah menunjuk sumber gambar yang sebenaranya.

<figure>
   <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="./images/image-24.jpg" alt="" width="800" height="554">
   <noscript>
      <img src="./images/image-24.jpg" alt="" width="800" height="554">
   </noscript>
</figure>

Kita telah siap! Segarkan lama, dan jika kita menginspeksi linimasa jaringan dari perangkat pengembang kitta bis melihat kecepatannya sekarang meningkat secara signifikan karena kita hanya memuat apa yang dapat dilihat oleh pengguna.

Sekarang laman telah dimuat secara sempurna hanya dalam 1.95 detik dalam kecepatan 3G reguler; peningkatan kecepatannya lebih dari 500%!

Menyimpulkan

Di tutorial ini, kita melihat cara meningkatkan laman dimuat dengan merender gambar ketika pengguna melihatnya. Metode ini dikenal dengan "lazy loading" dan bisa sangat membantu performa situsmu.

Ada banyak pustaka JavaScript dan plugin jQuery yang melakukannya, jadi kenapa memilih in-view.js? Secara pribadi, in-view.js telah menjadi skrip yang saya cari semenjak tidak terlalu banyak yang ia lakukan. Ini hanya menangani satu hal dan melakukannya dengan baik. Pustaka macam ini memberikan kontrol dan fleksibilitas lebih besar.

Contohnya, tidak hanya kita bisa menggunakan in-view.js untuk menjalankan lazy loading, tapi kita juga bisa menggunakannya untuk melakukan infinite scroll, mungkin menampilkan formulir langganan mengambang ketika pengguna mencapai akhir dari halaman (lihat di demo untuk melihat cara kerjanya), atau membuat sebuah linimasa vertikal tanpa harus mendorong pustaka JavaScript lainnya. Beritahu kami caramu menggunakannya!