Cara mempercepat loading web

Jasa Web Design Surabaya - lazy load - mempercepat loading halaman web

mempercepat loading halaman web dengan metode lazy load yang diberikan oleh Jasa Web Design Surabaya



Cara mempercepat loading web

Sebagai Jasa Web Design Surabaya, kami seringkali menghadapi saat load sebuah website tidak maksimal, karena harus menunggu cukup lama sampai ada content yang dimunculkan.
Hal ini bisa terjadi jika halaman web kita memiliki banyak gambar, css, dan javascript yang harus di load terlebih dulu sebelum memunculkan isi dari webnya.

Pada kesempatan ini kita akan mengulas cara untuk memerintah browser supaya tidak mengunduh seluruh gambar yang ada di halaman web kita. Teknik ini dikenal dengan nama lazy load.
Dengan teknik ini, gambar tidak langsung diunduh saat halaman web dibuka, tetapi baru akan diunduh saat kita scroll ke bagian gambar tersebut.

Baca Juga: Beginilah Cara Kerja MySQL, Perbedaan MySQL Dan PHP, Serta Tips Belajar MySQL

Baca juga: Memeriksa Password Strength dengan pStrength jQuery Plugin

Secara umum, saat memanggil sebuah gambar kita menggunakan perintah:

<img src="images/blabla.jpg">

Dengan perintah di atas, browser akan langsung mengunduh gambar tersebut saat halaman web dibuka. Semakin banyak gambar, tentu waktu yang dibutuhkan semakin lama sampai seluruh komponen halaman web diunduh.

Dengan lazy load kita memodifikasi kode di atas dengan kode berikut:

<img data-src="images/blabla.jpg" class="lazy">

Dengan kode tersebut browser tidak akan langsung mengunduh gambar, sehingga otomatis komponen yang diunduh hanya bagian css, javascript, dan kode html.

Lalu bagaimana memunculkan gambar tersebut saat discroll?
Kita perlu menggunakan kode javascript untuk mengatasi hal itu.

Baca Juga: Beginilah Cara Kerja MySQL, Perbedaan MySQL Dan PHP, Serta Tips Belajar MySQL

Kode Javascript:

document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages;    

  if ("IntersectionObserver" in window) {
    lazyloadImages = document.querySelectorAll(".lazy");
    var imageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var image = entry.target;
          image.src = image.dataset.src;
          image.classList.remove("lazy");
          imageObserver.unobserve(image);
        }
      });
    });

    lazyloadImages.forEach(function(image) {
      imageObserver.observe(image);
    });
  } else {  
    var lazyloadThrottleTimeout;
    lazyloadImages = document.querySelectorAll(".lazy");
    
    function lazyload () {
      if(lazyloadThrottleTimeout) {
        clearTimeout(lazyloadThrottleTimeout);
      }    

      lazyloadThrottleTimeout = setTimeout(function() {
        var scrollTop = window.pageYOffset;
        lazyloadImages.forEach(function(img) {
            if(img.offsetTop < (window.innerHeight + scrollTop)) {
              img.src = img.dataset.src;
              img.classList.remove('lazy');
            }
        });
        if(lazyloadImages.length == 0) { 
          document.removeEventListener("scroll", lazyload);
          window.removeEventListener("resize", lazyload);
          window.removeEventListener("orientationChange", lazyload);
        }
      }, 20);
    }

    document.addEventListener("scroll", lazyload);
    window.addEventListener("resize", lazyload);
    window.addEventListener("orientationChange", lazyload);
  }
})

Untuk contoh bisa dilihat di halaman demo dari Jasa Web Design Surabaya:

DEMO

sumber: css-tricks.com



Artikel Lainnya

Web Design Surabaya - Web Design Murah - Jasa SEO terbaik

Tips Sukses Belajar MySQL, Pemula Jangan Cepat Menyerah

Salah satu DBMS atau Database Management System yang umum digunakan adalah MySQL. Sesuai dengan namanya, sistem ini menggunakan bahasa SQL yang merupakan kependekan dari Structured Query Language. Belajar SQL bukanlah hal yang mudah namun bisa dipela ...


Wajib Tahu, Inilah Cara Belajar PHP Pemrograman yang Mudah dan Efektif Bagi Pemula

Salah satu bahasa pemrograman yang dikatakan populer dan banyak digunakan para developer, yaitu ada yang namanya PHP (Hypertext Preprocessor). Diketahui, bahasa pemrograman tersebut sering kali digunakan, dikarenakan dapat memudahkan para developer d ...


Membuat input type untuk email di HTML

Pada umumnya kita sebagai web developer membuat input type berupa text atau password dengan kode seperti berikut: Untuk text: <input type="text" name="username" size="25" maxsize="15"> Untuk password: <input type="password" name="password" ...


Proses Pengerjaan

Web Design - Photography (foto prewedding casual, foto prewedding unik, photo pre wedding) - Videography

Lokasi di Surabaya dan Bali

Foto Buat Nikah

Desain Grafis

Kontak

08113638531 / 08113865464

info@tatamedia.com

Desainer Website di Surabaya

Web Design di Bali

Kantor

Tatamedia Solusindo Surabaya

Dekkophotography Bali

Video Prewedding

Web Design

Support

Kirim permintaan anda ke

info@tatamedia.com