Site denetimi için performans metriklerini toplamadan önce kolay düzeltmeleri ve odaklanılacak alanları belirlemek için yapabileceğiniz birkaç kontrol vardır.
Geçerlilik kontrolü: Mimari ve kod
Mümkün olduğunda, performans ölçümünden önce basit hataları düzeltin ve gereksiz öğeler ile kodları kaldırın. Ancak sorunların ve düzeltmelerin öncesi ve sonrası kaydını tuttuğunuzdan emin olun. Bu iyileştirmeler, denetim çalışmanızın bir parçası olabilir.
Site mimarisi ve öğeler
Kod deposundan ve siteden kolayca kaldırılabilecek kullanılmayan eski sayfalar, içerikler veya başka öğeler var mı? Yetim sayfalar, gereksiz şablonlar, kullanılmayan resimler, kullanılmayan kodlar ve kitaplıklar olup olmadığını kontrol edin.
Çalışma zamanı hataları
Tarayıcı konsolunda bildirilen hataları kontrol edin. Hiçbir sorun olmamalıdır.
Linting
HTML, CSS veya JavaScript kodunuzda hata var mı? İş akışınıza linting eklemek, kod kalitesini korumanıza ve gerilemeleri önlemenize yardımcı olabilir. Kod düzenleyici eklentileri olarak kullanılabilen veya Travis gibi sürekli entegrasyon araçları ve iş akışı süreçleri içinde komut satırından çalıştırılabilen HTMLHint, StyleLint ve ESLint'i kullanmanızı öneririz.
Bozuk bağlantılar ve resimler
Derleme ve çalışma zamanında bozuk bağlantıları test etmek için Chrome uzantıları (bu uzantı iyidir) ve Broken Link Checker gibi Node araçları dahil olmak üzere birçok araç vardır.
Eklentiler
Flash ve Silverlight gibi eklentiler güvenlik riski oluşturabilir, bu eklentilere yönelik destek kullanımdan kaldırılmıştır ve bu eklentiler mobil cihazlarda çalışmaz. Eklentileri kontrol etmek için Lighthouse'u kullanın.
Çeşitli cihazlar ve bağlamlarla test etme
Gerçek kişilerin sitenizi gerçek cihazlar, birden fazla tarayıcı ve farklı bağlantı bağlamlarıyla test etmesi en iyi yöntemdir.
Bu kontrollerden bazıları nispeten özneldir ancak algılanan performansı etkileyen sorunları tespit edebilir. Örneğin, bozuk bağlantılar zaman kaybına neden olur ve "yanıt vermiyor" hissi uyandırır. Okunaksız metinlerin okunması zaman alır.
Cihazlar arası test
Farklı görüntü alanı ve pencere boyutlarını deneyin. En az bir mobil ve bir masaüstü cihaz kullanın. Mümkünse sitenizi küçük ekranlı, düşük özellikli bir mobil cihazda deneyin. Metin okunabiliyor mu? Bozuk resim var mı? Yakınlaştırma yapabiliyor musunuz? Dokunma hedefleri yeterince büyük mü? Yavaş mı?
Yanıt vermeyen özellikler var mı? Sonuçların ekran görüntüsünü alın veya videosunu kaydedin.
Platformlar arası test
Hangi platformları hedefliyorsunuz? Kullanıcılarınızın şu anda ve gelecekte kullanacağı tarayıcı ve işletim sistemlerinde test yapmanız gerekir.
Bağlantı
Birden fazla hedef ağ türünde test edin: bağlı, kablosuz ve hücresel. Çeşitli ağ koşullarını taklit etmek için tarayıcı araçlarını kullanabilirsiniz.
Cihazlar
Sitenizi kullanıcılarınızın kullandığı cihazlarda denediğinizden emin olun. Aşağıdaki fotoğrafta aynı sayfa iki farklı telefonda gösterilmektedir.
Daha büyük ekranda metin küçük ama okunabilir. Küçük ekranda tarayıcı, düzeni doğru şekilde oluşturur ancak metin, yakınlaştırıldığında bile okunamaz. Ekran bulanık ve "renk atması" var (beyaz, beyaz görünmüyor). Bu da içeriğin daha az okunabilir olmasına neden oluyor.
Bunun gibi basit bulgular, belirsiz performans verilerinden çok daha önemli olabilir.
Kullanıcı arayüzünü ve kullanıcı deneyimini test etme
Erişilebilirlik, kullanılabilirlik ve okunabilirlik
Sitenizin içeriğinin ve işlevlerinin herkes tarafından erişilebilir olmasını sağlamak için kullanıcılarınızın çeşitliliğini anlamanız gerekir.
Lighthouse ve diğer araçlar belirli erişilebilirlik sorunlarını test eder ancak gerçek dünyada test etmenin yerini hiçbir şey tutamaz. Çeşitli senaryolarda (ör. güneş ışığı altında açık havada veya trende) okuma, gezinme ve veri girme işlemlerini deneyin. Arkadaşlarınız, aileniz ve iş arkadaşlarınızdan sitenizi denemelerini isteyin. Mac'te VoiceOver veya Windows'ta NVDA gibi bir ekran okuyucu kullanarak içerikleri tüketmeyi deneyin.
Erişilebilirliği uygulama ve inceleme hakkında daha fazla bilgiyi Udacity'nin Erişilebilirlik kursunda ve Web'in Temelleri'ndeki Erişilebilirlik İncelemesi Nasıl Yapılır? başlıklı makalede bulabilirsiniz.
Erişilebilirlik denetiminizin kaydını tutun. Tüm kullanıcılarınız için faydalı olacak basit iyileştirmeler yapabilirsiniz.
Temel kullanıcı arayüzü ve kullanıcı deneyimi sorunları
Gerektiği gibi çalışmayan etkileşimler, daha küçük pencerelerde ve görüntü alanlarında taşan öğeler, çok küçük dokunma hedefleri, okunamayan içerikler, sarsıntılı kaydırma… Sitede birden fazla sayfa açın, gezinmeyi ve tüm temel işlevleri deneyin. Kayıt tutun.
Görseller, ses ve video
Taşma yapan içerik, yanlış en boy oranı, kötü kırpma ve kalite sorunları olup olmadığını test edin.
Öznel kullanıcı arayüzü testleri
Bunların hepsi alakalı olmayabilir ancak basit değişiklikler yeniden düzenlemeyi kolaylaştırabilir:
- Siteyi açtığınızda "Burada ne yapabilirim?" sorusunun yanıtı hemen anlaşılıyor mu?
- İçerikleri tüketmeye ve bağlantıları takip etmeye yönlendiriliyor musunuz?
- Görsel hiyerarşiler veya yollar var mı yoksa her şey aynı görsel ağırlığa mı sahip?
- Düzen karmaşık mı?
- Çok fazla yazı tipi mi var?
- Kaldırılabilecek resimler veya başka içerikler var mı?
- İçerik tasarımı, arayüz tasarımı kadar önemlidir. Sitenizdeki metin ve resim içeriği mobil ve masaüstü bağlamlarına uygun mu? Eleyebileceğiniz bir şey var mı? Mobil cihazlara uygun metinler yazın.