Thor Render Engine ile tanışın: Şimşek Hızında Sayfalar Yaratın

Adım Piotr Dolistowski, Instapage'de Kıdemli Mühendislik Direktörü. Proje koordinasyonu ve insan yönetimi dahil olmak üzere şirketin Polonya'nın Varşova kentindeki teknik şubesini yönetiyorum. Bugünün makalesindeki 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 bir etkisi olduğu dijital pazarlamacılar için bir sır değil. Google ve diğerleri, en az birkaç yıldır dijital pazarlama alanında ç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 kullanıcı etkileşiminin düştüğünü ve hemen çıkma oranlarının arttığını gösteriyor:

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

Instapage'ın yeni oluşturma sisteminin ayrıntılarına dalmadan önce, tıklama sonrası açılış sayfalarının yavaş yüklenmesinin dönüşümler için neden 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 düşüşe neden olur:

Tercüme: çevrimiçi kullanıcıların sayfanızın yüklenmesini çok uzun süre bekleyecek sabrı yoktur. Yani anında 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ç olarak 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 bilgileri elde etti:

• Tüketicilerin yarısı ürün ve hizmetlere akıllı telefonlarından göz atarken, yalnızca beşte biri cep telefonlarından satın alıyor.
• Web sitesi yükleme süresindeki 100 milisaniyelik gecikme, dönüşüm oranlarını %7 oranında azaltabilir
• 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üşük seviyedeydi

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'ı, bir sayfanın performansını raporlayarak bir sayfanın hem mobil hem de masaüstü cihazlarda hızlı mı, ortalama mı yoksa yavaş mı olduğunu gösterir. Ayrıca, bu sayfanın nasıl geliştirilebileceğine dair öneriler de sunar:

Ancak teknik altyapınız yoksa sayfa hızı bilgileri kafanızı karıştırabilir. Hangi İlk Zengin İçerikli Boyama (FCP) ve İlk Giriş Gecikmesi (FID) ölçümlerinin sizi aşabileceğini anlamak.

Instapage'ın 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 yönüyle 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üzenlemeyi ve CSS Duyarlılığını değiştirmek.

Tüm bu değişikliklerin en iyi yanı, hiçbir şey yapmanıza gerek olmamasıdır çünkü Thor Render Engine™, sayfalarınızı yıldırım hızında yapmak için perde arkasında sessizce çalışır.

Daha hızlı yüklenen sayfalar için neler yaptığımızı görmek için değişiklikleri inceleyelim.

HTML yapısı

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

Kaynak önceliklendirme

Tıklama sonrası açılış sayfalarını kullanılmayan, belirsiz veya optimal olmayan birçok koddan arındırdık ve sonuç olarak net, hızlı oluşturulan bir biçimlendirme elde ettik.

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

Sayfalar hızlı yükleneceği ve ek kod olmadan harika görüneceği için, yanıt verebilirlik artık CSS veya JavaScript'te ek kesme noktalarına ihtiyaç duymaz. Ayrıca, tüm komut dosyaları sayfanın işlenmesini engellememeleri için sayfa gövdesinin altına yerleştirilmiştir. Kritik betikler ve kaynaklar (ör. yazı tipleri), tarayıcı ön yükleme yeteneklerini kullanır; bu, sayfa işlenirken engellenmediği anlamına gelir. Ayrıca, sayfanın baş etiketine senkronize JavaScript yerleştirilmez.

Görüntü ve video geç yükleniyor

Görüntüler ve videolar oluşturmayı engellemese de, sayfada birden fazla olduğunda, özellikle büyük görüntülerde olmak üzere çok fazla istek nedeniyle bant genişliği tıkanabilir. Üst kattaki resimler, ziyaretçi tarafından görülemeyen, ekranın alt kısmındaki resimlerle aynı anda yüklendiğinden, bu durum kötü bir kullanıcı deneyimine yol açabilir.

