Cara Menghilangkan Render-Blocking Resources

Resource pemblokiran render adalah bagian penting dalam mengoptimalkan infrastruktur halaman web Anda.

Menguranginya dapat membantu membuat halaman Anda dimuat lebih cepat dan secara signifikan meningkatkan Data Web Inti halaman Anda.

Sumber daya pemblokiran render ini mencakup hal-hal seperti font eksternal yang terlalu lama dimuat (yang tidak perlu digunakan), file media yang tidak perlu, penggembungan kode yang tidak akan hilang begitu saja, dan plugin tambahan yang tidak diperlukan.

Ada banyak sekali jenis sumber daya ini yang dapat Anda kompres dan gabungkan untuk membuat satu file yang mengunduh lebih cepat di perangkat Anda, menciptakan kecepatan halaman yang jauh lebih cepat.

Dengan mengoptimalkan struktur halaman Anda dalam hal ini, Anda dapat mengurangi jumlah pekerjaan yang harus dilakukan Google untuk merayapi situs Anda, dan sebagai hasilnya, Anda dapat meningkatkan pengalaman pengguna.

Faktanya, manfaat penuh dari melakukan proses ini meliputi:

• Kecepatan halaman lebih cepat.
• Lebih sedikit sumber daya yang diperlukan oleh Google untuk memuat halaman Anda.
• Pengurangan masalah yang disebabkan oleh pembengkakan kode.
• Ukuran file DOM Anda secara keseluruhan lebih kecil (model objek dokumen).
• Lebih sedikit file JavaScript dan CSS untuk diunduh.
• Penyebaran yang lebih baik dan lebih cepat di berbagai platform dan perangkat.
• Peningkatan interaksi pengguna di ponsel.
• Peningkatan kinerja secara keseluruhan.

Jelas, ada manfaat luar biasa untuk melakukan jenis proses pengoptimalan ini di situs Anda.

Mengapa Anda Harus Mengidentifikasi Sumber Daya Pemblokiran Render?

Mengidentifikasi dan mengurangi sumber daya yang bertanggung jawab memblokir rendering halaman web Anda adalah titik pengoptimalan penting yang dapat membuat atau menghancurkan kecepatan halaman Anda.

Ini bisa menjadi sangat penting sehingga dapat membayar dividen ke metrik pengalaman halaman situs Anda (dan kepuasan pengguna Anda) sebagai hasilnya.

Pada tahun 2021, waktu rata-rata yang diperlukan untuk merender halaman seluler sepenuhnya adalah 22 detik. Pada 2018, itu adalah 15 detik.

Jelas, ini adalah angka yang jauh lebih tinggi daripada waktu yang direkomendasikan Google yaitu dua hingga tiga detik. Ini juga jauh lebih tinggi dari sebelumnya.

Apa yang dapat menyebabkan masalah ini dengan resource pemblokiran render?

Apa yang mendorong peningkatan kecepatan render halaman secara keseluruhan ini?

Salah satu tren yang menarik untuk diperhatikan adalah bahwa semakin banyak ketergantungan pada font pihak ketiga dibandingkan dengan font sistem. Menggunakan font pihak ketiga sebagai sumber daya cenderung mengganggu pemrosesan dan perenderan halaman.

Dengan font sistem, browser tidak perlu memuat tambahan apa pun, sehingga tidak ada langkah pemrosesan tambahan sebagai hasilnya.

Cuplikan layar dari Web Almanak, November 2022

Ketergantungan lintas industri ini kemungkinan akan berdampak pada waktu rendering ini. Tentu saja, ini bukan satu-satunya penyebab masalah dengan sumber daya pemblokiran render ini.

Selain itu, layanan Google sendiri cenderung berdampak signifikan pada waktu rendering, seperti Google Analytics atau penggunaan piksel Facebook pihak ketiga untuk tujuan pelacakan.

Keinginan untuk mengandalkan teknologi semacam itu belum tentu buruk dari perspektif pemasaran.

Namun dari perspektif sumber daya yang memblokir perenderan, ini dapat menyebabkan peningkatan waktu muat halaman yang signifikan dan cara Google (dan pengguna) melihat halaman Anda.

Solusi yang ideal adalah memastikan halaman Anda dimuat untuk interaksi pengguna secepat mungkin.

Ada juga kemungkinan bahwa praktik pengembangan web yang buruk yang digunakan oleh pengembang web saat ini adalah penyebabnya.

Apa pun itu, ini adalah sesuatu di setiap proyek situs web yang harus ditangani sebagai bagian dari audit Data Web Inti Anda.

Pengalaman halaman, bagaimanapun, bukan hanya tentang seberapa cepat seluruh halaman dimuat.

Sebaliknya, ini lebih tentang keseluruhan pengalaman halaman yang diukur dengan framework pengalaman halaman Google atau Core Web Vitals.

