Sayfa yükleme performansını iyileştirmek için Lighthouse'u kullanma

Lighthouse, sitenizin kalitesini iyileştirmeye yönelik otomatik bir araçtır. Sayfaya bir URL girersiniz ve sayfa performansını iyileştirme, sayfaları daha erişilebilir hale getirme, en iyi uygulamalara uyma gibi konularda önerilerin bir listesini sunar. Bu aracı Chrome Geliştirici Araçları'nda, bir Chrome Uzantısı olarak veya sürekli entegrasyon için kullanışlı olan bir Düğüm modülü olarak çalıştırabilirsiniz.

Lighthouse bir süredir sayfa yükleme performansını iyileştirmek için metin sıkıştırmayı etkinleştirme veya oluşturmayı engelleyen komut dosyalarını azaltma gibi birçok ipucu sunuyor. Lighthouse ekibi, sitelerinizi hızlandırma konusunda size daha da yararlı öneriler sunmak amacıyla yeni denetimler kullanıma sunmaya devam ediyor. Bu yayın, farkında olmayabileceğiniz faydalı performans denetimlerinin bir özetidir. Örneğin:

Ana İş Parçacığı İş Dökümü

Daha önce Geliştirici Araçları'ndaki performans panelini kullandıysanız, bir sayfayı yüklerken CPU süresinin nerede dökümünü almanın zahmetli bir iş olabileceğini bilirsiniz. Bu bilgilerin yeni Main Thread Work Breakdown denetimi aracılığıyla artık kolayca ve kullanışlı bir şekilde kullanılabildiğini bildirmekten memnuniyet duyuyoruz.

Lighthouse'daki ana iş parçacığı
etkinliğinin dökümü.
Şekil 1. Lighthouse'daki ana iş parçacığı etkinliğinin dökümü.

Bu yeni teşhis sayfası, sayfa yükleme sırasında ne kadar ve ne tür bir etkinlik gerçekleştiğini değerlendirir. Bu etkinliği düzen, komut dosyası değerlendirmesi, ayrıştırma ve diğer etkinliklerle ilgili yükleme performansı sorunlarını anlamak için kullanabilirsiniz.

Önemli İstekleri Önceden Yükleme

Tarayıcılar kaynakları aldığında bunu, belgede ve alt kaynaklarında kendilerine referanslar bulur. Bazı kritik kaynaklar sayfa yükleme işleminin sonlarında keşfedildiği için bu durum bazen uygun olmayabilir. Neyse ki rel=preload, geliştiricilere uyumlu tarayıcılara hangi kaynakların mümkün olan en kısa sürede getirilmesi gerektiğini ipucu verme olanağı tanıyor. Yeni Anahtar İstekleri Önceden Yükleme denetimi, geliştiricilere hangi kaynakların rel=preload tarafından daha erken yüklenmesinin fayda sağlayabileceğini bildirir.

Önceden yüklemenin değerlendirileceği kaynakların listesini öneren Anahtar İstekleri Önceden Yükleme Lighthouse denetimi.
Şekil 2. Önceden yüklemenin değerlendirileceği kaynakların listesini öneren Anahtar İstekleri Önceden Yükleme Lighthouse denetimi.

Yükleme performansını beklemediğiniz şekillerde etkileyebileceğinden, performans değişikliklerini rel=preload ile ve rel=preload olmadan test edip karşılaştırmanız çok önemlidir. Örneğin, büyük bir resmin önceden yüklenmesi ilk oluşturmanın gecikmesine neden olabilir ancak bunun karşılığında, önceden yüklenmiş resmin düzende daha erken görünmesi gerekir. Sonuçlar her zaman istediğiniz gibi olsun!

JavaScript Başlatma Süresi Uzun

Çok fazla JavaScript yüklendiğinde, tarayıcı sayfayı ayrıştırırken, derlerken ve yürütürken sayfa yanıt vermeyebilir. Üçüncü taraf komut dosyaları ve reklamlar, güçlü cihazlarda bile aşırıya kaçan komut dosyası etkinliğinin belirli bir kaynağıdır. Yeni JavaScript Başlatma Süresi Yüksek denetimi, bir sayfadaki her bir komut dosyasının URL'si ile birlikte ne kadar CPU süresi kullandığını gösterir:

