Cara Menghilangkan Render-Blocking Resource Dari Situs WordPress Anda

Pernahkah Anda selesai membuat situs web WordPress, menyukai semuanya, dan segera mulai membencinya setelah menyadari bahwa perlu waktu lama untuk memuat? Menguasai penghapusan sumber daya pemblokiran render akan membantu mendiagnosis masalah ini. Tapi bagaimana caranya?

Kecepatan pemuatan yang lambat tidak hanya mengganggu Anda dan pengunjung Anda, tetapi juga dapat merugikan Anda secara signifikan dalam hal SEO. Sejak 2010, algoritme Google memperhitungkan kecepatan pemuatan dalam keputusan peringkat, sehingga halaman yang lambat muncul lebih rendah di halaman hasil.

Anda mungkin akrab dengan penyebab umum dari kinerja halaman yang buruk — konten yang berlebihan, file gambar yang tidak terkompresi, hosting yang tidak mencukupi, dan kurangnya caching untuk beberapa nama. Tapi ada pelaku lain yang sering diabaikan: sumber daya pemblokiran render.

Jangan salah paham — CSS dan JavaScript sangat bagus. Tanpa CSS, situs web akan menjadi dinding teks biasa. Tanpa Ja=ooovaScript, kami tidak akan dapat menambahkan elemen yang dinamis, interaktif, dan menarik ke situs web kami. Namun, jika dijalankan pada waktu yang salah, CSS dan JavaScript dapat merusak kinerja situs web Anda.

Inilah alasannya: Saat browser web memuat halaman web untuk pertama kalinya, ia mem-parsing semua HTML halaman sebelum menampilkannya di layar kepada pengunjung. Saat browser menemukan tautan ke file CSS, file JavaScript, atau skrip sebaris (yaitu, kode JavaScript dalam dokumen HTML itu sendiri), ia menjeda penguraian HTML untuk mengambil dan mengeksekusi kode, yang memperlambat segalanya.

Jika Anda telah mengoptimalkan kinerja halaman Anda di WordPress dan masih mengalami masalah, sumber daya pemblokiran render mungkin menjadi penyebabnya. Terkadang kode ini penting untuk dijalankan pada pemuatan pertama, tetapi sering kali kode ini dapat dihapus atau didorong hingga akhir antrean.

Dalam posting ini, kami akan menunjukkan cara menghilangkan kode sial ini dari situs web WordPress Anda dan meningkatkan kinerja Anda.

Jika Anda lebih suka mengikuti video, lihat panduan ini yang dibuat oleh WP Casts:

1. Identifikasi resource yang memblokir render.

Sebelum melakukan perubahan apa pun, pertama-tama Anda harus menemukan sumber daya pemblokiran render. Cara terbaik untuk melakukannya adalah dengan tes kecepatan online gratis seperti alat Google PageSpeed ​​Insights. Tempel di URL situs Anda dan klik Analisis .

Saat pemindaian selesai, Google menetapkan skor kecepatan agregat situs web Anda, dari 0 (paling lambat) hingga 100 (tercepat). Skor dalam rentang 50 hingga 80 adalah rata-rata, jadi Anda pasti ingin mendarat di bagian atas rentang ini atau di atasnya.

Untuk mengidentifikasi file yang memblokir perenderan yang memperlambat laman Anda, gulir ke bawah ke Peluang , lalu buka akordeon Hilangkan sumber daya yang memblokir perenderan .

Sumber Gambar

Anda akan melihat daftar file yang memperlambat "cat pertama" halaman Anda — file ini memengaruhi waktu pemuatan semua konten yang muncul di jendela browser pada pemuatan halaman awal. Ini juga disebut konten “paro atas”.

Catat semua file yang diakhiri dengan ekstensi .css dan .js, karena inilah yang ingin Anda fokuskan.

2. Hilangkan sumber daya pemblokiran render secara manual atau dengan plugin.

Sekarang setelah Anda mengidentifikasi masalahnya, ada dua cara untuk memperbaikinya di WordPress: secara manual, atau dengan plugin. Kami akan membahas solusi plugin terlebih dahulu.

Beberapa plugin WordPress dapat mengurangi efek sumber pemblokiran render di situs web WordPress. Saya akan membahas dua solusi populer, Autoptimize dan W3 Total Cache.

Cara Menghilangkan Render-Blocking Resources Dengan Plugin Autoptimize

