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

Genel Bakış

Web sitenizin kapsamlı bir denetimini yapmak için Lighthouse panelini kullanın. Lighthouse paneli, web sitenizle ilgili aşağıdaki konularda bilgi veren 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 artırabileceği diğer yöntemler hakkında daha fazla bilgi edinmek için Lighthouse dokümanlarımıza göz atın.

Eğitimin amacı

Bu eğitimde, web sitelerinizin daha hızlı yüklenmesini sağlayacak yöntemleri bulmak için Chrome Geliştirme Araçları'nı nasıl kullanacağınız açıklanmaktadır.

Devamını okuyun veya bu eğitimle ilgili videoyu izleyin:

Ön koşullar

Bu Web Geliştirmeye Giriş sınıfında öğretilenlere benzer temel düzeyde web geliştirme deneyiminiz olmalıdır.

Yük performansı hakkında bilgi sahibi olmanız gerekmez.

Giriş

Adım Tolga. Tony, kedi dünyasında ç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. Tolga, siteyi hızlandırmanıza yardım etmenizi istedi.

1. Adım: Siteyi denetleyin

Bir sitenin yükleme performansını iyileştirmeye karar verdiğinizde her zaman bir denetimle başlayın. Denetim iki önemli işleve sahiptir:

• Sonraki değişiklikleri ölçebilmeniz için bir referans 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'teki projesini remiksleyin. Yeni projeniz bir sekmede açılır. Bu sekmeye düzenleyici sekmesi adı verilir.

   

   Projenin adı tony yerine rastgele oluşturulan bir adla değiştirilir. Artık kodun düzenlenebilir bir kopyasına sahipsiniz. Daha sonra bu kodda değişiklik yapacaksınız.

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

   

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

   

Referans değer belirleme

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

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

   

2. Lighthouse raporu yapılandırma ayarlarınızı ekran görüntüsündeki ayarlarla eşleştirin. Farklı seçenekler aşağıda açıklanmıştır:

   • check_box Depolama alanını temizle'yi seçin. Bu onay kutusunu etkinleştirmek, her denetimden önce sayfayla ilişkili tüm depolama alanını temizler. İlk kez sitenizi ziyaret eden kullanıcıların sitenizde nasıl bir deneyim yaşadığını denetlemek istiyorsanız bu ayarı açık bırakın. Tekrar ziyaret deneyimini kullanmak istediğinizde bu ayarı devre dışı bırakın.
   • check_box JS örneklemeyi etkinleştir'i seçin. Bu seçenek varsayılan olarak kapalıdır. Etkinleştirildiğinde performans izlemeye ayrıntılı JavaScript çağrı yığınları ekler ancak rapor oluşturma işlemini yavaşlatabilir. İzleme, Lighthouse raporu oluşturulduktan sonra more_vert Araçlar menüsü > Sıkıştırılmamış İzlemeyi Görüntüle bölümünde bulunur.
   • Kısıtlama simülasyonu (varsayılan) arrow_drop_down. Bu seçenek, mobil cihazda gezinmeyle ilgili tipik koşulları simüle eder. Lighthouse, denetleme işlemi sırasında gerçekten de kısıtlama yapmadığından bu işleme "taklit" adı verilir. Bunun yerine, sayfanın mobil koşullarda yüklenmesinin ne kadar süreceğ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 > radio_button_checked Navigasyon (Varsayılan)'ı seçin. Bu mod, tek bir sayfa yükleme işlemini analiz eder. Bu eğitimde ihtiyacımız olan da budur. Daha fazla bilgi için Üç mod bölümüne bakın.
   • Cihaz > radio_button_checked Mobil'e gidin. Mobil seçenek, kullanıcı aracısı dizesini değiştirir ve mobil bir görüntü alanını simüle eder. Masaüstü seçeneği, mobil değişiklikleri devre dışı bırakır.
   • Kategoriler > check_box Performans'ı tıklayın. Etkinleştirilen tek bir kategori, Lighthouse'un yalnızca ilgili denetim grubunu içeren bir rapor oluşturmasını sağlar. Diğer kategorilerin sağladığı öneri türlerini görmek istiyorsanız bu kategorileri etkin durumda bırakabilirsiniz. Alakasız kategorileri devre dışı bırakmak, denetim sürecini biraz hızlandırır.

