Bagaimana cara browser membuat halaman web?

Sebagai SEO teknis, penting untuk memahami bagaimana browser membuat halaman web. Hal ini nantinya dapat membantu untuk memahami perbedaan antara interpretasi bot manusia dan mesin telusur dari suatu halaman, atau untuk mendiagnosis masalah kecepatan halaman, antara lain. Saya akan melihatnya dengan tujuan untuk meningkatkan kecepatan halaman.

Ini adalah yang pertama dari seri 4 artikel tentang fase browser membuat halaman dan refleksinya pada Pagespeed.

Untuk menampilkan konten, setiap browser harus menyelesaikan proses DOM dan CSSOM sebelum membuat pohon render untuk membuat halaman web.

DOM atau Model Objek Dokumen dibangun dari markup HTML. DOM adalah representasi data dari elemen-elemen yang membentuk struktur dan konten halaman web. Representasi ini digunakan oleh program yang berbeda, seperti skrip JavaScript, yang mungkin mengubah struktur, konten, atau keduanya.

CSSOM dibuat oleh CSS MarkUp seperti animasi, keyframe, kueri media bersama dengan pemilih, properti, dan nilai yang secara semantik sejajar dengan DOM.

Ini adalah tangkapan layar dari peramban web pertama dalam sejarah. Itu tidak dapat merender Javascript dan tidak memiliki banyak Properti CSS. Itu tidak dapat menggunakan Aturan HTML modern juga. Mengalami jenis browser web primitif ini (seperti Lynx) dapat membantu Anda memahami mesin browser dan sifatnya dalam hal kinerja web. Anda dapat mengunjungi halaman ini!

Bagaimana DOM dibuat oleh browser?

Tidak ada browser yang melihat konten atau kode sumber pada halaman seperti yang dilakukan orang. Pertama-tama, ia akan melihat semua yang ada di preDOM dalam byte. Ini kemudian akan mengonversi byte ke karakter tertentu dan memecahkan apa artinya membentuk struktur halaman sebagai hierarki.

Catatan: preDOM adalah versi DOM yang muncul dalam kode sumber dan belum dibaca dan diproses oleh browser. PreDOM kemudian dibaca dan ditafsirkan oleh browser:

1. Menggunakan kode 'charset' dari file Anda, browser akan mengonversi byte menjadi karakter.
2. Proses 'tokenizing' dimulai untuk membuat perintah yang berarti untuk karakter yang berdekatan.
3. Token yang dihasilkan dikonversi menjadi objek dan menerima aturan dan properti sesuai dengan standar HTML5. (Dengan kata lain, itu mengubahnya menjadi node.)
4. Proses Konstruksi DOM dimulai. Setiap tag HTML ditempatkan di dalam satu sama lain, membentuk hierarki dan membuat struktur halaman web.

Meningkatkan kinerja DOM: Mengapa begitu penting?

Sebelum saya memberikan beberapa tips, Anda harus memahami jenis Peristiwa Muat DOM dan artinya.

Berikut adalah beberapa Jenis Acara DOM dalam pembuatan halaman web

• domLoading : Titik awal proses DOM.
• domInteractive : Akhir dari proses DOM.
• domContentLoaded : Akhir dari proses DOM dan CSSOM. Pada titik ini, browser siap membuat pohon rendering. Selain itu, eksekusi JavaScript biasanya harus dimulai pada titik ini.
• domComplete : Pengunduhan semua sumber daya halaman telah selesai.
• loadEvent : Setelah selesai mengunduh sumber daya dan membuat struktur halaman, setiap peristiwa JS "onload" yang ada akan dipicu.

Jika Anda hanya ingin menghitung Waktu Proses DOM, Anda harus fokus pada acara domInteractive. Namun, acara ini tidak ditampilkan di devTools Chrome. Anda dapat menggunakan atau berkonsultasi dengan tim TI Anda untuk PerformanceNavigationTiming API yang dapat menghitung semua peristiwa ini, serta subEvents tambahan seperti domContentLoadedEventStart.

Anda juga dapat melihat preferensi domInteractive di Google Analytics > Perilaku > Kecepatan Situs > Waktu Laman > DOM. Namun, informasi di sini tidak terlalu stabil dan dapat diandalkan. Namun, itu mungkin memberi Anda tempat untuk memulai.

Anda juga dapat menghitung Waktu Interaktif DOM dengan DevTools tetapi hanya dengan kode konsol. Ini adalah metode yang sedikit lambat tetapi Anda dapat mencoba pustaka kode “performance.timing”. Di atas, Anda akan melihat di sisi kiri, performance.timing yang menunjukkan sebagian besar metrik kinerja. Hanya tiga atau empat digit terakhir yang penting di sini. Jika Anda ingin melihat metrik khusus, misalnya DOMInteractive, Anda dapat menulis performance.timing.domInteractive – performance.timing.responseStart. Di sebelah kanan, DOMInteractive, DOMComplete, Total Waktu Muat Halaman diberikan masing-masing.
Contohnya adalah dari situs berita yang sama.

Dalam artikel ini, acara domContentLoaded dan DevTools akan cukup untuk tujuan kita.

Perhatikan bahwa ketika sumber daya diatur dan dimuat dengan benar, waktu domInteractive dan domContentLoaded tidak terlalu berbeda satu sama lain. Karena tantangan sebenarnya adalah memisahkan file JS dan file CSS satu sama lain tanpa mengganggu penguraian HTML atau membuat kemacetan di utas utama. Jika Anda berhasil melakukannya, kemungkinan DOM dan CSSOM (domContentLoaded Event) diaktifkan dengan cara tercepat.

Contoh DOM dari Dokumen HTML

Pengoptimalan dan kiat proses DOM

Jika kita berada di tahun 2019 dan sebelumnya, saya dapat mengatakan bahwa sebagai Pakar SEO Teknis, Anda tidak perlu tahu cara membuat kode.

Namun pada tahun 2020 dan seterusnya, Anda sebenarnya harus mengetahui beberapa coding tingkat pemula. Untuk memahami cara mengoptimalkan Model Objek Dokumen atau struktur Node HTML, Anda perlu memeriksanya dengan pengalaman yang cukup untuk membuat struktur kode baru.

Berikut adalah beberapa tip untuk mengoptimalkan ukuran DOM:

1. Periksa Pohon Node DOM yang ada dan coba temukan node HTML yang tidak perlu . Misalnya, jika Anda melihat salah satu atau dengan kelas 'display: none', Anda harus menghapusnya.
2. Anda dapat menyarankan Tim TI Anda untuk menggunakan lebih banyak elemen semu ::sebelum dan ::sesudah daripada membuat simpul HTML baru.
3. Cobalah untuk fokus pada elemen HTML induk besar dengan banyak elemen anak. Kontrol Kelas CSS Anda dan efeknya untuk membuat node HTML yang lebih pendek sambil bekerja untuk menyatukan elemen HTML.
4. Jika Anda memanggil struktur simpul HTML Anda dengan JavaScript, Anda juga dapat menggunakan atau menyarankan Tim TI Anda untuk menggunakan Subtree Modification DOM Change Breakpoints untuk menentukan node mana yang mengubah inisiator mana.
5. Jika Anda tidak dapat mengecilkan ukuran simpul HTML, maka Anda mungkin ingin mempertimbangkan untuk menggunakan Shadow DOM atau, menurut Perpustakaan JS dan teknologi rendering, Anda mungkin tertarik dengan Virtual DOM.
6. Anda juga harus mempertimbangkan teknologi kompresi gzip, brotli, atau deflate di sisi server.
7. Anda dapat mengompresi dokumentasi HTML Anda dengan menghapus spasi untuk dukungan kecepatan browser yang lebih baik dan lebih cepat.

Menggunakan DOM Virtual

Anda dapat menggunakan berbagai jenis DOM untuk kecepatan halaman, UX, dan anggaran perayapan yang lebih baik. Salah satu contohnya adalah Virtual DOM.

Virtual DOM hanya memuat bagian DOM yang berubah saat halaman baru dibuka, alih-alih memuat ulang semua elemen DOM. Ini menciptakan presentasi halaman yang lebih cepat dan lebih ringan untuk pengguna atau bot mesin pencari.

Virtual DOM bekerja dengan baik dengan library JavaScript Vue atau React.

Mengapa kinerja DOM penting untuk SEO Teknis?

Ukuran DOM berhubungan langsung dengan kecepatan halaman dan kontak awal dengan pengguna.