Inilah mengapa Anda ingin berupaya meningkatkan dan mengoptimalkan kecepatan halaman Anda untuk jalur rendering penting di seluruh DOM atau model objek dokumen.

Apa Itu Jalur Rendering Kritis?

Jalur rendering penting mengacu pada semua langkah yang diperlukan untuk merender seluruh halaman, mulai dari saat browser pertama kali mulai menerima data hingga akhirnya mengompilasi halaman pada render akhir.

Ini adalah proses yang hanya memakan waktu beberapa milidetik jika Anda mengoptimalkannya dengan benar.

Mengoptimalkan jalur rendering penting berarti memastikan bahwa Anda mengoptimalkan kinerja rendering di berbagai perangkat.

Ini dilakukan dengan mengoptimalkan jalur rendering penting untuk mendapatkan cat pertama Anda secepat mungkin.

Pada dasarnya, Anda mengurangi jumlah waktu yang dihabiskan pengguna untuk melihat layar putih kosong untuk menampilkan konten visual ASAP (lihat 0,0 detik di bawah).

Tangkapan layar dari web.dev, November 2022

Ada keseluruhan proses tentang bagaimana melakukan ini, diuraikan dalam dokumentasi panduan pengembang Google, tetapi saya akan berfokus pada satu pukulan berat khususnya: mengurangi sumber daya pemblokiran render.

Bagaimana Cara Kerja Jalur Rendering Kritis?

Jalur rendering kritis mengacu pada serangkaian langkah yang diambil browser dalam perjalanannya merender halaman dengan mengonversi HTML, CSS, dan JavaScript ke piksel sebenarnya di layar.

Tangkapan layar dari Medium, November 2022

Pada dasarnya, browser perlu meminta, menerima, dan mem-parsing semua file HTML dan CSS (ditambah beberapa pekerjaan tambahan) sebelum mulai merender konten visual apa pun.

Proses ini terjadi dalam sepersekian detik (dalam banyak kasus). Pengguna akan melihat halaman putih kosong hingga browser menyelesaikan langkah-langkah ini.

Berikut ini adalah contoh bagaimana pengguna mungkin mengalami bagaimana halaman memuat sesuai dengan tahapan proses pemuatan halaman yang berbeda:

Tangkapan layar dari web.dev, November 2022

Dengan demikian, meningkatkan jalur rendering penting dapat meningkatkan pengalaman halaman secara keseluruhan, yang dapat membantu meningkatkan performa pada metrik Data Web Inti.

Bagaimana Saya Mengoptimalkan Jalur Rendering Kritis?

Untuk meningkatkan jalur rendering penting, Anda harus menganalisis resource yang memblokir render.

Sumber daya apa pun yang memblokir perenderan dapat berakhir dengan memblokir perenderan awal halaman dan akibatnya berdampak negatif pada skor Data Web Inti Anda.

Ini melibatkan proses pengoptimalan dari:

• Mengurangi jumlah sumber daya yang sangat penting untuk jalur rendering. Ini dapat dilakukan dengan menggunakan metode defer untuk sumber daya pemblokiran render yang memungkinkan.
• Memprioritaskan konten paruh atas, dan mengunduh aset media penting sedini mungkin.
• Kompres ukuran file dari sumber daya penting yang tersisa.

Dengan melakukan ini, Anda dapat meningkatkan Core Web Vitals dan cara halaman Anda dirender secara fisik kepada pengguna.

Sebelum membahas teknik pengoptimalan yang dapat Anda gunakan untuk mengoptimalkan jalur rendering penting, penting untuk membahas proses awal pemuatan browser dan mengapa jalur rendering penting sangat penting.

Dan proses ini melibatkan:

• Pramuat elemen halaman.
• Menyisipkan gaya kritis.
• Menunda pemuatan file JavaScript.
• Petunjuk awal.

Pramuat Elemen Laman

Pertama, saat halaman diambil oleh browser dari server, browser akan memindai terlebih dahulu dan menemukan semua elemen halaman untuk diunduh. Secara default, ini terjadi dalam proses di mana browser mengunduh semua elemen secara bersamaan.

Tetapi apa yang terjadi ketika Anda memiliki banyak elemen halaman untuk diunduh (seperti yang sering terjadi dengan situs web WordPress?) Nah, ini dapat menghambat sumber daya server, yang selanjutnya meningkatkan waktu pemuatan halaman.

Bagaimana Anda menyiasatinya? Dengan menggunakan tautan pramuat untuk mengunduh file penting secara asinkron yang memblokir perenderan laman (dibahas nanti dalam artikel ini).

Preloading elemen adalah teknik yang membantu menghilangkan style sheet pemblokiran render karena memuat file penting yang diperlukan untuk tahap pengecatan pertama dari proses sebelum memuat semua file lainnya.

Anda dapat melakukan pramuat CSS, JS, Font, atau Gambar. Berikut ini contoh cara memuatnya terlebih dahulu:

Pramuat JavaScript

 <tautan rel="preload" as="script" href="critical.js">

