Tingkatkan Kecepatan Situs: Hapus JS & CSS yang memblokir Render

WordPress memungkinkan Anda membangun situs web khusus dengan plugin dan tema pilihan Anda. Namun, ini bisa berarti situs Anda memiliki banyak skrip yang memperlambat waktu pemuatan dan kinerjanya. Tidak semua skrip ini perlu dimuat segera, dan beberapa sebenarnya dapat memblokir pengunjung agar tidak melihat konten Anda secepat mungkin.

File asing ini disebut JavaScript dan CSS pemblokiran render. Pada artikel ini, kami akan menjelaskan apa itu sumber daya pemblokiran render, dan kemudian menunjukkan cara menghilangkan sumber daya pemblokiran render dari situs WordPress Anda. Mari kita mulai!

Apa itu Render-Blocking JavaScript dan CSS?

Saat situs web dimuat di browser, ia mengirimkan panggilan ke setiap skrip dalam antrean. Biasanya, antrean tersebut harus dikosongkan sebelum situs web terlihat di browser. Antrean skrip yang dapat menghentikan situs web Anda memuat sepenuhnya adalah file JavaScript dan CSS yang memblokir perenderan.

Saat antrian skrip sangat panjang, mungkin perlu beberapa saat sebelum pengunjung dapat mengakses situs Anda. Seringkali, banyak dari skrip ini tidak diperlukan untuk langsung melihat situs web, dan dapat dengan mudah menunggu untuk dijalankan hingga situs itu sendiri dimuat sepenuhnya.

Dengan kata lain, skrip semacam ini memperlambat halaman web Anda tanpa benar-benar berkontribusi pada kebutuhan langsung pemirsa Anda. Skrip apa pun yang tidak melibatkan apa yang akan langsung dilihat oleh pemirsa (sering disebut sebagai elemen 'paro atas') harus ditunda hingga halaman lainnya dimuat.

Mengapa Render-Blocking JavaScript dan CSS Buruk Untuk Halaman Web?

Skrip JavaScript dan CSS yang memblokir render memperlambat halaman web Anda, yang buruk karena banyak alasan. Kecepatan situs berperan dalam banyak aspek penting situs WordPress Anda, termasuk kegunaan umum dan Search Engine Optimization (SEO). Ketika situs Anda memuat dengan lambat, Anda cenderung kehilangan pengunjung, dan kecil kemungkinannya untuk mendapat peringkat tinggi dalam hasil mesin pencari.

Tentu saja, kecepatan dan kinerja situs tidak hanya dipengaruhi oleh sumber daya pemblokiran render. Dengan demikian, ini adalah faktor yang dapat membuat perbedaan signifikan dalam waktu pemuatan. Ingatlah bahwa setiap sumber daya di halaman web menggunakan byte, yang lebih banyak dapat menghasilkan waktu pengunduhan yang lebih lama. Semakin sedikit dan semakin ringan skrip yang dimiliki situs Anda, semakin baik. Lagi pula, Anda tidak ingin membiarkan situs yang lambat berdampak negatif pada bisnis Anda.

Secara umum, sebaiknya pastikan kode situs web Anda sebersih dan seminimal mungkin untuk meningkatkan kecepatan secara keseluruhan. Namun, akan selalu ada beberapa kode sisa. Secara default, browser akan mencoba memuat semuanya sekaligus, termasuk skrip pemblokiran render.

Terserah Anda untuk memastikan situs Anda terlebih dahulu memuat skrip yang diperlukan agar terlihat benar dan dapat digunakan saat pengunjung membuka halaman untuk pertama kalinya. Hanya dengan begitu sisa skrip harus dimuat.

Cara Menghilangkan Render-Blocking JavaScript dan CSS

