Lighthouse: Web sitesi hızını optimize etme

Eğitimin hedefi

Bu eğitimde, web sitelerinizin daha hızlı yüklenmesini sağlayacak yöntemler bulmak için Chrome Geliştirici Araçları'nın nasıl kullanılacağı öğretilmektedir.

Bu eğiticinin devamını okuyun veya video sürümünü izleyin:

Ön koşullar

Arkadaş Bitkiler projesindekine benzer temel bir web geliştirme deneyimine sahip olmalısınız. Web Geliştirmeye Giriş dersini inceleyin.

Yükleme performansı hakkında herhangi bir bilgiye sahip olmanız gerekmez.

Giriş

Adım Tolga. Tony, kedi topluluğunda çok ünlü. Kendisi için bir web sitesini ziyaret ederek en sevdiği içerikleri neler olduğunu öğrendik. Hayranları siteyi çok seviyor ancak Tony, sitenin yavaş yükleniyor. Tony, siteyi hızlandırmasına yardımcı olmanızı istedi.

1. Adım: Siteyi denetleyin

Bir sitenin yükleme performansını artırmaya çalıştığınızda, her zaman denetli. Denetimin iki önemli işlevi vardır:

• Daha sonra yapılacak değişiklikleri ölçmek için bir temel çizgi oluşturur.
• En büyük etkiyi yaratacak değişikliklerin hangileri olduğuna dair uygulayabileceğiniz ipuçları sunar.

Kur

Öncelikle, işletmeniz için yeni bir çalışma ortamı Tony'nin web sitesine giderek değişiklik yapabilirsiniz. daha sonra görebilirsiniz:

1. Web sitesinin Glitch projesini remiksleyin. Yeni projeniz bir sekmede açılır. Bu sekme, düzenleyici sekmesi olarak adlandırılacaktır.

   

   Projenin adı tony iken rastgele oluşturulan bir adla değişir. Artık bu kodun düzenlenebilir kendinize ait bir kopyasına sahipsiniz. Daha sonra bu kodda değişiklik yaparsınız.

2. Düzenleyici sekmesinin alt kısmında Önizleme'yi tıklayın > Yeni pencerede önizleyin. Demo yeni bir sekmede açılır. Bu sekme, demo sekmesi olarak adlandırılacaktır. Sitenin yüklenmesi biraz zaman alabilir.

   

3. Demoyla birlikte Geliştirici Araçları'nı açın.

   

ziyaret edin.

Bütçe temel çizgisi oluşturun

Temel çizgi, siz herhangi bir performans iyileştirmesi yapmadan önce sitenin nasıl performans gösterdiğinin bir kaydıdır.

1. Lighthouse panelini açın. double_arrow Diğer paneller'in arkasında gizlenmiş olabilir.

   