3. Sayfa yükleme etkinliğini 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 başka sekmelerin açık olmadığı bir gizli pencerede çalıştırmayı deneyin. Bu sayede Chrome'u temiz bir durumda çalıştırabilirsiniz. Özellikle Chrome uzantıları, denetim sürecini etkileyebilir.

Raporunuzu anlama

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

Metrikler

Metrikler bölümüne gidip Görünümü genişlet'i tıklayın. Bir metrik hakkındaki dokümanları okumak için Daha fazla bilgi...'yi tıklayın.

Bu bölümde, sitenin performansıyla ilgili nicel ölçümler sunulur. Her metrik, performansın farklı bir yönüyle ilgili bilgi sağlar. Örneğin, İlk Zengin İçerikli Boyama, içeriğin ekrana ilk ne zaman boyandığını gösterir. Bu, kullanıcının sayfa yükleme algısında önemli bir aşamadır. Etkileşime Geçiş Süresi ise sayfanın kullanıcı etkileşimlerini işlemek için yeterince hazır olduğu noktayı işaret eder.

Ekran görüntüleri

Ardından, sayfanın yüklenmesi sırasında nasıl göründüğünü gösteren bir ekran görüntüsü koleksiyonu yer alır.

Fırsatlar

Ardından, söz konusu sayfanın yükleme performansını iyileştirmeyle ilgili özel ipuçları sunan Fırsatlar bölümü gelir.

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ünde, sayfanın yükleme süresini etkileyen faktörler hakkında daha fazla bilgi verilmektedir.

Denetimler geçti

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

2. adım: Deneme

Lighthouse raporunuzun Fırsatlar bölümünde, sayfanın performansını nasıl iyileştireceğinizle ilgili ipuçları bulabilirsiniz. Bu bölümde, kod tabanında önerilen değişiklikleri uygular ve her değişiklikten sonra site hızını nasıl etkilediğini ölçmek için siteyi denetlersiniz.

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

Raporunuzda, sayfanın performansını iyileştirmek için en iyi fırsatlardan birinin metin sıkıştırmayı etkinleştirmek olduğu belirtiliyor.

Metin sıkıştırma, bir metin dosyasını ağ üzerinden göndermeden önce boyutunu küçültme veya sıkıştırma işlemidir. Bir klasörü e-postayla göndermeden önce sıkıştırarak boyutunu küçültmenize benzer.

Sıkıştırmayı etkinleştirmeden önce, metin kaynaklarının sıkıştırılıp sıkıştırılmadığını manuel olarak kontrol edebileceğiniz birkaç yöntem aşağıda verilmiştir.

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

Her Boyut hücresi iki değer gösterir. En yüksek değer, indirilen kaynağın boyutudur. Alt değer, sıkıştırılmamış kaynağın boyutudur. İki değer aynıysa kaynak ağ üzerinden gönderilirken sıkıştırılmamaktadır. Bu örnekte, bundle.js için hem üst hem de alt değerler 1.4 MB'dur.

Sıkıştırma olup olmadığını kontrol etmek için kaynağın HTTP üst bilgilerini de inceleyebilirsiniz:

1. bundle.js dosyasını tıklayın ve Başlıklar sekmesini açın.

   

2. Yanıt Başlıkları bölümünde content-encoding başlığını arayın. Böyle bir mesaj görmüyorsanız bundle.js sıkıştırılmamıştır. 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. Değişiklik yapma zamanı! Birkaç satır kod ekleyerek metin sıkıştırmayı etkinleştirin:

