Thor Render Engine™ ile tanışın: Instapage'in Daha Hızlı Sayfa Oluşturma Sistemi

Benim adım, Instapage'de Kıdemli Mühendislik Direktörü olan Piotr Dolistowski. Polonya'nın Varşova kentinde proje koordinasyonu ve insan yönetimi dahil olmak üzere şirketin teknik şubesine liderlik ediyorum. Bugünkü makaledeki her şey, ekibimin Instapage müşterileri için daha hızlı bir sayfa oluşturma sistemi oluşturma çabalarının doğrudan bir sonucudur.

Sayfa yükleme hızının kullanıcı katılımı ve hemen çıkma oranı üzerinde doğrudan etkisi olduğu dijital pazarlamacılar için bir sır değil. Google ve diğerleri, en az birkaç yıldır dijital pazarlamada çalışan herkes için sayfa hızını bir vurgu noktası haline getirdi, bu nedenle 2019 için yeni bir şey değil.

Bunu daha önce birçok kez öne çıkardık, ancak Google'ın araştırması, yavaş yüklenen sayfalarda hemen çıkma oranları yükselirken kullanıcı etkileşiminin düştüğünü gösteriyor:

Bu nedenle ekibimiz size Thor Render Engine™'i sunmak için yorulmadan çalıştı. Oluşturma motoru, yeni sayfa oluşturucumuz ve tıklama sonrası açılış sayfalarınızın hiçbir çaba harcamadan inanılmaz derecede hızlı yüklenmesini sağlayan tamamen duyarlı sayfa deneyimlerimizin bir parçasıdır.

Instapage'in yeni oluşturma sisteminin ayrıntılarına girmeden önce, tıklama sonrası açılış sayfalarının yavaş yüklenmesinin neden dönüşümler için zararlı olduğunu inceleyelim.

Yavaş yüklenen sayfaların dönüşümler üzerindeki etkisi

Yavaş yüklenen bir sayfa ne kadar yavaş? Mobil sayfa yükleme süresindeki her saniyelik gecikme, dönüşümlerde bir düşüşe yol açar:

Tercüme: Çevrimiçi kullanıcıların sayfanızın yüklenmesi için çok uzun süre bekleme sabrı yoktur. Bu nedenle, hemen yüklenmezse sayfadan ayrılırlar. Bu, hemen çıkma oranını artırır, kullanıcı katılımını azaltır, genel kullanıcı deneyimi için kötüdür ve sonuçta dönüşümleri sınırlar.

Akamai, en iyi çevrimiçi perakendecilerden 10 milyar kullanıcı ziyareti hakkında veri topladıktan sonra aşağıdaki öngörüleri elde etti:

• Tüketicilerin yarısı ürün ve hizmetlere akıllı telefonlarından göz atarken, beşte biri gerçekten cep telefonlarından satın alıyor.
• Web sitesi yükleme süresindeki 100 milisaniyelik bir gecikme, dönüşüm oranlarına %7 zarar verebilir
• Web sayfası yükleme süresindeki iki saniyelik gecikme, hemen çıkma oranlarını %103 artırır
• Mobil site ziyaretçilerinin %53'ü, yüklenmesi üç saniyeden uzun süren bir sayfadan ayrılacak
• Cep telefonundan alışveriş yapanların hemen çıkma oranları en yüksekken, tabletten alışveriş yapanların hemen çıkma oranları en düşüktü

Peki, tıklama sonrası açılış sayfalarınızın hızlı yüklenmesini nasıl sağlayabilirsiniz? Google'ın PageSpeed ​​Insights'ı yardımcı olabilir, ancak ne kadar?

Google'ın PageSpeed ​​Insights raporu, bir sayfanın hem mobil hem de masaüstü cihazlarda hızlı mı, ortalama mı yoksa yavaş mı olduğunu gösteren bir sayfanın performansı hakkında raporlar. Ayrıca, o sayfanın nasıl iyileştirilebileceğine dair öneriler de sunar:

Ancak teknik bir geçmişiniz yoksa sayfa hızı bilgileri kafanızı karıştırabilir. Hangi First Contentful Paint (FCP) ve First Input Delay (FID) metriklerinin aklınızın ucundan geçebileceğini anlamak.

Instapage'in Thor Render Engine™' ine girin .

Thor Render Engine™'in arkasındaki ayrıntılar

Tüm Instapage tıklama sonrası açılış sayfalarının hızlı yüklenmesini sağlamak için Thor Render Engine™'i geliştirdik.

Bu, tıklama sonrası açılış sayfalarının her açıdan tamamen yeniden yazılması anlamına geliyordu - sayfalarınızın arka ucundaki her şeyin anında yüklenmesini sağlamak için HTML yapısını, JavaScript ve CSS Yeniden Düzenlemesini ve CSS Duyarlılığını değiştirerek.

