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

Eğitimin hedefi

Bu eğitimde, web sitelerinizin daha hızlı yüklenmesini sağlamanın yollarını bulmak için Chrome Geliştirici Araçları'nı nasıl kullanacağınız öğretilir.

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

Ön koşullar

Bu Web Geliştirmeye Giriş sınıfında anlatılanlara benzer bir temel web geliştirme deneyiminiz olmalıdır.

Yükleme performansı hakkında hiçbir şey bilmeniz gerekmez.

Giriş

Bu Tony. Tony, kedi toplumunda çok ünlü bir kişidir. Takipçilerinin favori yiyeceklerini öğrenebilmesi için bir web sitesi oluşturdu. Hayranları siteyi çok seviyor ancak Tony, sitenin yavaş yüklendiğine dair şikayetler duymaya devam ediyor. Tolga, siteyi hızlandırmasına yardımcı olmanızı istedi.

1. Adım: Siteyi denetleyin

Bir sitenin yükleme performansını iyileştirmeye her zaman bir denetimle başlayın. Denetimin iki önemli işlevi vardır:

• Sonraki değişiklikleri ölçebileceğiniz bir referans değer oluşturur.
• En büyük etkiye sahip olacak değişikliklerin neler olduğuyla ilgili uygulayabileceğiniz ipuçları sunar.

Ayarla

Öncelikle, daha sonra değişiklik yapabilmek üzere Tony'nin web sitesi için yeni bir çalışma ortamı oluşturmanız gerekiyor:

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

   

   Projenin adı tony yerine rastgele oluşturulmuş bir adla değiştirilir. Artık kodun düzenlenebilir 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ılacaktır. Sitenin yüklenmesi biraz zaman alabilir.

   

3. Demonun yanında Geliştirici Araçları'nı açın.

   

Bir temel oluşturun

Temel çizgi, 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 rapor yapılandırma ayarlarınızı ekran görüntüsündekilerle eşleştirin. Farklı seçeneklerle ilgili açıklamalarını burada bulabilirsiniz:

   • check_box Depolama Alanını Temizle. Bu onay kutusunu etkinleştirdiğinizde, her denetimden önce sayfayla ilişkili tüm depolama alanı temizlenir. Sitenize ilk kez gelen ziyaretçilerin deneyimini denetlemek istiyorsanız bu ayarı açık bırakın. Tekrar ziyaret deneyimine sahip olmak istediğinizde bu ayarı devre dışı bırakın.
   • Kısıtlama simülasyonu (varsayılan) arrow_drop_down. Bu seçenek, bir mobil cihazda gezinmenin tipik koşullarını simüle eder. Lighthouse, denetleme sürecinde kısıtlama yapmadığı için bu özelliğe "simüle edilmiş" denir. Bunun yerine, mobil koşullar altında sayfanın ne kadar sürede yükleneceğini tahmin eder. Öte yandan DevTools kısıtlama (gelişmiş) ayarı ise CPU'nuzu ve ağınızı kısıtlar. Bunun sonucunda da denetim süreci daha uzun sürer.
   • Mod > radio_button_checked Gezinme (Varsayılan). Bu mod, tek bir sayfa yüklemesini analiz eder ve bu eğiticide de bunu analiz ederiz. Daha fazla bilgi için Üç mod konusuna göz atı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, mobil değişiklikleri neredeyse devre dışı bırakır.
   • Kategoriler > check_box Performans. Etkinleştirilmiş tek bir kategori, Lighthouse'un yalnızca ilgili denetleme grubuyla bir rapor oluşturmasını sağlar. Sağladıkları öneri türlerini görmek isterseniz 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 işlemini analiz et'i tıklayın. 10 ila 30 saniye sonra, Lighthouse paneli size sitenin performansı hakkında bir rapor gösterir.

   

Rapor hatalarını işleme

Lighthouse raporunuzda hata alırsanız demo sekmesini başka sekme açık olmayan bir gizli pencereden çalıştırmayı deneyin. Bu işlem, Chrome'u temiz bir durumdan ç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 yükseldiğini 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 belgeleri okumak için Daha fazla bilgi...'yi tıklayın.

Bu bölümde, sitenin performansının nicel ölçümleri yer almaktadır. Her metrik, performansın farklı bir yönü hakkında bilgi sağlar. Örneğin, İlk Zengin İçerikli Boyama, içeriğin ekrana ilk kez boyandığı zamanı bildirir. Bu, kullanıcının sayfa yüklemeyi algılamasında önemli bir dönüm noktasıdır. Etkileşime Hazır Olma Süresi ise sayfanın, kullanıcı etkileşimlerini karşılamaya yetecek kadar hazır göründüğü noktayı belirtir.