Pramuat CSS

 <tautan rel="preload" href="style.css" as="style" />

Pramuat Font

 <link rel="preload" href="fonts/webfont.woff2" as="font" type="font/woff2" crossorigin />

Pramuat Gambar

 <tautan rel=preload href="cat.png" as=gambar gambar>

Ini membantu mempercepat proses halaman. Namun, ini bukanlah metode yang ideal.

Metode yang ideal adalah mengoptimalkan situs untuk hanya menggunakan dua hingga tiga plugin, mungkin dua hingga tiga file lainnya, dan menjaga semuanya seminimal mungkin untuk rendering halaman penuh.

Sayangnya, ini bukanlah usaha yang realistis untuk dikejar.

Karena situs WordPress cenderung memiliki banyak plugin dan sumber daya yang tidak ingin (atau ingin) ditangani oleh pengembang, jalan termudah untuk sukses adalah bekerja untuk memastikan bahwa sumber daya ini dioptimalkan dengan benar menggunakan plugin tertentu.

Menyisipkan Gaya Kritis

CSS kritis adalah teknik yang mengekstraksi CSS untuk konten paro atas untuk merender konten ke pengguna secepat mungkin.

Minimal, ini biasanya membutuhkan:

• Deklarasi font apa pun.
• CSS khusus tata letak apa pun.
• Semua aturan gaya CSS untuk elemen DOM (model objek dokumen) paro atas.

Dengan menggunakan contoh halaman kami sebelumnya yang memuat semua sumber daya secara bersamaan, gaya kritis penyisipan melibatkan penggunaan kode dalam tag HTML <head> itu sendiri.

Jika Anda memeriksa, misalnya, kode sumber google.com, Anda akan melihatnya menyisipkan CSS penting ke dalam bagian <head> HTML.

Cuplikan layar dari kode sumber Google.com, November 2022

Ada beberapa alat yang dapat membantu mengekstrak CSS kritis.

• Criticalcss.com.
• Kritis.
• Plugin Webpack Kritis HTML.

Menunda Pemuatan File JavaScript

Dengan menggunakan metode ini, dimungkinkan untuk menunda pemuatan file JavaScript hingga elemen penting lainnya dari pohon DOM dimuat. Namun, ini datang dengan beberapa peringatan.

Contoh cara menunda file JavaScript:

 <script defer src="script.js"></script>

Nomor satu adalah bahwa Anda dapat berdampak negatif pada tampilan situs saat menunda pemuatan file JavaScript karena beberapa di antaranya mungkin merupakan elemen yang diperlukan agar halaman dimuat sepenuhnya.

Nomor dua adalah, jika Anda tidak berhati-hati, dengan menunda pemuatan file JavaScript, Anda berpotensi menimbulkan masalah dengan interaktivitas halaman (interaksi ke metrik Core Web Vitals berikutnya).

Nomor tiga adalah Anda juga dapat memperkenalkan masalah dengan cara kerja situs secara keseluruhan.

Idenya adalah Anda harus berhati-hati saat mengerjakan jenis pengoptimalan ini, sehingga Anda tidak secara tidak sengaja menyebabkan masalah di tempat lain dalam proses tersebut.

Dengan melakukannya, Anda dapat sangat memengaruhi kecepatan halaman dan cara Google melihat situs Anda.

Namun, kekhawatiran lainnya adalah saat Anda menggunakan plugin seperti Nitro untuk menunda file penting seperti CSS dan JavaScript.

Meskipun hal ini dapat berdampak positif pada kecepatan halaman, masalah utamanya adalah bahwa plugin menangguhkan semua file KRITIS hingga setelah halaman memuat bagian HTML dari dokumen.

Apa artinya ini? Ini berarti bahwa Google tidak dapat melihat keseluruhan dokumen seperti yang dimaksudkan untuk ditampilkan. Ini mirip dengan memblokir file CSS dan file JavaScript Anda menggunakan robots.txt, yang diperlukan Google untuk menentukan apakah situs Anda mobile-friendly.

Halaman Pengembang Google resmi mengatakan ini, sebagaimana disebutkan di tempat lain:

“Untuk perenderan dan pengindeksan yang optimal, selalu izinkan Googlebot mengakses file JavaScript, CSS, dan gambar yang digunakan oleh situs web Anda sehingga Googlebot dapat melihat situs Anda seperti pengguna biasa.

Jika file robots.txt situs Anda melarang perayapan aset ini, hal itu secara langsung akan merusak seberapa baik algoritme kami merender dan mengindeks konten Anda. Ini dapat menghasilkan peringkat yang kurang optimal.”

Jika Anda menunda file CSS dan JavaScript penting karena alasan SEO, selama Anda memastikan bahwa Google dapat melihat file ini saat memuat halaman, Anda tidak akan mengalami masalah besar terkait cara Google melihat situs Anda.

