Yavaş gibi görünen bir sayfa için hata ayıklama tezgahı

Bir tesisin yanında kaynak kodunu ve hata ayıklama panellerini gösteren bir dizüstü bilgisayar

Bu seçim hakkında

"Bu yavaş hissettiriyor" ifadesini tekrarlanabilir bir gözleme ve odaklanmış bir sonraki adıma dönüştürmek için tarayıcı belgeleri ve performans referansları.

Yavaş bir sayfa yanıt bekliyor olabilir, çok fazla çizim yapabilir, sayfa düzenini değiştirebilir veya girdi geri bildirimini geciktirebilir. Bunlar farklı sorunlar. Bu koleksiyon, tarayıcı inceleme araçlarını yükleme, yanıt verme ve görsel kararlılığı tanımlamak için kullanılan sözcüklerle eşleştirir. Amaç, sayfayı anlamadan puan peşinde koşmak değil, kodu değiştirmeden önce kanıt toplamaktır.

İlk önce bunu dene

Soruna neden olan URL'yi, cihazı ve eylemi yazın. Ağ ve performans panelleri açıkken bunu bir kez çoğaltın. Gerçekte gözlemleyebileceğiniz gecikmeyi belirleyin ve ardından bunu ilgili ölçüm veya teşhisle karşılaştırın. Bir şeyi değiştirin ve benzer koşullar altında tekrarlayın. İzlemeyi ve nelerin değiştiğine dair kısa bir açıklamayı kaydedin.

Aklında tut

Laboratuvar sonuçları ve gerçek kullanıcı saha verileri farklı sorulara yanıt veriyor. Sonuçlar donanıma, ağa ve önbellek durumuna göre değişiklik gösterir ve alan verileri bir sayfa için kullanılamayabilir. Özel URL'leri ve yakalanan istek ayrıntılarını genel raporlardan uzak tutun.

4 bağlantı/Küratörün seçtiği sırada

Bağlantı 1–

Chrome Geliştirme Araçları

Ağ denetimi, hata ayıklama ve performans kaydı için resmi belgeleri kullanın. Her aleti aynı anda açmak yerine paneli semptomla eşleştirin.

developer.chrome.com

Bağlantı 2İngilizce

Firefox Geliştirici Araçları Kullanıcı Dokümanları

Firefox'un inceleme ve hata ayıklama araçlarını başka bir tarayıcıda gördüğünüz davranışlarla karşılaştırın. Tarayıcı farklılıkları yararlı kanıt olabilir.

firefox-source-docs.mozilla.org

Bağlantı 3–

web.dev — Web Verileri

Yükleme, yanıt verme hızı ve görsel stabilite ölçümleri arasındaki farkı öğrenin. Gözlemlediğiniz sorunu tanımlamak için tanımları kullanın.

web.dev

Bağlantı 4Amerikan İngilizcesi

Sayfa Hızı Analizleri

Herkese açık bir URL için mevcut saha verilerini ve laboratuvar analizini inceleyin. Başlık puanına sonucun tamamı olarak bakmak yerine teşhisleri ve veri kapsamını okuyun.