Speculative Loading WordPress

TokoDaring.Com – Speculative Loading WordPress. Tim Kinerja dan Performa WordPress (The WordPress Performance Team) baru-baru ini menerbitkan plugin baru bernama “Speculative Loading” yang memungkinkan teknologi baru dengan nama yang sama untuk secara otomatis melakukan prerender URL tertentu pada halaman, yang dapat menyebabkan waktu pemuatan halaman website hampir “sekedipan mata”.

Speculation Rules API

Artikel ini adalah terjemahan dari https://make.wordpress.org/core/2024/04/09/speculative-loading-in-wordpress/

Fungsionalitas ini didukung oleh Speculation Rules API, sebuah API web baru yang memungkinkan penentuan aturan untuk jenis URL mana yang akan diambil atau dipra-render.

instal dan uji plugin

Anda bisa menginstal dan menguji plugin untuk memberikan umpan balik guna menginformasikan perbaikan lebih lanjut sebelum mempertimbangkan kemungkinan untuk menyertakan fitur tersebut pada core WordPress.

Download dan instal plugin dari halaman repository plugin di WP Admin, atau melalui plugin Performance Lab. Kami sendiri menjalankan plugin ini pada beberapa website klien kami.

Sejarah singkat prefetch dan prerender di WordPress

Core WordPress selama beberapa tahun telah menyediakan API Petunjuk Sumber Daya sederhana yang memungkinkan memasukkan tag <link> ke dalam dokumen HTML yang dapat digunakan untuk mengambil (prefetch) atau merender sumber daya tertentu, di antara tindakan lainnya.

Meskipun pengambilan awal dapat berguna untuk sub-sumber daya (sub-resources) tertentu dari dokumen HTML, seperti penyedia skrip pihak ketiga, pra-perenderan mencakup pemrosesan sumber daya dan sudah melakukan beberapa rendering di luar layar sehingga dapat berguna untuk seluruh halaman website.

Namun, menggunakan pendekatan memasukkan tag link[rel="prefetch|prerender"] tidak terlalu fleksibel, karena URL yang akan diambil atau diprerender harus ditentukan segera setelah HTML dimuat.

Memberikan tag <link> untuk setiap tautan jangkar potensial yang mungkin diklik pengguna pada halaman akan sia-sia, dan tidak melewatkan peluang besar untuk pengoptimalan kinerja.

Sejauh ini, solusi seperti Quicklink dapat digunakan untuk menyisipkan tag <link> secara dinamis untuk mengambil sumber daya terlebih dahulu di area pandang pengguna, yang lebih fleksibel, namun masih jauh dari ideal karena mungkin masih mengambil terlalu banyak sumber daya secara berlebihan dan memerlukan pustaka JavaScript.

Namun yang lebih penting lagi, link[rel="prerender"] sebenarnya tidak mendukung pra-penguraian, karena nilai “pra-penguraian” sebenarnya digunakan untuk sesuatu yang disebut NoState Prefetch, yang berarti ia hanya mengambil sumber daya tertentu terlebih dahulu, bukan melakukan pra-penguraiannya, yang mana untuk contohnya termasuk menjalankan JavaScript. Yang terakhir, nilai “prerender” sudah tidak digunakan lagi pada saat ini.

Memperkenalkan Speculation Rules API

Speculation Rules API adalah API web baru yang memecahkan masalah di atas. Hal ini memungkinkan penetapan aturan untuk secara dinamis mengambil dan/atau melakukan pra-render URL dari struktur tertentu berdasarkan interaksi pengguna, dalam sintaks JSON—atau dengan kata lain, secara spekulatif memuat terlebih dahulu URL tersebut sebelum navigasi.

API ini dapat digunakan, misalnya, untuk melakukan pra-render tautan apa pun di laman setiap kali pengguna mengarahkan kursor ke tautan tersebut. Selain itu, dengan Speculation Rules API, “prerender” sebenarnya berarti melakukan prarender seluruh halaman, termasuk menjalankan JavaScript.

Hal ini dapat menyebabkan waktu muat hampir seketika setelah pengguna mengeklik tautan karena kemungkinan besar laman sudah dimuat secara keseluruhan. Namun itu hanya salah satu konfigurasi yang mungkin.

Contoh kode berikut menunjukkan sintaks umum spesifikasi JSON Speculation Rules API dan menguraikan konfigurasi di mana tautan apa pun selain WP Admin atau URL login telah dipra-render.

<script type="speculationrules">
{
    "prerender": [
        {
            "source": "document",
            "where": {
                "and": [
                    {
                        "href_matches": "/*"
                    },
                    {
                        "not": {
                            "href_matches": [
                                "/wp-login.php",
                                "/wp-admin/*"
                            ]
                        }
                    }
                ]
            },
            "eagerness": "moderate"
        }
    ]
}
</script>

API Aturan Spekulasi memungkinkan penentuan pola URL untuk jenis URL mana yang memenuhi syarat untuk pemuatan spekulatif. Aturan dapat dikonfigurasikan untuk mengambil atau merender pola URL tertentu. Nilai yang disebut “keinginan” juga dapat ditentukan yang menentukan seberapa ingin prefetching atau prerendering diterapkan.