Menggunakan Petunjuk Awal Untuk Optimasi Server Lebih Baik

Sebelum kita dapat berbicara tentang petunjuk awal, kita perlu membahas proses bagaimana server memuat halaman web. Situs memang menjadi lebih canggih dalam beberapa tahun terakhir.

Dan dengan demikian, begitu juga server. Tapi, ada batasannya. Meskipun server dapat dan memang melakukan tugas-tugas sepele sepanjang hari, masih mungkin bagi server untuk macet karena terlalu memikirkan cara menangani sumber daya situs.

Jadi, ketika ini terjadi, latensi tambahan yang akan dialami terjadi – dan ini terjadi sebelum browser dapat mulai merender halaman.

Saat latensi ini terjadi, Anda dapat mengalami situasi di mana situs dapat memerlukan waktu beberapa detik sebelum muncul di jendela browser.

Dan memastikan server Anda merender file dengan benar adalah langkah pertama yang sangat baik untuk meningkatkan kecepatan halaman Anda.

Berikut adalah contoh yang terjadi jika server Anda tidak merespons dengan benar dan membutuhkan waktu terlalu lama untuk memproses sumber daya tertentu:

Tangkapan layar dari developer.chrome.com, November 2022

Jadi, bagaimana cara kerja petunjuk awal?

Menurut panduan Pengembang Google Chrome, "petunjuk awal adalah kode status HTTP (103 Petunjuk Awal) yang digunakan untuk mengirimkan tanggapan HTTP awal yang akurat sebelum tanggapan akhir."

Apa yang dicapai ini?

Ini memungkinkan server memberikan jenis petunjuk tertentu ke browser untuk sumber daya penting tertentu (file JavaScript, lembar gaya CSS, dan lainnya) yang kemungkinan akan dimuat dan digunakan oleh halaman web itu sendiri.

Proses ini terjadi dalam rentang beberapa milidetik atau kurang saat server bekerja merender sumber daya halaman utama.

Petunjuk Awal adalah sesuatu yang "membantu browser" dan mempercepat waktu berpikir server dengan mengerjakan pemuatan ini sebelumnya.

Karena itu, proses ini membantu mempercepat waktu pemuatan halaman sebagai hasilnya.

Alat Untuk Membantu Anda Mengoptimalkan Jalur Rendering Penting

Apakah Anda bukan ahli kode yang luar biasa, dan Anda tidak dapat bekerja dengan dan mengoptimalkan kode, plugin, dan hal-hal lain di balik tudung situs web Anda?

Nah, jangan pernah takut (terlalu banyak!). Ada plugin WordPress yang tersedia yang dapat membantu Anda melakukan hal itu.

Berikut ini mencakup daftar alat yang dapat Anda gunakan untuk membantu mengoptimalkan jalur rendering penting Anda sendiri agar berhasil:

• Plugin CSS Kritis : Alat praktis ini memungkinkan Anda menghasilkan CSS penting yang dibutuhkan situs Anda. Cukup tambahkan URL Anda, klik hasilkan, dan selesai.
• Plugin Autoptimize Page Speed: Plugin khusus ini adalah plugin kecepatan halaman lain yang juga memungkinkan Anda untuk menunda file penting. Selain itu, ini membantu menyuntikkan CSS sebaris ke kepala halaman, mengalihkan skrip ke footer, dan mengecilkan file HTML Anda.
• Plugin Kecepatan Halaman WP Rocket: Plugin kecepatan halaman ini adalah salah satu plugin caching yang paling kuat. Setelah penginstalan, plugin khusus ini memungkinkan Anda memanfaatkan caching halaman, kompresi GZIP, pramuat cache, dan caching browser.
• WP-Optimize: Ini adalah plugin WordPress yang memungkinkan Anda melakukan beberapa hal untuk membantu mengoptimalkan situs Anda dengan lebih baik untuk waktu muat yang cepat. Itu termasuk mengoptimalkan database Anda, mengompresi gambar Anda, dan menyimpan halaman Anda, bersama dengan memperkecil dan menyinkronkan file CSS dan JavaScript Anda.

Harap diperhatikan: Penulis ini tidak memiliki bias finansial dengan salah satu alat ini.

Mengapa Saya Harus Peduli?

Data perilaku pengguna Google melaporkan bahwa sebagian besar pengguna meninggalkan situs yang lambat setelah sekitar tiga detik.

Selain studi yang menunjukkan bahwa mengurangi waktu muat halaman dan meningkatkan pengalaman halaman menghasilkan kepuasan pengguna yang lebih besar, ada juga beberapa pembaruan Google utama di cakrawala yang ingin Anda persiapkan.

Mengidentifikasi dan mengoptimalkan sumber daya yang memblokir perenderan akan sangat penting untuk tetap berada di puncak permainan saat pembaruan ini diterapkan.

Google akan menerapkan pengalaman halaman di desktop pada tahun 2022, memulai peluncuran pengalaman halaman desktop pada bulan Februari dan selesai pada bulan Maret.

