Ketiga hal ini didefinisikan di awal bagi mereka yang belum jelas tentang apa itu.
Beban Malas
Lazy load, juga salah disebut "lazy" untuk terjemahan harfiahnya, adalah pola desain yang digunakan untuk menunda pemuatan atau rendering objek sampai waktu yang tepat untuk menghindari preloading yang tidak perlu dari objek yang mungkin tidak digunakan. Ini paling umum digunakan untuk gambar dan berkontribusi pada waktu muat yang lebih baik dan penghematan bandwidth.
Rendering setiap gambar ditunda sampai diperlukan, memuat saat Anda menggulir melalui viewport
Viewport
Viewportyang tidak memiliki terjemahan yang tepat, tetapi sering disebut sebagai "jendela grafis", diciptakan oleh Apple pada tahun 2007 untuk iPhone-nya dan merupakan jendela virtual yang mirip dengan yang dirancang Nokia untuk Mini Map. Itu adalah, dan masih merupakan, meta tag yang dimaksudkan untuk menyediakan cara bagi halaman web untuk berkomunikasi dengan peramban seluler tentang bagaimana mereka menginginkan peramban web untuk merender halaman tersebut.
Tanpa meta tag ini, iPhone merender halaman web sebagai jendela selebar 980 px yang harus diperbesar dan diperkecil oleh pengguna. Dengan tag meta ini, Anda bisa merender halaman pada ukuran sebenarnya dan kemudian menyesuaikan tata letak untuk menyediakan jenis halaman yang kita semua harapkan untuk dilihat saat menggunakan browser seluler. Akhirnya, ini menjadi tag meta standar yang didukung oleh sebagian besar perangkat dan merupakan tag yang digunakan saat ini untuk apa yang dikenal sebagai desain responsif.
Cache Litespeed
LiteSpeed Web Server adalah perangkat lunak server web dan Cache LiteSpeed untuk WordPress (LSCWP) adalah plugin akselerasi situs all-in-one, yang menampilkan cache di seluruh server yang unik dan sekumpulan fitur pengoptimalan untuk situs-situs yang menggunakan WordPress dan dihosting di server yang menjalankan LiteSpeed.
Memuat gambar
Idealnya, semua gambar harus dimuat ditangguhkan, kecuali gambar yang sudah ada di viewport saat halaman dimuat pada awalnya, yaitu apa yang ditampilkan sekilas di layar sebelum kita menggulir.
Ini ada masalah. Halaman bisa terlihat jelek pada pemuatan pertama karena gambar-gambar tidak ditampilkan sampai tidak ada gerakan dan Anda harus mengecualikan dua atau tiga gambar pertama yang ditampilkan
Meskipun WordPress telah memiliki pemuatan asli yang ditangguhkan sejak versi 5.5 dan kita dapat melakukan ini dengan banyak plugin lain seperti Perfmatterskontrol Viewport untuk membatasi gambar mana yang ingin Anda tampilkan dan mana yang tidak begitu sederhana, karena kami dapat memberitahukannya untuk tidak melakukan pemuatan yang ditangguhkan misalnya gambar yang ingin kami tampilkan, tetapi kami tidak dapat mengatur atau mengecualikannya dua, tiga, atau empat yang pertamatetapi kita tidak bisa mengatur atau mengecualikan gambar tertentu untuk setiap halaman dengan cara yang sederhana dan kita hanya bisa melakukan ini dengan dalam jumlah besar.
VPI
Pada tanggal 25 Juli, LiteSpeed menambahkan dalam pembaruan versi 5.0 dari pluginnya opsi fleksibel untuk memperbaikinya yang disebut VPI (Viewport Images).
Layanan VPI memeriksa URL dan menentukan gambar mana yang terlihat pada layar 1300×900 piksel untuk tampilan desktop dan gambar mana yang terlihat pada layar 480×800 untuk tampilan seluler. Ini mengembalikan daftar gambar-gambar tersebut ke plugin LiteSpeed, dan plugin LiteSpeed mengecualikan mereka dari pemuatan lambat saat berikutnya cache URL itu.
Hasilnya adalah halaman yang merender sepenuhnya di atas lipatan, sementara semua gambar di bawah lipatan terus berperilaku seperti sebelumnya. Halaman ini mempertahankan skor kecepatan halamannya yang baik, sementara pengunjung manusia menemukan layar penuh pertama dari konten.
Konfigurasi
Untuk menggunakan layanan baru ini, tentu saja, Anda harus mengaktifkan Beban Malas di dalam plugin.
Konfigurasi VPI sederhana, hanya memiliki dua sakelar.
Ketika gambar viewport (selanjutnya VPI) diaktifkan dan cron disetel ke ON, gambar VPI akan dihasilkan di latar belakang melalui antrian berbasis cron.
Jika Anda tidak ingin mengaktifkan cron, Anda harus memproses antrian VPI secara manual. Anda dapat melakukan ini dari tombol"Jalankan antrian VPI secara manual" yang akan muncul ketika ada URL dalam antrian atau dari dasbor utama dari opsi"Force cron".
Hal yang menarik dan sangat berguna tentang opsi baru ini adalah bahwa sekarang, baik di editor klasik maupun di Gutenberg, di setiap posting dan halaman Anda akan menemukan kotak baru di opsi LiteSpeed di mana Anda dapat sepenuhnya menonaktifkan opsi ini dan menghapus gambar apa pun dari Viewport untuk menyempurnakannya sesuai keinginan Anda.
Gambar apa pun yang muncul dalam kotak ini tidak akan ditangguhkan pemuatannya
Jika input belum diproses untuk VPI, kedua kotak akan tampak kosong, meskipun Anda dapat menambahkan gambar secara manual sesuai keinginan atau menghapus gambar dari kedua kotak dan memaksa penghitungan ulang VPI.
Yang baik dan yang kurang baik
Tanpa diragukan lagi, keuntungan besar dari VPI LiteSpeed adalah dapat dengan cepat dan mudah memutuskan gambar spesifik mana yang kita tidak ingin pemuatan yang ditangguhkan berlaku dan mengaturnya secara manual untuk setiap halaman.
Yang menarik adalah bahwa opsi ini merupakan tambahan untuk layanan pengoptimalan WordPress lainnya dari QUIC.cloud seperti Critical CSS (CCSS), Unique CSS (UCSS), Low Quality Image Placeholders (LQIP) dan Image Optimisation yang mana kami ditawarkan dengan biaya gratis terbatas, yang mungkin tidak selalu cukup, dan setelah itu Anda harus membeli kredit, meskipun tidak mahal.
Saya memutuskan untuk mengujinya untuk membandingkan hasilnya dengan Lazy Load asli dari WordPress Core dan Perfmatters (dengan pengecualian tetap per kuantitas) dan sejauh ini saya dapat melihat peningkatan dalam margin kecil yang sudah tersisa.
Hasil visual akhir persis sama seperti yang dicapai dengan Perfmatters, karena Anda hanya mengubah warna dari placeholder dari abu-abu ke putih dan sesuaikan durasi efek"fade in" dengan CSS ini.
/* Fade untuk Litespeed's Lazy Load - BAGIAN 1 - Sebelum Lazy Load */
img[data-lazyloaded]{
opacity: 0;
}
/* BAGIAN 2 - Setelah Lazy Load */
img.litespeed-loaded{
-webkit-transisi: opacity .5s linear 0.2s;
-moz-transisi: opacity .5s linear 0.2s;
transisi: opacity .5s linear 0.2s;
opacity: 1;
}
