WP Rocket SaaS: Sahne Arkası

Yayınlanan: 2024-09-12

Bu teknik makalede, NodeJS, Puppeteer ve BullMQ kullanılarak dakikada 15.000'den fazla web sayfasını işleyebilen bir web tarayıcısının geliştirilmesi ve optimizasyonu ayrıntılarıyla anlatılmaktadır. Kullanılmayan CSS'yi Kaldır (RUCSS) özelliğinin nasıl çalıştığını ve gereksiz CSS'yi ortadan kaldırarak, yükleme sürelerini iyileştirerek ve temel performans ölçümlerini artırarak web performansını nasıl iyileştirdiğini açıklıyoruz. Ayrıca, kaynak toplama için Puppeteer'dan yararlanarak, JavaScript kitaplıklarını özelleştirerek ve BullMQ ile bir kuyruk sistemi uygulayarak, verimsiz işleme ve kararlılık sorunları da dahil olmak üzere başlangıçtaki zorlukları nasıl aştığımızı da açıklıyoruz. Son olarak, yüksek kalite standartlarını korumayı, hızlı inovasyonu mümkün kılmayı ve verimli müşteri desteğini sağlamayı amaçlayan operasyonel mükemmelliğe nasıl ulaştığımızı özetliyoruz.

RUCSS nedir?

Kullanılmayan CSS'yi Kaldır (RUCSS) özelliği, bir web sayfasında kullanılmayan tüm CSS'leri ve stil sayfalarını ortadan kaldırmak ve yalnızca her sayfa için gerekli olan CSS'yi korumak için tasarlanmıştır. Optimizasyon uygulandıktan sonra, web siteniz yalnızca kullanıcının istediği belirli sayfa için gerekli CSS'yi sunacak ve sayfanın çok daha hızlı yüklenmesini sağlayacaktır!

Bu optimizasyon, teslim edilen CSS'nin boyutunu ortalama %76 oranında azalttı!

RUCSS'nin Faydaları

  • Küçültülmüş Sayfa Boyutu : Web sayfasının genel boyutunu en aza indirir.
  • Daha Az HTTP İsteği : Yüklenmesi gereken CSS stil sayfalarının sayısını azaltır.
  • Daha Hızlı Yükleme Süreleri : Sayfanın yüklenme hızını artırır.
  • Geliştirilmiş Temel Web Verileri : En Büyük İçerikli Boyama (LCP), İlk İçerikli Boyama (FCP) ve Kümülatif Düzen Kayması (CLS) gibi temel performans ölçümlerini artırır.
  • Oluşturmayı Engelleyen CSS'nin Ortadan Kaldırılması : CSS'nin sayfanın oluşturulmasını geciktirmesini önler.

Kullanılmayan CSS'yi Belirleme: Cerrahi Saldırı

Kullanılmayan CSS'yi kaldırma süreci çok karmaşıktır: Kaldırdığımız her CSS kuralı için, o sayfada buna hiçbir zaman ihtiyaç duyulmayacağından emin olmalıyız; aksi takdirde düzen bozulabilir! Kullanılmayan CSS'nin doğru şekilde tanımlandığından emin olmak için birçok faktörü göz önünde bulundurmanız gerekir:

  • JavaScript Etkileşimleri : JavaScript, DOM ve CSS'yi dinamik olarak değiştirir. Örneğin, bir düğme tıklatıldıktan sonra yeni DOM öğelerini ve CSS kurallarını tanıtan bir açılır pencere görünebilir. Bu etkileşimlerin ele alınması, kullanılan CSS'nin doğru bir şekilde tanımlanması açısından çok önemlidir ve çok daha fazla kaydırıcı, tuval dışı menü ve galeri bulunmaktadır.
  • CSS ve HTML Varyasyonları : WordPress temaları ve eklentileri, CSS kurallarının sonsuz varyasyonlarını sunar. Yuvalanmış CSS'nin, uç durumların ve hatta sözdizimi hatalarının ele alınması çok önemlidir. Kullanılmayan CSS'yi etkili bir şekilde tanımlamak ve kaldırmak için doğru HTML ayrıştırma gerekir.
  • Görünüm boyutları : Bazı CSS stilleri, bazı koşullar altında ekran boyutuna uygulanır. CSS'nin mobil ve masaüstü kullanıcılarına doğru şekilde sunulabilmesini sağlamak amacıyla çeşitli ekran boyutları için kullanılmış CSS sağlıyoruz ve her ziyarette yalnızca ilgili CSS'yi sunuyoruz. Ayrıca duyarlı CSS stillerine özel optimizasyon kuralları uygulanır.