Bir sayfadaki komut dosyaları için değerlendirme, ayrıştırma ve derleme süresini gösteren Lighthouse.
Şekil 3. Bir sayfadaki komut dosyaları için değerlendirme, ayrıştırma ve derleme süresini gösteren Lighthouse.

Bu denetimi çalıştırdığınızda ayrıca ağ panelinde üçüncü taraf rozetlerini etkinleştirebilir ve üçüncü taraf komut dosyası kaynaklarını tanımlamak için listeyi filtreleyebilirsiniz. Bu denetimden elde edilen veriler sayesinde, sayfaları hareketli olmaktan takılmaya çeviren aşırı JavaScript etkinliği kaynaklarını bulmak için daha donanımlı olacaksınız. Uygulamanıza özgü komut dosyalarında, sitenizin her bir sayfasındaki JavaScript miktarını sınırlamak için kod bölme ve ağaç sallama gibi teknikler kullanabilirsiniz.

Sayfa Yönlendirmelerini Öner

Bazen bir tarayıcı bir URL isteğinde bulunduğunda, sunucu 300 düzeyinde durum koduyla yanıt verebilir. Bu, tarayıcının başka bir URL'ye yönlendirme yapmasına neden olur. Yönlendirmeler, SEO ve kolaylık sağlamak amacıyla gerekli olsa da isteklere gecikme ekler. Bu durum özellikle, yönlendirme URL'lerinin başka kaynaklara yönlendirme yapması durumunda geçerlidir. Bu da ek DNS araması ve bağlantı/TLS iletişim süresi gerektirebilir.

Chrome'un geliştirici araçlarının ağ panelinde görülen bir
yönlendirme zinciri.
Şekil 4. Chrome'un geliştirici araçlarının ağ panelinde görüldüğü gibi bir yönlendirme zinciri.

Sitenizdeki açılış sayfaları için yönlendirme yapılması istenilen değildir. Gecikmeyi azaltmanıza ve yükleme performansını iyileştirmenize yardımcı olmak için Lighthouse artık Sayfa Yönlendirmelerini Öner denetimini sunuyor. Bu denetim, bir gezinme herhangi bir yönlendirmeyi tetiklediğinde size bildirilir.

Lighthouse'daki sayfa yönlendirmelerinin listesi.
Şekil 5. Lighthouse'daki sayfa yönlendirmelerinin bir listesi.

Bu denetimin Lighthouse'un Geliştirici Araçları sürümünde tetiklenmesinin zor olduğunu unutmayın. Bunun nedeni, sayfanın adres çubuğundaki geçerli URL'yi analiz etmesi ve bu şekilde tüm yönlendirmelerin çözünürlüğünü yansıtmasıdır. Bu denetimin Düğüm KSA'sında doldurulduğunu görme olasılığınız yüksektir.

Kullanılmayan JavaScript

Ölü kod, JavaScript ağırlıklı uygulamalarda ciddi bir sorun olabilir. Hiçbir zaman çağrılmadığı için yürütme maliyetleri oluşturmasa da başka istenmeyen etkilere sahiptir. Ölü kod, tarayıcı tarafından indirilmeye, ayrıştırılmaya ve derlenmeye devam eder. Bu, yükleme performansını ve JavaScript önyükleme süresini etkiler. Geliştirici Araçları'ndaki kapsam paneline benzer şekilde, Kullanılmayan JavaScript denetimi, geçerli sayfa tarafından indirilen JavaScript'in hiçbir zaman kullanılmadığını gösterir.

Bir sayfada kullanılmayan JavaScript miktarını
gösteren Lighthouse.
Şekil 6. Bir sayfada kullanılmayan JavaScript miktarını gösteren Lighthouse.

Bu denetim sayesinde, yükleme performansını iyileştirmek ve sistem kaynak kullanımını azaltmak için uygulamalarınızdaki geçersiz kodları tespit edip kaldırabilirsiniz. Uzman ipucu: Bu bilgileri bulmak için Chrome'un Geliştirici Araçları'ndaki kod kapsamı panelini de kullanabilirsiniz.

Statik Öğelerde Verimsiz Önbellek Politikası Kullanıyor

