Web performansı ve hızı: en iyi teknikler
Yayınlanan: 2021-08-30Yükleme hızı ve web performansı, SEO ve webperf topluluklarında ve daha geniş anlamda E-pazarlama ve E-ticarette herkesin dilinde.
Web performansında danışman ve referans olan Andy Davies'in bize hatırlattığı gibi:
“Bağlam, deneyimi etkiler,
deneyim davranışı etkiler,
davranış, iş gelirlerini etkiler.”
Bu nedenle, ister gelirinizi, ister SEO'nuzu veya her ikisini birden artırmaya çalışıyor olun, hızlı sayfaların kullanıcı deneyiminizin kalitesi için çok önemli olduğunu bilmelisiniz. Hız ayrıca, Sayfa Deneyimi güncellemesinden bu yana hızı hesaba katan Google'a doğru sinyalleri göndermeye yardımcı olur.
Bildiğiniz gibi bir sitenin arama motorlarının beklentilerini karşılamadan önce kullanıcıların beklentilerini karşılaması gerekir. Bu nedenle, görüntüleme hızı ve etkileşim, kaliteli bir kullanıcı deneyimi için, öncelikle etkileşimi ve dönüşümleri teşvik etmek için ön koşulların bir parçasıdır! Örneğin, bir Google araştırmasına göre, İnternet kullanıcılarının %77'sinin satın alma işlemlerini hızlı bir şekilde tamamlamalarını sağlayan bir site veya uygulama üzerinden sipariş vermeye daha meyilli olduğunu unutmayın.
Ancak, ziyaretçilerinize sorunsuz bir gezinme deneyimi ve gerçek bir hız hissi sunmak için hangi teknikler ziyaretçileriniz üzerinde en görünür etkiye sahiptir?
Daha iyi görüntüleme hızı ve etkileşim için optimizasyon kolları tarafından düzenlenen bir kontrol listesi.
Bir sitenin görüntülenme hızını optimize edin
Bir sayfa ne kadar hafif olursa, görüntülenmesi için o kadar az zaman gerekir.
Kaynak optimizasyonuna ek olarak, hız ve kullanılabilirlik hissini artırmak için bir sayfayı oluşturan farklı öğelerin görüntülenme hızını ve boyutlarını ayarlayabilirsiniz. İşte bazı temel teknikler:
- Görüntüleri en verimli biçimlerde sıkıştırma
Yeni nesil WebP (Google tarafından tavsiye edilir) ve AVIF (daha da iyi sonuçlar sunar) biçimleri, optimum görsel kaliteyi korurken görüntülerin ağırlığını JPEG'e kıyasla %50'ye kadar azaltmanıza olanak tanır. Görüntülerin ağırlığının, sayfaların ağırlığının yaklaşık %50'sini temsil ettiğini bilmek, sayfalarınızı hızlandırmak için önemli bir kaldıraçtır. - Medya ve görüntülerin gösterimini farklı ekranlara uyarlayın
Kullanıcının sitenizi cep telefonundan mı yoksa bilgisayardan mı ziyaret ettiğine bağlı olarak medya ve resimlerin boyutunu yeniden boyutlandırın ve tanımlayın. - Sayfa kaynaklarının ağırlığını azaltın
Kodunuzu optimize edin: HTML, JS ve CSS dosyalarının küçültülmesi (gereksiz karakterlerin kaldırılması) ve kaynak sıkıştırma (Gzip ve Brotli biçimleri) ve bazı durumlarda birleştirme, sayfaların ağırlığını azaltmak ve dolayısıyla hızlandırmak için iyi uygulamalardır. tarayıcıdaki görüntü. - Yavaş yüklenme
Bu teknik, tüm sayfayı yüklemek yerine yalnızca ekranda görünenleri yüklemekten ibarettir. Başka bir deyişle, tarayıcı yalnızca ziyaretçinin ekranında görmesi gerekenlerle ilgili olarak kesinlikle gerekli olan çabayı sağlar. - Yazı tiplerini optimize et
Yazı tiplerinizin biçimini optimize edebilirsiniz (örneğin dosya boyutunda %30 ila %50 tasarruf sağlayan WOFF2) ve ayrıca oluşturmayı hızlandırmak için yazı tipi henüz tarayıcı tarafından yüklenmemiş olsa bile metni görüntülemeyi seçebilirsiniz. - Engelleyen kaynakları ortadan kaldırın ve bunları eşzamansız olarak yükleyin
Sayfalarınızın oluşturulmasını engellemekten kaçının: Özellikle CSS (kritik CSS), JS (zaman uyumsuz ve erteleme) ve yazı tipleri (görüntüleme:takas) için kaynakları eşzamansız olarak yüklemeyi tercih edin.
Tabii sayfanın başında bazı kaynaklar elzem olduğu için başka seçeneğiniz yoksa bu kaynakların olabildiğince hafif olması gerekir. - Doğru önbelleğe alma stratejisini benimseyin
Sayfaların kullanıcılarınız için olabildiğince hızlı görüntülenmesini sağlamak için statik öğeleri önbelleğe alın.
Bunu yapmak için, dinamik içeriği ve statik içeriği önceden tanımlamanız ve statik içeriği önbelleğe alma kurallarını tanımlamanız gerekir: ne kadar süreyle ve hangi önbellekte (tarayıcı, kaynak veya CDN).
[Örnek Olay] Google'ın bot taramasını yönetme
Örnek olayı okuyunEtkileşimi iyileştirin: anında yanıt veren sayfalar
Öğelerin tarayıcıda görüntülenme hızına ek olarak, etkileşim yeteneği, kullanıcılarınıza tam bir memnuniyet sağlamak için çok önemlidir.
Aksi takdirde, onları öfkeli tıklamalar, farenin sayfada çılgınca hareket etmesi veya sayfanın çalışıp çalışmadığını kontrol etmek için rastgele kaydırma gibi davranışlara dönüşen hayal kırıklığına maruz bırakırsınız.
En kötü durumda, ziyaretçileriniz bir önceki sayfaya geri dönerler veya Google'da yeni bir arama yapmak için sitenizden tamamen ayrılırlar veya rakiplerinize gidersiniz.
Olumsuz bir deneyim durumunda, İnternet kullanıcılarının %43'ünün bir sonraki alışverişlerinde rakibin sitesine gideceğini unutmayın. Bu nedenle, kendinize hem ziyaretçilerinizi çekmenin hem de ziyaretçilerinizi tutmanın yollarını vermelisiniz.
Çoğu zaman, kötü bir etkileşimden sorumlu olabilecek üçüncü taraf komut dosyaları ve Javascript'tir. Aslında tarayıcı JavaScript'i almak, ayrıştırmak ve yürütmekle meşgul olduğu sürece, kullanıcının etkileşimlerine yanıt veremez.
Burada yine, kodunuzu ve Üçüncü Taraflarınızı optimize edecek ve ziyaretçilerinizin en iyi deneyimi yaşamasını sağlayacak teknikler vardır:
- Yüklemelerini geciktirerek Üçüncü Tarafların etkisini azaltın
Öncelikli içerik öğeleri sayfanızda görüntülendikten sonra komut dosyalarını yüklemeye ve yürütmeye başlayabilirsiniz. Ancak dikkatli olun: JavaScript'in yüklenmesini ertelemenin onu performans açısından özgür kılmadığını unutmayın!
Kullanıcıya güven vermek için ana öğelerin görüntülenmesinden sonra bazı işlevlerin (sohbet, widget'lar, izleme…) yüklenmesini erteleme meselesi olabilir, ancak tarayıcının kodu işlemesi için gereken süreyi iptal etmez, sadece zamanla değiştirir. - JavaScript yürütme süresini azaltın
Tarayıcınızın zamanını alan görevleri (Uzun Görevler) bölün ve kullanıcı etkileşimlerine yanıt olarak kısa işlemeyi tercih ettiğinizden emin olun (örneğin, kaydırma gibi belirli olayları aktif olarak dinlemekten kaçının ve tarayıcının belirli JavaScript işlemlerini çalıştırmak için boş zaman). - Ana İş Parçacığının işini azaltın
Tarayıcı, istek sayısını ve değiş tokuşların boyutunu azaltarak etkileşimlere daha hızlı yanıt verebilecek.
Zamandan da tasarruf edin: sitenizin optimizasyon tekniklerini otomatikleştirin
Az önce kullanıcı deneyiminin çok önemli iki yönünü ele aldık: görüntüleme hızı ve etkileşim. İyi haber şu ki, bu kontrol listesinde az önce bahsettiğimiz tüm optimizasyonlar otomatikleştirilebilir!
Ayrıca, Google'ın bu yönleri değerlendirmenize olanak tanıyan Temel Web VItals'lerinden ikisine de bağlantı vermiş olabilirsiniz: En Büyük İçerikli Boyama ve İlk Giriş Gecikmesi.
Elbette, Kümülatif Mizanpaj Kaydırma puanınız üzerinde çalışarak, optimum bir kullanıcı deneyimi için sayfalarınızın görsel kararlılığını iyileştirmeyi de düşünmelisiniz.
Bu 3 ölçümün (LCP, CLS ve Toplam Engelleme Süresi veya TBT, FID'ye eşdeğerdir) PageSpeed Insights tarafından verilen puanın %70'ini oluşturduğunu bilmelisiniz.
Bu nedenle, mantıksal olarak, sayfalarınızı hızlandırmak ve bu metrikleri optimize etmek için yaptığınız her şey, kullanıcılarınız ve performans puanlarınız üzerinde olumlu bir etkiye sahip olacaktır.
Kısacası, SEO'da uyguladığınız yaklaşımı UX'inize de uygulayabilirsiniz: kaliteli içerik ve deneyim, kullanıcı memnuniyetini garanti eder ve Google tarafından daha iyi dizine eklenmesine katkıda bulunur.
Ayrıca SEO'da olduğu gibi webperf optimizasyonları da zaman içinde korunmalıdır.
Teknikler ve metrikler hızla geliştiğinden, bu zaman ve uzmanlık gerektirir. Ayrıca, büyük ekiplerde bile teknik kaynaklar, bir sitenin hızını etkin bir şekilde korumak için her zaman zamana veya bilgiye sahip değildir; ve sufle gibi düşen bir komando operasyonu için kaynakları ve enerjiyi dağıtmak çok sinir bozucu ve hatta cesaret kırıcı.
Bu nedenle, bakımla zaman kaybetmek, sitenin her evriminde yan etkilerden korkmak ve eklentileri aşırı yükleme riskiyle çoğaltmak yerine, tüm ön uç optimizasyon tekniklerinin uygulanmasını tek bir araçla otomatikleştirmek daha iyidir!
Çoğu durumda, yüksek trafikli e-ticaret siteleri için bir webperf optimizasyon çözümünün yatırım getirisinin ölçülmesinin kolay olduğunu bilmelisiniz.
Gerçekten de Google, -0.1 saniyelik yükleme süresinin, bir ön uç optimizasyon çözümünün çok kolay bir şekilde başarabileceği +%8 dönüşüme yol açabileceğini tahmin etmiştir.
Fasterize'da, dönüşüm oranlarında 1 puandan daha az bir artışın bile SaaS çözümümüzün yatırım getirisini sağlamak için yeterli olduğunu gördük; teknik ekiplerin tasarruf ettiği zamandan bahsetmiyorum bile.
İş, savaşın kasları olduğundan, hesaplamayı kendiniz yapabilirsiniz ve bunu yapmak çok kolay! Performans optimizasyonunu otomatikleştirmenin ilgisini anlamanıza ve dahili ekiplerinizi ikna edip dahil etmenize olanak tanır.
Tüm cephelerde zaman kazanın!