Cara mengatasi eliminate render blocking resources – Kecepatan loading web adalah salah satunya factor paling penting untuk menarik dan mengumpulkan pengunjung. Bila tidak ada permasalahan apapun, web yang performnya jauh lebih cepat biasanya memiliki peluang lebih besar dalam menarik banyak pengguna internet. Karena, mesin perayap memperhitungkan kecepatan situs guna menentukan rangking hasil penelusuran.
Mengukur kecepatan web belum pasti dapat berjalan lancar. Ada beberapa pemicu yang kemungkinan mempengaruhi langkah check kecepatan web Anda, seperti kecepatan akses internet, lokasi geografis, dan lain-lain. Disini Anda bisa manfaatkan PageSpeed Insights dari Google untuk melihat kecepatan situs web Anda.
Service gratis ini disiapkan oleh Google dan berperan untuk tentukan score web berdasar kecepatan loadingnya. Idealnya, Anda memperoleh score tinggi di PageSpeed ini. Apabila Anda sudah memakai tool online ini, maka Anda akan mendapati panduan Eliminate render-blocking JavaScript and CSS in above-the-fold konten di web yang seharusnya tidak boleh Anda ikuti.
Isi Konten
Apa Yang di Maksud “eliminate render-blocking resources”?
Untuk memahami apa itu eliminate render-blocking resources dan mengapa sumber daya tersebut mengganggu waktu muat situs Anda, kita harus awali dengan tampilan dasar mengenai langkah browser situs dalam merender situs website.
Saat pengunjung terhubung di website Anda, browser website mereka pada intinya diawali pada bagian atas code situs Anda dan terus menerus menelusurinya hingga membaca ke bagian bawah. Dari atas ke bawah, sampai sini paham kan?
Bila pada proses itu, dia mendapati file CSS atau JavaScript, maka dia harus berhenti “membaca” sementara proses lainnya dalam status “menunggu” untuk mengambil dan mengolah file itu. Waktu yang dihabiskan harus “dijeda” terlebih dahulu untuk mengambil dan mengurai sumber daya itu. Dengan langkah ini proses yang lainnya akan dihabiskan untuk suatu hal yang lebih produktif, seperti memuat bagian content website Anda yang selekasnya terlihat saat seorang membuka halaman yang di akses.
Katakanlah Anda mempunyai effect JavaScript ini di footer situs Anda. Ini ditunjang oleh “coolfooter.js”, yang disebut skrip yang direkomendasikan pada bagian atas code situs Anda ( walau dampaknya berada di footer, jadi pengunjung tidak menyaksikannya sampai mereka menggulir ke footer ).
Jadi tatanan letak yang paling kasar untuk code situs Anda adalah kemungkinan seperti :
Meta judul
Coolfooter.js
HTML untuk content paruh atas Anda. Ini ialah semua content yang langsung disaksikan pengunjung ( saat sebelum mereka mulai berinteraksi dengan halaman)
Dan berikut kenapa ini jadi sumber permasalahan:
Saat pengunjung datang di website Anda, browser mereka mulai membaca dari atas ke bawah . Maka saat sebelum bisa mengurai dan merender HTML untuk content paruh atas di website Anda, mereka perlu menunggu beberapa saat untuk mengambil dan mengurai file coolfooter.js.itu
Saat Google memberitahu Anda untuk hilangkan eliminate render-blocking resources, itu pada intinya seperti menjelaskan kata, “hei, jangan muat sumber daya yang tak perlu pada bagian atas code situs Anda karenanya akan membuat browser pengunjung membutuhkan waktu lebih lama untuk mengambil sisi yang terlihat dari web Anda.”
Dengan panduan dalam postingan ini, kami berharap agar Anda bisa men-setting supaya resources yang dirender “sedikit menunggu” untuk memuat sumber daya CSS dan JavaScript tertentu sampai sisi halaman telah sukses dimuat seluruhnya.
Apa itu render-blocking resources ?
Saat merujuk pada sumber daya atau resources yang memblokir perenderan, kita umumnya bicara mengenai:
– CSS dan
– JavaScript
Penting untuk dimengerti jika tidak seluruhnya file CSS dan JavaScript itu memblok perenderan.
Misalkan, coba atur web Anda untuk memuat CSS yang penting di dekat bagian atas, bila tidak, pengunjung Anda kemungkinan akan mengalami apa yang dikenali sebagai flash of unstyled content (FOUC).
Membenahi Error Eliminate render-blocking resourced JavaScript and CSS
JS dan CSS merupakan hal terpenting untuk setiap web kekinian agar berfungsi bukan hanya pada tingkat paling tinggi, tapi juga di semua sisi. Namun, tentu ada perform yang dirasa buruk. Walau ada cara-cara yang dapat Anda pakai untuk membikin situs Anda bisa lebih cepat, seperti menunda (defer) parsing JavaScript, kadang cara seperti itu juga kurang cukup.
Sudah pasti, kita sedang mengulas render-blocking JavaScript and CSS. Untuk menangani permasalahan ini, lebih dahulu kita harus pastikan jika persoalan ini benar-benar ada dan tidak mengada-ada. Setelah terima konfirmasi render-blocking script di web, maka cara seterusnya yang penting kita laukan ialah cari beberapa peluang untuk perbaikan.
Langkah 1 – Menggunakan Google PageSpeed Insights untuk Mencari Render-blocking JS and CSS
Langkah awal untuk mengatasi render-blocking ialah menghitung kcepatan web Anda memakai Google PageSpeed Insights. Kunjungi halaman Google PageSpeed Insights, dan di kolom input, tempel (paste) situs URL Anda. Click Analyze untuk memperoleh laporan terkait situs Anda. Umumnya nilai atau score situs sekitar antara 50-70; ini harus jadi dasar untuk score web Anda. Bersamaan dengan score itu, Google akan membuat daftar anjuran buat meningkatkan perform situs web Anda.
Bila sesudah menghitung kecepatan web dengan tool PageSpeed Insights ini Anda juga memperoleh panduan Eliminate render-blocking resources, maka Anda tetap harus membaca panduan WordPress ini.
Langkah 2 – Memperbaiki render-blocking JavaScript and CSS
Cara 1 – Menggunakan W3 Total Cache
Sekarang Anda sudah mengetahui tentang kode render-blocking di website Anda. Kini Anda memiliki beberapa opsi untuk mengatasinya. Kami sarankan untuk mengunduh sebuah plugin yang membuat semuanya menjadi mudah saat menghadapi error semacam ini. Salah satu plugin favorit kami adalah W3 Total Cache. Install dan aktikan plugin tersebut. Segera setelah plugin tersebut terpasang, ikuti beberapa langkah berikut ini:
1. Buka Performance – General Settings. Cari heading Minify di halaman tersebut.
2. Di bawah heading akan ada beberapa pilihan. Pilihan pertama adalah Minify; beri tanda centang pada kotak Enable di samping pilihan tersebut.
3. Di opsi Minify mode, pilih Manual, dan klik tombol Save all settings.
4. Di poin ini, Anda harus mengeluarkan semua script JS dan CSS yang menyebabkan render-blocking. Kedua script ini dapat Anda temukan melalui Google PageSPeed Insights. Jika Anda tidak menutup tab PageSpeed seperti yang disarankan di Langkah 1, maka Anda akan menemukan teks Show how to fix yang dapat diklik di bawah petunjuk render-blocking. Klik teks tersebut. Setelah itu, semua daftar yang memuat script dan stylesheet penyebab render-blocking dapat diketahui.
5. Kembali ke WordPress. Buka Performance -> Minify. Anda harus me-minify kedua file JS dan CSS secara terpisah.
6. Pertama, mari kita lihat JS. Di halaman tersebut, cari heading JS. Kemudian Anda akan melihat bagian Operations in areas. Pilih Non-blocking using defer sebagai tipe yang di-embed untuk tag before <head>.
7. Di bawah sub-heading JS file management, pilih tema yang aktif dan klik tombol Add Script. Kemudian salin (copy) URL script JS dari tab PageSpeed, dan tempel (paste) script tersebut satu per satu. Langkah ini memperbaiki file JS.
8.Sekarang saatnya menangani CSS. Di halaman yang sama, scroll ke bawah untuk menemukan bagian CSS. Di bawah sub-heading CSS file management, pilih tema yang aktif dan klik Add a style sheet. Sama seperti script JS, salin/tempel (copy/paste) stylesheet dari PageSpeed Insights ke bagian ini.
9.Terakhir, klik tombol Save settings and purge cache.
Cara 2 – Menggunakan Autoptimize
Cara yang lebih mudah untuk mengatasi eliminate render blocking resources yang lain ialah memakai plugin lain yang disebut Autoptimize. Download dan install plugin itu, Sesudah proses instalasi selesai, buka Settings -> Autoptimize di WordPress. Berikan pertanda centang pada kotak Optimize Javascript Code dan Optimize CSS Code dan click tombol Save Changes and Empty Cache.
Biasanya, cara ini cukup untuk menangani permasalahan render-blocking (bergantung pada tema dan plugin yang aktif). Untuk mengetahui apakah langkah ini efektif, maka buka situs Anda lewat PageSpeed Insights satu kali lagi.
ika Anda ingin lakukan optimisasi lebih jauh, Anda bisa kembali lagi ke menu Settings -> Autoptimize. Click tombol Show Advanced Settings. Di sini, berikan pertanda centang pada pilihan Also aggregate inline JS dan Also aggregate inline CSS.Lalu, akhiri dengan mengeklik Save changes and Empty Cache. Untuk melihat apakah cara ini sukses, buka PageSpeed Insights sekali lagi.
Kesimpulan
Render-blocking memberikan dampak negatif pada kecepatan dan perform web WordPress Anda. Di panduan WordPress ini, kita sudah pelajari langkah menangani Eliminate render-blocking resources JavaScript and CSS konten di web Anda. Walau situs Anda masih mempunyai script dan stylesheet render-blocking yang dibutuhkan, panduan ini diharap bisa menolong Anda dalam tangani permasalahan semacam ini.
Bila beberapa cara pembaruan di atas malah membuat fungsionalitas situs Anda terganggu, pastikan untuk ikuti code render-blocking yang telah di tuliskan atau Anda bisa menghubungi kami selaku jasa pembuatan website di kediri. Akhir kata semoga panduan cara mengatasi eliminate render blocking resources di atas dapat membantu Anda.
