Büyük görseller, fazla font, ağır script ve erken yüklenen dış içerikler gereksiz iş oluşturur. Önce ziyaretçinin kullandığı sayfanın pahalı kaynaklarını belirleyin. Kafe, ziyaretçi yol tarifi istemeden etkileşimli harita indirmek yerine başlangıçta harita bağlantısı sunabilir. Sonucu ölçmeden yararlı içeriği kaldırmak güvenilir optimizasyon yöntemi değildir.
Önce yavaşlığın hangi anda hissedildiğini belirleyin
“Site yavaş” ifadesi farklı sorunları anlatabilir. İlk içerik geç görünebilir, sayfa açıldıktan sonra düğme geç tepki verebilir veya görseller yüklenirken düzen yer değiştirebilir. Bu durumlar aynı çözümü gerektirmez. Önce hangi sayfada, hangi cihazda ve hangi bağlantı koşulunda sorun görüldüğünü kaydedin. Kişisel izlenimi ölçümle desteklemek, yanlış parçayı değiştirmeyi önler.
Bir tanıtım sitesinde ilk ekranın ana görseli büyük olabilir. Kullanıcının göreceği boyuttan çok daha geniş dosyayı indirmek gereksiz yük yaratır. Görselin oranı, sıkıştırması ve uygun formatı birlikte değerlendirilmelidir. Kaliteyi düşürmeden dosyayı küçültmek mümkün olabilir; ancak bütün fotoğraflara aynı ayarı uygulamak her zaman iyi sonuç vermez. Ayrıntılı portföy görseli ile küçük dekor farklı ihtiyaç taşır.
Görsel yüklenmeden önce yerinin ayrılması da önemlidir. Boyut veya oran tanımlanmayan öğe sonradan metni aşağı itebilir. Kullanıcı tam düğmeye basacakken sayfanın yer değiştirmesi yalnız görsel bir kusur değildir; görevi zorlaştırır. Yüklenme süresi ile düzen kararlılığını ayrı inceleyin.
Font, script ve dış servislerin gerçek işini sorgulayın
Birden fazla font ailesi, çok sayıda ağırlık ve kullanılmayan alfabe dosyaları ilk yükü artırabilir. Tasarım sisteminde gerçekten kullanılan seçenekleri belirleyin. Türkçe, Arapça veya Japonca gibi farklı içerik ihtiyaçları varsa uygun glif desteği sağlanmalı; fakat bütün ziyaretçilere bütün büyük font dosyalarını göndermek zorunlu değildir. Yazı seçimi ile yükleme planını birlikte düşünün.
JavaScript tarafında küçük bir etkileşim için büyük bir uygulama paketi yüklemek gereksiz olabilir. Menü, paket seçimi ve form gibi işlevlerin hangi kodla çalıştığını inceleyin. Temel hizmet ve blog içeriğinin yalnız script çalışınca oluşması, ziyaretçi ve tarayıcı için ek bağımlılık yaratabilir. İçeriğin ilk HTML'de bulunması ile etkileşimlerin sonradan güçlendirilmesi çoğu tanıtım sitesinde değerlendirilebilecek bir yaklaşımdır.
Harita, video, sohbet aracı ve analiz kodu gibi dış servisler de yük ve bağlantı sayısı ekler. Bunların her birini ilk ekranda zorunlu çalıştırmak gerekmeyebilir. İsteğe bağlı açılan video veya harita bağlantısı bazı durumlarda yeterli olabilir. Özelliği kaldırmadan önce ziyaretçinin gerçekten ne yaptığını düşünün; hiçbir zaman kullanılmayan aracı sırf kurumsal görünmek için taşımayın.
İyileştirmeyi aynı koşullarda tekrar ölçün
Önce başlangıç ölçümünü kaydedin, sonra değişikliği uygulayın. Aynı sayfa, benzer cihaz koşulları ve aynı test ayarlarıyla tekrar inceleyin. Bir çalıştırmada alınan yüksek puanı bütün kullanıcıların sürekli deneyimi gibi sunmayın. Laboratuvar testi sorunu bulmaya yardımcı olur; gerçek kullanıcı verisi oluştuğunda ayrı değerlendirilmelidir. Özellikle etkileşim davranışı tek bir sayfa açılışıyla tam ölçülmez.
Öncelik verirken en büyük dosyadan başlayıp bütün sistemi görmezden gelmeyin. İlk ekran için gereken kaynaklar, gereksiz scriptler, font yükü ve üçüncü taraf bağlantıları birlikte gözden geçirilmelidir. Sadece alt bölümdeki küçük bir görseli sıkıştırmak, ana görsel veya render engelleyici kaynak sorunu devam ediyorsa sınırlı etki sağlayabilir.
Son olarak performans ile kullanılabilirliği birlikte koruyun. Daha küçük dosya uğruna okunamayan görsel, hiç yüklenmeyen font veya çalışmayan form teslim etmeyin. Hız iyileştirmesinin amacı kullanıcıya gerekli bilgiyi ve işlevi daha rahat sunmaktır. Ölçüm raporunda neyin değiştiğini, nasıl kontrol edildiğini ve hangi belirsizliğin devam ettiğini belirtmek, kanıtsız kusursuzluk rozetinden daha yararlı bilgi verir.
Bir yavaşlık incelemesini küçük adımlara bölün: Önce ilk ekranda kullanılan en büyük görseli ve sayfanın başlangıç kaynaklarını belirleyin. Görsel boyutunu düzenledikten sonra aynı ölçümü tekrarlayın. Ardından kullanılmayan font ağırlıkları veya gereksiz scriptler üzerinde çalışın. Birden çok değişikliği aynı anda uygulamak mümkün olsa da hangi müdahalenin etkili olduğunu anlamayı zorlaştırabilir.
Ölçüm sırasında yalnız toplam dosya boyutuna bakmayın. Bir kaynak küçük olsa bile kritik içeriğin görünmesini geciktirebilir; büyük bir alt bölüm görseli ise ihtiyaç anında yükleniyorsa ilk ekranı aynı ölçüde etkilemeyebilir. Yükleme sırası ve sayfa görevi önemlidir. Her görseli gecikmeli yüklemek de doğru değildir; ilk ekranda gerekli ana görselin önceliği ayrıca düşünülmelidir.
Son kontrolü kullanıcı göreviyle bağlayın. Menü hızlandı mı, form alanları gecikmeden kullanılabiliyor mu, içerik yüklenirken düğmeler yer değiştiriyor mu? Sayıların yanında bu gözlemleri de kaydedin. Bir araçta alınan puanın farklı ağ ve cihaz koşullarında aynı kalacağı söylenemez. Performans çalışması bittiğinde raporda ölçüm ortamını, tarihi ve değişiklik kapsamını belirtin. Henüz gerçek kullanıcı verisi oluşmamışsa laboratuvar sonucunu açıkça öyle adlandırın; ölçülmeyen başvuru veya gelir artışını hız iyileştirmesinin kesin sonucu olarak sunmayın.
İyileştirme sonrası görsel kalite ve klavye kullanımını yeniden kontrol edin. Bazı küçültme veya yeniden yükleme kararları beklenmedik odak ve boyut sorunları doğurabilir. Teknik metriği yükseltirken ziyaretçinin temel görevini zorlaştırmamak, performans çalışmasının kabul koşullarından biri olmalıdır.
Yavaşlık incelemesinde önce hangi sayfanın hangi koşulda sorunlu olduğunu kaydedin. Ana sayfa hızlıyken büyük galerili proje sayfası yavaş olabilir. Masaüstü bağlantısı sorunu gizleyebilir; soğuk önbellek ve daha sınırlı bağlantı farklı sonuç verir. Aynı koşullarda yapılan önce ve sonra ölçümü, değişikliğin etkisini anlamayı kolaylaştırır.
Her optimizasyonun görsel ve işlevsel sonucunu kontrol edin. Bir görseli aşırı küçültmek yükü azaltırken ürün detayını okunmaz hale getirebilir. Betiği geciktirmek menü veya formun geç çalışmasına yol açabilir. Bu nedenle performans iyileştirmesi tek bir puanı yükseltmekten ibaret değildir; kullanıcı için gerekli bilgi ve etkileşim korunmalıdır.
Öncelik listesine boyut, gereklilik ve kullanıcı etkisini birlikte yazın. Kullanılmayan büyük bir video ilk aday olabilirken küçük bir zorunlu güvenlik betiğini kaldırmak yanlış seçimdir. Aynı bileşen bütün sayfalarda yükleniyorsa gerçekten bütün sayfalarda gerekli olup olmadığı incelenir. Değişiklik sonrasında form, menü, görseller ve yazı yüklenmesi tekrar denenmelidir. Ölçüm raporuna yapılan müdahaleyi eklemek de gelecekteki geliştiricinin hangi sorunun neden çözüldüğünü anlamasını sağlar; böylece kazanım sonraki güncellemede yanlışlıkla geri alınmaz.
Uygulama kontrolü
- Büyük görselleri boyutlandırın
- Font çeşitlerini azaltın
- İsteğe bağlı içerikleri gerektiğinde yükleyin
Somut örnek: Kafe, ziyaretçi yol tarifi istemeden etkileşimli harita indirmek yerine başlangıçta harita bağlantısı sunabilir.
Dikkat edilmesi gereken sınır: Sonucu ölçmeden yararlı içeriği kaldırmak güvenilir optimizasyon yöntemi değildir.