Menurut Google, tiga metrik Data Web Inti (LCP, FID, dan CLS) yang sama, beserta ambang terkaitnya, kini akan ditautkan ke peringkat desktop.

Selain itu, Google sedang mengerjakan metrik Data Web Inti baru yang mungkin bersifat eksperimental, dengan mempertimbangkan durasi acara maksimum dan total durasi acara.

Penjelasan mereka tentang faktor-faktor yang mereka pertimbangkan ini adalah:

Durasi peristiwa maksimum: latensi interaksi sama dengan durasi peristiwa tunggal terbesar dari peristiwa apa pun dalam grup interaksi.
Total durasi peristiwa: latensi interaksi adalah jumlah dari semua durasi peristiwa, dengan mengabaikan tumpang-tindih apa pun.

Dengan banyak penelitian yang menghubungkan pengurangan waktu muat halaman dengan peningkatan KPI yang berharga (konversi, rasio pentalan, waktu di situs), meningkatkan latensi situs telah menjadi sasaran bisnis utama bagi banyak organisasi.

Profesional SEO diposisikan secara unik untuk memandu upaya ini, karena peran kami sering menjembatani kesenjangan antara tujuan bisnis dan prioritas pengembang web.

Memiliki kemampuan untuk mengaudit situs, menganalisis hasil, dan mengidentifikasi area untuk peningkatan membantu kami bekerja sama dengan pengembang untuk meningkatkan kinerja dan menerjemahkan hasilnya ke pemangku kepentingan utama.

Tujuan Mengoptimalkan Render-Blocking Resources

Salah satu tujuan utama pengoptimalan jalur rendering penting adalah untuk memastikan bahwa sumber daya yang diperlukan untuk merender konten paro atas yang penting dimuat secepat mungkin.

Semua resource yang memblokir render harus diturunkan prioritasnya, dan resource apa pun yang mencegah halaman merender dengan cepat.

Setiap poin pengoptimalan akan berkontribusi pada peningkatan keseluruhan kecepatan halaman, pengalaman halaman, dan skor Data Web Inti Anda.

Mengapa Meningkatkan Render-Blocking CSS?

Google telah mengatakan berkali-kali bahwa pengkodean tidak selalu penting untuk peringkat.

Namun, dengan cara yang sama, mendapatkan manfaat peringkat dari peningkatan pengoptimalan kecepatan halaman berpotensi membantu, bergantung pada kueri.

Ketika datang ke file CSS, mereka dianggap sebagai sumber daya pemblokiran render.

Kenapa ini?

Meskipun terjadi dalam milidetik atau kurang (dalam banyak kasus), browser tidak akan mulai merender konten halaman apa pun hingga dapat meminta, menerima, dan menangani semua gaya CSS.

Jika browser merender konten yang tidak ditata dengan benar, yang akan Anda dapatkan hanyalah sekumpulan teks biasa dan tautan yang bahkan tidak ditata.

Ini berarti halaman Anda pada dasarnya akan "telanjang", karena tidak ada istilah yang lebih baik.

Menghapus gaya CSS akan menghasilkan halaman yang benar-benar tidak dapat digunakan.

Sebagian besar konten perlu dicat ulang agar terlihat paling tidak enak bagi pengguna.

Jika kita memeriksa proses perenderan halaman, kotak abu-abu di bawah menunjukkan waktu browser yang diperlukan untuk mendapatkan semua sumber daya CSS. Dengan cara ini, dapat mulai membangun DOM CSS (atau pohon CCSOM).

Ini bisa berlangsung dari satu milidetik hingga beberapa detik, tergantung pada apa yang perlu dilakukan server Anda untuk memuat sumber daya ini.

Itu juga bisa bervariasi, yang bisa bergantung pada ukuran, bersama dengan jumlah, dari file CSS ini.

Pohon render berikut menunjukkan contoh browser yang merender semua file beserta CSS di dalam DOM:

Tangkapan layar dari Medium, November 2022

Selain itu, berikut ini menunjukkan contoh urutan rendering halaman, di mana semua file dimuat dalam suatu proses, mulai dari konstruksi DOM hingga pengecatan akhir dan pengomposisian halaman, yang dikenal sebagai jalur rendering kritis .

Karena CSS adalah sumber daya pemblokir perenderan secara default, masuk akal untuk meningkatkan CSS ke titik yang tidak berdampak negatif pada proses perenderan halaman.

Rekomendasi resmi Google menyatakan sebagai berikut:

“CSS adalah sumber pemblokiran render. Sampaikan ke klien secepat dan secepat mungkin untuk mengoptimalkan waktu render pertama.”

HTML harus diubah menjadi sesuatu yang dapat digunakan oleh browser: DOM. File CSS dengan cara yang sama. Ini harus diubah menjadi CSSOM.

