Elementor 3.0: Bagaimana Kami Meningkatkan Kinerja

Kami selalu mencari cara baru untuk meningkatkan kecepatan dan kinerja situs web Elementor. Dalam rilis terbaru Elementor — Elementor 3.0, kami sangat berfokus pada peningkatan kinerja halaman Anda.

Banyak faktor yang mempengaruhi kecepatan loading sebuah website. Faktor seperti penyedia hosting, tema, jumlah plugin, caching, kode HTML, dan lain-lain.

Meskipun kami tidak dapat mengontrol faktor eksternal, kami dapat (dan memang) berupaya untuk memastikan bahwa produk kami dioptimalkan sebaik mungkin. Perubahan tertentu, bagaimanapun, memerlukan waktu yang tepat untuk diterapkan.

Beberapa peningkatan — seperti rendering CSS, memiliki potensi rendah untuk menyebabkan masalah sementara perubahan lainnya — seperti penghapusan elemen DOM, berpotensi tinggi untuk merusak beberapa situs web, dan menyebabkan masalah.

Memperkenalkan perubahan yang melanggar adalah sesuatu yang biasanya dilakukan hanya dalam rilis utama, jadi kami mengambil kesempatan ini untuk memperkenalkan perubahan dan peningkatan tersebut dan dengan mengurangi elemen DOM dan meningkatkan rendering CSS, kami mengambil satu langkah lebih dekat menuju kinerja yang lebih baik.

Elementor memiliki dua cara untuk merender CSS situs web:

1. Mencetaknya dalam tag <style> di DOM.

2. Menulisnya ke file CSS yang akan dimuat dengan halaman

CSS yang ditulis ke file, misalnya, benar-benar statis. Itu dicetak sekali ke dalam file, dan file itu hanya diperbarui ketika ada perubahan pada konten halaman. Tapi bagaimana dengan konten dinamis?

Beberapa konten dinamis menyertakan CSS-nya sendiri, seperti warna dan gambar (bila digunakan sebagai nilai gambar latar). Konten dinamis, seperti bidang khusus, terputus dari konten halaman dan dapat diubah di luar pengeditan posting atau halaman di Editor Elemen.

Jadi apa yang terjadi ketika nilai dinamis menyertakan CSS yang perlu dicetak setiap kali halaman dimuat?

Hingga Elementor 3.0, setiap kali halaman dimuat, modul Tag Dinamis Elementor memindai seluruh halaman untuk menemukan elemen apa pun yang menyertakan konten dinamis.

Jika konten dinamis ditemukan, modul mengambil nilai dinamis elemen tersebut, menulis CSS yang relevan ke dalam <style> , dan memasukkannya ke dalam DOM.

Ini, seperti yang dijelaskan dalam posting ini, adalah proses yang mahal, menghabiskan waktu pemuatan yang berharga.

Di Elementor 3.0, kami mengubah cara kami mengelola proses rendering CSS dinamis. Saat pertama kali halaman dimuat, saat CSS statis halaman dirender, kami membuat cache yang menyertakan daftar elemen halaman yang memiliki nilai CSS dinamis.

Kemudian, setiap kali halaman itu dikunjungi, kami mengambil daftar elemen dinamis dari cache dan segera merendernya. Daripada harus mengulang semua elemen halaman setiap kali halaman dimuat – kami mendapatkan elemen-elemen tersebut dari daftar elemen dinamis yang sudah tersedia. Ini menghemat banyak waktu berjalan dan membuat pemuatan halaman terasa lebih cepat.

Berikut adalah beberapa hasil dari pengujian yang kami jalankan di Blackfire untuk memeriksa perbedaan sebelum dan sesudah pengoptimalan kami: