Hızlı ve Ölü: Sayfa Hızınız Çok mu Yavaş?

Sayfa hızı sadece önemli bir konu değil: üzerinde 'TEHLİKE' yazan büyük kırmızı nükleer düğme. Muhtemelen internetteki en büyük dönüşüm katili.

Herkesin alıntıladığı istatistik, yükleme sürenizin 3 saniyenin altında olması gerektiğidir. “Yüklenmesi 3 saniyeden uzun sürerse insanların yüzde kırkı bir web sitesini terk eder” – bunu duydunuz, değil mi?

Ne yazık ki, işler asla bu kadar basit değildir.

Yavaş ve Sabit Yarışı Kaybeder

Birçok pazarlamacı hala hızın önemli olmadığını düşünüyor. Hızlı tavşanın bir yarışın ortasında şekerleme yaptığı, yavaş ama kararlı kaplumbağanın bitiş çizgisine ilk önce ulaşmasına izin verdiği ve insanların sabırlı olduğunu söyledikleri tavşan ve kaplumbağa hikayesini hatırlıyorlar.

İnsanlarla gerçekten hiç tanışmadıklarını varsayabiliriz, çünkü tanışmış olsalardı, 'yavaş ve istikrarlı' internetin yolu olmadığını bilirlerdi.

Sonuçta bunlar Breaking Bad'in Netflix'te arabelleğe alınması çok uzun sürdüğünde şikayet edenlerle aynı kişiler ve Walter White'ın hikayesine sizin satış sayfanızdan çok daha fazla yatırım yapıyorlar.

3 saniyelik çalışma 2011'de yapıldı ve izleyicilerinizin beklentileri, dikkat süreleri kısaldıkça daha da arttı. Mobil taramanın büyümesi ve her zaman güvenilir olmayan veri bant genişliği ile sorun daha da büyüdü.

Bu, sattığınız her şey için geçerlidir: yeterince hızlı yüklenmezse müşterileriniz sıkılır ve başka yerlerden alışveriş yapar.

Peki, bu ne anlama geliyor? 3 saniye yeterince hızlı değilse, nedir?

Geleceğin peygamberi Avril Lavigne'in sözleriyle, 'karmaşık'. Rakamları konuşalım.

Hız İstatistikleri

Daha 2018'de, insanların internette nelerden hoşlandığını bilen bir şirket olan Google, sayfa hızını sıralama algoritmasının bir parçası haline getirdi. 2019'da daha fazla test gerçekleştirdiler ve bu günlerde, mobil kullanıcıların %53'ünün 3 saniyeden daha uzun süre beklemek zorunda kaldıklarında bir sayfayı terk edeceklerini gösterdiler - bu daha da büyük bir trafik kaybı.

Bu, mobil kullanıcıların %47'sinin 2 saniyeden fazla beklemeye zorlandıklarında bir sayfayı terk edeceğini tespit eden yakın tarihli bir Diginow araştırması tarafından desteklendi.

Sayfanız ne kadar yavaşsa, hemen çıkma oranınız o kadar yüksek olur:

Bu önemli. Çok fazla. Niye ya?

Potansiyel müşterileriniz, tıklamaya karar vermeden önce sayfanıza bir kez bile bakmadılar. Mesajlaşma yok, pazarlama yok, hiçbiri onların gözüne çarpmadı. Muhteşem sayfa tasarımınız? Mükemmel manşet, o ağız sulandıran kopya mı?

Çalışmamaları şart değil. Demek ki hiç görülmediler bile. Tıklamalarınız birkaç saniye uğruna boşa gidiyor.

Acımasız? Kesinlikle. Fakat hayat bu. Kaplumbağa ve Tavşan zamanında etrafta yırtıcılar olsaydı, işler daha farklı biterdi. Hare emniyete gidene kadar kaplumbağa çorbası hala sıcak olurdu. İnternetteki en büyük yırtıcı, potansiyel müşterilerinizin can sıkıntısı eşiğidir. Ve siz daha kapıdan çıkmadan trafiğinizin %53'ünü kapıyor.