Dengan mengoptimalkan file CSS dalam DOM dan CSSOM, Anda dapat membantu mengurangi waktu yang diperlukan browser untuk merender semuanya, yang sangat berkontribusi pada peningkatan pengalaman halaman.

Mengapa Meningkatkan Render-Blocking JavaScript?

Tahukah Anda bahwa memuat JavaScript tidak selalu diperlukan?

Dengan JavaScript, mengunduh dan mem-parsing semua sumber daya JavaScript bukanlah langkah yang diperlukan untuk merender laman sepenuhnya.

Jadi, ini sebenarnya bukan bagian yang diperlukan secara teknis dari perenderan halaman.

Tetapi peringatan untuk ini adalah: Sebagian besar situs modern dikodekan sedemikian rupa sehingga JavaScript (misalnya, kerangka kerja Bootstrap JS) diperlukan untuk merender pengalaman paro atas.

Namun jika browser menemukan file JavaScript sebelum perenderan pertama halaman, proses perenderan dapat dihentikan hingga nanti dan setelah file JavaScript dieksekusi sepenuhnya.

Ini dapat ditentukan sebaliknya dengan menunda file JavaScript untuk digunakan nanti.

Salah satu contohnya adalah jika ada fungsi JS seperti peringatan yang dibangun ke dalam HTML. Ini dapat menghentikan perenderan halaman hingga setelah eksekusi kode JavaScript ini.

JavaScript memiliki satu-satunya kekuatan untuk mengubah gaya HTML dan CSS, jadi ini masuk akal.

Parsing dan eksekusi JavaScript dapat tertunda karena fakta bahwa JavaScript berpotensi mengubah seluruh konten halaman. Penundaan ini dibangun ke dalam browser secara default – hanya untuk skenario “berjaga-jaga” seperti itu.

Rekomendasi resmi Google:

“JavaScript juga dapat memblokir konstruksi DOM dan menunda saat halaman dirender. Untuk memberikan performa yang optimal… hilangkan semua JavaScript yang tidak perlu dari jalur rendering penting.”

Cara Mengidentifikasi Sumber Daya Pemblokiran Render

Untuk mengidentifikasi jalur rendering penting dan menganalisis sumber daya penting:

• Jalankan pengujian menggunakan webpagetest.org dan klik gambar "air terjun".
• Fokus pada semua sumber daya yang diminta dan diunduh sebelum garis hijau "Mulai Render".

Analisis tampilan air terjun Anda; cari file CSS atau JavaScript yang diminta sebelum baris hijau "mulai render" tetapi tidak penting untuk memuat konten paro atas.

Cuplikan layar dari WebPageTest, November 2022

Setelah mengidentifikasi (kemungkinan) sumber daya yang memblokir perenderan, uji penghapusannya untuk melihat apakah konten paruh atas terpengaruh.

Dalam contoh saya, saya melihat beberapa permintaan JavaScript yang mungkin kritis.

Meskipun sangat penting, terkadang ada baiknya mencoba menghapus skrip ini untuk menguji bagaimana pergeseran elemen di situs memengaruhi pengalaman.

Cuplikan layar dari WebPageTest, November 2022

Ada juga cara lain untuk meningkatkan sumber daya tersebut.

Untuk file JavaScript yang tidak penting, Anda mungkin ingin menggabungkan file dan menundanya dengan menyertakan file ini di bagian bawah halaman Anda.

Untuk file CSS yang tidak penting, Anda juga dapat mengurangi berapa banyak file CSS yang Anda miliki dengan menggabungkannya menjadi satu file dan mengompresnya.

Meningkatkan teknik pengkodean Anda juga dapat menghasilkan file yang diunduh lebih cepat dan berdampak lebih kecil pada kecepatan perenderan laman Anda.

Cara Mengurangi Elemen Pemblokiran Render Pada Halaman

Setelah Anda menentukan bahwa sumber daya pemblokiran perenderan tidak penting untuk merender konten paro atas, Anda perlu menjelajahi berbagai metode yang tersedia untuk meningkatkan perenderan laman Anda dan menangguhkan sumber daya yang tidak penting.

Ada banyak solusi untuk masalah ini, mulai dari menunda file JavaScript dan CSS hingga mengurangi dampak yang dapat diberikan CSS.

Salah satu solusi yang mungkin adalah tidak menambahkan CSS menggunakan aturan @import.

Pastikan Untuk Tidak Menambahkan CSS Menggunakan Aturan @Import

Dari perspektif kinerja, meskipun @import tampaknya menjaga file HTML Anda tetap bersih, sebenarnya dapat menimbulkan masalah dengan kinerja.

Deklarasi @import sebenarnya akan menyebabkan browser memproses file CSS lebih lambat. Mengapa? Karena itu juga mengunduh semua file yang diimpor.

Rendering akan sepenuhnya diblokir hingga proses selesai.

Memang, solusi terbaik adalah menggunakan metode standar untuk menyertakan lembar gaya CSS menggunakan deklarasi <link rel="stylesheet"> di HTML.