Tüm bu değişikliklerin en iyi yanı, Thor Render Engine™ sayfalarınızın ışık hızında olmasını sağlamak için sahne arkasında sessizce çalıştığı için hiçbir şey yapmanıza gerek kalmamasıdır .

Sayfaların daha hızlı yüklenmesi için ne yaptığımızı görmek için değişiklikleri inceleyelim.

HTML yapısı

Kaynak önceliklendirmesinden başlayarak, sayfa oluşturma sistemini HTML açısından daha hızlı hale getirmek için çok şey yapıldı.

Kaynak önceliklendirme

Çok sayıda kullanılmayan, belirsiz veya uygun olmayan kodun tıklama sonrası açılış sayfalarını çıkardık, bu da net, hızlı oluşturma işaretlemesiyle sonuçlandı.

Yeni HTML yapısı, tüm kaynakların doğru sırada yüklenmesini garanti eder. Sayfa stilleri (yazı tipi stilleri hariç) başlık bölümüne eklenmiştir, çünkü bundan sonra sayfalar CSS stil sayfalarını kullanmaktan daha hızlı yüklenir.

Duyarlılık artık CSS veya JavaScript'te ek kesme noktalarına ihtiyaç duymuyor çünkü sayfalar hızlı yüklenecek ve ek kod olmadan harika görünecek. Ayrıca, tüm komut dosyaları, sayfa oluşturmayı engellememeleri için sayfa gövdesinin altına yerleştirilir. Kritik komut dosyaları ve kaynaklar (örneğin, yazı tipleri) tarayıcının ön yükleme yeteneklerini kullanır; bu, sayfa oluşturulurken engellenmediği anlamına gelir. Ayrıca, sayfanın head etiketine eşzamanlı JavaScript yerleştirilmez.

Görüntü ve video tembel yükleme

Görüntüler ve videolar oluşturmayı engellemese de, sayfada birden fazla mevcut olduğunda, bant genişliği çok fazla istekle, özellikle de büyük görüntülerle tıkanabilir. Bu, üst kattaki resimler ile ekranın alt kısmındaki ve ziyaretçinin göremediği resimler aynı anda yüklendiğinden, kötü kullanıcı deneyimine yol açabilir.

Sorunu çözmek için aşağıdaki optimizasyonları sunduk:

• Ekranın üst kısmındaki resimler daha yüksek önceliğe sahip olarak yüklenir — indirme işlemi hemen başlar, böylece sayfa etkileşime girmeden önce bile görünür olurlar.
• Ekranın altındaki resimler ve videolar tembelce yüklenir - indirme işlemi, kullanıcı kaydırdığında tetiklenir. Gri kutular, henüz yüklenmemiş görüntüler için yer tutucu olarak kullanılır.
• Kullanıcının bu gri kutuları görmesini önlemek için görüntüler, görünüm alanına kaydırıldığında gerçekten yüklenir. Ancak görüntü alanının alt kısmına 400 piksellik bir mesafede kaydırıldıklarında. Görünüm alanına girdiklerinde zaten yüklenmişlerdir.
• Aynı kural , iframe'lere yüklenen videolar için de geçerlidir .

Bunu gerçekleştirmek için, küçük kod boyutu ayak izi ile tembel yüklemeyi süper verimli hale getiren IntersectionObserver'ın son teknoloji API'sinden yararlandık:

JavaScript yeniden düzenleyicisi

JavaScript refactor aşağıdaki optimizasyonları içeriyordu:

1. Modüler mimari: Tıklama sonrası açılış sayfalarındaki tüm JavaScript kodları, belirli widget'ların özellikleriyle ilgilidir. Kodumuzu, her biri belirli bir özellik için bir kod içeren birden çok pakete böldük. Bu nedenle, bir kullanıcı yalnızca resimler ve bağlantılar içeren bir sayfa tasarladığında, sayfanın hızlı yüklenmesini sağlamak için Form veya Popup widget'ları için hiçbir kod yüklenmeyecektir.
2. Süper hafif: Eski kitaplıkları kaldırdık ve tüm kod mimarisini yeniden tasarladık, bu, sayfadaki toplam JavaScript boyutunu 1 MB'den yaklaşık 200 kB'ye (yani 5 kat daha az!) yukarıda açıklanan modülerleştirme sayesinde.
3. All Async: JavaScript oluşturmayı engellediğinden, tüm komut dosyası içe aktarmalarını BODY etiketinin altına taşıdık. Bu, tarayıcının komut dosyaları yürütülmeden önce tam sayfayı oluşturmasına ve ziyaretçinin anlamlı içeriği daha önce görmesine olanak tanır. Etkileşim sağlayan komut dosyaları, yalnızca sayfanın o bölümüyle etkileşime girmeye başladıktan sonra yüklenecek ve yürütülecektir. Bu, özellikle düşük performanslı ve çoğu zaman internet bağlantısı zayıf olan mobil cihazlarda çok iyi bir deneyim sağlar.

CSS yeniden düzenleyicisi