Bu her cihaz için geçerlidir. 2017 yılında yapılan bir Akamai araştırması, 100 ms'lik bir yavaşlamanın bile dönüşümlere masaüstünde %2,4 ve mobilde %7,1 oranında zarar verebileceğini gösterdi:

Bir saniyenin gerçek bir kesri: 100ms. Kulağa çok fazla gelmiyor ve bundan daha da az. Bu hızlı deneyi deneyin: farenizi tıklayın. Yaptın mı? İyi.

Bu tek tıklama ve sadece tıklama sizi yaklaşık 250 ms sürdü. İki buçuk kat daha uzun. Bu küçük miktardaki hız artışı, dönüşümlerin artmasına neden oldu. Burada iyi haberler var.

İnsanlar sayfa hızının ne kadar önemli olduğunu bildiklerinden, sayfalarınızın ne kadar hızlı olduğunu test etmenize yardımcı olacak birçok araç ortaya çıktı. Google'ın Page Speed ​​Insights'ı muhtemelen en iyi bilinenidir, ancak GT Metrix ve Pingdom dahil olmak üzere birkaç tane var.

Bu ücretsiz araçlar, URL'nizi girmenize olanak tanır ve size bir dizi en iyi uygulama tavsiyesine göre nasıl puan aldığınızı gösterir. Ne yaptığınızı görecekler ve sayfa hızı kutularından kaç tanesini işaretlediğinizi derecelendirmek için size 100 üzerinden bir puan verecekler. Bu harika olurdu… herkesin onları yanlış kullanması dışında.

Bir Sayfa Çok Hızlı Olabilir mi?

İster inan ister inanma… evet. Beni yanlış anlama – sihirli bir sayı yok. Ancak sayfa hızı sadece hız ile ilgili değildir. O da sayfayla ilgili.

Bu Akamai anketi, en yüksek dönüşümü 1,8 saniyede yüklenen sayfalarda buldu - ancak 1,8 saniyenin "özel" olması nedeniyle değil. 1.8 saniye en hızlı olduğu için, insanlar genellikle sitelerini dönüştürmek için ihtiyaç duydukları tüm şeyleri içerirken yapabilirler. Satış videonuzu kaldırarak sayfanızı kesinlikle daha hızlı hale getirebilir ve Sayfa Hızı Öngörülerinde daha iyi puanlar alabilirsiniz… ancak bu daha fazla para kazanmanıza yardımcı olmaz.

Bu nedenle, sayfa hızı ölçüm araçları geliştirmek için neler yapabileceğinizi görmek için faydalı olsa da, mükemmel bir 100'e ulaşma konusunda takıntılı olmamalısınız. Potansiyel müşterinizi dönüştürmek için sayfanızın ne yapması gerektiğini çözmeli ve ardından optimizasyona kafayı takmalısınız. bu mümkün olduğunca.

Sayfanızı daha çok tavşan gibi ve kaplumbağa gibi daha az hareket ettirmenin 4 iyi yolu.

Görüntüleri Optimize Edin

Bir resim bin kelimeye bedel olabilir, ancak yükleme hızı açısından buna birkaç sıfır ekleyebilir ve yine de yetersiz kalabilirsiniz. Herkes sayfalarının güzel olmasını ister, ancak gerçek şu ki - bir dağın tepesindeki bir adamın muhteşem yüksek çözünürlüklü arka planı, sayfanızı bir bataklıktan sürükleniyormuş gibi hareket ettiriyor.

Ve bu sefer, gerçekten sadece 'büyük' ​​resimle ilgili değil. Her ürün çekimi, her referans ve vesikalık fotoğraf… hepsi yüke bir yenisini ekliyor. Neyse ki, resimlerinizin süzülen kartal gibi biraz daha fazla ve ölü bir gergedan gibi biraz daha az hareket etmesini sağlamak için yapabileceğiniz iki şey var.

Kayıpsız Optimizasyon Kullanın

Görüntüler, gerçekten ihtiyacınız olmayan bir sürü veri içerir. Evet, on altı milyon piksel olduğunu söylemek kulağa hoş geliyor ama insan gözü bu kadarını algılayamaz. Açıkçası bu manuel bir iş değil, ancak bunu sizin için yapacak birçok araç var.

