Cara Menghilangkan Sumber Daya Pemblokiran Rendering di WordPress (CSS + JavaScript)

Loading...

Cara menghilangkan sumber daya pemblokiran rendering di WordPress (CSS + JavaScript) – Jika Anda pernah menjalankan situs WordPress melalui Google PageSpeed ​​Insights, Google mungkin telah memberi tahu Anda bahwa Anda perlu menghilangkan sumber daya pemblokiran rendering di situs WordPress Anda. Sebenarnya, mungkin inilah alasan Anda membaca artikel ini sekarang.
Anda mungkin memikirkan dua pertanyaan:

  • Pertama-tama, apa itu rendering sumber daya yang memblokir?
  • Bagaimana cara menghilangkan sumber daya pemblokiran rendering di WordPress?

Pada artikel ini, kami akan menjawab dua pertanyaan untuk Anda. Ini semua yang akan dibahas dalam artikel ini:

  • Apa itu sumber daya pemblokiran rendering dan mengapa ada masalah
  • Cara memperbaiki rendering yang memblokir sumber daya secara umum
  • Cara menggunakan plugin gratis atau berbayar untuk menyelesaikan masalah di WordPress

Apa yang dimaksud dengan “menghilangkan perenderan sumber daya yang memblokir”?

Rendering di WordPress (CSS + JavaScript)
Loading...

Untuk memahami apa yang mencegah perenderan sumber daya dan mengapa mereka dapat merusak waktu pemuatan situs web Anda, kami perlu memahami bagaimana peramban web merender laman web dari perspektif dasar.

Saat pengunjung membuka situs Anda, browser web mereka pada dasarnya dimulai dari bagian atas kode situs dan membacanya. Dari atas ke bawah, mengerti?

Jika Anda menemukan file CSS atau JavaScript selama proses ini, Anda harus berhenti “membaca” sambil menunggu file diunduh dan diproses. Waktu yang dihabiskan untuk “jeda” untuk mengunduh dan mengurai sumber daya ini mungkin dihabiskan untuk hal-hal yang lebih produktif, seperti memuat sebagian konten situs web, yang langsung terlihat ketika seseorang membuka laman itu.

Mari kita lihat contoh ekstrim untuk mengilustrasikan mengapa ini bisa menjadi masalah.

Misalkan Anda memiliki efek JavaScript keren ini di footer situs web Anda. Ini didukung oleh “coolfooter.js”, skrip direferensikan di bagian atas kode situs web Anda (meskipun efeknya ada di footer, jadi pengunjung hanya dapat melihatnya dengan menggulir ke footer).

Oleh karena itu, tata letak kode situs web Anda mungkin sangat kasar:

  • Header meta
  • Coolfooter.js
  • HTML untuk konten. Ini adalah semua konten yang langsung dilihat pengunjung (sebelum mereka mulai berinteraksi dengan halaman)

Inilah mengapa ini menjadi masalah:

Saat pengunjung membuka situs web Anda, browser mereka mulai membaca dari atas ke bawah. Oleh karena itu, perlu menunggu untuk mengunduh dan mengurai file coolfooter.js sebelum dapat mengurai dan merender HTML dari konten layar pertama di situs web.

Hasil Akhir? Perlu waktu lebih lama untuk menampilkan HTML konten paro atas, yang berarti pengunjung Anda akan merasa bahwa situs web Anda lebih lambat.

Saat Google memberi tahu Anda untuk menghilangkan sumber daya yang memblokir perenderan, yang sebenarnya dikatakan: “Hei, tolong jangan memuat sumber daya yang tidak perlu di bagian atas kode situs, karena ini akan membuat browser pengunjung mengunduh apa yang diperlukan untuk bagian Anda yang terlihat. Konten yang lebih panjang “.

Dengan tips dalam artikel ini, Anda akan dapat menunggu untuk memuat sumber daya CSS dan JavaScript tertentu sampai bagian halaman yang terlihat telah dimuat.

Apa itu sumber daya pemblokiran rendering?

Dalam hal merender sumber daya yang memblokir, kami biasanya berbicara tentang:

  • CSS
  • JavaScript

Penting untuk dipahami bahwa tidak semua file CSS dan JavaScript diblokir rendernya.

Misalnya, sangat penting untuk memuat CSS penting ke atas, jika tidak, pengunjung dapat mengalami apa yang disebut fenomena flash konten tanpa gaya (FOUC).

Apakah gambar adalah sumber daya yang memblokir perenderan?

Tidak, gambar tidak mengalami pemblokiran rendering. Mengoptimalkan gambar untuk mengurangi ukuran filenya tetap penting, tetapi Anda tidak perlu khawatir tentang mengoptimalkan jalur pengiriman gambar.

Cara menguji apakah situs Anda memiliki sumber daya yang mencegah perenderan

Untuk menilai apakah situs WordPress Anda saat ini memiliki sumber daya yang mencegah rendering, Anda dapat menggunakan Google PageSpeed ​​Insights.

Yang harus Anda lakukan adalah memasukkan URL yang ingin Anda uji. Kemudian, jika Anda memiliki pertanyaan tentang sumber daya yang memblokir perenderan, PageSpeed ​​Insights akan mencantumkan setiap sumber daya di bagian “Hilangkan Sumber Daya yang Memblokir Perenderan” di bawah “Peluang”:

The Eliminate Render-Blocking Resources message in PageSpeed Insights

Bagaimana Anda menghilangkan perenderan sumber daya yang memblokir?

Jangan khawatir, Anda tidak perlu melakukannya secara manual. Di bagian selanjutnya, kita akan membahas plugin WordPress yang dapat membantu Anda menghilangkan sumber daya pemblokiran rendering.

Namun, sangat membantu untuk memahami apa yang dilakukan plugin ini di latar belakang untuk menghilangkan sumber daya yang memblokir rendering.

Cara menghilangkan JavaScript yang memblokir render

Ada beberapa strategi berbeda untuk menghilangkan pemblokiran rendering JavaScript. Kami akan membahas metode ini secara mendetail dalam artikel tentang cara menunda penguraian JavaScript, tetapi berikut ini adalah metode utamanya:

  • Asinkron-Mengizinkan pengurai HTML (seperti browser pengunjung) mengunduh JavaScript sambil tetap mengurai HTML lainnya. Dengan kata lain, penguraian tidak akan berhenti sepenuhnya saat mengunduh file. Namun, setelah diunduh, itu akan menghentikan parser HTML untuk menjalankan skrip.
  • Tunda-Biarkan pengurai HTML mengunduh JavaScript sambil mengurai sisa HTML, dan menunggu skrip dijalankan hingga penguraian HTML selesai.

Keuntungan menggunakan defer adalah untuk memastikan bahwa skrip dijalankan sesuai urutan kemunculannya di kode.

Async tidak menggunakan metode ini. Jika Asyncditerapkan ke semua sumber daya JavaScript, terkadang dapat menimbulkan masalah, karena asynchrony biasanya menghancurkan sumber daya yang bergantung pada sumber daya yang muncul sebelumnya di dokumen. Masalah paling umum yang disebabkan oleh asynchronous adalah sumber daya jQuery yang rusak, yang akan mencoba memuat sebelum menambahkan jquery.js ke dokumen.

Bagaimana cara menghilangkan rendering yang memblokir CSS

Menghilangkan CSS yang memblokir perenderan bisa sedikit rumit, karena Anda harus berhati-hati agar tidak menunda perenderan CSS yang diperlukan untuk konten paruh atas. Pengaturan yang ideal adalah:

  • Tentukan gaya yang diperlukan untuk merender konten paruh atas dan teruskan gaya ini sejajar dengan HTML.
  • Gunakan atribut media pada elemen link dari file CSS yang ditarik untuk mengidentifikasi sumber daya CSS bersyarat, yaitu, hanya sumber daya CSS yang diperlukan oleh perangkat atau situasi tertentu.
  • Sumber daya CSS yang tersisa harus dimuat secara asinkron, biasanya dengan menambahkannya menggunakan JavaScript yang tertunda atau asinkron. Ini jelas merupakan domain insinyur front-end. Jika Anda seorang insinyur front-end, itu akan bagus, tetapi kebanyakan dari kita tidak. Kabar baiknya adalah ini adalah artikel tentang WordPress, dan Anda dapat menggunakan plugin yang sesuai untuk menghilangkan atau setidaknya secara signifikan mengurangi jumlah rendering memblokir sumber daya JS dan CSS yang memengaruhi situs web Anda.

Cara menggunakan plugin WordPress untuk menghilangkan sumber daya CSS dan JavaScript yang mencegah rendering

Untuk mendemonstrasikan cara menghilangkan sumber daya pemblokiran rendering di WordPress, kami telah menyiapkan situs pengujian sederhana, yang mencakup rendering memblokir CSS dan JavaScript, dan kemudian akan membawa Anda langkah demi langkah untuk memahami cara menggunakan dua solusi plug-in yang berbeda untuk hilangkan rendering yang memblokir CSS dan JavaScript:

  • Pengoptimalan otomatis + JavaScript asinkron (gratis)
  • WP Rocket (dikenakan biaya)

Sebagai referensi, berikut adalah tampilan situs pengujian kami sebelum mengoptimalkan pengiriman CSS dan JavaScript:

The Eliminate Render-Blocking Resources message in PageSpeed Insights

Jika Anda menggunakan Google PageSpeed ​​Insights untuk menguji keefektifan perubahan Anda, harap diperhatikan bahwa Google menyimpan hasilnya selama beberapa menit. Pada dasarnya, ini berarti jika Anda dengan cepat …

  • Uji situs web Anda yang tidak dioptimalkan
  • Aktifkan plugin di bagian ini
  • Uji ulang situs web Anda

