Cara Menghilangkan Render-Blocking Resources | Penggemar WP

Jika Anda mendengar keluhan tentang kecepatan memuat situs web Anda atau ingin memuat halaman web Anda lebih cepat dan meningkatkan pengalaman pengguna Anda, Anda mungkin ingin mempertimbangkan cara menghilangkan sumber daya yang memblokir perenderan.

Terlepas dari alasannya, seberapa cepat situs web muncul di depan pengunjung dapat memengaruhi pengalaman pengguna dan menyebabkan bisnis Anda kehilangan koneksi klien. Pengalaman situs web pengguna terutama bergantung pada jalur rendering penting dan mengelola skrip yang dimuat situs web Anda selama proses rendering.

Apa Itu Render?

Semua situs web mengikuti jalur bagi pengguna untuk melihat dan berinteraksi dengan kontennya. Jalur memuat situs web disebut jalur rendering kritis. Jalur ini menjelaskan langkah-langkah setiap situs untuk mengumpulkan dan membangun data untuk pengunjung dan browser mereka.

Apa yang Dilakukan Browser Sebelum Rendering

Memasukkan URL situs web memicu proses berikut:

1. Navigasi selesai ketika pengguna meminta URL tertentu.
   1. Pencarian DNS terjadi, di mana server menyediakan alamat IP
   2. Browser dan server situs web melakukan TCP Handshake untuk membuat koneksi
   3. Permintaan koneksi aman mendapatkan Negosiasi TLS atau pertukaran jabat tangan kedua
2. Browser menerima respons, dan mendapatkan kode situs web
   1. Paket data pertama diterima dalam TCP Slow Start untuk mengatur lalu lintas jaringan
   2. Pengguna mengirimkan ucapan terima kasih (ACK) ke server untuk menetapkan batasan koneksi dan kecepatan pengiriman.
3. Browser mem-parsing informasi dan mengubah data menjadi CSS Object Model (CSSOM) dan Document Object Model (DOM).
   1. Pohon DOM dibangun (struktur situs dan halaman)
   2. Pemindai pramuat mengumpulkan sumber daya eksternal, seperti skrip dan gambar.
   3. CSSOM dibangun (pohon gaya)
   4. JavaScript dikompilasi saat CSSOM dibuat
   5. Accessibility Object Model (AOM) dibuat untuk perangkat bantu untuk menginterpretasikan konten.
4. Rendering terjadi menggunakan pohon CSSOM dan DOM yang dibuat sebelumnya.

Apa yang Terjadi Saat Anda Merender Halaman?

Situs web dirender melalui desain kode untuk melengkapi tata letak, gaya, lukisan, dan terkadang pengomposisian di situs web. Model Objek CSS (CSSOM) dan Model Objek Dokumen (DOM)

Gaya

DOM dan CSSOM digabungkan menjadi pohon render, dan konstruksi dimulai. Pohon render mengatur node yang terlihat, konten, dan gaya yang dihitung untuk situs dan setiap node unik.

tata letak

Tata letak adalah langkah di mana arsitektur bertemu dengan konstruksi, dan struktur dibuat untuk halaman untuk menampilkan lebar, tinggi, dan lokasi semua node di pohon render. Setiap benda mendapatkan ukuran dan posisi yang ditentukan.

Situs web ditata dalam struktur kotak. Kotak-kotak ini dapat menyesuaikan dengan jumlah yang tidak terbatas dari ukuran viewport yang berbeda. Ketika struktur kotak berubah untuk ukuran, ini disebut reflow .

Paint: First Paint dan First Contentful Paint (FCP)

Saat browser situs web melakukan rendering halaman apa pun disebut "Cat Pertama." First Paint bisa menjadi warna latar belakang yang solid hanya tergantung pada kode halaman.

First Contentful Paint (FCP) mengacu pada momen terukur ketika pengunjung situs web dapat melihat konten di halaman Anda (teks, gambar, video, dll.). FCP mengukur dari awal pemuatan halaman Anda hingga konten apa pun dirender.

First Paint dan FCP tidak sama dengan halaman yang memuat cepat atau kinerja yang cepat, tetapi pengalaman pengguna menjadi jauh lebih positif ketika pengunjung situs melihat halaman yang dimuat dengan cepat. Menyesuaikan First Paints Anda, waktu buka, dan kinerja situs meningkatkan persepsi pengguna tentang waktu buka.

Pengomposisian

Halaman web menggunakan lapisan di mana objek tumpang tindih untuk mengatur struktur. Pengomposisian adalah tempat halaman menghitung urutan hal-hal untuk merendernya dengan benar.