1. Düzenleyici sekmesinde server.js dosyasını açın ve aşağıdaki iki (vurgulanmış) 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.

   

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

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

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

   Boyut sütununda artık bundle.js gibi metin kaynakları için iki farklı değer gösterilir. bundle.js için 269 KB değerinin üst sınırı, ağ üzerinden gönderilen dosyanın boyutudur ve 1.4 MB değerinin alt sınırı, sıkıştırılmamış dosya boyutudur.

   

2. bundle.js için Yanıt Üstbilgileri bölümünde artık bir content-encoding: gzip üstbilgisi yer almalıdır.

   

Metin sıkıştırmanın sayfanın yükleme 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 Denetim yap...'ı tıklayın.

   

2. Ayarları eskisi gibi bırakın ve Sayfa yüklemesini analiz et'i tıklayın.

   

Harika! Bu ilerleme kaydediyorsunuz demektir. Genel performans puanınız artmış olmalıdır. Bu, sitenin hızının arttığı anlamına gelir.

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

Çoğu sunucuda, sıkıştırmayı etkinleştirmek için bu gibi basit düzeltmeler vardır. Metni sıkıştırmak için kullandığınız sunucuyu nasıl yapılandıracağınız hakkında arama yapmanız yeterlidir.

Resimleri yeniden boyutlandırma

Yeni raporunuza göre, resimleri doğru boyuta getirmek de önemli bir fırsat.

Resimlerin boyutunu küçültmek, dosya boyutlarını azaltarak yükleme süresini kısaltır. Kullanıcınız resimlerinizi 500 piksel genişliğinde bir mobil cihaz ekranında görüntülüyorsa 1.500 piksel genişliğinde bir resim göndermenin bir anlamı yoktur. İ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 Görselleri uygun şekilde boyutlandırın'ı tıklayın. 4 resmin de gerekenden büyük olduğu anlaşılıyor.

   

2. Düzenleyici sekmesine geri dönüp src/model.js'ü açın.

3. const dir = 'big' yerine const dir = 'small' yazın. Bu dizin, aynı resimlerin yeniden boyutlandırılmış kopyalarını içerir.

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

   

Değişikliğin genel performans puanı üzerinde yalnızca küçük bir etkisi olduğu görülüyor. Ancak puan, kullanıcılarınıza ne kadar ağ verisi tasarrufu sağladığınızı net bir şekilde göstermez. Eski fotoğrafların toplam boyutu yaklaşık 6, 1 MB iken şu anda yalnızca 633 KB'tır. Bu durumu Ağ panelinin alt kısmındaki durum çubuğundan kontrol edebilirsiniz.

Gerçek dünyadaki resimleri yeniden boyutlandırma

Küçük bir uygulama için bu şekilde tek seferlik bir yeniden boyutlandırma yapmak yeterli olabilir. Ancak büyük bir uygulama için bu yöntem ölçeklenebilir değildir. Büyük uygulamalarda resimleri yönetmeye yönelik bazı stratejiler şunlardır:

• Derleme işleminiz sırasında resimleri yeniden boyutlandırabilirsiniz.
• Derleme işlemi sırasında her resmin birden fazla boyutunu oluşturun ve ardından kodunuzda srcset kullanın. Tarayıcı, çalışma zamanında çalıştığı cihaz için en iyi boyutu seçer. Göreceli boyutlu resimler başlıklı makaleyi inceleyin.
• İstediğinizde bir resmi dinamik olarak yeniden boyutlandırmanıza olanak tanıyan bir resim CDN'si kullanın.
• En azından her resmi optimize edin. Bu, genellikle büyük tasarruflar sağlayabilir. Optimizasyon, bir resmi, resim dosyasının boyutunu küçülten özel bir programdan geçirme işlemidir. Daha fazla ipucu için Temel Resim Optimizasyonu başlıklı makaleyi inceleyin.

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

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

Oluşturma işlemini engelleyen kaynak, tarayıcının sayfayı gösterebilmesi için indirmesi, ayrıştırması ve yürütmesi gereken harici bir JavaScript veya CSS dosyasıdır. 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.

