Yakın Zamanda Keşfettiğim Üç Ön Uç Denetim Aracı — Smashing Magazine

0
21

Yazar hakkında

Stefan, Contentful’un Geliştirici İlişkileri’nde çalışıyor ve web performansına, yeni teknolojilere ve erişilebilirliğe çabucak aşık oldu. Aynı zamanda küratörü… Stefan hakkında daha fazla bilgi ↬

Daha hızlı bir web sitesi oluşturmak, bugünlerde roket görevi olabilir. Dikkate alınması gereken çok şey var, bu yüzden her şeyi doğru yapmak zor. İşte oraya ulaşmanıza yardımcı olabilecek daha az bilinen üç araç.


Her kaynak uygun şekilde küçültülmüş ve sıkıştırılmış mı? Tüm önbelleğe alma başlıkları doğru ayarlanmış mı? Site, hızlı bir ilk boyamayı garanti etmek için tüm kaynakları en iyi sırayla yüklüyor mu? Bunlar, hızlı bir web sitesi oluşturma hedefine sahipken göz önünde bulundurulması gereken birkaç sorudur. Web için bina bugünlerde karmaşık.

Ancak performans sorunlarına neden olan tüm bunları nasıl buluyorsunuz?

Performans sorunlarını tespit etmenize ve yüksek kaliteli ve hızlı web siteleri göndermenize yardımcı olacak üç aracı paylaşmama izin verin.

Not: En iyi uygulamalara ve araçlara tam bir genel bakış arıyorsanız, Ön Uç performans kontrol listesine bakın.

Waterfalller: Ağ Şelalelerine Odaklanan Bir Araç

Waterfaller’ı yeni keşfettim. Lighthouse veya WebPage Testinin aksine, Waterfaller yalnızca bir şeye odaklanır: ağ şelalesindeki sorunlar.

Şelale ekran görüntüsüWaterfaller, ağ şelalesindeki sorunlara odaklanır ve iyileştirme için öneriler sunar.

Araç, web sitesinde hangi kaynakların yüklendiğini ve bu kaynakların hangi sırayla geldiğini analiz eder. Her kaynağın daha hızlı yüklenmesini sağlamak için neleri uygulayabileceğiniz konusunda tavsiyeleri doğrudan araçta bulabilirsiniz.

Waterfalller’ın dar kapsamını seviyorum! Bir test yapın, sorunlu dosyaları bulun ve tavsiye alın; bunların hepsi 30 saniyede yapılabilir. Bu güzel!

2021’de Yeni Ön Uç Maceraları üzerine yapacağı Smashing atölyesinde Vitaly Friedman ile en iyi ön uç uygulamalarına derinlemesine dalın. AVIF ve CSS kapsayıcı sorgularından Önemli Web Verileri, Jamstack ve web yazı tipi yüklemeye kadar her şey tek bir çevrimiçi atölyede. 9-23 Haziran 2021.

Atölyeye atla ↬
Özellik Paneli

Yellow Lab: Sitenizi Yukarıdan Aşağıya Analiz Eden Bir Araç

Sitenizin ne kadar iyi yapılandırıldığına dair kapsamlı bir genel bakış arıyorsanız, Yellow Lab’ı deneyin. Dahil edilen performans testleri ve kontrollerin sayısı olağanüstü! Sayfa ağırlığı ve istek sayısı gibi standart ölçümler sağlar ve HTML, CSS ve JavaScript’inizi analiz eder.

Sarı Laboratuvar Araçları ekran görüntüsüYellow Lab Tools, CSS’den JavaScript’e ve performansa kadar bir dizi denetim gerçekleştirir ve sorunlara ve bunların nasıl düzeltileceğine ilişkin ayrıntılı bir genel bakış sağlar.

Yinelenen seçiciler veya çok fazla renk bildirimi biçimindeki CSS mimarinizdeki sorunları bulmak için güzel bir araçtır. Ayrıca çok karmaşık bir HTML yapısına işaret eder ve ayrıca sunucunuzu ve önbellek başlığı yapılandırmanızı kontrol eder. Yüksek kaliteli bir web sitesi oluşturmak için mükemmel bir arkadaştır.

webhint: Piyasadaki En Seçici Araç

Sizi son patronla tanıştırayım. Microsoft’un web ipucuna merhaba deyin. webhint, Lighthouse ile karşılaştırılabilir ve sitenizi erişilebilirlik, uyumluluk, aşamalı web uygulamaları, performans ve güvenlik alanlarındaki sorunlar için tarar.

web ipucu ekran görüntüsüwebhint, sitenizi iyileştirmenin yollarını ararken genellikle diğer araçların tam olarak yakalayamadığı sorunları bulur.

Webhint hakkında beni şaşırtan şey, inanılmaz derecede seçici olması. Geçmişte tamamen yeşil bir Lighthouse puanı aldığım durumlarla karşılaştım, WebPage Testi bana doğrudan A verdi, ancak yine de webhint bana iyileştirme alanları sunuyordu.

Henüz kullanmadıysanız, denemenizi tavsiye ederim. Geliştirmek için şaşırtıcı şeyler bulabilirsiniz.

En İyi Web Sitelerini Oluşturmak İçin En İyi Araçları Kullanın

Gördüğünüz gibi, takım oluşturma ortamı birçok değerli aracı içerir. Ve bazı araçlar çok çeşitli sorunları tararken, her şeyi kapsayan bir araç yoktur. Her zamanki mantra geçerlidir:

“İş için doğru aleti kullanın.”

Hangi web performans araçlarını kullanıyorsunuz? En iyi ve en hızlı web sitelerini göndermenize yardımcı olan favori araçlarınız hakkında daha fazla bilgi edinmek isterim.

Çarpıcı Editoryal
(vf, il)

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz