WP Rocket SaaS: Di Balik Layar

Diterbitkan: 2024-09-12

Artikel teknis ini merinci pengembangan dan pengoptimalan web crawler yang mampu memproses lebih dari 15.000 halaman web per menit menggunakan NodeJS, Puppeteer, dan BullMQ. Kami menjelaskan cara fitur Hapus CSS yang Tidak Digunakan (RUCSS) berfungsi dan meningkatkan kinerja web dengan menghilangkan CSS yang tidak diperlukan, meningkatkan waktu muat, dan meningkatkan metrik kinerja utama. Kami juga menjelaskan bagaimana kami mengatasi tantangan awal, termasuk masalah pemrosesan dan stabilitas yang tidak efisien, dengan memanfaatkan Puppeteer untuk pengumpulan sumber daya, menyesuaikan pustaka JavaScript, dan menerapkan sistem antrian dengan BullMQ. Terakhir, kami menguraikan bagaimana kami mencapai keunggulan operasional yang bertujuan untuk mempertahankan standar kualitas tinggi, memungkinkan inovasi yang cepat, dan dukungan pelanggan yang efisien.

Apa itu RUCSS?

Fitur Hapus CSS yang Tidak Digunakan (RUCSS) dirancang untuk menghilangkan semua CSS dan stylesheet yang tidak digunakan pada halaman web, hanya mempertahankan CSS yang diperlukan untuk setiap halaman. Setelah pengoptimalan diterapkan, situs web Anda hanya akan mengirimkan CSS yang diperlukan untuk halaman tertentu yang diminta pengguna, sehingga membuat halaman dimuat lebih cepat!

Rata-rata, pengoptimalan ini mengurangi ukuran CSS yang dikirimkan sebesar 76%!

Manfaat RUCSS

  • Mengurangi Ukuran Halaman : Meminimalkan ukuran keseluruhan halaman web.
  • Lebih Sedikit Permintaan HTTP : Mengurangi jumlah stylesheet CSS yang perlu dimuat.
  • Waktu Muat Lebih Cepat : Meningkatkan kecepatan memuat halaman.
  • Enhanced Core Web Vitals : Meningkatkan metrik kinerja utama seperti Largest Contentful Paint (LCP), First Contentful Paint (FCP), dan Cumulative Layout Shift (CLS).
  • Penghapusan CSS yang Memblokir Render : Mencegah CSS menunda rendering halaman.

Mengidentifikasi CSS yang Tidak Digunakan: Serangan Bedah

Proses menghapus CSS yang tidak digunakan sangatlah kompleks: untuk setiap aturan CSS yang kita hapus, kita harus memastikan aturan tersebut tidak akan diperlukan lagi di halaman tersebut; jika tidak, tata letaknya bisa rusak! Anda perlu mempertimbangkan banyak faktor untuk memastikan CSS yang tidak digunakan diidentifikasi dengan benar:

  • Interaksi JavaScript : JavaScript secara dinamis mengubah DOM dan CSS. Misalnya, popup mungkin muncul setelah tombol diklik, memperkenalkan elemen DOM dan aturan CSS baru. Menangani interaksi ini sangat penting untuk mengidentifikasi CSS yang digunakan secara akurat, dan masih banyak lagi penggeser, menu di luar kanvas, dan galeri.
  • Variasi CSS dan HTML : Tema dan plugin WordPress memperkenalkan variasi aturan CSS yang tiada habisnya. Menangani CSS bertingkat, kasus tepi, dan bahkan kesalahan sintaksis sangatlah penting. Penguraian HTML yang akurat diperlukan untuk mengidentifikasi dan menghapus CSS yang tidak digunakan secara efektif.
  • Ukuran area pandang : Beberapa gaya CSS diterapkan dalam kondisi tertentu pada ukuran layar. Untuk memastikan CSS dapat disajikan dengan benar kepada pengguna seluler dan desktop, kami menyediakan CSS bekas untuk berbagai ukuran layar dan hanya memberikan yang relevan untuk setiap kunjungan. Selain itu, aturan pengoptimalan khusus berlaku untuk gaya CSS responsif.

RUCSS sebagai Solusi SaaS