Sebelum Anda dapat menghilangkan skrip pemblokiran render, Anda harus mengidentifikasi skrip mana yang menyebabkan masalah. Untuk melakukan ini, sebaiknya gunakan Google PageSpeed ​​Insights. Cukup masukkan URL Anda, dan Google akan memberi tahu Anda skrip mana yang memperlambat kinerja halaman Anda:

Buat daftar skrip apa pun yang muncul di hasil di bawah Hilangkan JavaScript dan CSS yang memblokir perenderan . Apakah Anda mencoba mengatasinya secara manual atau menggunakan plugin, ini adalah skrip yang ingin Anda perhatikan saat menerapkan perbaikan berikut.

Untuk mengurangi jumlah skrip pemblokiran perenderan di situs Anda, Anda harus mengikuti beberapa praktik terbaik:

• 'Perkecil' JavaScript dan CSS Anda. Ini berarti menghapus semua spasi ekstra dan komentar yang tidak perlu dalam kode.
• Gabungkan JavaScript dan CSS Anda. Untuk melakukannya, Anda perlu mengambil beberapa file .js dan .css yang berbeda dan menggabungkannya. Idealnya, Anda hanya memiliki sedikit file seperti itu.
• Tunda pemuatan JavaScript. Ini bisa berguna untuk memaksa file JavaScript menunggu untuk dimuat sampai semua hal lain di halaman siap. Cara yang andal untuk menunda JavaScript adalah dengan menggunakan pemuatan asinkron.

Kiat-kiat ini bisa jadi sulit dilakukan dengan tangan di WordPress, karena banyak plugin yang menghadap ke depan dilengkapi dengan file JavaScript dan CSS mereka sendiri. Satu plugin dapat dengan mudah melampirkan hingga lima atau enam skrip ke ujung depan situs Anda. File-file ini dapat bertambah dengan sangat cepat!

Untungnya, WordPress menggunakan satu filter gabungan untuk mendaftarkan semua skrip front-end. Ini berarti Anda memiliki kesempatan untuk mengidentifikasi dan menangani setiap file JavaScript atau CSS yang masuk – bahkan jika Anda tidak tahu persis apa yang harus dicari. Tentu saja, ini jauh lebih mudah dilakukan dengan plugin daripada memulai dari awal.

Plugin untuk Mengurangi Render-Blocking JavaScript dan CSS

Ada beberapa plugin WordPress yang dapat membantu Anda mengoptimalkan situs dengan menghapus JavaScript dan CSS yang memblokir perenderan. Di bagian ini, kita akan melihat empat pilihan populer.

1. Roket WP

WP Rocket membantu pengoptimalan situs melalui tugas-tugas seperti minifikasi CSS dan JavaScript, pemuatan gambar yang lambat, menunda permintaan JavaScript jarak jauh, dan banyak lagi. Ini adalah plugin pengoptimalan 'Swiss Army Knife'.

Salah satu manfaat terbesar menggunakan plugin ini adalah proses penyiapan yang mudah. Namun, satu kelemahan potensial adalah antarmuka pengguna. Plugin menciptakan pengalaman berbeda di dasbor WordPress Anda, maka Anda mungkin sudah terbiasa. Beberapa pengguna lama mungkin tidak menyukai perubahan antarmuka ini. Namun, fungsionalitas plugin yang sebenarnya tetap yang terbaik.

Ada beberapa tambahan gratis yang bisa Anda dapatkan untuk WP Rocket di Direktori Plugin WordPress. Namun, plugin dasar itu sendiri dihargai $49 per tahun untuk satu situs web dan satu tahun dukungan, dengan tingkatan tambahan yang menawarkan lebih banyak opsi.

2. Optimalkan otomatis

Autoptimize dibuat khusus untuk mengatasi masalah yang diangkat oleh alat rekomendasi seperti PageSpeed ​​Insights. Semua pengaturan yang memungkinkan Anda mengonfigurasi plugin untuk situs web Anda akan dimuat dalam menu baru di dasbor WordPress Anda.

Autoptimize mencakup semua tugas pengoptimalan dasar, seperti memperkecil dan membuat cache skrip. Salah satu fitur uniknya adalah ia juga dapat mengoptimalkan dan mengonversi gambar ke dalam format WebP. Alat ini memiliki ulasan keseluruhan yang sangat baik, meskipun Anda ingin mengingat bahwa ini agak rumit untuk dikonfigurasi.

Meskipun plugin itu sendiri gratis, Anda dapat membeli salah satu dari dua paket dari pengembang untuk membantu konfigurasinya. Ada paket konfigurasi khusus dengan harga sekitar $165 (€149). Anda juga bisa mendapatkan tinjauan profesional yang sepenuhnya langsung dari situs web Anda dan konfigurasi plugin ahli dengan harga sekitar $667 (€599).

3. Optimalkan JCH

JCH Optimize juga menawarkan beberapa alat unik untuk membantu meningkatkan waktu muat halaman Anda. Misalnya, ini dapat mengurangi jumlah permintaan HTTP yang diperlukan untuk memuat halaman Anda, dan juga menurunkan ukuran halaman tersebut. Ini menghasilkan penurunan beban server, dan persyaratan bandwidth yang lebih rendah.

Fitur unik lain dari JCH Optimize adalah Sprite Generator-nya. Ini menggabungkan gambar latar belakang menjadi 'sprite', sehingga dibutuhkan lebih sedikit permintaan HTTP untuk memuatnya ke browser. Namun, salah satu kelemahan dari plugin ini adalah kurva belajar yang curam. Sebagian besar pengguna perlu mengandalkan dokumentasi dukungan untuk memastikan bahwa mereka telah mengonfigurasi plugin dengan benar, untuk menghindari kesalahan.

Karena itu, plugin ini memiliki banyak ulasan bintang lima dan lebih dari 10.000 pemasangan aktif. Dari segi harga, ada versi gratis dari plugin yang tersedia. Namun, jika Anda ingin akses ke dukungan dan fitur lanjutan seperti Optimize Image API, Anda harus membeli langganan. Harga mulai dari $29 untuk enam bulan dukungan dan akses API.

4. Paket Penambah Kecepatan

Paket Penguat Kecepatan menawarkan pengoptimalan CSS dan JavaScript, pemuatan lambat, dan fitur penghapusan kekacauan. Pengembang di Optimocha selalu memperbarui plugin dengan basis kode yang terus berkembang, sehingga Anda tahu bahwa Anda akan selalu menggunakan metode terbaru. Ada juga fitur pengoptimalan WooCommerce bawaan yang berfungsi untuk mengatasi kemacetan.

Salah satu keuntungan menggunakan Speed ​​Booster Pack adalah memiliki fitur integrasi Content Delivery Network (CDN). Ini membuatnya mudah untuk menggunakan CDN pilihan Anda di WordPress, sekaligus mengoptimalkan dengan plugin. Kelemahan dari plugin ini terletak pada proses coba-coba yang mungkin perlu Anda ikuti agar dapat dikonfigurasi dengan benar.

Perlu juga dicatat bahwa ada opsi layanan untuk mengikuti plugin gratis. Sama seperti Autoptimize, pengembang menawarkan beberapa opsi untuk memberikan pendekatan profesional langsung untuk mengonfigurasi plugin agar sesuai dengan situs web unik Anda.

Tingkatkan Kecepatan Situs Anda Dengan WP Engine

Apa pun pendekatan Anda untuk meningkatkan kecepatan situs, kami siap membantu. Kami memiliki Alat Kecepatan untuk menguji situs web Anda, dan sumber daya pengembang terbaik untuk membantu Anda menuju pengalaman yang dioptimalkan.
Faktanya, Platform Pengalaman Digital (DXP) kami adalah tempat yang tepat untuk mulai membangun situs web WordPress yang lebih baik. Lihat paket harga kami hari ini!