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

Kayce Basques

Sofia Emelianova

Genel Bakış

Web sitenizi kapsamlı bir şekilde denetlemek için Lighthouse panelini kullanın. Lighthouse paneli, web sitenizle ilgili aşağıdakilerle ilgili bilgi sağlayan bir rapor oluşturur:

• Performans
• Erişilebilirlik
• En İyi Uygulamalar
• SEO

... ve diğer birçok metrik.

Aşağıdaki eğitim, Chrome Geliştirici Araçları'nda Lighthouse'u kullanmaya başlamanıza yardımcı olur.

Lighthouse'un web sitenizin kalitesini iyileştirebileceği diğer yöntemler hakkında daha fazla bilgi edinmek için Lighthouse belgelerimize bakın.

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:

Bu video Chrome 68 ile üretildi. Verilen bilgilerin çoğu hâlâ geçerli ancak bazı özellikler güncellendi. Örneğin, Denetimler panelinin adı Lighthouse olarak değiştirildi. farklı bir görünüme sahip olsa da aynı seçeneklerin tümü kullanılabilir durumdadır.

Ö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ü. Takipçilerinin en sevdiği yemekleri öğrenebilmesi için bir web sitesi oluşturdu. Takipçileri siteyi seviyor ancak Tony, sitenin yavaş yüklenmesiyle ilgili şikayetler alıyor. Tony, siteyi hızlandırmasına yardımcı olmanızı istedi.

Kedi Tony.

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 fazla etkiyi sağlayacak değişikliklerle ilgili uygulanabilir ipuçları sunar.

Kur

Öncelikle, daha sonra üzerinde değişiklik yapabilmeniz için Toni'nin web sitesi için yeni bir çalışma ortamı oluşturmanız gerekir:

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 yapacaksı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.

   

Önemli bilgi: Bu eğitimdeki geri kalan ekran görüntüleri için Geliştirici Araçları ayrı bir pencerede gösterilmektedir.

Bütçe temel çizgisi oluşturun

Referans, performans iyileştirmesi yapmadan önce sitenin nasıl performans gösterdiğinin kaydıdır.

1. Lighthouse panelini açın. Daha fazla panel'in arkasına gizlenmiş olabilir.

   Not: Bu panel, web uygulamalarınızın kalitesini iyileştirmek için kullanılan otomatik bir araç olan, aynı adı taşıyan Lighthouse adlı araç tarafından desteklenmektedir.

   

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 kutusunu etkinleştirmek, her denetimden önce sayfayla ilişkili tüm depolama alanını temizler. 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 devre dışıdır. Bu özellik etkinleştirildiğinde performans izlemeye ayrıntılı JavaScript çağrı yığınları ekler ancak rapor oluşturma işlemini 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) . Bu seçenek, mobil cihazda gezinmeyle ilgili tipik koşulları simüle eder. "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ı'nın kısıtlanması (gelişmiş) ayarı, daha uzun bir denetim süreci karşılığında CPU'nuzu ve ağınızı kısıtlar.
   • Mod > 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 > 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 bir durumda çalıştırabilirsiniz. Ö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

Aşağıda, sayfanın yüklenmesi sırasında nasıl göründüğünü gösteren ekran görüntüleri yer almaktadır.

Fırsatlar

Sonraki adım, söz konusu sayfanın yüklenmesini nasıl iyileştirebileceğinizle ilgili spesifik ipuçları sağlayan 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 dokümanları ve sorunu nasıl düzelteceğinizle ilgili önerileri görmek için Daha fazla bilgi'yi tıklayın.

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.

Denetimler geçti

Geçen denetimler bölümünde, sitenin neleri doğru yaptığı gösterilir. Genişletmek için tıklayın bölümüne bakın.

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 azaltmak 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 Ayarlar > Büyük istek satırları kullanın.

Önemli nokta: Ağ istekleri tablosunda Boyut sütununu görmüyorsanız tablo başlığını sağ tıklayın ve Boyut'u seçin.

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ırmayı 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 başlık genellikle gzip, deflate veya br olarak ayarlanır. Bu değerlerin açıklaması için Yönergeler bölümüne bakın.