Misalnya, nilai “moderat” memicu pemuatan spekulatif saat pengguna mengarahkan kursor ke tautan. Nilai “konservatif” menunda hal ini hingga pengguna mengeklik tautan (yang masih memberikan manfaat kinerja yang layak), sementara nilai “bersemangat” bertindak segera setelah ada sedikit saran agar pengguna mengeklik tautan.

Perhatikan bahwa kehati-hatian disarankan khususnya pada konfigurasi “eager” karena ini meningkatkan kemungkinan memuat URL secara sia-sia.

Dukungan peramban

Meskipun API Aturan Spekulasi telah tersedia di Chrome dan Edge sejak versi 109 secara umum, subfitur khusus yang diperlukan untuk membuka kunci fungsi yang disebutkan di atas disebut “aturan dokumen”, yang baru saja ditambahkan di versi 121. Postingan ini menjelaskan penyempurnaan terbaru pada API secara lebih mendalam.

Dengan kata lain, pada saat penulisan postingan ini, pengguna akhir harus menggunakan Chrome 121+ atau Edge 121+ untuk mendapatkan manfaat fitur ini. Namun tidak ada dampak buruk bagi pengguna browser lain, karena ini merupakan peningkatan progresif. Oleh karena itu, penggunaan Speculation Rules API di situs web Anda aman, apa pun basis penggunanya.

Speculation Rules API dipresentasikan pada konferensi standar web W3C TPAC 2023, dengan sambutan positif. Saat ini, standar tersebut masih dalam tahap rancangan. Posisi mengenai API oleh Firefox dan Safari telah diminta. Untuk melacak secara spesifik sub-fitur yang diperlukan untuk fungsi yang diuraikan dalam postingan ini, Anda dapat merujuk ke tabel “Can I Use”.

Plugin Speculative Loading WordPress

Seperti disebutkan di awal posting ini, Tim Kinerja WordPress baru-baru ini menerbitkan plugin fitur baru “Pemuatan Spekulatif” yang memungkinkan pemuatan spekulatif dari URL frontend lain yang tertaut pada halaman tersebut. Itu menyisipkan skrip JSON yang mirip dengan contoh kode sebelumnya.

Secara default, URL apa pun yang ditautkan pada laman telah dipra-render dengan konfigurasi “moderate”, yang biasanya terpicu saat mengarahkan kursor ke tautan.

Oleh karena itu, Anda tidak perlu melakukan apa pun setelah mengaktifkan plugin: plugin langsung berfungsi. Plugin ini juga menyediakan beberapa opsi penyesuaian untuk mengubah perilaku sesuai preferensi pemilik situs website.

Perilaku default dapat dimodifikasi melalui bagian “Speculative Loading” baru di layar Setting > Readding. Misalnya, jika situs menggunakan JavaScript yang belum diadaptasi untuk dimuat saat pra-perenderan, plugin dapat dikonfigurasi untuk hanya mengambil dokumen terlebih dahulu.

Seseorang dapat mengatur keinginannya menjadi “konservatif” untuk mengurangi kemungkinan URL dimuat tanpa pengguna menavigasi ke sana. Atau seseorang dapat menyetelnya ke “eager” untuk meningkatkan kemungkinan pemuatan spekulatif telah selesai pada saat pengguna membuka URL tertaut, namun hal ini berisiko memuat beberapa sumber daya secara sia-sia.

Nilai default “moderat” memberikan keseimbangan yang baik antara keberlanjutan dan kinerja. Aturan untuk jenis URL mana yang akan dimuat secara spekulatif dapat disesuaikan menggunakan filter yang disebut “plsr_speculation_rules_href_exclude_paths”.

Misalnya, plugin yang menambahkan URL ke situs WordPress yang mengubah status pengguna agar tidak dimuat dapat menggunakan filter tersebut untuk mengecualikan URL tersebut agar tidak diprarender atau diambil sebelumnya.

Berikut adalah contoh kode yang akan memastikan bahwa URL seperti https://example.com/cart/ atau https://example.com/cart/foo/ akan dikecualikan dari pengambilan dan prapenguraian:

<?php
 
add_filter(
    'plsr_speculation_rules_href_exclude_paths',
    function ( $exclude_paths ) {
        $exclude_paths[] = '/cart/*';
        return $exclude_paths;
    }
);

Potensi langkah selanjutnya

Saat ini, plugin tersebut harus digunakan untuk menguji fitur tersebut, dan Tim Kinerja sangat ingin menerima masukan serta menganalisis manfaat kinerja plugin pada waktu pemuatan.

Nantinya, seiring dengan matangnya API browser dan plugin, kemungkinan untuk menyertakan fitur tersebut di inti WordPress akan dieksplorasi. Namun, untuk mencapainya, diperlukan umpan balik tambahan.

Artikel terkait dengan :

Feed Ads by Google!