Perkecil File CSS dan JavaScript Anda

Jika Anda menggunakan WordPress, menggunakan plugin untuk memperkecil file CSS dan JavaScript dapat memberikan dampak yang luar biasa.

Proses minifikasi mengambil semua ruang yang tidak perlu di dalam file dan mengompresnya lebih jauh, sehingga Anda bisa mendapatkan peningkatan kinerja yang bagus.

Juga, bahkan jika Anda tidak menggunakan WordPress, Anda dapat menggunakan layanan dari pengembang yang berkualifikasi untuk menyelesaikan proses secara manual.

Ini akan memakan waktu lebih lama tetapi bisa sangat bermanfaat.

File yang diperkecil biasanya jauh lebih ringan daripada file sebelumnya, yang berarti rendering awal akan selesai lebih cepat.

Selain itu, setelah proses minifikasi, Anda juga dapat mengharapkan proses pengunduhan menjadi lebih cepat karena lebih sedikit waktu yang diperlukan untuk mengunduh sumber daya pemblokiran non-render.

Gunakan Font Sistem Daripada Font Pihak Ketiga

Meskipun font pihak ketiga mungkin tampak membuat situs “lebih cantik”, sebenarnya tidak demikian.

Meskipun mungkin terlihat luar biasa di permukaan, file font pihak ketiga ini sering kali membutuhkan waktu lebih lama untuk dimuat dan dapat menyebabkan masalah sumber daya pemblokiran render.

Karena file eksternal, browser harus membuat permintaan eksternal untuk mendownload file ini untuk merender halaman Anda, yang dapat mengakibatkan waktu download yang jauh lebih tinggi.

Jika Anda berada di tim yang memiliki praktik terbaik pengembangan yang kurang ideal, maka dapat dipastikan bahwa Anda memiliki banyak file font pihak ketiga yang tidak diperlukan untuk merender situs Anda.

Dalam hal ini, menghapus semua file yang tidak diperlukan ini dapat meningkatkan sumber daya pemblokiran render Anda secara signifikan dan berkontribusi pada peningkatan Anda secara keseluruhan di Data Web Inti.

Menggunakan font sistem, di sisi lain, hanya menyimpan pemrosesan di dalam browser tanpa permintaan eksternal.

Selain itu, ada kemungkinan font sistem yang sangat mirip dengan font pihak ketiga yang Anda gunakan.

Namun, jika Anda benar-benar harus menggunakan font pihak ketiga, ada dua hal yang ingin Anda lakukan untuk membantu mengurangi masalah dengan aspek tertentu dari font pihak ketiga.

Pertama, jika digunakan bersamaan dengan preload dan font-swap, masalah dengan font pihak ketiga menjadi bukan masalah.

Masalah lain saat menggunakan font pihak ketiga adalah font tidak terlihat hingga font itu sendiri dimuat, yang berdampak negatif pada Data Web Inti dan pengalaman pengguna. Untuk menghindarinya, Anda dapat menggunakan font-swap CSS.

Begini cara kerjanya: CSS font-swap menjelaskan kepada browser bahwa teks yang menggunakan font tertentu harus segera ditampilkan menggunakan font sistem. Setelah font kustom siap, font kustom ini kemudian akan menggantikan font sistem. Ini adalah metode paling efektif yang dapat Anda gunakan untuk menghindari font yang tidak terlihat selama pemuatan halaman.

Anak Baru Di Blok: Font Variabel

Mulai tahun 2020, font variabel telah didukung secara luas di sebagian besar browser. Apa sebenarnya font variabel itu?

Dengan font variabel, semua gaya font Anda dimuat dalam satu file. Tetapi sebelum font variabel menjadi hal biasa, Anda memerlukan beberapa file font terpisah untuk font.

Ada juga beberapa manfaat menggunakan font variabel, yang meliputi:

• Ukuran file lebih kecil: Font variabel memiliki ukuran file lebih kecil karena merupakan file font tunggal yang berisi semua variasi lebar, berat, dan atribut lainnya.
• Rentang desain yang lebih fleksibel: Dengan jenis font lain, diperlukan tiga hingga lima file font yang berbeda untuk menyediakan setiap representasi bahasa/suara desain situs. Dan ini termasuk setiap permutasi judul, body copy, dll. Tetapi dengan font variabel, menggunakan file font tunggal memungkinkan Anda memanfaatkan semua kemungkinan variasi yang mungkin terkait dengan desain font.
• Lebih sedikit dan hanya satu file: Karena penghematan ukuran file ini, ini membantu mengompres ukuran halaman Anda lebih jauh dan menurunkan kecepatan halaman Anda. Dan manfaat file tunggal itu sendiri memungkinkan webmaster untuk benar-benar mengompres kecepatan halaman mereka lebih jauh lagi.