Performans önerilerinin çoğu, ilk kez kullananlar için web sitesinin hızını artırmaya odaklansa da, geri gelen kullanıcıların yükleme performansını iyileştirmek için önbelleğe almayı kullanmak da önemlidir. Statik Öğelerde Verimsiz Önbellek Politikası Kullanır denetimi, ağ kaynakları için önbelleğe alma üst bilgilerini inceler ve statik kaynaklarla ilgili önbellek politikalarının standardın altında olması durumunda sizi bilgilendirir.

Statik öğeler tablosu
Şekil 7.

Bu denetimin yardımıyla, mevcut önbellek politikanızla ilgili sorunları kolayca bulup düzeltebilirsiniz. Bu sayede, geri gelen kullanıcıların performansı büyük ölçüde yükselir ve bu kullanıcılar da ekstra hızdan memnun olurlar!

Herhangi Bir Varış Noktasına Yüksek Maliyetli Gidiş Dönüşlerinden Kaçının

Tarayıcılar bir sunucudan kaynak aldığında DNS araması yapmak ve sunucuyla bağlantı kurmak uzun sürebilir. rel=preconnect, geliştiricilerin diğer sunucularla tarayıcı kurmadan önce bağlantı kurarak bu gecikmeyi maskelemelerine olanak tanır. Herhangi Bir Bölgeler İçin Maliyetli Birden Fazla Gidiş Dönüşü Kaçırma denetimi, rel=preconnect

rel=preconnectin Lighthouse için önerilen kaynakların listesi.
Şekil 8. Lighthouse'da rel=preconnect için önerilen kaynakların listesi.

Kaynaklar arası öğeler için gecikme azaldığında kullanıcılar işlerin biraz daha hızlı ilerlediğini algılar. Bu yeni Lighthouse denetimiyle birlikte rel=preconnect kullanarak bunu yapabileceğiniz yeni fırsatları öğreneceksiniz.

Animasyonlu İçerikler İçin Video Biçimlerini Kullanma

Animasyonlu GIF'ler büyüktür ve birkaç megabayt olmasa bile genellikle en az birkaç yüz kilobayt veri tüketirler. Yükleme performansını önemsiyorsanız bu GIF'leri videoya dönüştürmek işinize yarayacaktır. Neyse ki Animasyonlu İçerik İçin Video Biçimlerini Kullan denetimi de size yardımcı olacaktır.

Lighthouse'da bir GIF'i videoya
dönüştürmek için öneri.
Şekil 9. Lighthouse'da bir GIF'i videoya dönüştürmek için öneri.

Sitenizde 100 KB'tan büyük GIF'ler varsa bu denetim, bunları otomatik olarak işaretler ve sizi bunları videoya dönüştürme ve yerleştirme konusunda rehberliğe yönlendirir. Imgur gibi siteler GIF'lerini videoya dönüştürerek yükleme performansını önemli ölçüde iyileştirdi. Buna ek olarak, siteniz sınırlı bant genişliğine sahip bir barındırma planıysa, sizi ikna etmek için tek başına potansiyel maliyet tasarrufu yeterli olacaktır!

Web Yazı Tipi Yüklemeleri Sırasında Tüm Metin Görünür Kalsın

Sayfalar için web yazı tiplerini yüklediğimizde, tarayıcılar genellikle yazı tipi yükleninceye kadar görünmez metinler oluşturur. Görünmez Metin Flash (FOIT) olarak bilinen bu olgu, tasarım açısından sizin için tercih edilebilir bir durum olabilir, ancak aslında bu bir sorundur. Oluşturulması engellenen metin, oluşturulup görünür hale gelene kadar okunamaz. Yüksek gecikme ve/veya yüksek bant genişliğine sahip bağlantılarda bu, kullanıcı deneyiminizin temel bir parçasının eksik olduğu anlamına gelir. Bu durum, sayfanın anlamlı içeriği normalde olması gerektiği kadar hızlı şekilde oluşturmaması nedeniyle algılanmış bir performans sorunu da olabilir. Neyse ki Web Yazı Tipi Yüklemeleri Sırasında Tüm Metinler Görünür Kalsın denetimi, sitenizde bu sorunu düzeltmeye yönelik fırsatlar bulmanıza yardımcı olur!