2. Lighthouse raporu yapılandırma ayarlarınızı ekran görüntüsündekilerle eşleştirin. Burada farklı seçenekler:

   • check_box Depolama Alanını Temizle. Bu onay kutusu etkinleştirildiğinde her denetimden önce sayfayla ilişkili tüm depolama alanı temizlenir. Sitenizi ilk kez ziyaret eden kullanıcıların deneyimini denetlemek istiyorsanız bu ayarı açık bırakın. Tekrarlanan ziyaret deneyimi için bu ayarı devre dışı bırakın.
   • check_box JS örneklemeyi etkinleştir. Bu seçenek varsayılan olarak kapalıdır. Bu özellik etkinleştirildiğinde performans izlemeye ayrıntılı JavaScript çağrı yığınları ekler ancak rapor oluşturmayı yavaşlatabilir. İzi, more_vert Araçlar menüsü > Lighthouse raporu oluşturulduktan sonra Kısıtlanmamış İzi Görüntüle.
   • Kısıtlama simülasyonu (varsayılan) arrow_drop_down. Bu seçenek, mobil cihazda gezinmenin genel koşullarını simüle eder. Adı "simüle edildi". çünkü Lighthouse, denetim süreci sırasında kısıtlama yapmaz. Bunun yerine, sadece sayfanın mobil koşullar altında ne kadar sürede yükleneceğini tahmin eder. Öte yandan Geliştirici Araçları kısıtlama (gelişmiş) ayarı, daha uzun bir denetim sürecinin sakıncası olarak CPU'nuzu ve ağınızı kısıtlar.
   • Mod > radio_button_checked Gezinme (Varsayılan). Bu mod, tek bir sayfa yüklemesini analiz eder. Bu eğitimde buna ihtiyacımız var. Daha fazla bilgi için Üç mod konusuna bakın.
   • Cihaz > radio_button_checked Mobil. Mobil seçeneği, kullanıcı aracısı dizesini değiştirir ve bir mobil cihaz simülasyonu görünüm. Masaüstü seçeneği hemen hemen mobil değişiklikleri devre dışı bırakır.
   • Kategoriler > check_box Performans. Tek bir etkin kategori, Lighthouse'un yalnızca ilgili denetim grubuyla rapor oluşturmasını sağlar. Sundukları öneri türlerini görmek istiyorsanız diğer kategorileri etkin bırakabilirsiniz. Alakasız kategorilerin devre dışı bırakılması, denetim sürecini biraz hızlandırır.

3. Sayfa yüklemeyi analiz et'i tıklayın. 10 ila 30 saniye sonra, Lighthouse panelinde sitenin performansıyla ilgili bir rapor gösterilir.

   

Rapor hatalarını işleme

Lighthouse raporunuzda hata alırsanız demo sekmesini çalıştırmayı deneyin başka sekme açık değilken gizli pencereden. Bu sayede Chrome'u temiz durumdan çalıştırın. Özellikle Chrome uzantıları, denetim sürecine müdahale edebilir.

Raporunuzu anlama

Raporunuzun üst kısmındaki sayı, sitenin genel performans puanıdır. Daha sonra değişiklik yaparsanız bu sayının arttığını göreceksiniz. Daha yüksek puan, daha iyi performans anlamına gelir.

Metrikler

Metrikler bölümüne ilerleyin ve Görünümü genişlet'i tıklayın. Bir metrikle ilgili dokümanları okumak için Daha fazla bilgi...'yi tıklayın.

Bu bölümde, sitenin performansıyla ilgili nicel ölçümler sağlanmaktadır. Her metrik, performansın farklı bir yönü hakkında bilgi sağlar. Örneğin, First Contentful Paint içerik ekranda ilk kez boyandığında bunu gösterir. Bu, kullanıcının izleme etkinliğinde önemli bir sayfa yükleme algısı, Etkileşime Kalan Süre ise sayfanın kullanıcı etkileşimlerini işlemeye hazır görünür.

Ekran görüntüleri

Ardından, sayfanın yüklendiği sırada nasıl göründüğünü gösteren ekran görüntüleri yer alır.

Fırsatlar

Sonraki adım, söz konusu sayfanın yüklenmesini nasıl iyileştirebileceğinizle ilgili spesifik ipuçlarının verildiği Fırsatlar bölümüdür. bazı yolları da görmüştük.

Hakkında daha fazla bilgi edinmek istediğiniz fırsatı tıklayın.

Bir fırsatın neden önemli olduğuyla ilgili belgeleri ve spesifik belgeleri görmek için Daha fazla bilgi... seçeneğini tıklayın. öneriler alabilirsiniz.

Teşhis

Teşhis bölümü, sayfanın test edilmesine katkıda bulunan faktörler hakkında daha fazla bilgi yükleme süresidir.

Başarılı denetimler

Başarılı denetimler bölümü, sitenin doğru şekilde yaptığı işlemleri gösterir. Genişletmek için tıklayın bölümüne ekleyin.

2. adım: Deneme

Lighthouse raporunuzun Fırsatlar bölümü, sayfanızın bazı yolları da görmüştük. Bu bölümde, önerilen değişiklikleri kod tabanında uygulayıp site hızını nasıl etkilediğini ölçmek için her değişiklikten sonra sitesini ziyaret edin.