Dokumentasi berikut membahas tentang font variabel dan cara mengimplementasikannya. Karena manfaatnya, menggunakan font variabel adalah alternatif yang dapat diterima jika Anda benar-benar harus mengimplementasikan font pihak ketiga.

Tingkatkan Teknik Pengkodean Anda Dan Menggabungkan File

Jika Anda bekerja dengan kode sendiri, Anda mungkin (atau mungkin tidak … tidak ada yang menilai di sini) menemukan bahwa tekniknya kurang optimal.

Salah satu contoh: Anda menggunakan CSS sebaris di mana-mana, dan ini menyebabkan gangguan pemrosesan dan rendering di dalam browser.

Solusi mudahnya adalah memastikan bahwa Anda mengambil semua CSS sebaris dan mengkodekannya dengan benar di dalam file lembar gaya CSS.

Jika kode pengembang lain tidak sesuai standar, hal ini dapat menimbulkan masalah besar dengan perenderan laman.

Misalnya: Katakanlah Anda memiliki halaman yang dikodekan menggunakan teknik lama daripada yang modern dan lebih ramping.

Teknik yang lebih lama dapat menyertakan penggembungan kode yang signifikan dan mengakibatkan perenderan halaman yang lebih lambat.

Untuk menghilangkannya, Anda dapat meningkatkan teknik pengkodean dengan membuat kode yang lebih ramping dan tidak membengkak, sehingga menghasilkan pengalaman rendering halaman yang jauh lebih baik.

Menggabungkan File Juga Dapat Memperbaiki Situasi

Misalnya: Jika Anda memiliki delapan atau 10 file JavaScript yang semuanya berkontribusi pada tugas yang sama, Anda dapat menyewa pengembang yang dapat menggabungkan semua file ini untuk Anda.

Dan jika itu adalah file JavaScript yang kurang kritis, maka untuk lebih mengurangi masalah rendering halaman, file ini juga dapat ditangguhkan dengan menambahkannya ke akhir kode HTML pada halaman.

Dengan menggabungkan file dan meningkatkan teknik pengkodean, Anda dapat berkontribusi secara signifikan untuk pengalaman rendering halaman yang lebih baik.

Takeaway kunci

Jika Anda ingin membuat proses Anda sendiri untuk menemukan dan mengurangi sumber daya pemblokiran render, Anda sekarang memiliki alat untuk melakukannya. Prosesnya diuraikan sebagai berikut:

• Langkah 1: Merayapi situs Anda menggunakan Screaming Frog atau alat perayapan lainnya.
• Langkah 2: Identifikasi halaman dengan kecepatan halaman lambat.
• Langkah 2a: Anda juga dapat menggunakan Google Search Console atau Google Analytics untuk tujuan ini.
• Langkah 3: Susun halaman dengan performa terendah yang Anda temukan dalam daftar prioritas.
• Langkah 4: Turunkan item daftar periksa di atas (Anda juga dapat membuat spreadsheet dari setiap item per halaman jika diinginkan), dan temukan, kurangi, atau perbaiki sumber daya yang memblokir perenderan ini sesuai kebutuhan.
• Langkah 5: Bilas dan ulangi untuk setiap halaman di situs Anda.

Idenya adalah untuk membuat proses yang mudah diskalakan, mudah diimplementasikan, dan dapat menempatkan Anda di jalur menuju kesuksesan dengan kecepatan halaman yang jauh lebih kecil sebagai hasilnya.

Dengan proses ini, Anda juga dapat memanfaatkan keuntungan yang akan Anda miliki, dan Anda juga dapat merasakan peningkatan dari Data Web Inti Google.

Mengidentifikasi dan memperbaiki sumber daya yang memblokir perenderan adalah bagian penting dari pengoptimalan kecepatan yang sebagian besar audit menampilkan langkah ini. Alasan di balik ini adalah bahwa mereka membantu menciptakan waktu rendering terbaik untuk halaman peringkat Anda.

Google bekerja untuk meningkatkan kecepatan halaman setiap saat. Namun ada satu hal yang selalu konsisten: semakin cepat kecepatan halaman Anda, semakin baik.

Dengan mengintegrasikan proses yang dapat diskalakan di mana Anda dapat menyelesaikannya dengan cepat, Anda dapat menangani bahkan proyek pengoptimalan kecepatan halaman terbesar dan paling kompleks dengan relatif mudah.

Dan ini juga berarti pengalaman pengguna yang lebih baik.

Dengan menemukan dan memperbaiki sumber daya yang memblokir perenderan, Anda juga dapat meningkatkan pengalaman pengguna di situs Anda, dan Anda akan terus membuat pengunjung situs web Anda senang.

After all, keeping your site in top shape for prime time is what all of this optimization work is all about!

Sumber Daya Lainnya:

• Advanced Core Web Vitals: A Technical SEO Guide
• Difference Between Search Console CWV Report & PageSpeed Insights
• Core Web Vitals: A Complete Guide

Featured Image: SuperOhMo/Shutterstock