Gerçek Boyutları Kullan

Tarayıcılar akıllı oldukları için bilinmemektedir. Optimizasyon yapmasanız bile resimlerinizin sayfayı çok fazla etkilemeyeceğini düşünebilirsiniz. Elbette, büyük resimler olarak başladılar, ancak sayfada onları küçük olacak şekilde boyutlandırdınız!

Üzgünüm, Virginia. Böyle çalışmıyor. Tarayıcı, yüklenene kadar görüntünün ne kadar büyük olması gerektiğini çözmez. Yani bu 6MB görüntü? Bir potansiyel müşteri sayfanıza her geldiğinde, her şeyi yüklüyor ve ardından 250×250 paragraf resmi olacak şekilde ölçeklendiriyor. Bunun yerine, resimlerinizin sitenizde ne kadar büyük olacağını hesaplayın. Önce ölçeklendirin – Photoshop veya PixelMator gibi daha ucuz bir program kullanabilirsiniz – ardından bunları sunucunuza yükleyin.

Bu şekilde, tarayıcı yalnızca ihtiyacı olanı yükler ve sayfanız daha hızlı hareket eder.

Sunucu Yanıt Süresi

Sunucu Yanıt Süresi, sunucunuzun HTML'yi teslim etmeye başlamasının ne kadar sürdüğüdür. Tarayıcının açılıp kapıya vurması ile sunucunun kasvetli bir şekilde ortaya çıkması, elinde bir fincan kahve, “Ne?” demesi arasındaki zamandır. İdeal değer 200 ms'den azdır - bu, bir tıklama duyduktan sonra parmağınızın fare düğmesinden kalkması için geçen süredir. 2 saniyelik bir SRT'nin olağandışı olmadığı bir dünyada - olması gerekenden on kat daha yavaş - bu oldukça agresif bir hedeftir.

Sunucunuzu yavaşlatabilecek birçok şey var. Yavaş uygulama mantığı, yavaş veritabanı sorguları, yavaş yönlendirme, kaynak ve bellek yetersizliği… liste uzayıp gidiyor ve ticari barındırma kullanıyorsanız, sonunda bu konuda yapabileceğiniz pek bir şey yok.

CDN, bir içerik dağıtım ağıdır. Tüm dünyada birden fazla veri merkezinde bulunan bir sunucu ağı. Bu, tek bir konumdan sunulmak yerine, sayfanızın eksiksiz bir sunucu ağından sunulması anlamına gelir - müşterinize en yakın olanı yükü alır. Ve CDN'ler içeriği hızlı bir şekilde sunmak için tasarlandığından, sunucuları da bu amaç için özel olarak tasarlanmıştır. CDN, kendi başınıza oluşturabileceğiniz bir şey değildir (arkanızda gerçekten birinci sınıf bir teknik ekibiniz yoksa), ancak birçok ticari sağlayıcı mevcuttur.

Önbelleğe almak

Partnerinin arama geçmişine bakmasına izin veren herkesin size söyleyebileceği gibi, tarayıcıların endişe verici derecede uzun bir hafızası vardır. Ve bunu kendi yararına kullanabilirsin.

Esasen tarayıcıya şu söylenebilir: “Web sitesinin bu kısmı mı? Bu değişmeyecek. Sadece bir dahaki sefere hatırla." Bu, çok fazla değişmeyen arka plan resimleri gibi şeyler için tarayıcıya onları hatırlamasını söyleyebilirsiniz. İzleyiciniz geri geldiğinde, hafızasında zaten bir kopyası olacağından, o içeriği tekrar indirmesine gerek kalmayacak. Bu da, birisi yeniden hedefleme reklamlarınızdan birine tıkladığında, sayfanın ilk geldiğinde olduğundan daha hızlı yüklendiği anlamına gelir. Ki bu yapmak için oldukça kaygan bir izlenim. HTTP başlığında sitenizdeki her kaynak için önbellek sürelerini ayarlayabilirsiniz. Burada nasıl yapılacağına dair bir açıklama var, ancak uyarılırsınız, biraz teknik olur.