Metin sıkıştırmayı etkinleştirin

Raporunuza göre, metin sıkıştırmayı etkinleştirmenin, performansını artırır.

Metin sıkıştırma, bir metin dosyasını dosyanın içinde göndermeden önce boyutunu küçülttüğünüz veya sıkıştırarak ağ. Bu, boyutunu küçültmek için bir klasörü e-postayla göndermeden önce sıkıştırmak gibidir.

Sıkıştırma işlemini etkinleştirmeden önce, metinlerin çalışıp çalışmadığını manuel olarak kontrol etmenin nasıl sıkıştırılır?

Ağ panelini açıp settings Ayarlar > check_box Büyük istek satırları kullanın.

Her Boyut hücresi iki değer gösterir. En yüksek değer, indirilen kaynağın boyutudur. İlgili içeriği oluşturmak için kullanılan en düşük değer, sıkıştırılmamış kaynağın boyutudur. İki değer de aynıysa ağ üzerinden gönderildiğinde kaynağın sıkıştırılmadığını gösterir. Bu örnekte bundle.js için üst ve alt değerlerin ikisi de 1.4 MB.

Ayrıca, bir kaynağın HTTP üstbilgilerini inceleyerek sıkıştırma olup olmadığını kontrol edebilirsiniz:

1. bundle.js'yi tıklayın ve Headers (Başlıklar) sekmesini açın.

   

2. Yanıt Üstbilgileri bölümünde content-encoding üstbilgisi arayın. Görmeyeceksin, yani bundle.js sıkıştırılmadı. Bir kaynak sıkıştırıldığında bu üstbilgi genellikle gzip, deflate veya br olarak ayarlanır. Bunların açıklamaları için Yönergeler'e bakın değerler.

Bu kadar açıklama yeterli. Bazı değişiklikler yapma zamanı! Birkaç örnek ekleyerek metin sıkıştırmayı etkinleştirin satır sonu:

1. Düzenleyici sekmesinde server.js öğesini açın ve aşağıdaki iki (vurgulanan) satırı ekleyin:

   ...
   const fs = require('fs');
   const compression = require('compression');
   
   app.use(compression());
   app.use(express.static('build'));
   ...
   

2. app.use(compression()) öğesini, app.use(express.static('build')) ifadesinden önce girdiğinizden emin olun.

   

3. Glitch'in sitenin yeni derlemesini dağıtmasını bekleyin. Sol alt köşede mutlu bir emoji, dağıtımın başarılı olduğunu gösterir.

Sıkıştırma işleminin çalışıp çalışmadığını manuel olarak kontrol etmek için daha önce öğrendiğiniz iş akışlarını kullanın:

1. Demo sekmesine geri dönüp sayfayı yeniden yükleyin.

   Boyut sütunu artık bundle.js gibi metin kaynakları için iki farklı değer göstermelidir. bundle.js için en yüksek 269 KB değeri ağ üzerinden gönderilen dosyanın boyutudur. En alttaki ise 1.4 MB olan dosya sıkıştırılmamış dosya boyutudur.

   

2. bundle.js adresinin Yanıt Başlıkları bölümünde artık content-encoding: gzip üstbilgisi bulunmalıdır.

   

Metin sıkıştırmanın sayfanın yüklenmesi üzerindeki etkisini ölçmek için sayfadaki Lighthouse raporunu tekrar çalıştırın performans:

1. Lighthouse panelini açın ve üstteki işlem çubuğunda Denetleme gerçekleştir... seçeneğini tıklayın.

   

2. Ayarları önceki gibi bırakın ve Sayfa yüklemeyi analiz et'i tıklayın.

   

Harika! Bu ilerleme gibi görünüyor. Genel performans puanınızın artmış olması gerekir. Bu da sitenizin hızlandığı anlamına gelir.

Gerçek dünyada metin sıkıştırma