Jika Anda memiliki ukuran DOM besar dan tidak menggunakan Shadow DOM atau metode pencegahan serupa untuk menghindari pemuatan dan penataan gaya semua node HTML yang tidak terlihat selama pemuatan halaman awal, Anda mungkin akan menunda indeks kecepatan dan kecepatan kontak awal untuk pengguna.

Perbandingan singkat antara browser untuk proses reflow.

Jika ukuran DOM Anda besar, Anda mungkin akan mengalami reflow browser .

Reflow mengacu pada pengubahan ukuran, penataan atau pengecatan dan pemosisian Elemen HTML dalam proses rendering ulang. Jika elemen induk HTML berubah, elemen turunan juga terpengaruh. Panjang dan jumlah rantai elemen HTML semacam ini dapat membahayakan kecepatan halaman Anda.

Reflow loop dapat membahayakan anggaran perayapan Anda, meningkatkan beban di server dan jaringan. Akibatnya dapat mempengaruhi tingkat konversi dan bahkan peringkat.

Google sebenarnya telah menerbitkan video presentasi yang bagus dan singkat tentang topik ini:

Bagaimana cara browser membuat CSSOM dan pohon rendering?

Browser cenderung memulai proses CSSOM setelah menyelesaikan proses DOM.

Karena browser modern menyadari bahwa DOM tidak akan masuk akal sampai CSSOM selesai, beberapa elemen HTML tidak ditampilkan oleh browser sampai ia membaca kode gaya. Contoh yang bagus untuk ini adalah gambar latar belakang CSS.

Di atas adalah contoh cuplikan kode CSS yang perlu difaktorkan ulang. Properti 'Zoom' digunakan lebih dari 19 kali untuk penyeleksi yang berbeda. Mereka bisa bersatu.

Bagaimana proses CSSOM dimulai dan diselesaikan oleh browser modern?

1. Browser mengikuti byte, karakter, token, dan aturan standar (node) loop yang dihasilkan saat DOM dibuat.
2. Browser mencocokkan setiap Elemen DOM dengan elemen CSS yang akan memengaruhinya. Proses ini disebut "Gaya."
3. Setelah pemetaan, browser menentukan dimensi setiap elemen DOM sesuai dengan aturan CSS dalam struktur hierarkis. Karena ukuran elemen induk juga memengaruhi elemen turunan, file CSS yang disandikan secara hierarkis berguna untuk kecepatan halaman. Proses ini disebut "Tata Letak".
4. Proses DOM Visual dimulai. Semua gambar, batas dan warna dicat sesuai dengan aturan CSS. Proses ini dilakukan dalam lapisan yang berbeda.
5. Komposit adalah tahap akhir dari CSSOM. Browser menggabungkan semua operasi pengecatan di lapisan yang berbeda.

Anda dapat memeriksa properti CSS dan biayanya ke mesin browser melalui Pemicu CSS dalam hal mesin browser yang berbeda.

Bagaimana mengoptimalkan proses CSSOM

1. Sebagai SEO Teknis, pertama- tama Anda harus fokus pada pemilih CSS yang kompleks dan properti bersama. Dengan kata lain, jika pemilih CSS memiliki lebih dari 3 elemen turunan, Anda harus mencoba mempersingkatnya atau Anda harus melaporkannya ke Tim TI Anda untuk pemfaktoran ulang CSS. Properti bersama berarti bahwa Tim TI Anda mungkin menggunakan properti CSS yang sama pada kelas dan id yang berbeda. Anda harus mencoba menyatukannya untuk ukuran file CSS yang lebih kecil.
2. Cari tahu apakah Tim TI Anda memampatkan file CSS atau tidak.
3. Untuk setiap kategori dan bagian situs Anda, coba temukan kode CSS yang umum digunakan dan kode CSS yang umum tidak digunakan . Sarankan Tim TI Anda untuk membagi file CSS untuk efisiensi sumber daya yang lebih baik.
4. Cari kode penting di file CSS Anda. Mereka mungkin membuat beberapa kode berikutnya tidak perlu.
5. Cobalah untuk menentukan apakah file CSS Anda memiliki struktur hierarki paralel sehubungan dengan node HTML Anda. Jika paralel, pohon rendering Anda akan lebih mudah dibuat oleh browser.
6. Cobalah untuk mengurangi jumlah elemen HTML yang perlu diubah atau diubah ukurannya . Gambar adalah contoh yang baik untuk ini.
7. Anda dapat menyarankan Tim TI Anda untuk menggunakan fitur dan properti 'Contain', 'Will-change', 'CSS Scope' untuk kinerja browser yang lebih baik.
   Properti 'Contain' menentukan cakupan elemen HTML dan efek CSS yang akan diterimanya. Dengan cara ini tidak akan memengaruhi DOM lainnya. Properti 'Will-change' memberi tahu browser elemen mana yang berubah dan dengan cara apa sehingga browser dapat melakukan pengoptimalan bahkan sebelum proses dimulai.
