Sayfa yükü yavaş mı? Artık değil - Sunucu Tarafı Oluşturmanın Gücü

Web sitelerinden yavaş yükleniyor bıktınız mı? SEO ve teknoloji ekibiniz sayfa hızı için doğru mimariyi sonsuza kadar tartışıyor mu? Bunu Pickyourtrail'de de yaptık ve bunun için bir çözüm deralttık.

JS uygulamaları web dünyasında başlatılmadan önce, HTTP çağrısına yanıt olarak HTML döndürüldü. Bu, statik bir HTML içerik dosyası oluşturularak ve bazen yanıtı PHP, Python veya Java gibi sunucu tarafı dillerinde kullanarak ve daha etkili bir işlemle aynı yanıt vererek yapılır. Bu nedenle, düşük sayfa hızı ve yarım sayfa yükleme gibi sorunlar devam etti. Çoğunlukla, bu vakalar Müşteri Tarafı Oluşturmanın bir yan etkisiydi.

İstemci tarafı oluşturma nasıl çalışır?

Tamam, eğer teknoloji tarafından süpernova iseniz, render konseptlerine aşina olacağınızdan eminiz. Diğerleri için, işte açıklamanız!

İstemci tarafı oluşturma, bir JS dosyasıyla birlikte HTML belgesinin web sitesinin geri kalanını tarayıcıların kullanımıyla oluşturmasıdır. React gibi modern web çerçeveleri ile tarayıcı, java-script bağlantılarına sahip boş bir belge aldı ve ardından oluşturma başladı, böylece sayfa yükleme tutarsız hale geldi. İlk sayfa yükü yavaş olacaktır ve ağ hızı üzerinde kumar oynayabileceğimiz bir şey olmadığından, her yükün tamamlanması için, içerik kullanıcıya gösterilmeden önce sunucunun sonuna iki gidiş dönüş sürer. Fakat. akılda tutulması gereken şey, ilk yükten (daha uzun süreli yük) sonra müteakip yüklerin süper hızlı olacağıdır.

Daha da yıkmak:

1. Adım: Tarayıcı bir sayfa ister

2. Adım: Tarayıcı JS kodumuzu istiyor

3. Adım: Uygulama önyüklemelerine tepki verin, arka uçtan veri ister

4. Adım: Ekranda yakalanan içerik

İlk sunucu isteği, dış dosyalar oluşturulmak üzere getirilmeden önce boş bir HTML dosyası döndürür. Bu nedenle, tarayıcıların sayfayı boş olarak yorumlama olasılığı çok yüksektir. Ayrıca, ilk render için daha uzun bir süre beklemeleri gerektiğinden kullanıcılar için bekleme süresi daha fazla olacaktır.

Daha fazla bekleme süresi = Kullanıcılar ilgisini kaybeder ve sayfadan ayrılır

Düşük ortalama oturum süresi bulmak doğru değil mi?

Pickyourtrail, Tek Sayfalı Uygulama (SPA) - İstemci Tarafı Oluşturma (CSR) uygulaması ile web sitesinin daha önceki uygulamamız, yavaşlık ve tutarsız SEO performansı ile sonuçlandı. Buna ek olarak, sayfalarımızın meta başlıkları ve açıklamaları taranmadı, bu da sayfamızın düzgün bir şekilde oluşturulmadığı anlamına geliyordu.

Google, bu yılın başlarında şu sonuca varmış oldukları bir rapor yayınladı:

“Ortalama mobil açılış sayfasını tam olarak yüklemek için geçen ortalama süre 22 saniyedir. Bununla birlikte, araştırmalar, yüklemelerinin 3 saniyeden uzun sürmesi durumunda kullanıcıların% 53'ünün mobil sayfadan ayrılacağını gösteriyor. ”

Sunucu tarafı oluşturma nasıl çalışır?

Makine öğrenimi yoluyla yakalanan tercih edilen etkinlikler ve API'ler kullanılarak ürüne entegre edilen uçuşlar, oteller, transferler ve ürüne entegre edilen faaliyetler gibi diğer temel ihtiyaçlar gibi müşterilerin yüksek yararına sahibiz. Pickyourtrail sitemiz, Düğüm konsepti kullanılarak ön uçtaki React üzerine kurulmuştur. Ancak yavaş sayfa yükleme sorunları nedeniyle bundan en iyi şekilde yararlanamadık.

'Sonuçların Üstesinden Gelen Sonuçlar' temel değerlerimizden biri olduğu için yavaş sayfa destanına daha geniş bir perspektiften baktık ve sunucu tarafında oluşturmayı vurguladık.