(Profesyonel ipucu: Bu, sayfa hızı metriklerine çok fazla odaklanmanın sizi yanıltabileceği alanlardan biridir. Çoğu öğede güzel ve uzun bir önbellek istersiniz. Ancak bazılarında – örneğin, analizleriniz gibi – gerçekten istemezsiniz. t. Ancak metrik denetleyiciler farkı söyleyemez ve sizi hepsi için aynı şekilde işaretler.)

Kodu küçült

İyi kod yazıldığında, biraz şöyle görünecek:

Herhangi bir yazı gibi, dili bildiğinizde kodun okunması kolay olmalıdır. Böylece değişkenlerinize kolay anlaşılır isimler veriyorsunuz. İşlevlerinizi boşlukla ayırırsınız. Eylemleri yeni satırlara koyarsınız. Bir insan böyle bir koda baktığında onu okuyabilir.

Bilgisayarlar bunların hiçbirini umursamıyor. 'a' yapacağında 'RevString' olarak adlandırılacak bir işleve ihtiyaçları yoktur. 'RevString' dokuz kat daha fazla karaktere sahiptir, bu nedenle yarattığı tek fark, onları okumanın 9 kat daha uzun sürmesidir.

Bu, HTML'nizdeki her gereksiz karakter, her satır sonu, her bir beyaz boşluk anlamına gelir - bunların tümü, sayfanızı okurken bilgisayarın yavaşlamasına neden olur.

Sonunda insanlığın kontrolünü ele geçirmek için ayağa kalktıklarında, belki bu iyi bir şey olur. Ama bugün, savaşı rahat bir şekilde bitirmene izin verecek sığınağı inşa edebilmek için daha fazla satış yapmak istiyorsun, amirite?

(Ve kabul edelim, müstakbel derebeylerimizin hayatlarını biraz daha kolaylaştırmak artık sadece iyi bir şey olabilir) Bu yüzden sayfanızın olabildiğince hızlı okunabilmesi için kodunuzun küçültülmesi gerekiyor, bu da temelde gördüğünüzü çevirmek anlamına geliyor. yukarıda daha çok buna benzer bir şeye:

Bu bize pek fayda sağlamaz ama bir bilgisayar, Arnie'nin bir polis karakolunu parçalamasından daha hızlı yırtar.

Daha Hızlı Sayfaları Kolay Yoldan Alın

Tabii ki, daha iyi sayfa hızı elde etmenin teknik ayrıntılarını (ve sağlayabileceği dönüşümlerdeki büyük gelişmeyi) okumak bir şeydir. Aslında bunu kendin yapmak tamamen farklı bir teklif.

Ama daha kolay yollar var.

Arka cebinde bir teknoloji ekibi olmasa bile herkesin yıldırım hızında yükleme sürelerine sahip olmasını sağlamak için Convertri'nin sayfalarını güçlendiren Hızlandırılmış Sayfa Teknolojisini geliştirdik.

Yukarıda ele alınan dört noktanın yanı sıra, sayfa ön oluşturma, satır içi kodlama, sunucu isteklerini minimuma indirir, kaynak koruması ve GZIP sıkıştırmasının yanı sıra sayfalarınızın daha hızlı hareket etmesini sağlamak için daha birçok ince ayar ve optimizasyon kullanır. başka.

Ve testlerimiz için metriklere güvenmiyoruz. Resimler, videolar ve formlarla gerçekten kullanacağınız türden bir açılış sayfası oluşturarak gerçek dünya deneyleri yapıyoruz. Sayfalarımızın gerçek dünyadaki performansının elimizden geldiğince hızlı olduğundan emin olmak için bu sayfayı çeşitli oluşturucularda hazırlıyoruz ve yükleme sürelerini Pingdom kullanarak test ediyoruz.

Sonuçlar… Pekala, övünmeyi sevmiyoruz…

(Bu, övünmeyi sevdiğimiz bir yalandır.)

Basitçe söylemek gerekirse, Convertri'deki satış sayfalarınızın başka herhangi bir yerde oluşturulan aynı sayfadan daha hızlı olmasını sağladık.

Ve en iyi yanı, bunu kendin deneyebilirsin.

İnternete hızlı katılın, internet ölü değil.