Çoğu sunucu, sıkıştırmayı etkinleştirmek için bunun gibi basit düzeltmelere sahiptir! Nasıl durduğunu istediğiniz sunucuyu yapılandırmanız gerekir.

Resimleri yeniden boyutlandır

Yeni raporunuz, resimleri doğru şekilde boyutlandırmanın başka bir büyük fırsat olduğunu söylüyor.

Resimleri yeniden boyutlandırmak, resimlerin dosya boyutunu küçülterek yükleme süresini hızlandırmaya yardımcı olur. Kullanıcınız bir mobil cihaz ekranında görüntülerseniz gerçekten de çok da bir resim gönderir. İdeal olarak, en fazla 500 piksel genişliğinde bir resim göndermeniz gerekir.

1. Hangi resimlerin yeniden boyutlandırılması gerektiğini görmek için raporunuzda Resimleri uygun şekilde boyutlandırın'ı tıklayın. 4 resmin de gereğinden büyük olduğu anlaşılıyor.

   

2. Düzenleyici sekmesinde src/model.js uygulamasını açın.

3. const dir = 'big' yerine const dir = 'small' yazın. Bu dizinde, aynı resimlerin yeniden boyutlandırılan kopyaları bulunuyor.

4. Bu değişikliğin yükleme performansını nasıl etkilediğini görmek için sayfayı tekrar denetleyin.

   

Bu değişikliğin genel performans puanı üzerinde yalnızca küçük bir etkisi olduğu anlaşılıyor. Ancak, ağ verisinden ne kadar tasarruf ettiğinizdir. Toplam Eski fotoğrafların boyutu yaklaşık 6, 1 MB iken şu anda boyutu yalnızca 633 KB. Bunu Ağ panelinin alt kısmındaki durum çubuğunda kontrol edebilirsiniz.

Gerçek dünyadaki görüntüleri yeniden boyutlandırma

Küçük uygulamalarda, böyle tek seferlik bir yeniden boyutlandırma yapmak yeterince iyi olabilir. Ancak büyük uygulamalarda bu, ölçeklenebilir değil. Aşağıda, büyük uygulamalardaki resimleri yönetmeye yönelik bazı stratejiler verilmiştir:

• Derleme işlemi sırasında görüntüleri yeniden boyutlandırın.
• Derleme işlemi sırasında her görüntü için birden fazla boyut oluşturun ve ardından kodunuzda srcset kullanın. Tarayıcı, çalışma zamanında, çalıştırıldığı cihaz için en uygun boyutu seçer. Göreli boyutlu resimler konusuna bakın.
• Bir resim istediğinizde, resmi dinamik olarak yeniden boyutlandırmanıza olanak tanıyan bir resim CDN kullanın.
• En azından her resmi optimize edin. Bu genellikle büyük tasarruflar sağlar. Optimizasyon, bir resmi, resim dosyasının boyutunu küçülten özel bir programla çalıştırırsınız. Önemli Noktalar'ı inceleyin Resim Optimizasyonu başlıklı makaleyi inceleyin.

Oluşturmayı engelleyen kaynakları ortadan kaldırın

Son raporunuza göre artık en büyük fırsat, oluşturmayı engelleyen kaynakları ortadan kaldırmak.

Oluşturma engelleme kaynağı, tarayıcının indirmesi gereken harici bir JavaScript veya CSS dosyasıdır. ayrıştırıp yürütülmesini sağlar. Hedef, yalnızca temel CSS ve JavaScript'i çalıştırmaktır. kodu gerekir.

O halde ilk görev, sayfa yükleme sırasında yürütülmesi gerekmeyen kodu bulmaktır.

1. Reklamları engelleyen kaynakları görmek için Oluşturma önleyici kaynakları ortadan kaldırın'ı tıklayın: lodash.js ve jquery.js.

   

2. İşletim sisteminize bağlı olarak Komut menüsünü açmak için aşağıdaki tuşlara basın:

   • Mac'te Command+Üst Karakter+P
   • Windows, Linux veya ChromeOS'te Control+Üst Karakter+P