8. Cobalah untuk memasukkan kode CSS penting sebelum membuat file CSS yang memblokir.
9. Cobalah untuk menyarankan Tim TI untuk tidak menggunakan kode gaya dalam tag HTML . Ini memengaruhi proses DOM/CSSOM serta anggaran perayapan.
10. Jangan masukkan alamat sumber gambar Anda ke dalam file CSS . Ini bertentangan dengan pedoman pengindeksan Google (Chrome DevSummit 2019, Cara Membuat Konten Anda Bersinar di Google Penelusuran, Martin Splitt).
11. Jangan gunakan fitur @import di file CSS . Ini membuat permintaan CSS kedua bersarang.
12. Coba gunakan lebih sedikit file CSS eksternal untuk mempersingkat CSSOM atau coba gabungkan untuk mengurangi waktu pencarian DNS dan koneksi sumber daya.
13. Anda juga dapat memeriksa pemilih panjang dan kekhususannya. Jika terlalu panjang, Anda perlu melaporkannya ke Tim TI Anda atau Anda dapat mencoba memperbaikinya sendiri sebagai SEO Teknis. Selektor panjang dan properti CSS berulang yang tidak perlu dengan nilai yang sama merupakan beban berat bagi browser dan CPU ponsel.
    

Ingat, CSSOM memiliki hierarki pohon seperti DOM. Ini menerapkan aturan saat ini ke elemen terbesar terlebih dahulu, dan elemen anak tetap terpengaruh hingga browser membaca kode yang ditulis khusus untuk mereka.

Di CSSOM, semua elemen ID CSS, Kelas dan Properti dan Nilai dicantumkan sesuai dengan struktur semantik elemen DOM HTML. CSSOM diambil dari dokumen HTML yang sama dengan DOM. Alasan utama saya belum menunjukkan node HTML di CSSOM adalah untuk menarik perhatian pada struktur hierarki Kode CSS.

Bagaimana cara browser merender halaman?

Menjalankan CSSOM tidak sama dengan rendering. Saat DOM dan CSSOM dibaca dalam hierarki yang sama, rendering adalah proses menggabungkan dua pohon kode ini dari atas ke bawah di viewport.

Selama rendering, beberapa cuplikan kode yang ada selama pemrosesan DOM dan CSSOM mungkin dinonaktifkan. Alasan utama untuk ini adalah bahwa mereka tidak terlihat atau dinonaktifkan oleh kode yang berbeda. Oleh karena itu, pengoptimalan kode yang tidak termasuk dalam pohon rendering tetapi yang muncul di DOM dan CSSOM berguna untuk kecepatan halaman.

Di atas, data DOMContentLoaded di DevTools Chrome menunjukkan waktu yang diperlukan untuk memuat dan mengurai dokumen HTML dan CSS.

Oleh karena itu, konsistensi antara utas utama kinerja dan bagian pohon panggilan menghasilkan hasil yang mendekati. Semua contoh berasal dari situs yang sama.

Jika Anda hanya ingin menghitung DOM, Anda perlu memeriksa waktu domInteractive, yang tidak ditampilkan oleh DevTools tetapi dapat diukur dengan Navigation Timing API.

Setelah acara DomContentLoaded, browser Anda akan memulai pohon rendering dan Anda akan melihat bahwa piksel layar Anda diwarnai dengan informasi dan desain yang bermakna. Selama waktu ini, rendering Javascript juga akan ikut bermain dan akan langsung membelah, mengubah, dan mengecat ulang pohon rendering.

Apa berikutnya?

Urutan sumber daya yang terstruktur dengan baik, jumlah permintaan sumber daya, dan hubungan rendering-tree dan rendering Javascript mengurangi biaya dalam hal kecepatan halaman.

Artikel berikutnya dalam seri ini akan membahas bagaimana hal ini terkait dengan metrik kecepatan halaman lanjutan dan bagaimana Google memandang kecepatan halaman.