Açıklamalar yeter. 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()) değerini app.use(express.static('build')) değerinin önüne koyduğunuzdan emin olun.

   

   Not: compression paketini genellikle npm i -S compression gibi bir araçla yüklemeniz gerekir, ancak bu işlem sizin için zaten yapıldı.

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üklenme performansı üzerindeki etkisini ölçmek için sayfa üzerinde Lighthouse raporunu tekrar çalıştırın:

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

   

2. Ayarları eskisi gibi bırakın ve Sayfa yüklemesini 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 500 piksel genişliğinde bir mobil cihaz ekranında görüntülemenin gerçekten 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. Amaç, yalnızca sayfayı düzgün bir şekilde görüntülemek için gereken temel CSS ve JavaScript kodunu çalıştırmaktır.

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 Kontroller+Ü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, satırın yürütülmediğini ve sayfa yüklenirken kesinlikle gerekli olmadığını gösterir.

   

6. jQuery kodunda biraz ilerleyin. "Yürütülen" satırların 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 kullanılamadığında ne olacağını gösterebilir.

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. Sayfa hâlâ yükleniyor ve etkileşimli. Bu nedenle bu kaynaklara hiç ihtiyaç yok.

   

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 kodu gönderip diğer her şeyi yavaş yükleme yaparak sayfa yükleme hızını artırabilirsiniz.

• 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. Asenkron veya erteleme kullanma başlıklı makaleyi inceleyin.
• 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.

Not: Bu bölümde, Performans paneli hakkında oldukça kısa bir tanıtım sunulmuştur. Görüntüleyin Sayfayı analiz etmek için nasıl kullanabileceğiniz hakkında daha fazla bilgi edinmek üzere performans özellikleri referansı

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, trace olarak adlandırılır.

   

İz, etkinliği kronolojik olarak soldan sağa doğru gösterir. Üstteki FPS, CPU ve NET grafikleri, saniyedeki kare sayısına, CPU etkinliğine ve ağ etkinliğine genel bir bakış sunar.

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 çalışması yaparak sayfa yükleme hızını artırabileceğinizin bir göstergesidir.

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 işlev, __webpack__require__ işlevinin yürütülmesine neden oldu. __webpack__require__ işlevi de ./src/index.jsx işlevinin yürütülmesine 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.

   Not: Çerçevenizin yaptığı çağrılar genellikle kontrolünüz dışında olsa da bazen uygulamanızı çerçevenin verimsiz çalışmasına neden olacak şekilde yapılandırabilirsiniz. Uygulamanızı, çerçeveyi verimli bir şekilde kullanacak şekilde yeniden yapılandırmak, ana iş parçacığında daha az çalışma yapmanın bir yolu olabilir. Bunun için çerçevenizin nasıl çalıştığını ve daha verimli bir şekilde kullanmak için kendi kodunuzda ne tür değişiklikler yapabileceğinizi derinlemesine anlamanız gerekir.

5. En alttaki Aşağıdan Yukarıya sekmesini açın. Bu sekmede, en çok zaman alan etkinlikler ayrıntılı olarak gösterilir. 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.

   Kendi kendine vakit sütunu, her bir 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 öğesini 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 yapmanız gereken şeyler vardır. Örneğin, Largest Contentful Paint ve Cumulative Layout Shift metriklerini azaltmanız gerekir.

Başarılı: Ancak son değişikliğin performansta büyük bir artışa neden olduğu anlaşılıyor.

Gerçek dünyada ana iş parçacığı üzerinde daha az çalışma 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.
• Tek seferde 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:

• developer.chrome.com deposunda bu dokümanla ilgili hata kaydı oluşturun.
• Chromium Hataları adresindeki DevTools'ta hata raporları gönderin.
• 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 Bugs'ı kullanın.
• @ChromeDevTools adresinden bize tweet gönderin.