Ekran görüntüleri

Şimdi, sayfanın yüklendiği sırada nasıl göründüğünü gösteren bir ekran görüntüsü koleksiyonu var.

Fırsatlar

Sırada bu sayfanın yükleme performansının nasıl iyileştirileceğiyle ilgili özel ipuçları bulunan Fırsatlar bölümü var.

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

Bir fırsatın neden önemli olduğu ile ilgili dokümanları ve bu fırsatın nasıl düzeltileceğine dair özel önerileri görmek için Daha fazla bilgi... öğesini tıklayın.

Teşhisler

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

Başarılı denetimler

Başarılı denetimler bölümü, sitenin neleri doğru şekilde yaptığını 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ı sağlar. Bu bölümde, site hızını nasıl etkilediğini ölçmek için her değişiklikten sonra siteyi denetleyerek kod tabanına önerilen değişiklikleri uygulayacaksınız.

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

Raporunuzda, metin sıkıştırmayı etkinleştirmenin sayfanın performansını iyileştirmek için en önemli fırsatlardan biri olduğu belirtilmektedir.

Metin sıkıştırma işlemi, bir metin dosyasını ağ üzerinden göndermeden önce boyutunu küçültür veya sıkıştırır. Örneğin, bir klasörü e-posta ile göndermeden önce boyutunu küçültmek için bunu sıkıştırabilirsiniz.

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ç yolunu aşağıda görebilirsiniz.

Ağ panelini açın ve 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. 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ılmaz. Bu örnekte, bundle.js için üst ve alt değerlerin ikisi de 1.4 MB'dir.

Kaynağın HTTP üstbilgilerini inceleyerek de sıkıştırma durumunu kontrol edebilirsiniz:

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

   

2. Yanıt Başlıkları bölümünde content-encoding üstbilgisi arayın. Görmemeniz gerekir. 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'i inceleyin.

Açıklamalar yeterli. Bazı değişiklikler yapma zamanı geldi! Birkaç kod satırı ekleyerek metin sıkıştırmayı etkinleştirin:

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

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

2. app.use(express.static('build')) tarihinden önce app.use(compression()) değerini girdiğinizden 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ütunu artık bundle.js gibi metin kaynakları için iki farklı değer göstermelidir. bundle.js için 269 KB değerinin en yüksek değeri ağ üzerinden gönderilen dosyanın boyutu, 1.4 MB en düşük değeri ise sıkıştırılmamış dosya boyutudur.

   

2. bundle.js için Yanıt Başlıkları bölümü artık bir content-encoding: gzip üstbilgisi içermelidir.

   

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 Denetim yap... öğesini tıklayın.

   

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

   

Harika! Bu ilerlemeye benziyor. Genel performans puanınız artmış olmalıydı, yani site hızlanıyordu.

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

Sunucuların çoğunun gerçekten sıkıştırmayı etkinleştirmek için bunun gibi basit düzeltmeleri vardır! Metin sıkıştırmak için kullandığınız sunucuyu nasıl yapılandıracağınızı araştırmanız yeterli.

Resimleri yeniden boyutlandırma

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

Resimleri yeniden boyutlandırmak, resimlerin dosya boyutunu küçülterek yükleme süresini kısaltmaya yardımcı olur. Kullanıcınız, resimlerinizi 500 piksel genişliğindeki bir mobil cihaz ekranında görüntülüyorsa 1.500 piksel genişliğinde bir resim göndermenin hiçbir anlamı yoktur. İdeal olarak, en fazla 500 piksel genişliğinde bir resim gönderirsiniz.

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

   

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

3. const dir = 'big' yerine const dir = 'small' koyun. Bu dizin, aynı resimlerin yeniden boyutlandırılan kopyalarını içeriyor.

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 anlaşılıyor. Ancak, puanın net bir şekilde göstermediği bir şey de kullanıcılarınıza ne kadar ağ verisi tasarrufu sağladığınızdır. Eski fotoğrafların toplam boyutu yaklaşık 6, 1 MB iken şu anda yalnızca 633 KB. Bunu Ağ panelinin alt kısmındaki durum çubuğundan kontrol edebilirsiniz.

Resimleri gerçek dünyada yeniden boyutlandırma