Memproses sumber daya halaman dan menghasilkan CSS bekas membutuhkan banyak sumber daya. Melakukan tugas-tugas ini secara langsung di situs web pelanggan dapat memperlambatnya dan mungkin tidak dapat dilakukan di semua server dan hosting. Oleh karena itu, beberapa fitur WP Rocket yang paling canggih, seperti CSS yang Tidak Digunakan Dihapus, didukung oleh SaaS kami. Pengoptimalan tersebut dilakukan di server kami berdasarkan permintaan dari plugin WP Rocket, dan hasilnya kemudian diterapkan ke situs web secara otomatis. Pendekatan ini memiliki beberapa manfaat besar bagi pelanggan:

  • Lakukan pengoptimalan intensif sumber daya dan kurangi beban pada server pengguna.
  • Berikan penyempurnaan sesegera mungkin dan atasi masukan dengan cepat.
  • Amati dan perbaiki masalah dan kesalahan secara proaktif tanpa menunggu tiket dukungan.
  • Pastikan semua pengguna mendapatkan manfaat dari versi terbaru tanpa pembaruan sisi klien apa pun.
  • Ulangi dengan cepat dan terapkan peningkatan tanpa perlu memperbarui plugin WP Rocket.

Seperti Apa Di Balik Layar?

WP Rocket SaaS mengunjungi dan mengoptimalkan hingga 20 ribu halaman per menit, memproses CSS dan gambar paruh atas! Untuk melakukannya, kami terus mengoperasikan ribuan browser web di ~40 server berbeda untuk melayani semua permintaan pengguna kami dalam waktu 2 menit. Untuk mencapai hal ini, tim kami memanfaatkan teknologi tercanggih termasuk NodeJS, Django, Redis, CockroachDB & Kubernetes dan mengoperasikannya dengan tim group.One.

Tantangan Teknis Utama

1. Mengumpulkan Sumber Daya Halaman

Kami banyak menggunakan Puppeteer, pustaka Node yang menyediakan API tingkat tinggi untuk mengontrol browser Chrome atau Chromium tanpa kepala. Alat ini penting untuk strategi pengumpulan sumber daya kami berkat kemampuannya merender halaman web seperti yang dilakukan pengguna sebenarnya, memastikan bahwa semua elemen dinamis ditangkap. Ini menawarkan banyak fitur canggih yang kami andalkan untuk mengoptimalkan proses, seperti kontrol ukuran area pandang, intersepsi permintaan, dan sebagainya.

2. Memproses Sumber Daya Halaman

Karena tema dan plugin WordPress menggunakan beragam CSS dan JavaScript, kami memerlukan solusi yang kuat untuk memproses file-file ini.

Setelah menguji banyak metode untuk memproses sumber daya halaman, seperti Webpack, PostCSS, dan CleanCSS, kami akhirnya memutuskan untuk melakukan fork dan memelihara pustaka JavaScript kami yang disesuaikan agar lebih sesuai dengan kebutuhan spesifik kami. Hal ini mencakup penanganan kasus edge, aturan CSS yang disarangkan, dan masalah sintaksis yang ditemukan di berbagai tema dan plugin WordPress untuk memastikan pengoptimalan dapat dilakukan dengan andal untuk semua pengguna kami.

3. Menyempurnakan Dengan Keahlian Tim Kami

Memproses CSS bisa sangat rumit dan berisiko tinggi merusak tata letak halaman jika prosesnya tidak cukup hati-hati. Tim kami memiliki pengetahuan luas tentang tema WordPress dan pembuat halaman populer, serta masukan terus-menerus dari ratusan ribu pengguna tentang kompatibilitas dengan tren WordPress terkini. Oleh karena itu, kami mengembangkan sistem daftar aman dinamis bagi rekan tim kami untuk secara langsung memperbarui aturan pemrosesan CSS SaaS kami secara real-time untuk terus menyesuaikan pengoptimalan kami dan meningkatkan kompatibilitas setiap hari.

4. Mengelola Aliran Ribuan Halaman Per Menit

Untuk menangani arus 15.000 halaman web per menit, kami menerapkan sistem antrian menggunakan BullMQ. Sistem ini menawarkan:

  • Pemrosesan Asinkron untuk memindahkan proses pengoptimalan dari plugin ke backend asinkron.
  • Penyeimbangan Beban dan Manajemen Konkurensi : Mendistribusikan tugas ke beberapa server, memungkinkan SaaS menangani sejumlah besar URL secara efisien dan mudah diskalakan.
  • Keandalan dan Toleransi Kesalahan : Semua tugas yang dikirimkan dan hasilnya disimpan setelah tersedia. Hal ini memberikan ketahanan jika salah satu server kami gagal atau jika situs web pengguna tidak dapat segera mengambil hasilnya.
  • Prioritas : Antrean BullMQ dapat digunakan untuk memprioritaskan tugas, memastikan bahwa tugas yang lebih penting diproses terlebih dahulu. Misalnya, optimalisasi halaman beranda diprioritaskan agar pengguna kami dapat segera melihat peningkatan pada halaman beranda mereka dan langsung mengujinya dengan Pagespeed!

Keunggulan Operasional

