Site denetimi için performans metriklerini toplamadan önce, kolay çözümleri ve odaklanılması gereken alanları belirlemek için yapabileceğiniz birkaç kontrol vardır.
Geçerlilik kontrolü: mimari ve kod
Mümkün olduğunda basit hataları düzeltin ve performansı ölçmeden önce gereksiz öğeleri ve kodu kaldırın. Ancak sorunlar ve düzeltmelerle ilgili önce ve sonra kayıtlarını tuttuğunuzdan emin olun. Bu iyileştirmeler, denetim çalışmanızın bir parçası olmaya devam edebilir.
Site mimarisi ve öğeleri
Kullanılmayan eski sayfalar, içerik veya diğer öğeler gibi herhangi bir şey kod deposundan ve siteden kolayca kaldırılabilir mi? Yetim sayfalar, gereksiz şablonlar, kullanılmayan resimler ve kullanılmayan kod ve kitaplıklar olup olmadığını kontrol edin.
Çalışma zamanında oluşan hatalar
Tarayıcı konsolunda bildirilen hataları kontrol edin. Böyle bir durum söz konusu değildir :).
Linting
HTML, CSS veya JavaScript kodunuzda hata var mı? Kodunuzu kontrol etme özelliğini iş akışınıza dahil etmek, kod kalitesini korumanıza ve gerilemelerden kaçınmanıza yardımcı olabilir. Kod düzenleyici eklentisi olarak kullanılabilen veya iş akışı süreçleri ve Travis gibi sürekli entegrasyon araçları içinde komut satırından çalıştırılabilen HTMLHint, StyleLint ve ESLint'i öneririz.
Bağlantıların ve resimlerin bozuk olup olmadığını kontrol etme
Chrome uzantıları (bu iyidir) ve Broken Link Checker gibi Node araçları da dahil olmak üzere, derleme ve çalışma zamanında bozuk bağlantıları test etmek için birçok araç vardır.
Eklentiler
Flash ve Silverlight gibi eklentiler güvenlik riski oluşturabilir. Bu eklentiler için destek sonlandırılmıştır ve mobil cihazlarda çalışmaz. Eklentileri kontrol etmek için Lighthouse'u kullanın.
Çeşitli cihaz ve bağlamlarda test edin
Sitenizi gerçek cihazlar, birden fazla tarayıcı ve farklı bağlantı bağlamlarıyla test edecek gerçek kullanıcılar bulmak en iyi seçenektir.
Bu kontrollerden bazıları nispeten özneldir ancak algılanan performansı etkileyen sorunları tespit edebilir. Örneğin, çalışmayan bağlantılar zaman kaybına neden olur ve "yanıt vermiyor" hissi verir. Okunaksız metinler yavaş okunur.
Cihazlar arası test
Farklı görüntü alanı ve pencere boyutlarını deneyin. En az bir mobil cihaz ve bir masaüstü cihaz kullanın. Mümkünse sitenizi küçük ekranlı, düşük özellikli bir mobil cihazda deneyin. Metin okunabilir mi? Bozuk resim var mı? Yakınlaştırabilir misiniz? Dokunma hedefleri yeterince büyük mü? Yavaş mı?
Herhangi bir özellik yanıt vermiyor mu? Sonuçların ekran görüntüsünü alın veya video çekin.
Platformlar arası test
Hangi platformları hedefliyorsunuz? Kullanıcılarınızın şu anda ve gelecekte kullanacağı tarayıcılarda ve işletim sistemlerinde test yapmanız gerekir.
Bağlantı
Çoklu hedef ağ türlerinde 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ızla aynı cihazlarda denediğinizden emin olun. Aşağıdaki fotoğrafta, iki farklı telefonda aynı sayfa gösterilmektedir.
Büyük ekranda metin küçüktür ancak okunabilir. Küçük ekranda tarayıcı düzeni doğru şekilde oluşturur ancak metin, yakınlaştırılmış olsa bile okunamaz. Ekran bulanık ve "renk yoğunluğu" var (beyaz renk beyaz görünmüyor). Bu da içeriğin okunabilirliğini azaltıyor.
Bu tür basit bulgular, anlaşılması zor performans verilerinden çok daha önemli olabilir.
Kullanıcı arayüzünü ve kullanıcı deneyimini deneyin
Erişilebilirlik, kullanılabilirlik ve okunabilirlik
Sitenizin içeriğinin ve işlevselliğinin 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 etmekten daha iyi bir yöntem yoktur. Çeşitli senaryolarda (ör. güneş ışığı altında dışarıda veya trende) okuma, gezinme ve veri girmeyi 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 kullanmayı deneyin.
Erişilebilirliği uygulama ve inceleme hakkında daha fazla bilgiyi Erişilebilirlik konulu Udacity kursunda ve Web Temel Bilgileri'ndeki Erişilebilirlik İncelemesi Yapma makalesinde bulabilirsiniz.
Erişilebilirlik denetiminizin kaydını tutun. Tüm kullanıcılarınız için yararlı olacak basit iyileştirmeler yapabilirsiniz.
Temel kullanıcı arayüzü ve kullanıcı deneyimi sorunları
Gerektiğinde çalışmayan etkileşimler, daha küçük pencerelerde ve ekran görünümlerinde öğelerin taşması, çok küçük dokunma hedefleri, okunamayan içerik, sarkma sorunu olan kaydırma… Sitede birden fazla sayfa açın, gezinme menüsünü ve tüm temel işlevleri deneyin. Kayıt tutun.
Resimler, ses ve video
İçeriğin taşması, 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 yapılandırmayı kolaylaştırabilir:
- Siteyi açtığınızda "Burada neler yapabilirim?" sorusu hemen anlaşılıyor mu?
- İçerik tüketmeye ve bağlantıları takip etmeye ilgi duyuyor musunuz?
- Görsel hiyerarşiler veya yollar var mı yoksa her şeyin görsel ağırlığı aynı mı?
- Düzen dağınık mı?
- Çok fazla yazı tipi mi var?
- Kaldırılabilir 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? Kaldırabileceğimiz bir şey var mı? Mobil cihazlar için yazın.