Çözümler Pickyourtrail, performans darboğazlarını belirlemek için geldi

  • Uygulamayı, tarayıcıların gerçek içeriği taraması için yeterince hızlı hale getirmek amacıyla KSS'yi optimize etmek.
  • Uygulamanın ilk oluşturulması için SSR uygulamak ve diğer etkileşimler için istemci tarafı üzerinde hidratlamak.

Birden fazla tartışma ve A / B testinden sonra, Sunucu tarafı oluşturma (SSR) için yeşil bayrağı salladık.

Sunucu tarafı oluşturma, bir kullanıcı veya arama motoru tarayıcısının ilk önce tarayıcımızı istediğinde ve ilk oluşturma işleminin başlayacağı zamandır. Sunucu isteği aldıktan sonra, gerekli öğeleri bir HTML dizesine dönüştürür ve ardından istemciye yanıt olarak atar. Daha sonra, web sitesindeki farklı bir sayfayı ziyaret etmeyi seçerseniz, tarayıcınız yeni bilgileri almak için başka bir talepte bulunacaktır. Bu, bir sayfaya her bastığınızda gerçekleşir, tarayıcınızın önbelleğe alınmış bir çeşidi yoktur.

Yine, bunu okuyan bir teknoloji süpernova iseniz, bir sonraki bölüme atlamak isteyebilirsiniz. Ancak diğerleri için SSR şöyle çalışır:

  • Tarayıcı bir sayfa ister
  • Sunucu React'i belleğe yükler
  • Sunucu gerekli verileri getirir
  • Sunucu React uygulamasını oluşturur
  • Sunucu oluşturulan HTML'yi tarayıcıya gönderir
  • Tarayıcı / kullanıcı içeriği görüntüler
  • JS dosyasını çağırır
  • React App önyükleme yapar, arka uçtan veri ister
  • Uygulama ekranda yeniden işler (hidratlar).

SSR uygulaması bize nasıl bir fayda sağladı?

  • İlk sayfa oluşturma için daha hızlı yükleme süresi
  • Tamamen dizine eklenebilen HTML sayfaları.
  • Müşterilerimiz için artan performans oranı
  • SEO metriklerinde tutarlılık

En iyi haber, tarayıcıların artık web sitemizi web'deki diğer statik siteler gibi görecek ve sunucuda oluşturulan tüm içeriği dizine ekleyecek olmasıdır. Artık kullanıcının JS'nin yüklenmesini beklemesi gerekmez ve bunun yerine tam olarak işlenmiş bir HTML alır.

Sayfanın yalnızca 7. saniyede tamamlanmasıyla, bekleme süresini 4 saniyeye indirdik. Sihirli? Hayır teknoloji;)

Önerilen çözümün bazı potansiyel tuzakları

Evet, burada dürüst davranıyoruz! Çim diğer tarafta her zaman daha yeşil değildir: /

SSR beklenen performans artışını sağlar ve içeriği kullanıcılarımıza geleneksel React Uygulaması kullanmaktan daha hızlı geçireceğimiz doğrudur. Yakalama şu ki, ölçeklenebilir bir performans artışı değil.

SSR isteğinde, sunucu ve istemci neredeyse benzer şekilde çalışır. React'i başlatır, uygulamayı oluşturur ve HTML tükürür. Ayrıca React'ın JSX kodunu HTML'ye dönüştürmek için kullandığı renderToString () yöntemi yavaş ve eşzamanlıdır. Bu, sunucuyu daha fazla yük altına alır ve sunucudan gelen ilk yanıt, geleneksel React Uygulaması'ndan itibaren planlanan HTML'den daha geç gelir.

Uygulama ilk olarak `` pencere '' ve `` belge '' nin tanımlanmadığı bir Düğüm ortamında çalışacağı için çok dikkatli olmanız gerekir. Bunları `componentDidMount` dışında veya` if (typeof window! = 'Undefined') `olmadan kullanmamanız gerekir

Ancak SSR'nin neden olduğu karmaşıklıkların gümüş astarı, Next.js. gibi araçlarla düzeltilebilmesidir.

Kek üzerine krema? - Artık sayfa yüklerimizi daha hızlı bir şekilde yapmakla kalmayıp, takımlar arasında hiç bitmeyen tartışmalar da durdu. Yani bizim için tipik bir kazan-kazan durumu;)

Sadece teknik sorunları çözmekle kalmayıp aynı zamanda çözümünüzle ilgili müşteri geri bildirimlerini anında görebileceğiniz bir ekipte çalışmak ister misiniz? Sizi teknede bulundurmak isteriz. Careers@pickyourtrail.com adresine bir e-posta gönderin, sizinle iletişime geçelim. Ayrıca, gezilere çıkmak için bekleyen wanderlusts için Pickyourtrail'i ziyaret edin ve mutlu tatillerinizi planlamaya başlayın!