Membangun sistem SaaS yang terukur dan andal sangat penting untuk kemudahan dan efisiensi pelanggan serta untuk menangani pertumbuhan jumlah pengguna dan peningkatan volume permintaan pemrosesan halaman. Berikut penjelasan mendalam tentang langkah-langkah yang memungkinkan kami mencapai keunggulan tersebut.

1. Arsitektur yang Dapat Diskalakan

WP Rocket digunakan di jutaan situs web di seluruh dunia kapan saja. Oleh karena itu, SaaS kami harus tetap tersedia dan berfungsi seperti yang diharapkan setiap saat. Layanan ini dihosting di lebih dari 40 server fisik yang berlokasi di berbagai wilayah. Mereka diatur dengan Kubernetes untuk memudahkan penerapan, penskalaan, dan pengelolaan siklus hidup container. Kami mengandalkan fitur-fitur canggih seperti pemeriksaan keaktifan, pembaruan berkelanjutan, dan penskalaan otomatis untuk menghadirkan ketahanan pada layanan dan mempertahankan waktu aktif dalam segala situasi. Selain itu, layanan gateway khusus melakukan manajemen pekerjaan dan menerapkan keamanan API (pembatasan kecepatan, autentikasi, dll.).

2. Pemantauan & Peringatan

Semua layanan dan server tersebut terus dipantau dan diamati dengan metrik teknis melalui Prometheus dan Grafana, serta metrik fungsional, untuk memastikan layanan stabil dan memberikan kinerja terbaik kepada pengguna kami. Pemantauan mendalam memungkinkan kami memastikan tingkat keberhasilan tetap tinggi sekaligus menjaga durasi pekerjaan tetap rendah dan efisiensi pengoptimalan yang terbaik di kelasnya. Peringatan dari alat seperti Prometheus dan Metabase memungkinkan kami bereaksi secara real-time jika ada sesuatu yang tidak berjalan sesuai harapan.

3. Observabilitas untuk Membantu Pelanggan Kami

Meskipun kami berupaya keras untuk membuat SaaS mudah digunakan oleh pelanggan kami, beberapa kesulitan dapat terjadi dalam pengaturan yang sangat rumit pada firewall, aturan keamanan, atau situs WordPress dengan banyak plugin atau tema yang saling bertentangan, misalnya. Berkat pendekatan SaaS, tim dukungan kami dilengkapi dengan peralatan internal melalui Metabase untuk mengakses data yang terkait dengan pengguna tertentu, dan mengamati pekerjaan dan hasil pengoptimalan mereka, sehingga memungkinkan kami mengidentifikasi kemungkinan masalah dengan cepat. Mereka kemudian dapat mengulangi, mengubah, dan menyempurnakan serta mendapatkan umpan balik waktu nyata dengan PostMan dan Metabase. Hasilnya, mereka dapat membantu pelanggan yang kesulitan secara efisien dan bahkan menyesuaikan aturan pengoptimalan SaaS secara langsung untuk membuka kunci pengguna.

4. Pengujian Otomatis & Integrasi Berkelanjutan

Mempertahankan standar kualitas tinggi sekaligus mempertahankan tingkat pengiriman yang signifikan dapat menjadi tantangan bagi para insinyur. Kami memecahkan masalah ini dengan otomatisasi andal yang dilakukan setiap perubahan kode. Dari pengujian otomatis hingga penerapan satu tombol dalam produksi, kami juga memanfaatkan pencerminan, mekanisme rilis bayangan, dan peluncuran rilis progresif. Semua pendekatan canggih tersebut memungkinkan tim teknik kami untuk berkembang dan terus berinovasi tanpa membahayakan kualitas layanan. Sebagian besar proses ini dilakukan secara otomatis sehingga kami tidak perlu memikirkannya dan fokus pada hal yang penting: membangun fitur terbaik untuk pengguna kami!

Menyelesaikan

Ringkasnya, pengembangan dan pengoptimalan perayap web menggunakan NodeJS, Puppeteer, dan BullMQ telah menghasilkan solusi yang sangat efisien dan terukur untuk memproses lebih dari 15.000 halaman web per menit. Dengan mengatasi tantangan awal dan memanfaatkan alat dan metodologi canggih, kami telah menciptakan sistem tangguh yang secara signifikan meningkatkan kinerja web melalui fitur Hapus CSS yang Tidak Digunakan (RUCSS). Integrasi berkelanjutan, pengujian otomatis, dan fokus pada skalabilitas dan keandalan memastikan bahwa layanan kami tetap menjadi yang terbaik, memberikan waktu muat yang lebih cepat kepada pengguna dan meningkatkan pengalaman web secara keseluruhan.