3. Coverage yazmaya başlayın ve Kapsamı Göster'i seçin.

   

   Çekmece'de Kapsam sekmesi açılır.

   

4. Yenile'yi Yeniden yükle'yi tıklayın. Kapsam sekmesi, sayfa yüklenirken bundle.js, jquery.js ve lodash.js alanlarındaki kodun ne kadarının yürütüldiğine dair genel bir bakış sunar.

   

   Bu ekran görüntüsü, jQuery ve Lodash dosyalarının sırasıyla yaklaşık% 74 ve% 30'unun kullanılmadığını gösteriyor.

5. jquery.js satırını tıklayın. Geliştirici Araçları, dosyayı Kaynaklar panelinde açar. Önceki kod satırı ise yanındaki onay kutusunu işaretleyin. Bir kod satırının yanındaki kırmızı çubuk, o satırın yürütülmediğini gösterir ve sayfa yüklendiğinde kesinlikle gerekli değildir.

   

6. jQuery kodunda biraz ilerleyin. "Yürütülen" satırlardan bazıları aslında yalnızca yorum. Bu kodu, yorumları çıkaran bir küçültücüyle çalıştırmak, dosyanın boyutunu belirleyemezsiniz.

Kısacası, kendi kodunuzla çalışırken Kapsam sekmesi kodunuzu analiz etmenize, ve sadece sayfa yükleme için gereken kodu gönderin.

Sayfayı yüklemek için jquery.js ve lodash.js dosyaları gerekli mi? İstek Engelleme sekmesi, kaynaklar mevcut olmadığında ne olduğunu gösterir.

1. Ağ sekmesini tıklayın ve Komut Menüsü'nü tekrar açın.

2. blocking yazmaya başlayın ve İstek Engellemeyi Göster'i seçin. İstek Engelleme sekmesi açılır.

   

3. Desen Ekle'yi tıklayın, metin kutusuna /libs/* yazın ve onaylamak için Enter tuşuna basın.

   

4. Sayfayı tekrar yükleyin. jQuery ve Lodash istekleri kırmızıdır, yani engellendi. İlgili içeriği oluşturmak için kullanılan sayfa yüklenmeye devam ediyor ve etkileşimli durumda. Dolayısıyla bu kaynakların hiçbir şekilde gerekli olmadığı görülüyor.

   

5. /libs/* engelleme kalıbını silmek için Tüm kalıpları kaldır'ı tıklayın.

Genel olarak İstek Engelleme sekmesi, herhangi bir veri verildiğinde sayfanızın nasıl davranacağının simüle edilmesi için kaynak kullanılamıyor.

Şimdi, bu dosyalara yönelik referansları koddan kaldırın ve sayfayı tekrar denetleyin:

1. Düzenleyici sekmesinde template.html uygulamasını açın.

2. İlgili <script> etiketlerini silin:

   <head>
       ...
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <script src="/libs/lodash.js"></script>
       <script src="/libs/jquery.js"></script>
       <title>Tony's Favorite Foods</title>
   </head>
   

3. Sitenin yeniden derlenmesini ve yeniden dağıtılmasını bekleyin.

4. Lighthouse panelinden sayfayı tekrar denetleyin. Genel puanınız tekrar yükselmiş olmalı.

   

Gerçek dünyadaki Kritik Oluşturma Yolunu Optimize Etme

Kritik Oluşturma Yolu, bir sayfayı yüklemek için ihtiyacınız olan kodu ifade eder. Genel olarak sayfa yükleme sırasında yalnızca kritik kodları göndererek ve ardından geç yükleyerek sayfa yüklemeyi hızlandırabilir. geri dönüp bakarsınız.

• Hemen kaldırabileceğiniz komut dosyaları bulmanız pek olası olmasa da çoğu zaman sayfa yükleme sırasında birçok komut dosyası istenmesine gerek yoktur, eşzamansız olarak ayarlayabilirsiniz. Eşzamansız kullanımı veya ertelemeyi kullanma bölümüne göz atın.
• Bir çerçeve kullanıyorsanız çerçevenin üretim modunun olup olmadığını kontrol edin. Bu mod, Kritik oluşturmayı engelleyen gereksiz kodu ortadan kaldırmak için ağaç sallama olarak adlandırılır.

Daha az ana iş parçacığı işi yap

Son raporunuzda, Fırsatlar bölümünde bazı küçük potansiyel tasarruflar gösteriliyor. Teşhis bölümüne bakacak olursak, en büyük performans sorununun ana iş parçacığının etkinliği'ne dokunun.

Ana iş parçacığı, tarayıcının bir sayfayı görüntülemek için gereken çalışmanın çoğunu (ör. ayrıştırma) yaptığı yerdir JavaScript'in çalıştırılmasına yardımcı olur.

Hedef, Performans panelini kullanarak ve gereksiz işleri ertelemenin veya kaldırmanın yollarını bulmaya çalışın.

1. Performans'ı açın > Yakalama Ayarları'nı tıklayın ve Ağ'ı Yavaş 3G, CPU'yu ise 6x yavaşlama olarak ayarlayın.

   

   Mobil cihazların donanım kısıtlaması genellikle dizüstü veya masaüstü bilgisayarlara göre daha fazladır. Bu nedenle bu ayarlar, sayfa yükleme deneyimini daha az güçlü bir cihaz kullanıyormuşsunuz gibi gerçekleştirmenizi sağlar.

2. Yenile'yi Yeniden yükle'yi tıklayın. Geliştirici Araçları sayfayı yeniden yükler ve ardından sayfayı yüklemek için yapılması gerekenlerin bir görselleştirmesini oluşturur. Bu görselleştirme, iz olarak adlandırılır.

   

İz, etkinliği kronolojik olarak soldan sağa doğru gösterir. Aynı konumdaki FPS, CPU ve NET grafikleri Burada saniyedeki kare sayısı, CPU etkinliği ve ağ etkinliğine dair genel bir bakış sunulur.

Genel Bakış bölümünde gördüğünüz sarı renkli duvar, CPU'nun komut dosyası yazma işlemiyle tamamen meşgul olduğu anlamına gelir. Bu, daha az JavaScript işi yaparak sayfa yüklemeyi hızlandırabileceğinize dair bir ipucudur.

Daha az JavaScript işi yapmanın yollarını bulmak için izleme kodunu inceleyin:

1. Zamanlamalar bölümünü tıklayarak genişletin.

   

   React'te birkaç Kullanıcı Zamanlaması ölçümü var. Tony'nin uygulaması React'in geliştirme modunu kullanıyor. React'in üretim moduna geçmek, muhtemelen bazı basit performans kazanımları sağlayacaktır.

2. Zamanlamalar'ı tekrar tıklayarak bu bölümü daraltın.

3. Ana bölüme göz atın. Bu bölümde ana iş parçacığı etkinliğinin kronolojik günlüğü gösterilir. soldan sağa. Y ekseni (yukarıdan aşağıya), etkinliklerin neden gerçekleştiğini gösterir.

   

   Bu örnekte Evaluate Script etkinliği, (anonymous) işlevinin yürütülmesine neden oldu. Bu da __webpack__require__ ürününün yürütülmesine, bunun da ./src/index.jsx adlı işlevin yürütülmesine ve bu şekilde devam etmesine neden oldu.

4. Ana bölümün altına ilerleyin. Bir çerçeve kullandığınızda en üstteki etkinliklerin çoğu çerçeveden kaynaklanır ve bu da genelde sizin kontrolünüzdedir. Uygulamanızın neden olduğu etkinlik genellikle en altta yer alır.

   

   Bu uygulamada, App adlı bir işlevin mineBitcoin işlevine çok fazla çağrıya neden olduğu anlaşılıyor. Tony, takipçilerinin cihazlarını kullanarak kripto para birimi madenciliği yapıyor olabilir.

5. En alttaki Aşağıdan Yukarıya sekmesini açın. Bu sekmede en çok zaman alan etkinliklerin dökümü yer alır. Aşağıdan Yukarı bölümünde herhangi bir şey görmüyorsanız Ana bölümün etiketini tıklayın.

   

   Aşağıdan Yukarıya bölümünde yalnızca o etkinliğe veya etkinlik grubuna ait bilgiler şu anda seçili. Örneğin, mineBitcoin etkinliklerinden birini tıklarsanız Aşağıdan Yukarıya bölümünde yalnızca bu etkinlikle ilgili bilgiler gösterilir.

   Aktivite Süresi sütunu, her aktivitede doğrudan ne kadar zaman harcandığını gösterir. Bu örnekte, ana iş parçacığı süresinin yaklaşık% 82'si mineBitcoin işlevine harcanıyordu.

Şimdi üretim modunu kullanıp kullanmadığınızı ve JavaScript etkinliğini azaltıp azaltmadığınızı görme zamanı sayfanın yüklenmesini hızlandırır. Üretim moduyla başlayın:

1. Düzenleyici sekmesinde webpack.config.js sayfasını açın.
2. "mode":"development" değerini "mode":"production" olarak değiştirin.
3. Yeni derlemenin dağıtılmasını bekleyin.

4. Sayfayı tekrar denetleyin.

   

mineBitcoin çağrısını kaldırarak JavaScript etkinliğini azaltın:

1. Düzenleyici sekmesinde src/App.jsx sayfasını açın.
2. constructor'de this.mineBitcoin(1500) için yapılan görüşmeye yorum ekleyin.
3. Yeni derlemenin dağıtılmasını bekleyin.
4. Sayfayı tekrar denetleyin.

Her zaman olduğu gibi hâlâ yapmanız gereken şeyler vardır. Örneğin, Largest Contentful Paint ve Cumulative Layout Shift metriklerini azaltmak.

Gerçek dünyada daha az ana iş parçacığı işi yapma

Genel olarak Performans paneli, sitenizin ne tür etkinliklerde bulunduğunu anlamanın en yaygın yoludur görebilir ve gereksiz etkinlikleri kaldırmanın yollarını bulabilirsiniz.

console.log() gibi görünen bir yaklaşım tercih ederseniz User Timing API'yi kullanarak Bu aşamaların her birinin ne kadar sürdüğünü izlemek için uygulama yaşam döngüsünün belirli aşamalarını rastgele işaretleyebilirsiniz. pek çok farklı görev vardır.

Özet

• Bir sitenin yük performansını optimize etmeyi denediğinizde, her zaman açıklayabiliriz. Bu denetim bir temel oluşturur ve bunu nasıl yapacağınızla ilgili ipuçları verir yardımcı olabilir.
• Her defasında bir değişiklik yapın ve aşağıdakileri sağlamak için sayfayı her değişiklikten sonra denetleyin. bu münferit değişikliğin performansı nasıl etkilediğini görün.

Sonraki adımlar

Kendi sitenizde denetim yapın! Raporunuzu yorumlama veya yükleme performansınızı iyileştirmenin yollarını bulma konusunda yardıma ihtiyacınız varsa Geliştirici Araçları topluluğundan yardım almanın tüm yollarına göz atın:

• Bu dokümandaki hataları developer.chrome.com deposuna gönderin.
• Geliştirici Araçları ile ilgili hata raporlarını Chromium Hataları sayfasından bildirebilirsiniz.
• Posta Listesi'ndeki özellikleri ve değişiklikleri tartışın. Lütfen posta listesini destek soruları oluşturabilirsiniz. Bunun yerine Stack Overflow'u kullanın.
• Geliştirici Araçları'nın nasıl kullanılacağıyla ilgili genel yardım için Stack Overflow'u ziyaret edin. Hata isteği göndermek için her zaman Chromium Hataları'nı kullanın.
• @ChromeDevTools adresinden bize tweet gönderin.