Reflows memicu re-composite karena posisi objek sering berubah dalam reflow.

Apa Itu Render-Blocking Resources

Skrip, stylesheet, dan impor HTML yang memperlambat, menunda, atau memblokir browser agar tidak merender konten di situs web adalah sumber daya yang memblokir perenderan. Ketika orang merujuk ke sumber daya yang memblokir perenderan, mereka biasanya mengacu pada:

• CSS
• JavaScript di bagian <head>
• Font dimuat dari server atau jaringan pengiriman konten
• Impor HTML (laman lawas)

Ada banyak CSS dan JavaScript yang tidak memblokir render dan sangat penting untuk dimuat di dekat bagian atas. Prioritaskan lembar gaya untuk memastikan bahwa setiap pengunjung situs melihat konten yang dimaksud, bukan konten tanpa gaya atau tidak sama sekali.

Apa itu JavaScript dan CSS yang Memblokir Render?

Selama proses rendering, browser Anda memuat informasi situs web dengan terlebih dahulu menjalankan informasi di <head>, termasuk setiap skrip. Semua skrip harus dijalankan secara berurutan dan diproses sepenuhnya sebelum halaman terlihat di browser Anda.

Skrip dibangun ke dalam antrian, sehingga urutan skrip di <head> sangat penting selama pengembangan. Bergantung pada kodenya, ini dapat memperlambat atau mencegah situs web Anda memuat sepenuhnya, dan inilah yang kami sebut sebagai CSS dan JavaScript yang memblokir perenderan.

Skrip di situs WordPress Anda mungkin berasal dari tema, pekerjaan kustom, atau plugin yang ditambahkan untuk berbagai fungsi.

Apakah Sumber Daya Blok Render Gambar?

Jika Anda bertanya-tanya apakah gambar adalah sumber daya yang memblokir render, sebenarnya tidak. Ukuran gambar masih dapat menyebabkan masalah pemuatan pada halaman Anda, tetapi seharusnya tidak menghalangi rendering.

Mengapa Menghilangkan Sumber Daya Pemblokiran Render?

Skrip yang memblokir perenderan dapat memperlambat waktu pemuatan halaman dan merusak pengalaman situs web bagi pengunjung Anda. Persepsi situs web yang lambat dapat menyebabkan hilangnya pengunjung jika pengalaman situs web Anda buruk. Retensi pengunjung yang rendah dapat memengaruhi hasil mesin pencari Anda dan menurunkan daftar hasil Anda.

Peringkat Search Engine Optimization (SEO) yang lebih rendah berarti pengurangan pengunjung dan hilangnya potensi bisnis. Kehilangan peringkat mengurangi jumlah pengunjung Anda, dan situs yang buruk mengurangi retensi pengunjung Anda; sumber daya yang memblokir render bisa menjadi masalah besar.

Jika situs web Anda memiliki sasaran Skor Google PageSpeed ​​yang tinggi, memahami sumber daya yang memblokir perenderan adalah kunci untuk mencapai sasaran tersebut.

Cara Menghilangkan Sumber Daya yang Memblokir Render

Menjadi serius tentang peringkat SEO situs Anda dan pengalaman pengguna berarti situs Anda harus memiliki sumber daya pemblokiran render yang ditangani atau dihapus. Jika Anda tidak membangun situs dari awal, mulailah menguji situs web Anda untuk sumber daya yang memblokir perenderan.

Setelah Anda memiliki sumber daya yang memblokir perenderan tersebut, Anda akan memilih metode Anda untuk mengatasi masalah tersebut dan meningkatkan fungsionalitas situs Anda.

Uji Apakah Situs Web Anda Memiliki Sumber Daya Pemblokiran Render

Tidak ada salahnya untuk menjalankan penilaian di situs web Anda untuk menemukan sumber daya yang memblokir perenderan (coba Google PageSpeed ​​Insights). Jika Anda telah mengoptimalkan kemampuan terbaik Anda, mengikuti praktik terbaik dan masih mengalami masalah, atau tidak tahu harus mulai dari mana, evaluator halaman dapat menjadi panduan yang berguna.

Metode untuk Menghilangkan JavaScript dan CSS yang Memblokir Render

WordPress memungkinkan Anda untuk mengelola sumber daya apa pun yang menghalangi rendering situs Anda dengan beberapa cara berbeda. WordPress akan memungkinkan Anda untuk mengatur skrip dan tautan yang memblokir render dengan kode, tag, organisasi dan pengoptimalan file, dan plugin.