Küçük bir uygulama için bunun gibi tek seferlik bir yeniden boyutlandırma yapmak yeterli olabilir. Ancak büyük bir uygulama için bu kesinlikle ölçeklenebilir değildir. Büyük uygulamalardaki resimleri yönetmeyle ilgili bazı stratejileri burada bulabilirsiniz:

• Derleme işlemi sırasında resimleri yeniden boyutlandırın.
• Derleme işlemi sırasında her bir görüntünün birden fazla boyutunu oluşturun ve ardından kodunuzda srcset kullanın. Çalışma zamanında, tarayıcı çalıştığı cihaz için en uygun boyutu seçmeye dikkat eder. Göreli boyutlu resimler konusuna bakın.
• Bir resmi istediğinizde dinamik olarak yeniden boyutlandırmanıza olanak tanıyan bir resim CDN kullanın.
• En azından her bir resmi optimize edin. Bu yöntem çoğu zaman büyük tasarruflar sağlayabilir. Optimizasyon, bir resmi, resim dosyasının boyutunu küçülten özel bir program aracılığıyla çalıştırdığınızda yapılır. Daha fazla ipucu için Temel Resim Optimizasyonu konusuna bakın.

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

Son raporunuz, oluşturmayı engelleyen kaynakları ortadan kaldırmanın şu anda en büyük fırsat olduğunu söylüyor.

Oluşturma engelleyici 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 görüntülemek için gereken temel CSS ve JavaScript kodunu çalıştırmaktır.

Ardından ilk görev, sayfa yüklemede yürütülmesi gerekmeyen kodu bulmaktır.

1. 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ğıdakilere basın:

   • Mac'te Command+Üst Karakter+P
   • Windows, Linux veya ChromeOS'te Ctrl+Ü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 uygulamalarındaki kodun ne kadarının yürütüldüğüne dair genel bir bakış sağlar.

   

   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. Bir kod satırının yanında yeşil çubuk varsa yürütülür. Bir kod satırının yanındaki kırmızı çubuk, kodun 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 yorumlardır. Dosyanın boyutunu küçültmenin bir başka yolu da yorumları kaldıran bir küçültücü üzerinden bu kodu çalıştırmaktır.

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ına da gerek 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 ardından İstek Engellemeyi Göster'i seçin. Request Engelleme sekmesi açılır.

   

3. Kalıp 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ı renktedir. Bu, engellenmiş oldukları anlamına gelir. Sayfa yüklenmeye devam eder ve etkileşimlidir. Dolayısıyla bu kaynaklara hiç gerek yok gibi görünüyor.

   

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ülasyonunu yapmak için yararlıdır.

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

1. Düzenleyici sekmesine geri dönüp 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 derlenip yeniden dağıtılmasını bekleyin.

4. Lighthouse panelinden sayfayı tekrar denetleyin. Genel puanınız tekrar artmış olmalı.

   

Kritik Oluşturma Yolunu gerçek dünyada 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 diğer her şeyi geç yükleyerek sayfa yüklemeyi hızlandırabilirsiniz.

• Tamamen kaldırabileceğiniz komut dosyaları bulma olasılığınız düşüktür ancak genellikle birçok komut dosyasının sayfa yükleme sırasında istenmesine gerek olmadığı ve bunun yerine eşzamansız olarak istenebildiğini görürsünüz. Eş zamansız veya ertele özelliğini kullanma başlıklı makaleyi inceleyin.
• Bir çerçeve kullanıyorsanız üretim modu olup olmadığını kontrol edin. Bu mod, kritik oluşturmayı engelleyen gereksiz kodları ortadan kaldırmak için ağaç sallama gibi bir özellik kullanabilir.

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

Son raporunuzda, Fırsatlar bölümünde bazı küçük potansiyel tasarruflar gösteriliyor ancak 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 anlaşı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şlerin çoğunu yaptığı yerdir.

Amaç, sayfa yüklenirken ana iş parçacığının ne yapmakta olduğunu analiz etmek ve gereksiz çalışmaları 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 6 kat yavaşlama olarak ayarlayın.

   

   Mobil cihazlarda genellikle dizüstü veya masaüstü bilgisayarlardan daha fazla donanım kısıtlaması vardır. Bu nedenle, bu ayarlar sayfa yüklemesini daha az güçlü bir cihaz kullanıyormuş gibi deneyimlemenize olanak tanır.

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ı gerekenin her şeyinin görselleştirmesini oluşturur. Bu görselleştirmeye trace adı verilir.

   