SaaS Çözümü Olarak RUCSS

Sayfa kaynaklarının işlenmesi ve kullanılmış CSS'nin oluşturulması yoğun kaynak gerektirir. Bu görevleri doğrudan müşteri web sitelerinde gerçekleştirmek onları yavaşlatabilir ve tüm sunucularda ve barındırmalarda mümkün olmayabilir. Bu nedenle, WP Rocket'in Kaldırılmış Kullanılmayan CSS gibi en gelişmiş özelliklerinden bazıları, SaaS'ımız tarafından desteklenmektedir. Bu optimizasyonlar WP Rocket eklentisinden gelen istek üzerine sunucularımızda gerçekleştirilir ve sonuçlar daha sonra web sitelerine otomatik olarak uygulanır. Bu yaklaşımın müşteriler için bazı büyük faydaları vardır:

  • Kaynak yoğun optimizasyon gerçekleştirin ve kullanıcının sunucuları üzerindeki yükü azaltın.
  • İyileştirmeleri mümkün olan en kısa sürede sunun ve geri bildirimleri hızla ele alın.
  • Destek bildirimi beklemeden sorunları ve hataları proaktif olarak gözlemleyin ve düzeltin.
  • İstemci tarafında herhangi bir güncelleme gerekmeden tüm kullanıcıların en son sürümlerden yararlanmasını sağlayın.
  • WP Rocket eklentisini güncellemeye gerek kalmadan hızla yineleyin ve iyileştirmeleri dağıtın.

Perde Arkasında Neye benziyor?

WP Rocket SaaS, dakikada 20.000'e kadar sayfayı ziyaret ediyor ve optimize ediyor, CSS'lerini ve ekranın üst kısmındaki görselleri işliyor! Bunu yapmak için, tüm kullanıcı isteklerimizi 2 dakika içinde karşılamak üzere yaklaşık 40 farklı sunucuda binlerce web tarayıcısını sürekli olarak çalıştırıyoruz. Bunu başarmak için ekibimiz NodeJS, Django, Redis, CockroachDB ve Kubernetes gibi en son teknolojilerden yararlanıyor ve bunları group.One ekipleriyle çalıştırıyor.

Temel Teknik Zorluklar

1. Sayfa Kaynaklarının Toplanması

Başsız Chrome veya Chromium tarayıcılarını kontrol etmek için üst düzey bir API sağlayan bir Node kitaplığı olan Puppeteer'ı yaygın olarak kullanıyoruz. Bu araç, web sayfalarını tıpkı gerçek bir kullanıcının yapacağı gibi oluşturma ve tüm dinamik öğelerin yakalanmasını sağlama yeteneği sayesinde kaynak toplama stratejimiz için çok önemlidir. Görüntü alanı boyutu kontrolü, istek müdahaleleri vb. gibi süreci optimize etmek için güvendiğimiz birçok güçlü özellik sunar.

2. Sayfa Kaynaklarının İşlenmesi

WordPress temaları ve eklentileri çok çeşitli CSS ve JavaScript kullandığından, bu dosyaları işlemek için sağlam bir çözüme ihtiyacımız vardı.

