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ü
- Temel İstekleri Önceden Yükleme
- JavaScript Başlatma Süresi Yüksek
- Sayfaların yeniden yönlendirilmesini önler
- Kullanılmayan JavaScript
- Statik Öğelerde Verimsiz Önbellek Politikası Kullanıyor
- Herhangi Bir Varış Noktasına Yüksek Maliyetli Birden Fazla Gidiş Dönüşünden Kaçınma
- Animasyonlu İçeriklerde Video Biçimlerini Kullanma
- Web yazı tipi yüklenirken tüm metin görünür halde kalır
- Daraltılmamış CSS ve JavaScript
- Kullanılmayan CSS Kuralları
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.
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.
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:
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.
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.
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.
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.
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=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.
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, 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.
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 lighthousekomutunu veya Lighthouse'u genel olarak yüklediyseniznpm update lighthouse -gkomutunu ç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.