Ayrıca stil sayfalarımızın yeniden kullanılabilir, okunabilir ve hafif olması için gereksiz üçüncü taraf kodunu kaldırarak tüm CSS stil sayfalarımızı yeniden yazdık. Ayrıca, CSS kodunu mümkün olduğunca yeniden kullanmak için genel CSS sınıfları kullanıyoruz.

Ayrıca GPU hızlandırmalı yalnızca CSS animasyonlarını da uyguladık. CSS yığınımızdaki en önemli değişiklik, piksel yerine göreli "rem" birimini tanıtmaktı. Bu sayede, tıklama sonrası açılış sayfaları artık akıllı telefonlardan 4k masaüstü ekranlarına kadar her cihaz boyutunda sorunsuz bir şekilde ölçekleniyor.

CSS duyarlılığı

Tıklama sonrası açılış sayfalarını duyarlı hale getirmek için "vw" birimiyle birlikte "rem" kullanıyoruz. Bu, tıklama sonrası açılış sayfası 768 ile 1200 piksel genişlik arasında ve 400 piksel genişliğin altına küçültüldüğünde cihaz çözünürlüklerinde iki boşluk olduğu anlamına gelir. Diğer tüm çözünürlüklerde, ana içerik, oluşturucuda olduğu gibi sabit bir genişlikte kalır. Sabit genişlik değeri, cep telefonları için 400 piksel ve masaüstü için 1200 pikseldir.

“Rem” birimleri bize widget konumunu ve boyutunu sorunsuz bir şekilde yeniden hesaplama yeteneği verir. Ayrıca, bunun gerçekleşmesi için JavaScript kullanmamız gerekmediği anlamına gelir.

Özetle:

• 400 pikselin altındaki içerik, ekran genişliğine uyacak şekilde otomatik olarak ölçeklenir
• 400 piksel ile 767 piksel arasında içerik genişliği sabittir
• 768px mobil görünümden masaüstü görünümüne geçiş
• 768 pikselden 1200 piksele kadar içerik otomatik olarak ekran genişliğine uyacak şekilde ölçeklenir
• 1200 pikselin üzerinde içerik sabittir

Thor Render Engine™ hız testi örneği

İnsanların tıklama sonrası açılış sayfanızı (masaüstü, mobil veya tablet) nasıl görüntülediğini asla bilemeyeceğiniz için, sayfa deneyiminin tamamen duyarlı olması önemlidir. Thor Render Engine™ çözümü, tüm çözünürlüklerde tamamen duyarlıdır.

Şimdi yeni oluşturma motorunu eski sayfa oluşturucumuzla karşılaştıralım. Aşağıdaki resimler, farklı URL ile de olsa aynı sayfanın sayfa hızı sonuçlarını göstermektedir. (Not: Bu URL'ler yalnızca test amaçlı olduğundan sayfalar artık etkin değildir):

Eski Instapage sayfası işleme sonuçları:

Thor Render Engine™ sonuçları:

İlk testte 56 puan, ikinci testte 95'e çıkarmak, sayfa yükleme hızında %58,9'luk bir artış!

Sayfa yükleme hızı karşılaştırması

Thor Render Engine™ ile tüm değişiklikleri özetledikten sonra, Instapage'in sayfa yükleme hızının rekabete göre nasıl olduğunu görelim.

Bu sayfanın hızını (ekran görüntüsü yalnızca ekranın üst kısmında gösterilir) bir 3G bağlantısında test ettik:

Sayfanın yüklenmesi ne kadar sürer:

• Eski Instapage sayfa oluşturma sistemiyle (üst sıra): Yüklemeye başlamak için 10,5 saniye
• Thor Render Engine™ (orta sıra): 5 saniye içinde sayfa %98 yüklenir
• Rakibi kullanma (alt sıra): Yüklemeye başlamak için 8 saniye

4G bağlantısında, işte sonuçlar:

• Eski Instapage sayfa oluşturma sistemiyle: Yüklemeye başlamak için 4,5 saniye
• Thor Render Engine™: 3.5 saniye içinde tamamen yüklenir
• Rakibi kullanma: Yüklemeye başlamak için sadece 4,5 saniye

Thor Render Engine™ ile sayfaların daha hızlı yüklenmesinin keyfini çıkarın

Sayfa hızı, kullanıcı deneyiminde ve nihayetinde dönüşümlerinizde önemli bir rol oynar. Sayfa yükleme süresi geciktiğinde, yalnızca yüksek bir hemen çıkma oranını riske atmakla kalmaz, aynı zamanda süreçte hüsrana uğramış kullanıcılar yaratırsınız.

Thor Render Engine™ ile, artık tıklama sonrası açılış sayfalarınızın sizden herhangi bir çaba harcamadan anında yükleneceğini garanti edebiliyoruz. Bugün bir Instapage Enterprise demosu için kaydolun ve farkı kendiniz yaşayın.