Sayfa kaynaklarını işlemek için Webpack, PostCSS ve CleanCSS gibi birçok yöntemi test ettikten sonra, sonunda özel gereksinimlerimize daha iyi uyacak şekilde kendi özelleştirilmiş JavaScript kitaplığımızı çatallamaya ve sürdürmeye karar verdik. Bu, optimizasyonun tüm kullanıcılarımız için güvenilir bir şekilde gerçekleştirilebilmesini sağlamak amacıyla çok sayıda WordPress temasında ve eklentisinde bulunan uç durumların, iç içe CSS kurallarının ve sözdizimi sorunlarının ele alınmasını içerir.

3. Ekibimizin Uzmanlığıyla İnce Ayarlama

CSS'nin işlenmesi çok zor olabilir ve sürece yeterince özen gösterilmezse sayfa düzeninin bozulma riski yüksektir. Ekibimiz, popüler WordPress temaları ve sayfa oluşturucuları hakkında geniş bilgiye sahip olmanın yanı sıra, en son WordPress trendleriyle uyumluluk konusunda yüz binlerce kullanıcıdan gelen sürekli geri bildirimlere de sahiptir. Bu nedenle, optimizasyonlarımızı sürekli uyarlamak ve uyumluluğu her gün artırmak amacıyla ekip arkadaşlarımızın SaaS'ımızın CSS işleme kurallarını gerçek zamanlı olarak doğrudan güncellemesi için dinamik bir güvenli listeleme sistemi geliştirdik.

4. Dakikada Binlerce Sayfalık Akışı Yönetmek

Dakikada 15.000 web sayfasının akışını yönetmek için BullMQ kullanarak bir kuyruklama sistemi uyguladık. Bu sistem şunları sunar:

  • Optimizasyon sürecini eklentiden eşzamansız bir arka uca boşaltmak için Eşzamansız İşleme .
  • Yük Dengeleme ve Eşzamanlılık Yönetimi : Görevleri birden çok sunucuya dağıtarak SaaS'ın çok sayıda URL'yi verimli bir şekilde yönetmesine ve kolayca ölçeklendirmesine olanak tanır.
  • Güvenilirlik ve Hata Toleransı : Gönderilen tüm görevler ve sonuçları, kullanılabilir olduklarında kaydedilir. Bu, sunucularımızdan birinin arızalanması veya kullanıcının web sitesinin sonuçları hemen alamaması durumunda esneklik sağlar.
  • Önceliklendirme : BullMQ kuyrukları görevleri önceliklendirmek için kullanılabilir, böylece daha önemli görevlerin ilk önce işlenmesi sağlanır. Örneğin, kullanıcılarımızın ana sayfalarındaki iyileştirmeleri hemen görmelerine ve Pagespeed ile hemen test etmelerine olanak sağlamak için ana sayfaların optimizasyonuna öncelik verilmektedir!

Operasyonel Mükemmellik

SaaS için ölçeklenebilir ve güvenilir bir sistem oluşturmak, müşterilerin kolaylığı ve verimliliği ve artan kullanıcı sayısı ile artan sayfa işleme taleplerinin karşılanması açısından çok önemlidir. İşte böyle bir mükemmelliğe ulaşmamızı sağlayan adımlara derinlemesine bir bakış.

1. Ölçeklenebilir Mimari

WP Rocket, dünya çapında milyonlarca web sitesinde her zaman kullanılmaktadır. Bu nedenle, SaaS'ımızın her zaman kullanılabilir durumda kalması ve beklendiği gibi performans göstermesi gerekir. Hizmet, farklı bölgelerde bulunan 40'tan fazla fiziksel sunucuda barındırılmaktadır. Konteynerin yaşam döngülerinin dağıtımını, ölçeklendirilmesini ve yönetimini kolaylaştırmak için Kubernetes ile düzenlenirler. Hizmete esneklik kazandırmak ve her koşulda çalışma süresini sürdürmek için canlılık araştırmaları, sürekli güncellemeler ve otomatik ölçeklendirme gibi güçlü özelliklere güveniyoruz. Ek olarak, özel bir ağ geçidi hizmeti iş yönetimini gerçekleştirir ve API güvenliğini (hız sınırlama, kimlik doğrulama vb.) zorunlu kılar.