Dolayısıyla ilk görev, sayfa yüklenirken yürütülmesi gerekmeyen kodu bulmaktır.

1. Engelleyen kaynakları görmek için Oluşturmayı engelleyen 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 Komut+Ü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 Yeniden yükle'yi tıklayın. Kapsam sekmesi, sayfa yüklenirken bundle.js, jquery.js ve lodash.js kodlarının ne kadarının yürütüldüğüne dair genel bir bakış sunar.

   

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

5. jquery.js satırını tıklayın. DevTools, dosyayı Kaynaklar panelinde açar. Yanında yeşil bir çubuk bulunan kod satırları yürütülmüştür. 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ırlardan bazıları aslında yorumdur. Bu kodu, yorumları kaldıran bir kod sıkıştırıcıdan geçirmek de dosyanın boyutunu küçültmenin bir yoludur.

Özetlemek gerekirse, kendi kodunuzla çalışırken Kapsam sekmesi, kodunuzu satır satır analiz etmenize ve yalnızca sayfa yüklemesi için gereken kodu göndermenize yardımcı olabilir.

Sayfanın yüklenmesi için jquery.js ve lodash.js dosyalarına gerçekten ihtiyaç var mı? İstek Engelleme sekmesi, kaynaklar kullanılamadığında ne olduğunu gösterebilir.

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

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

   

3. Kalem simgesini 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 engellenmişlerdir. 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, belirli bir kaynak kullanılamadığında sayfanızın nasıl davrandığını simüle etmek için kullanışlıdır.

Ardından, bu dosyalara yapılan referansları koddan kaldırın ve sayfayı tekrar denetleyin:

1. Düzenleyici sekmesine geri dönüp template.html'ü 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ıdır.

   

Gerçek dünyada 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ı bulma olasılığınız düşüktür ancak birçok komut dosyasının sayfa yükleme sırasında istenmesi gerekmediğini ve bunun yerine eşzamanlı olarak istenebileceğini sıklıkla göreceksiniz. async veya defer kullanma başlıklı makaleyi inceleyin.
• Bir çerçeve kullanıyorsanız üretim modunun olup olmadığını kontrol edin. Bu mod, kritik oluşturmayı engelleyen gereksiz kodu ortadan kaldırmak için ağaç sallama gibi bir özellik kullanabilir.

Ana iş parçacığında daha az işlem yapma

Son raporunuzda Fırsatlar bölümünde bazı küçük potansiyel tasarruflar gösteriliyor ancak Teşhis bölümüne gittiğinizde en büyük darboğazın çok fazla ana iş parçacığı etkinliği olduğu görülüyor.