Lighthouse, yazı tipi oluşturmayı
iyileştirmeye yönelik önerilerde bulunuyor.
Şekil 10. Lighthouse, yazı tipi oluşturmayı iyileştirmek için önerilerde bulunuyor.

Lighthouse, uygulamanızda metin oluşturmayı geciktiren web yazı tipleri bulursa bunun birkaç olası çözümü vardır. Metin oluşturmayı font-display CSS özelliği ve/veya Font Upload API ile kontrol edebilirsiniz. Konuyu daha ayrıntılı incelemek isterseniz Zach Leatherman'ın hazırladığı mükemmel bir kılavuz olan A Kapsamlı Yazı Tipi Yükleme Stratejileri Kılavuzu'nu okuyabilirsiniz.

Küçültilmemiş CSS ve JavaScript

Küçültme, web performansı önemli bir konu olduğu için ve bunun iyi bir sebebi olduğu için önerilen bir tekniktir. Metin tabanlı kaynakların boyutunu önemli ölçüde küçültür, bu da yükleme performansı için iyidir. Ancak, özellikle oluşturma süreçleri bunu sizin için halletmiyorsa, bu optimizasyonu gözden kaçırabilirsiniz. CSS'yi küçült ve JavaScript'i küçült denetimleri, geçerli sayfada bulduğu sadeleştirilmemiş kaynakların listesini derler. Ardından, bu dosyaları manuel olarak küçülterek veya derleme sisteminizi sizin yerinize büyüterek işlem yapabilirsiniz.

Kullanılmayan CSS Kuralları

Bir yerin dişi biraz uzadıkça, ağaçların yeniden düzenlemeden kalan verilerin birikmeye başlaması kaçınılmazdır. Bu gereksiz CSS kurallarından biri, sitenin çalışması için artık gerekli olmayan ancak yine de bant genişliğini tüketen kullanılmayan CSS kurallarıdır. Kullanılmayan CSS Kuralları denetimi, size kolaylık sağlamak amacıyla sayfadaki hangi CSS kaynaklarının kullanılmayan CSS içerdiğini gösterir.

Kullanılmayan CSS kuralları içeren CSS kaynaklarının listesini gösteren Lighthouse.
Şekil 11. Kullanılmayan CSS kuralları içeren CSS kaynaklarının listesini gösteren Lighthouse.

Lighthouse, sayfada kullanılmayan CSS bulursa bundan kurtulmanın yolları vardır. UnCSS, bunu sizin için otomatik olarak yapan yardımcı programlardan biridir (ancak dikkatli kullanılması gerekir). Daha manuel bir yöntem ise Geliştirici Araçları'ndaki kod kapsamı panelinin kullanılmasıdır. Ancak, bir sayfada kullanılmayan CSS'nin başka bir sayfada gerekli olabileceğini unutmayın. Diğer bir yaklaşım da CSS'nizi yalnızca gerektiğinde yüklenen şablona özel dosyalara bölmek olabilir. Ne yapmaya karar verirseniz verin Lighthouse, CSS eksikliklerinizin biraz artıp artmayacağını size bildirmek için orada olacaktır.

Lighthouse'u deneyin!

Bu yeni denetimlerden heyecan duyuyorsanız Lighthouse'u güncelleyip deneyin.

  • Lighthouse Chrome uzantısı otomatik olarak güncellenir, ancak isterseniz chrome://extensions üzerinden manuel olarak güncelleyebilirsiniz.
  • Geliştirici Araçları'ndaki denetim masasında Lighthouse'u çalıştırabilirsiniz. Chrome yaklaşık 6 haftada bir yeni sürüme güncellendiğinden bazı yeni denetimler kullanılamayabilir. Sunulan en son denetimleri kullanmak istemiyorsanız Chrome Canary'yi indirerek en yeni Chrome kodunu çalıştırabilirsiniz.
  • Düğüm kullanıcıları için: npm update lighthouse komutunu veya Lighthouse'u genel olarak yüklediyseniz npm update lighthouse -g komutunu çalıştırın.

Değerli geri bildirimlerinden dolayı Kayce Basques, Patrick Hulce, Addy Osmani ve Vinamrata Singal'e teşekkür ederek bu makalenin kalitesini önemli ölçüde yükselttik.