2. İzleme ve Uyarı

Tüm bu hizmetler ve sunucular, hizmetin istikrarlı olduğundan ve kullanıcılarımıza en iyi performansı sağladığından emin olmak için Prometheus ve Grafana aracılığıyla teknik metriklerin yanı sıra işlevsel metriklerle sürekli olarak izlenmekte ve gözlemlenmektedir. Derinlemesine izleme, iş süresini düşük tutarken ve optimizasyon verimliliğini sınıfının en iyisi tutarken başarı oranının yüksek kalmasını sağlamamıza olanak tanır. Prometheus ve Metabase gibi araçlardan gelen uyarılar, bir şeyin beklendiği gibi davranmaması durumunda gerçek zamanlı olarak tepki vermemize olanak tanır.

3. Müşterilerimize Yardımcı Olmak İçin Gözlemlenebilirlik

SaaS'ımızın müşterilerimiz için kullanımını kolaylaştırmak için çok çalışırken, örneğin güvenlik duvarları, güvenlik kuralları veya birçok çakışan eklenti veya temaya sahip WordPress web siteleri içeren çok karmaşık kurulumlarda bazı zorluklar ortaya çıkabilir. SaaS yaklaşımı sayesinde destek ekibimiz, belirli bir kullanıcıyla ilgili verilere erişmek ve optimizasyon işlerini ve sonuçlarını gözlemlemek için Metatabanı aracılığıyla dahili araçlarla donatılmıştır ve bu sayede olası sorunları hızlı bir şekilde tanımlamamıza olanak tanır. Daha sonra PostMan ve Metabase ile tekrarlayabilir, ince ayar yapabilir ve ince ayar yapabilir ve gerçek zamanlı geri bildirim alabilirler. Sonuç olarak, zor durumdaki müşterilere verimli bir şekilde yardımcı olabilirler ve hatta kullanıcıların kilidini açmak için SaaS optimizasyon kurallarını doğrudan ayarlayabilirler.

4. Otomatik Test ve Sürekli Entegrasyon

Önemli bir teslimat oranını korurken yüksek kalite standartlarını korumak mühendisler için zor olabilir. Her kod değişikliğinin geçtiği güvenilir otomasyonla bu sorunu çözüyoruz. Otomatik testlerden üretimde tek tuşla dağıtıma kadar, aynı zamanda yansıtma, gölge sürüm mekanizmalarından ve aşamalı sürüm dağıtımlarından da yararlanıyoruz. Tüm bu güçlü yaklaşımlar, mühendislik ekibimizin hizmet kalitesini riske atmadan gelişmesine ve yenilik yapmaya devam etmesine olanak tanır. Bunların çoğu otomatik olduğundan, bunun hakkında düşünmemize ve önemli olana odaklanmamıza bile gerek kalmıyor: kullanıcılarımız için en iyi özellikleri oluşturmak!

Kapanıyor

Özetlemek gerekirse, NodeJS, Puppeteer ve BullMQ kullanılarak web tarayıcısının geliştirilmesi ve optimize edilmesi, dakikada 15.000'den fazla web sayfasının işlenmesi için oldukça verimli ve ölçeklenebilir bir çözüme yol açmıştır. Başlangıçtaki zorlukları ele alarak ve gelişmiş araç ve metodolojilerden yararlanarak, Kullanılmayan CSS'yi Kaldır (RUCSS) özelliği aracılığıyla web performansını önemli ölçüde artıran güçlü bir sistem oluşturduk. Sürekli entegrasyon, otomatik test ve ölçeklenebilirlik ve güvenilirliğe odaklanma, hizmetimizin birinci sınıf kalmasını sağlayarak kullanıcılara daha hızlı yükleme süreleri ve gelişmiş genel web deneyimleri sağlar.