Autoptimize adalah plugin gratis yang memodifikasi file situs web Anda untuk menghasilkan halaman lebih cepat. Autoptimize bekerja dengan menggabungkan file, mengecilkan kode (yaitu, mengurangi ukuran file dengan menghapus karakter yang berlebihan atau tidak perlu), dan menunda pemuatan sumber daya pemblokiran render.

Karena Anda memodifikasi backend situs Anda, ingatlah untuk berhati-hati dengan plugin ini atau plugin serupa lainnya. Untuk menghilangkan resource yang memblokir render dengan Autoptimize:

1. Instal dan aktifkan plugin Autoptimize.

2. Dari dashboard WordPress Anda, pilih, Settings > Autoptimize .

3. Di bawah Opsi JavaScript , centang kotak di sebelah Optimalkan kode JavaScript? .

4. Jika kotak di sebelah Aggregate JS-files? dicentang, hapus centangnya.

5. Di bawah Opsi CSS , centang kotak di sebelah Optimalkan Kode CSS? .

6. Jika kotak di sebelah Aggregate CSS-files? dicentang, hapus centangnya.

7. Di bagian bawah halaman, klik Save Changes and Empty Cache .

8. Pindai situs web Anda dengan PageSpeed ​​Insights dan periksa peningkatannya.

9. Jika PageSpeed ​​Insights masih melaporkan file JavaScript yang memblokir perenderan, kembali ke Pengaturan > Optimalkan Otomatis dan centang kotak di samping Agregat file JS? dan Agregat file CSS? . Kemudian, klik Simpan Perubahan dan Kosongkan Cache dan pindai lagi.

Cara Menghilangkan Render-Blocking Resources Dengan Plugin W3 Total Cache

W3 Total Cache adalah plugin caching yang banyak digunakan yang membantu mengatasi kode yang lamban. Untuk menghilangkan JavaScript pemblokiran render dengan W3 Total Cache:

1. Instal dan aktifkan plugin W3 Total Cache.

2. Opsi Performa baru akan ditambahkan ke menu dasbor WordPress Anda. Pilih Performa > Pengaturan Umum.

3. Di bagian Minify , centang kotak di sebelah Minify , lalu setel mode Minify ke Manual .

4. Klik Save all settings di bagian bawah bagian Minify .

5. Di menu dashboard, pilih Performance > Minify .

6. Di bagian JS di sebelah JS minify settings , pastikan kotak Enable dicentang. Kemudian, di bawah Operasi di area , buka dropdown Jenis sematan pertama dan pilih Non-pemblokiran menggunakan “tunda” .

7. Di bawah manajemen file JS , pilih tema aktif Anda dari tarik-turun Tema .

8. Lihat kembali hasil PageSpeed ​​Insights dari pemindaian Anda sebelumnya. Untuk setiap item di bawah Hilangkan sumber daya pemblokiran render yang diakhiri dengan .js, klik Tambahkan skrip . Lalu, salin URL lengkap sumber daya JavaScript dari Wawasan PageSpeed ​​dan tempelkan ke bidang File URI .

9. Setelah Anda menempelkan semua resource JavaScript yang memblokir perenderan yang dilaporkan oleh PageSpeed ​​Insights, klik Save Settings & Purge Cache di bagian bawah bagian JS .

10. Di bagian CSS di sebelah CSS minify settings , centang kotak di sebelah CSS minify settings dan pastikan metode Minify diatur ke Combine & Minify .

11. Di bawah manajemen file CSS , pilih tema aktif Anda dari dropdown Tema .

12. Untuk setiap item di bawah Hilangkan sumber daya pemblokiran perenderan yang diakhiri dengan .css di hasil pemindaian Wawasan PageSpeed ​​Anda, klik Tambahkan lembar gaya . Lalu, salin URL lengkap sumber daya CSS dari Wawasan PageSpeed ​​dan tempelkan ke bidang File URI .

13. Setelah Anda menempelkan semua resource CSS yang memblokir perenderan yang dilaporkan oleh PageSpeed ​​Insights, klik Save Settings & Purge Cache di bagian bawah bagian CSS .

14. Pindai situs web Anda dengan PageSpeed ​​Insights dan periksa peningkatannya.

Cara Menghilangkan Render-Blocking JavaScript Secara Manual