İz, etkinliği soldan sağa doğru kronolojik olarak 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ı etkinliğiyle tamamen meşgul olduğu anlamına gelir. Bu, daha az JavaScript çalışması yaparak sayfa yüklemeyi hızlandırabileceğinize dair bir ipucudur.

Daha az JavaScript işi yapmanın yollarını bulmak için izleri araştırın:

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

   

   React'ta Kullanıcı Zamanlaması ile ilgili birçok önlem var. Tolga'nın uygulaması React'ın geliştirme modunu kullanıyor. React'ın üretim moduna geçmek, muhtemelen bazı kolay performans kazançları sağlayabilir.

2. Bu bölümü daraltmak için Zamanlamalar'ı tekrar tıklayın.

3. Ana bölüme göz atın. Bu bölümde, ana iş parçacığı etkinliğinin soldan sağa 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, __webpack__require__'nin de yürütülmesine ve ./src/index.jsx işlevinin yürütülmesine neden oldu.

4. Ana bölümün en altına ilerleyin. Bir çerçeve kullandığınızda üst etkinliğin çoğu, genellikle kontrolünüz dışında olan çerçeveden kaynaklanır. Uygulamanızdan kaynaklanan etkinlik genellikle ekranın alt kısmındadır.

   

   Bu uygulamada App adlı bir işlevin, mineBitcoin işlevine çok sayıda çağrıya neden olduğu anlaşılıyor. Görünüşe göre Tony, kripto para madenciliği için hayranlarının cihazlarını kullanıyor...

5. En alttaki Aşağıdan Yukarı sekmesini açın. Bu sekmede en çok zaman alan etkinlikler listelenir. Aşağıdan Yukarıya bölümünde hiç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ı bölümü yalnızca bu etkinlikle ilgili bilgileri gösterir.

   Süreç sütunu, her bir aktivitede doğrudan ne kadar zaman geçirdiğinizi gösterir. Bu durumda, ana iş parçacığı süresinin yaklaşık% 82'si mineBitcoin işlevine harcandı.

Üretim modunu kullanmanın ve JavaScript etkinliğini azaltmanın sayfa yüklemeyi hızlandırıp hızlandırmadığını görme zamanı. Üretim moduyla başlayın:

1. Düzenleyici sekmesinde webpack.config.js uygulamasını açın.
2. "mode":"development" şeklindeki yazımı "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 uygulamasını açın.
2. constructor içinden this.mineBitcoin(1500) adlı kişiye yönelik görüşmeye yorum yapın.
3. Yeni derlemenin dağıtılmasını bekleyin.
4. Sayfayı tekrar denetleyin.

Her zaman olduğu gibi, yapılması gereken şeyler var. Örneğin, Largest Contentful Paint ve Cumulative Layout Shift metriklerini azaltın.

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

Genel olarak, Performans paneli, sitenizin yüklenirken hangi etkinliği yaptığını anlamanın ve gereksiz etkinlikleri kaldırmanın yollarını bulmanın en yaygın yoludur.

Daha çok console.log() benzeri bir yaklaşımı tercih ediyorsanız User Timing API, uygulama yaşamınızın belirli aşamalarını isteğe bağlı olarak işaretlemenize olanak tanır. Böylece bu aşamaların her birinin ne kadar sürdüğünü takip edebilirsiniz.

Özet

• Bir sitenin yükleme performansını optimize etmek için yola çıktığınızda, her zaman bir denetimle başlayın. Denetim bir temel oluşturur ve kaliteyi artırma konusunda size ipuçları verir.
• Her seferinde tek bir değişiklik yapın ve her değişiklikten sonra sayfayı denetleyerek bu ayrı değişikliğin performansı nasıl etkilediğini görebilirsiniz.

Sonraki adımlar

Kendi sitenizde denetimler çalıştırın. Raporunuzu yorumlama konusunda yardıma ihtiyacınız olursa veya yük performansınızı artırmanın yollarını arıyorsanız Geliştirici Araçları topluluğundan yardım almanın tüm yollarını inceleyin:

• Bu dokümandaki hataları developer.chrome.com deposuna bildirin.
• Geliştirici Araçları'ndaki hata raporlarını Chromium Hataları sayfasında paylaşın.
• Posta Listesi'nde özellikleri ve değişiklikleri tartışın. 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 almak için Stack Overflow sayfasını inceleyin. Hata isteği göndermek için her zaman Chromium Hataları'nı kullanın.
• @ChromeDevTools adresinden bize tweet gönderebilirsiniz.