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

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

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 yiyecekleri öğrenebilmesi için bir web sitesi oluşturdu. Hayranları siteyi çok sevse de Tolga, sitenin yavaş yüklendiği yönünde şikayetler duymaya devam ediyor. Tony, siteyi hızlandırmasına yardımcı olmanızı istedi.

1. Adım: Siteyi denetleyin

Bir sitenin yük performansını iyileştirmek için çıktığınızda her zaman bir denetimle başlayın. 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.

Ayarla

Öncelikle, Tony'nin web sitesi için yeni bir çalışma ortamı oluşturmanız gerekir. Böylece daha sonra bu ortamda değişiklik yapabilirsiniz:

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 > Yeni pencerede önizle'yi tıklayın. 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.

   

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. Aşağıda farklı seçeneklerin açıklamasını bulabilirsiniz:

   • 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. İze, Lighthouse raporu oluşturulduktan sonra more_vert Araçlar menüsü > Kısıtlanmamış İzi Görüntüle bölümünden ulaşabilirsiniz.
   • 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 sürecinde kısıtlama yapmadığından "simüle" olarak adlandırılmıştır. 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 görünümü simüle eder. 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 başka sekme açmadan gizli pencereden çalıştırmayı deneyin. Bu, Chrome'u temiz bir durumda çalıştırmanızı sağlar. Özellikle Chrome uzantıları, denetim sürecini engelleyebilir.

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 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 ne zaman boyandığını bildirir. Bu, kullanıcının sayfa yükleme algısında önemli bir kilometre taşıdır. Etkileşime Kalan Süre ise sayfanın kullanıcı etkileşimlerini işlemeye yetecek kadar hazır göründüğü 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ın nasıl artırılacağına ilişkin spesifik ipuçları sağlayan 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 belgeleri ve bu fırsatların nasıl düzeltileceğiyle ilgili belirli önerileri görmek için Daha fazla bilgi... seçeneğini tıklayın.

Teşhisler

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 uygulayacak ve her değişiklikten sonra sitenin hızını nasıl etkilediğini ölçmek için siteyi denetleyeceksiniz.

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

Raporunuza göre, metin sıkıştırmayı etkinleştirmenin, sayfanın performansını artırmak için en iyi fırsatlardan biri 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. Bu, boyutunu küçültmek için bir klasörü e-postayla göndermeden önce sıkıştırmak gibidir.

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 etmenin birkaç yolu vardır.

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. En düşük değer, sıkıştırılmamış kaynağın boyutudur. İki değer aynıysa kaynak, ağ üzerinden gönderilirken sıkıştırılmıyordur. 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. Bunu görmezsiniz, yani bundle.js sıkıştırılmamıştır. Bir kaynak sıkıştırıldığında bu üst bilgi genellikle gzip, deflate veya br olarak ayarlanır. Bu değerlerin açıklaması için Yönergeler'e bakın.

Bu kadar açıklama yeterli. Bazı değişiklikler 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()) öğ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ükleme performansı üzerindeki etkisini ölçmek için sayfadaki 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ı ö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! Metni sıkıştırmak için kullandığınız sunucuyu nasıl yapılandıracağınızı arayın.

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 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. 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, puanın net bir şekilde göstermediği bir şey de kullanıcılarınızı ne kadar ağ verisi tasarrufunda bulunduğunuzdur. Eski fotoğrafların toplam boyutu yaklaşık 6, 1 MB iken şu an yaklaşık 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 bu büyük bir uygulama için kesinlikle ölçeklenebilir değildir. 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 resmin boyutunu küçülten özel bir program aracılığıyla çalıştırma işlemidir. Daha fazla ipucu için Temel Resim Optimizasyonu bölümüne bakın.

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 engelleyici kaynak, tarayıcının sayfayı göstermeden önce 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.

O halde ilk görev, sayfa yükleme sırasında 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. 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. Yanında yeşil bir çubuk varsa kod satırı çalıştırılmıştır. Kod satırının yanındaki kırmızı çubuk, kodun yürütülmediğini ve sayfa yüklemesinde kesinlikle gerekli olmadığını gösterir.

   

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

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

Sayfayı yüklemek için jquery.js ve lodash.js dosyaları gerekli mi? İ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 İ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 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 mevcut olmadığında sayfanızın nasıl davranacağının simüle edilmesi için yararlıdır.

Ş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önderip diğer her şeyi geç yükleyerek hızlandırabilirsiniz.

• Hemen kaldırabileceğiniz komut dosyaları bulmanız pek olası değildir, ancak genellikle birçok komut dosyasının sayfa yükleme sırasında istenmesinin gerekmediğini, bunun yerine eşzamansız olarak istenebileceğini fark edersiniz. 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şturma işlemini engelleyen gereksiz kodları ortadan kaldırmak için ağaç sallama gibi bir özelliği 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 ekranı Teşhis bölümüne kaydırdığınızda en büyük performans sorununun ç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 HTML, CSS ve JavaScript'i ayrıştırma ve yürütme gibi işlemlerin çoğunu yaptığı yerdir.

Amaç, sayfa yüklenirken ana iş parçacığının yaptığı işi analiz etmek ve gereksiz işleri ertelemenin 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ı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. 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. Üst kısımdaki 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 izini 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 soldan sağa doğru kronolojik bir 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 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 ü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 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 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ı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 kullanmanın ve JavaScript etkinliğinin azaltılmasının sayfa yüklemeyi hızlandırıp hızlandırmadığına bakacağız. Ü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 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ük performansını optimize etmeyi çıktığınızda her zaman 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 yalıtılmış 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:

• 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. Destek soruları için lütfen 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 Hataları'nı kullanın.
• @ChromeDevTools adresinden bize tweet gönderin.