Sorunu çözmek için aşağıdaki optimizasyonları kullanıma 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şimli hale gelmeden önce görünür hale gelirler.
• Ekranın alt kısmındaki resimler ve videolar yavaş yükleniyor — indirme işlemi, kullanıcı bunları kaydırdığında tetikleniyor. Gri kutular, henüz yüklenmemiş resimler için yer tutucu olarak kullanılır.
• Kullanıcının bu gri kutuları görmesini engellemek için, görüntüler aslında görüntü alanına kaydırıldıklarında yüklenir. Ancak 400px'lik bir mesafede kaydırıldıklarında alt görünüm alanına kaydırılırlar. Görüntü 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, geç yüklemeyi küçük kod boyutu ayak iziyle süper verimli hale getiren IntersectionObserver'ın son teknoloji API'sinden yararlandık:

JavaScript yeniden düzenleyicisi

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

1. Modüler mimari: Tıklama sonrası açılış sayfalarındaki tüm JavaScript kodları, belirli pencere öğelerinin özellikleriyle ilgilidir. Kodumuzu, her biri belirli özellik için bir kod içeren birden çok pakete ayırdık. Bu nedenle, bir kullanıcı yalnızca resimler ve bağlantılardan oluşan bir sayfa tasarladığında, Sayfanın hızlı yüklenmesini sağlayan 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'tan yaklaşık 200 KB'ye (yani 5 kat daha az!) düşürmemize olanak tanırken, tipik bir sayfa 100 KB'den daha az yüklenir yukarıda açıklanan modülerleştirme sayesinde.
3. Tümü Zaman Uyumsuz: JavaScript oluşturmayı engellediğinden, tüm komut dosyasını içe aktarma işlemlerini 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 daha önce anlamlı içeriği 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üklenir ve yürütülür. Bu, özellikle düşük performanslı ve genellikle zayıf bir internet bağlantısına sahip mobil cihazlarda çok iyi bir deneyim sağlar.

CSS yeniden faktörü

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ını kullanıyoruz.

Ayrıca GPU hızlandırmalı yalnızca CSS animasyonları uyguladık. CSS yığınımızdaki en önemli değişiklik, piksel yerine göreli birim olan "rem"i getirmekti. Bu sayede, tıklama sonrası açılış sayfaları artık akıllı telefonlardan 4k masaüstü ekranlara 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" birimi ile birlikte "rem" kullanıyoruz. Bu, tıklama sonrası açılış sayfası 768 ile 1200 piksel genişliğinde ve 400 piksel genişliğinin altında ölçeklendiğinde cihaz çözünürlüklerinde iki boşluk olduğu anlamına gelir. Diğer tüm çözünürlüklerde, ana içerik tıpkı 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 parçacığın konumunu ve boyutunu sorunsuz bir şekilde yeniden hesaplama yeteneği verir. Ayrıca, bunun gerçekleşmesi için JavaScript kullanmak zorunda olmadığımız anlamına da gelir.

Özetle:

• 400 pikselin altındaki içerik, ekran genişliğine sığacak şekilde otomatik olarak ölçeklenir
• 400px ile 767px arasında içerik genişliği sabittir
• 768px mobil görünümden masaüstü görünümüne geçer
• 768 pikselden 1200 piksele kadar olan içerik, ekran genişliğine sığacak şekilde otomatik olarak ö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ı oluşturma sonuçları:

Thor Render Engine™ sonuçları:

İlk testte 56 puan almak ve 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 yapılan tüm değişiklikleri özetledikten sonra, Instapage'in sayfa yükleme hızının rakiplerine kıyasla nasıl olduğunu görelim.

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

Sayfanın yüklenmesi için geçen süre şu şekildedir:

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

4G bağlantısında sonuçlar şunlardır:

• Eski Instapage sayfa işleme sistemiyle: Yüklemeye başlamak için 4,5 saniye
• Thor Render Engine™: 3,5 saniye içinde tamamen yüklenir
• Rakibi kullanmak: Sadece yüklemeye başlamak için 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. Bir 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 sizin herhangi bir çaba harcamanıza gerek kalmadan anında yüklenmesini garanti edebiliriz. Bugün bir Instapage Enterprise demosuna kaydolun ve farkı kendiniz yaşayın.