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ı'ndaki 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 amacı

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.

Devamını okuyun veya bu eğitim içeriğinin video sürümünü izleyin:

Ön koşullar

Bu Web Geliştirmeye Giriş dersinde anlatılanlara benzer temel bir web geliştirme deneyimine sahip olmanız gerekir.

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ımcı olmanızı 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 değişiklik yapabilmek amacıyla Tony'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 sekmeye düzenleyici sekmesi adı verilir.

   

   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 > Yeni pencerede önizle'yi tıklayın. Demo yeni bir sekmede açılır. Bu sekmeye demo sekmesi adı verilir. Sitenin yüklenmesi biraz zaman alabilir.

   

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

   

Referans değer belirleme

Referans, performans iyileştirmesi 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. Tekrarlanan ziyaret deneyimi için 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 gezinmenin genel koşullarını 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ü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'e gidin. Mobil seçenek, kullanıcı aracısı dizesini değiştirir ve mobil 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. 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ü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 sekme açmadan gizli pencereden ç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 en üstündeki 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 ilerleyin ve 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üklendiği sırada nasıl göründüğünü gösteren ekran görüntüleri 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ü, sayfanın yükleme süresine katkıda bulunan faktörler hakkında daha fazla bilgi sağlar.

Başarılı denetimler

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

2. adım: Deneme

Lighthouse raporunuzun Fırsatlar bölümü, sayfanın performansını nasıl iyileştireceğinizle ilgili ipuçları verir. 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çın ve settings Ayarlar > check_box Büyük istek satırlarını 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 üst ve alt değerlerin ikisi de 1.4 MB.

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 Üstbilgileri bölümünde content-encoding üstbilgisi arayın. Bunu görmezsiniz, yani 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.

Bu kadar açıklama yeterli. Değişiklik yapma zamanı! Birkaç satır kod ekleyerek metin sıkıştırmayı etkinleştirin:

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.

   

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ı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ü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ü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 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 gibi görünüyor. 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 boyutlandırmak da ö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ğindeki bir mobil cihazın ekranında görüntülüyorsa, 1.500 piksel genişliğinde bir resim göndermenin gerçekten bir anlamı yoktur. İdeal olarak en fazla 500 piksel genişliğinde bir resim göndermeniz gerekir.

1. Raporunuzda, hangi resimlerin yeniden boyutlandırılması gerektiğini görmek için 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 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.

   

Değişikliğin genel performans puanı üzerinde çok az 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. Bunu Ağ panelinin alt kısmındaki durum çubuğunda 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 bu büyük bir uygulama için kesinlikle ö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 resmin boyutunu küçülten özel bir program aracılığıyla çalıştırma 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 artık en büyük fırsat, oluşturmayı engelleyen kaynakları ortadan kaldırmak.

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. Hedef, yalnızca sayfayı düzgün görüntülemek için gerekli olan çekirdek 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. Şu kaynakları engelleyen kaynakları görmek için Oluşturmayı engelleyen kaynakları ortadan kaldır'ı 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 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. Geliştirici Araçları, dosyayı Kaynaklar panelinde açar. Yanında yeşil bir çubuk varsa kod satırı çalıştırı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 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. 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 engellendi. Sayfa hâlâ yükleniyor ve etkileşimli olduğundan bu kaynaklara hiçbir şekilde ihtiyaç duymuyorsunuz.

   

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.

Şimdi, bu dosyalara yönelik 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. Eşzamansız kullanımı veya ertelemeyi kullanma bölümüne göz atın.
• 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.

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

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 > Yakalama Ayarları'nı açın ve Ağ'ı Yavaş 3G, CPU'yu ise 6x yavaşlama 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 sayfa yükleme deneyimini daha az güçlü bir cihaz kullanıyormuşsunuz gibi yaşamanızı 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 kronolojik olarak soldan sağa doğru gösterir. Üstteki FPS, CPU ve NET grafikleri, saniyedeki kare sayısı, CPU etkinliği ve ağ etkinliği hakkında 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 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 izi 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 bu 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 üst kısımdaki etkinliklerin çoğu genellikle çerçeveden kaynaklanır ve bu da genellikle sizin kontrolünüz dışında olur. 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, takipçilerinin cihazlarını kullanarak kripto para birimi madenciliği yapı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 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 Performans paneli, sitenizin yüklenirken hangi etkinlikleri yaptığını anlamanın ve gereksiz etkinlikleri kaldırmanın yollarını bulmanın en yaygın yoludur.

Daha çok console.log() hissi veren bir yaklaşım tercih ederseniz User Timing API, uygulama yaşam döngüsünün belirli aşamalarını rastgele işaretlemenize ve bu aşamaların her birinin ne kadar sürdüğünü takip etmenize olanak tanır.

Özet

• Bir sitenin yükleme performansını optimize etmeye karar verdiğinizde her zaman bir denetimle başlayın. Denetim, bir temel oluşturur ve nasıl iyileştirme yapabileceğinizle ilgili ipuçları verir.
• Her seferinde bir değişiklik yapın ve bu münferit değişikliğin performansı nasıl etkilediğini görmek için her değişiklikten sonra sayfayı denetleyin.

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 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.
• 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 hesabına tweet gönderin.