… Kemudian Anda masih akan melihat hasil dari situs yang tidak dioptimalkan hingga Google menyetel ulang cache-nya. Jadi, pastikan Anda menunggu beberapa menit agar Google menghapus cache-nya sebelum Anda merasa plugin tersebut tidak berfungsi dengan benar.

Cara menggunakan pengoptimalan otomatis + plugin JavaScript asinkron untuk menghilangkan sumber daya pemblokiran rendering

Autoptimize dan Async JavaScript adalah dua plugin gratis independen dari pengembang yang sama. Keduanya membantu Anda mengoptimalkan pengiriman CSS dan JavaScript.

Setelah memasang kedua plugin, buka “Pengaturan” → “JavaScript Asinkron”, lalu:

  • Centang kotak Aktifkan JavaScript Asinkron di bagian atas.
  • Di kotak “Pengaturan Cepat”, pilih antara “Apply Async” dan “Apply Defer“.
How to configure Async JavaScript plugin

Jika opsi Async menyebabkan masalah pada situs web Anda, kami sarankan Anda mencoba Menunda atau mengecualikan jQuery, plugin memberi Anda opsi.

Setelah menyiapkan plugin JavaScript asinkron, buka Pengaturan → Pengoptimalan otomatis, lalu:

  • Centang kotak untuk mengoptimalkan kode JavaScript
  • Centang kotak untuk mengoptimalkan kode CSS
How to configure Autoptimize plugin

Jika Anda pengguna mahir, Anda dapat menggunakan pengaturan pengoptimalan JavaScript dan CSS lainnya, tetapi sebagian besar situs web dapat menggunakan pengaturan default.

Setelah mengonfigurasi Autoptimize dan Async JavaScript, situs pengujian kami lulus audit “ penghapusan sumber daya pemblokiran rendering ” PageSpeed ​​Insights:

PageSpeed Insights results w/ Autoptimize and Async JavaScript

Jika ingin menghapus lebih banyak file ini, Anda selanjutnya dapat menggunakan Pengoptimalan Otomatis untuk menyebariskan CSS kritis secara manual. Namun, ini membutuhkan beberapa pengetahuan pengembangan, jadi non-pengembang sebaiknya tidak mencobanya.

Jika perlu, Anda juga dapat menggunakan plugin secara terpisah. Namun, karena kedua plugin ini berasal dari pengembang yang sama dan kompatibel satu sama lain, cara terbaik untuk sebagian besar situs web adalah menggabungkannya.

Cara menggunakan WP Rocket untuk menghilangkan sumber daya pemblokiran render

WP Rocket adalah kinerja WordPress premium dan plugin caching yang populer.

peran WP Rocket dalam kinerja WordPress tidak hanya caching, tetapi juga membantu Anda menghilangkan sumber daya CSS dan JavaScript yang mencegah rendering di situs WordPress Anda.

Setelah menginstal dan mengaktifkan WP Rocket, buka tab “Pengoptimalan File”. Kemudian, aktifkan dua opsi berikut:

  • Optimalkan pengiriman CSS di bawah bagian “file CSS”
  • Muat JavaScript yang tertunda di bawah bagian file JavaScript. Anda dapat mencoba mematikan mode aman jQuery. Namun, jika Anda menemukan masalah di bagian depan situs web Anda, Anda mungkin perlu mengaktifkan kembali mode aman jQuery, karena ini mungkin penyebabnya.
How to configure WP Rocket

Setelah mengaktifkan kedua fungsi ini, situs pengujian kami juga lulus audit “Eliminate Rendering Blocking Resources” di PageSpeed ​​Insights. Dibandingkan dengan pengaturan JavaScript Autoptimize / Async, WP Rocket juga berhasil menghilangkan lebih banyak sumber daya pemblokiran rendering:

PageSpeed Insights results w/ WP Rocket

Ini adalah cara menghilangkan sumber daya yang memblokir rendering di situs WordPress Anda!

Sumber daya yang mencegah rendering memperlambat waktu muat halaman situs WordPress Anda dengan memaksa browser pengunjung menunda rendering konten paruh atas, dan browser segera mendownload file yang tidak diperlukan.

Untuk membantu pengunjung memuat bagian halaman yang terlihat lebih cepat, Anda harus menunda pemuatan sumber daya yang tidak diperlukan segera.

Untuk menghilangkan sumber daya pemblokiran render di WordPress, Anda dapat menggunakan plugin off-the-shelf.

Untuk solusi gratis, Anda dapat menggunakan kombinasi Autoptimize dan Async JavaScript (dua plugin dari pengembang yang sama).

Jika Anda bersedia membayar, Anda dapat menggunakan WP Rocket, yang menyediakan integrasi khusus dengan Kinsta dan dapat membantu banyak penyesuaian kinerja WordPress lainnya.

Apakah Anda memiliki pertanyaan lain tentang cara menghilangkan sumber daya pemblokiran render di WordPress? Beri tahu kami di komentar!

Loading...

You May Also Like