Plugin dapat menangani pekerjaan backend untuk Anda. Kemudian lagi, plugin itu sendiri hanyalah lebih banyak file yang ditambahkan ke server web Anda. Jika Anda ingin membatasi file tambahan ini, atau jika Anda lebih suka menangani pemrograman sendiri, Anda dapat menangani JavaScript yang memblokir perenderan secara manual.

Untuk melakukannya, temukan tag <script> di file situs web Anda untuk sumber daya yang diidentifikasi dalam pemindaian Wawasan PageSpeed ​​Anda. Mereka akan terlihat seperti ini:

 
<script src="https://blog.hubspot.com/marketing/resource.js">

Tag <script> memberi tahu browser untuk memuat dan menjalankan skrip yang diidentifikasi oleh atribut src (sumber). Masalah dengan proses ini adalah pemuatan dan eksekusi ini menunda penguraian halaman web oleh browser, yang berdampak pada keseluruhan waktu muat:

Sumber Gambar

Untuk mengatasinya, Anda dapat menambahkan atribut async (asinkron) atau defer ke tag skrip untuk sumber daya yang memblokir perenderan. async dan defer ditempatkan seperti ini:

 
<script src="https://blog.hubspot.com/marketing/resource.js" async>
 <script src="https://blog.hubspot.com/marketing/resource.js" defer>

Meskipun memiliki efek serupa pada waktu muat, atribut ini memberi tahu browser untuk melakukan hal yang berbeda.

Atribut async memberi sinyal pada browser untuk memuat sumber daya JavaScript sambil mem-parsing halaman lainnya dan mengeksekusi skrip ini segera setelah dimuat. Mengeksekusi skrip menjeda parsing HTML:

Sumber Gambar

Skrip dengan atribut defer juga dimuat saat halaman diurai, tetapi skrip ini ditunda dari pemuatan hingga setelah perenderan pertama atau hingga setelah bagian yang lebih penting dimuat:

Sumber Gambar

Atribut defer dan async tidak boleh digunakan bersama pada sumber daya yang sama, tetapi salah satunya mungkin lebih cocok untuk sumber daya tertentu daripada yang lain. Umumnya, jika skrip non-esensial bergantung pada skrip untuk dijalankan sebelumnya, gunakan defer . Atribut defer memastikan bahwa skrip akan berjalan setelah skrip yang diperlukan sebelumnya. Jika tidak, gunakan async .

3. Jalankan kembali pemindaian situs.

Setelah melakukan perubahan, lakukan satu pemindaian terakhir pada situs web Anda melalui Wawasan PageSpeed ​​dan lihat pengaruh perubahan tersebut terhadap skor Anda.

Semoga ada peningkatan yang nyata, tapi jangan khawatir jika tidak. Banyak faktor yang dapat menghambat kinerja halaman, dan Anda mungkin harus menggali lebih dalam untuk menemukan sumber kinerja yang buruk.

4. Periksa bug di situs web Anda.

Selain pemindaian ulang, periksa halaman Anda untuk memastikan situs Anda berfungsi. Apakah halaman dimuat dengan benar? Apakah semua elemen muncul? Jika ada yang rusak atau gagal dimuat dengan benar, batalkan perubahan Anda dan atasi masalahnya.

Jika Anda telah mencapai titik di mana Anda telah berulang kali mencoba berbagai tindakan dengan peningkatan kecepatan minimal, sebaiknya pertimbangkan cara lain untuk mempercepat laman Anda, daripada berisiko merusak situs Anda.

Mengoptimalkan Kinerja Situs WordPress Anda

Banyak faktor yang berkontribusi pada pengalaman pengguna di situs web Anda, tetapi hanya sedikit yang lebih penting daripada waktu muat. Setiap kali Anda membuat perubahan besar pada konten atau tampilan di situs WordPress Anda, Anda harus selalu mempertimbangkan bagaimana perubahan tersebut memengaruhi kinerja.

Sekarang setelah Anda menghilangkan sumber daya yang memblokir perenderan, Anda harus terus mengoptimalkan kecepatan situs web Anda dengan menganalisis fitur lain yang diketahui memperlambat kinerja. Cobalah untuk memasukkan pengujian kecepatan reguler ke dalam jadwal pemeliharaan situs Anda — tetap berada di depan masalah potensial apa pun akan sangat penting untuk kesuksesan Anda.