Ana iş parçacığı, tarayıcının bir sayfayı görüntülemek için gereken çalışmaların çoğunu (ör. HTML, CSS ve JavaScript'i ayrıştırma ve yürütme) yaptığı yerdir.

Amaç, sayfa yüklenirken ana iş parçacığının yaptığı işi analiz etmek ve gereksiz işleri erteleme veya kaldırmanın yollarını bulmak için Performans panelini kullanmaktır.

1. Performans > Kayıt Ayarları'nı açın ve Ağ'ı Yavaş 3G, CPU'yu ise 6 kat yavaşlatma olarak ayarlayın.

   

   Mobil cihazlar genellikle dizüstü veya masaüstü bilgisayarlara kıyasla daha fazla donanım kısıtlamasına sahiptir. Bu nedenle, bu ayarlar sayfanın yüklenmesini daha az güçlü bir cihaz kullanıyormuşsunuz gibi deneyimlemenizi sağlar.

2. Yenile Yeniden yükle'yi tıklayın. Geliştirici Araçları sayfayı yeniden yükler ve ardından sayfayı yüklemek için yapması gereken tüm işlemlerin görselleştirmesini oluşturur. Bu görselleştirmeye iz adı verilir.

   

İz, etkinliği soldan sağa doğru kronolojik olarak 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ı duvar, CPU'nun komut dosyası etkinliğiyle 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 çalışması yapmanın yollarını bulmak için izlemeyi inceleyin:

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

   

   React'ten bir dizi Kullanıcı Zamanlaması ölçümü var. Tony'nin uygulamasında React'in geliştirme modu kullanılıyor. React'in üretim moduna geçmek, muhtemelen performans açısından kolayca kazanç elde etmenizi sağlayacaktır.

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

3. Ana bölümüne göz atın. Bu bölümde, ana iş parçacığı etkinliğinin soldan sağa doğru kronolojik günlüğü gösterilir. 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ün en altına gidin. Bir çerçeve kullandığınızda üstteki etkinliğin çoğu, genellikle sizin kontrolünüz dışında olan çerçeveden kaynaklanır. Uygulamanızın neden olduğu etkinlik genellikle en altta yer alır.

   

   Bu uygulamada, App adlı bir işlevin mineBitcoin işlevine çok sayıda çağrı gönderdiği anlaşılıyor. Tony, kripto para birimi madenciliği yapmak için takipçilerinin cihazlarını kullanıyor olabilir...

5. En alttaki Aşağıdan Yukarı 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ün etiketini tıklayın.

   

   Aşağıdan Yukarı bölümünde yalnızca şu anda seçtiğiniz etkinlik veya etkinlik grubuyla ilgili bilgiler gösterilir. Örneğin, mineBitcoin etkinliklerinden birini tıkladıysanız Aşağıdan Yukarı bölümünde yalnızca bu etkinlikle ilgili bilgiler gösterilir.

   Kendi kendine zaman sütunu, doğrudan her etkinlikte ne kadar zaman harcandığını gösterir. Bu durumda, ana iş parçacığı süresinin yaklaşık% 82'si mineBitcoin işlevinde harcanmıştır.

Üretim modunu kullanmanın ve JavaScript etkinliğini azaltmanın sayfa yükleme hızını artırıp artırmadığını görmenin zamanı geldi. Üretim moduyla başlayın:

1. Düzenleyici sekmesinde webpack.config.js öğesini 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 dosyasında this.mineBitcoin(1500) çağrısını yoruma alın.
3. Yeni derlemenin dağıtılmasını bekleyin.
4. Sayfayı tekrar denetleyin.

Her zaman olduğu gibi, Largest Contentful Paint ve Cumulative Layout Shift metriklerini azaltmak gibi yapmanız gerekenler var.

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

Genel olarak, siteniz yüklenirken hangi etkinliği gerçekleştirdiğini anlamak ve gereksiz etkinlikleri kaldırmanın yollarını bulmak için en yaygın yöntem Performans panelidir.

console.log() gibi bir yaklaşımı tercih ediyorsanız Kullanıcı Zamanlaması API'si, uygulama yaşam döngünüzün belirli aşamalarını keyfi olarak işaretlemenize olanak tanır. Böylece, bu aşamaların her birinin ne kadar sürdüğünü izleyebilirsiniz.

Özet

• Bir sitenin yükleme performansını optimize etmeye karar verdiğinizde her zaman bir denetimle başlayın. Denetim, bir referans noktası oluşturur ve nasıl iyileştireceğiniz konusunda size ipuçları verir.
• Tek seferde bir değişiklik yapın ve her değişiklikten sonra sayfayı denetleyerek bu tek değişikliğin performansı nasıl etkilediğini görün.

Sonraki adımlar

Kendi sitenizde denetimler yapın. Raporunuzu yorumlama veya yükleme performansınızı iyileştirmenin yollarını bulma konusunda yardıma ihtiyacınız varsa DevTools 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 listesinde özellikler ve değişiklikler hakkında konuşabilirsiniz. Lütfen destek soruları için posta listesini kullanmayın. Bunun yerine Stack Overflow'u kullanın.
• Stack Overflow'da DevTools'un nasıl kullanılacağıyla ilgili genel yardım alın. Hata isteği göndermek için her zaman Chromium Bugs'ı kullanın.
• @ChromeDevTools hesabına tweet gönderin.