Menunda pemuatan gambar dan JavaScript di SharePoint Online

Artikel ini menguraikan bagaimana Anda dapat mengurangi waktu muat bagi halaman SharePoint Online menggunakan JavaScript untuk menunda pemuatan gambar dan dengan menunggu pemuatan JavaScript non-esensial hingga pemuatan halaman selesai.

Gambar dapat memberikan efek buruk pada kecepatan pemuatan halaman di SharePoint Online. Secara default, sebagian besar browser Internet paling modern melakukan pengambilan gambar sebelumnya saat memuat halaman HTML. Hal ini dapat menyebabkan halaman menjadi terlalu lambat dalam memuat jika gambar tidak terlihat di layar sampai pengguna menggulir ke bawah. Gambar dapat memblokir browser agar tidak memuat bagian halaman yang terlihat. Untuk mengatasi masalah ini, Anda dapat menggunakan JavaScript untuk melewati pemuatan gambar terlebih dahulu. Memuat JavaScript nonesensial juga dapat memperlambat waktu muat halaman SharePoint Anda. Topik ini menjelaskan beberapa metode yang dapat Anda gunakan untuk meningkatkan waktu muat halaman dengan JavaScript di SharePoint Online.

Meningkatkan waktu muat halaman dengan menunda pemuatan gambar di halaman SharePoint Online menggunakan JavaScript

Anda dapat menggunakan JavaScript untuk mencegah browser web agar tidak melakukan pengambilan gambar sebelumnya. Hal ini mempercepat penyajian keseluruhan dokumen. Untuk melakukan hal ini, hapus nilai atribut src dari tag <img> lalu ganti dengan jalur ke file di atribut data seperti: data-src. Misalnya:

<img src=”” data-src=”/sites/NavigationBySearch/_catalogs/masterpage/Images/microsoft-white-8.jpg” />

Dengan metode ini, browser tidak langsung mengunduh gambar. Jika gambar sudah ada di port tampilan, JavaScript memberi tahu browser untuk mengambil URL dari atribut data dan menyisipkannya sebagai nilai untuk atribut src. Gambar hanya akan dimuat setelah pengguna menggulir dan gambar akan muncul dalam tampilan.

Untuk melakukannya, Anda perlu menggunakan JavaScript.

Dalam file teks, tetapkan fungsi isElementInViewport()    untuk memeriksa apakah elemen merupakan bagian dari browser yang terlihat oleh pengguna.

function isElementInViewport(el) {
  if (!el)
    return false;
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) 
  );
}

Berikutnya, gunakan isElementInViewport()    dalam fungsi loadItemsInView()   . Fungsi LoadItemsInView()    akan memuat semua gambar yang memiliki nilai untuk atribut data-src jika gambar berada di bagian browser yang terlihat oleh pengguna. Tambahkan fungsi berikut ke dalam file teks:

function loadItemsInView() {
  //Select elements by the row id.
  $("#row [data-src]").each(function () {
      var isVisible = isElementInViewport(this);
      if (isVisible) {
          if ($(this).attr("src") == undefined) {
              $(this).attr("src", $(this).data("src"));
          }
      }
  });
}

Terakhir, hubungi loadItemsInView()    dari dalam window.onscroll()    seperti yang terlihat pada contoh berikut. Hal ini untuk memastikan bahwa gambar yang ada di port tampilan dimuat saat pengguna membutuhkannya, bukan sebelumnya. Tambahkan hal berikut ke dalam file teks:

//Example of calling loadItemsInView() from within window.onscroll()
$(window).on("scroll", function () {
    loadItemsInView();
});

Untuk SharePoint Online, Anda perlu melampirkan fungsi berikut ini ke acara gulir di tag #s4-workspace <div> Hal ini karena acara jendela ditimpa untuk memastikan pita tetap terlampir pada bagian atas halaman.

//Keep the ribbon at the top of the page
$('#s4-workspace').on("scroll", function () {
    loadItemsInView();
});

Simpan file teks sebagai file JavaScript dengan ekstensi .js, misalnya delayLoadImages.js.

Setelah menulis delayLoadImages.js, Anda dapat menambahkan konten file ke halaman master di SharePoint Online. Anda melakukannya dengan menambahkan tautan skrip ke header di halaman master. Setelah berada di halaman master, JavaScript akan diterapkan ke semua halaman di situs SharePoint Online Anda yang menggunakan tata letak halaman master tersebut. Sebagai alternatif, jika Anda ingin menggunakannya hanya di satu halaman situs, gunakan Komponen Web editor skrip untuk menyematkan JavaScript ke dalam halaman. Lihat topik berikut ini untuk informasi selengkapnya:

Contoh: Mereferensikan file delayLoadImages.js JavaScript dari halaman master di SharePoint Online   

Untuk menjalankannya, Anda juga perlu mereferensikan jQuery di halaman master. Dalam contoh berikut, Anda dapat melihat hanya ada satu gambar termuat di pemuatan halaman awal, tetapi ada beberapa lainnya di halaman tersebut.

Cuplikan layar memperlihatkan satu gambar dimuat di halaman

Cuplikan layar berikut menampilkan seluruh gambar yang diunduh setelah bergulir ke dalam tampilan.

Cuplikan layar memperlihatkan beberapa gambar dimuat di halaman

Menunda pemuatan gambar menggunakan JavaScript dapat menjadi teknik yang efektif untuk menyempurnakan kinerja. Namun, jika teknik tersebut diterapkan di situs web publik, mesin pencarian tidak dapat menelusuri gambar dengan cara yang sama seperti halnya saat menelusuri gambar yang dibentuk dengan teratur. Hal ini dapat memengaruhi peringkat pada mesin pencarian karena metadata pada gambar itu sendiri tidak benar-benar ada sampai halaman dimuat. Perayap mesin pencarian hanya membaca HTML sehingga tidak akan melihat gambar sebagai konten di halaman. Gambar merupakan salah satu faktor yang digunakan untuk memberi peringkat halaman dalam hasil pencarian. Salah satu cara mengatasi hal ini adalah menggunakan teks pengantar untuk gambar Anda.

Sampel kode GitHub: Memasukkan JavaScript untuk menyempurnakan kinerja

Jangan lewatkan sampel artikel dan kode di injeksi JavaScript yang disediakan di GitHub.

Lihat Juga

Browser yang didukung di Office 2013 dan Office 365 ProPlus

Panduan: Menerapkan halaman master ke situs di SharePoint 2013

Panduan: Membuat tata letak halaman di SharePoint 2013

Kembangkan keterampilan Anda
Jelajahi pelatihan
Dapatkan fitur baru terlebih dahulu
Gabung ke Office Insiders

Apakah informasi ini bermanfaat?

Terima kasih atas umpan balik Anda!

Terima kasih atas umpan balik Anda! Sepertinya menghubungkan Anda ke salah satu agen dukungan Office kami akan sangat membantu.

×