Pengembang profesional juga dapat membuat plugin atau tema khusus yang membangun proses ini ke dalam kode.

Hapus Javascript Pemblokiran Render dengan Kode

Tiga metode untuk mengatasi sumber daya yang memblokir render melalui kode adalah:

1. Pindahkan tag untuk <script> dan <link> ke bagian bawah kode HTML Anda
2. Tambahkan atribut asinkron atau tunda ke tag untuk skrip yang tidak penting.
3. Hapus kode JavaScript yang tidak digunakan.

WordPress memuat file jQuery Migrate untuk menyediakan kompatibilitas dengan versi lama jQuery yang digunakan oleh plugin dan tema. Anda dapat menggunakan sepotong kode atau plugin untuk menghentikan WordPress memuat file jQuery Migrate ini jika tidak ada apa pun di situs Anda yang memerlukannya untuk berfungsi.

Hilangkan Render-Blocking Stylesheets

Sifat dari stylesheet membuat mereka membuat sumber daya yang memblokir secara alami. Anda dapat mengatasi ini di situs Anda dengan cara berikut:

1. Pisahkan CSS menurut jenis media (seluler, tablet, desktop, dll.)
2. Optimalkan Jalur Rendering Kritis
3. Gabungkan file CSS

Menggunakan WordPress dan pembuat visual, Anda mungkin tidak mengontrol bagaimana halaman dibuat secara langsung, tetapi ada cara untuk mengatasi masalah apa pun.

Pemblokiran Render Alamat Menggunakan Plugin atau Ekstensi WordPress

Plugin dan ekstensi WordPress digunakan dalam mengatur skrip pada halaman. Plugin akan melalui tag <script> dan <link> halaman Anda dan menerapkan atribut defer atau async berdasarkan pedoman tertentu.

Kami telah melalui dan menguji berbagai plugin untuk WordPress dan terus membagikan hal-hal bermanfaat seperti plugin favorit kami untuk pengoptimalan kecepatan di blog.

Mintalah Profesional WordPress Menghilangkan Sumber Daya Pemblokiran Render untuk Anda

Beberapa plugin memerlukan penyesuaian dan, meskipun tampak langsung, dapat berakhir tidak berfungsi jika diatur dengan tidak benar. Tidak perlu malu untuk meminta bantuan profesional WordPress dan WP Buffs memiliki beberapa spesialis yang dapat mengoptimalkan situs Anda.

Praktik Terbaik untuk Mengoptimalkan Rendering

1. Bundel sumber daya yang memblokir perenderan Anda untuk mengurangi dampaknya pada pemuatan halaman.
2. Kurangi ukuran sumber daya, sehingga jumlah byte yang akan dimuat diturunkan.
3. Tunda pengunduhan sumber daya yang tidak memblokir perenderan.
4. Jangan tambahkan CSS dengan aturan @import karena ini adalah beban eksternal.
5. Gunakan plugin WordPress yang dirancang untuk menyimpan skrip Anda dan mengoptimalkan JavaScript dan CSS Anda.
6. Muat font khusus secara lokal.
7. Identifikasi CSS dan JavaScript Kritis dan Non-Kritis.
8. Tandai kode pemblokiran render yang tidak kritis dengan atribut async atau defer.
9. Kode yang tidak digunakan harus dihapus.

Hilangkan Sakit Kepala dan Biarkan Bantuan Profesional WordPress

WP Buffs ahli dalam mengoptimalkan situs WordPress dan meningkatkan kinerja halaman. Kami memahami mengapa kinerja penting bagi bisnis Anda dan area apa yang menjadi fokus untuk membuat dampak paling signifikan.

Meningkatkan kinerja situs web Anda dan pengalaman pengunjung bisa lebih dari sekadar sumber daya yang memblokir perenderan. WP Buffs dapat melihat situs dan alamat Anda:

• Ukuran gambar
• Kualitas gambar dan format pengiriman
• Panjang halaman dan persentase konten dinamis
• Tema yang dibangun dengan buruk
• Skrip yang tidak perlu yang menyebabkan penundaan
• Plugin yang dibangun dengan buruk
• Skrip eksternal yang tidak digunakan
• Perangkat lunak usang
• Paket hosting web terbatas tidak dapat cukup mendukung kebutuhan situs

WordPress bisa menjadi platform yang cukup mudah untuk membangun situs web, tetapi memaksimalkan pengalaman pengguna dapat membutuhkan profesional terlatih atau sering kali penyedia layanan yang hebat.

Pertanyaan yang Sering Diajukan