JavaScript ekosisteminde Largest Contentful Paint'i iyileştirme.
Google, Aurora projesinin bir parçası olarak Core Web Vitals'a göre iyi performans gösterdiklerinden emin olmak için popüler web çerçeveleriyle çalışmaktadır. Angular ve Next.js, bu makalenin ilk bölümünde açıklandığı şekilde, yazı tipini zaten satır içine almıştır. Ele alacağımız ikinci optimizasyon, kritik CSS satır içi kullanımıdır. Bu özellik artık Angular KSA'da varsayılan olarak etkindir ve Nuxt.js'de uygulama çalışmaları devam etmektedir.
Yazı tipini satır içine alma
Aurora ekibi, yüzlerce uygulamayı analiz ettikten sonra geliştiricilerin genellikle index.html öğesinin <head> öğesinde referans vererek uygulamalarına yazı tipleri eklediğini tespit etti. Malzeme Simgeleri eklendiğinde
bunun nasıl görüneceğine dair bir örneği aşağıda bulabilirsiniz:
<!doctype html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
...
</html>
Bu kalıp tamamıyla geçerli ve işlevsel olsa da uygulamanın oluşturulmasını engeller ve fazladan bir istek getirir. Neler olduğunu daha iyi anlamak için yukarıdaki HTML'de başvurulan stil sayfasının kaynak koduna göz atın:
/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/font.woff2) format('woff2');
}
.material-icons {
/*...*/
}
font-face tanımının fonts.gstatic.com üzerinde barındırılan harici bir dosyaya nasıl referansta bulunduğuna dikkat edin.
Uygulama yüklenirken, tarayıcının öncelikle başlıkta referans verilen orijinal stil sayfasını indirmesi gerekir.
Daha sonra, tarayıcı woff2 dosyasını indirir ve son olarak, uygulamayı oluşturma işlemine devam edebilir.
Optimizasyon açısından, derleme sırasında ilk stil sayfasını indirip index.html içinde satır içi olarak kullanabilirsiniz. Bu, çalışma zamanında CDN'ye yapılan gidiş dönüşün tamamını atlayarak engelleme süresini kısaltır.
Uygulama oluşturulurken CDN'ye bir istek gönderilir. Bu istek, stil sayfasını getirir ve HTML dosyasına satır içi olarak yerleştirerek alana bir <link rel=preconnect> ekler. Bu tekniği uyguladığınızda
şu sonucu elde ederiz:
<!doctype html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin >
<style type="text/css">
@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/font.woff2) format('woff2');}.material-icons{/*...*/}</style>
...
</html>
Yazı tipi satır içine alma özelliği artık Next.js ve Angular'da kullanılabilir
Çerçeve geliştiricileri temel araçlarda optimizasyonu hayata geçirdiklerinde, mevcut ve yeni uygulamalarda optimizasyon yapılmasını kolaylaştırarak ekosistemin tamamının iyileştirilmesini sağlar.
Bu iyileştirme, Next.js v10.2 ve Angular v11'de varsayılan olarak etkinleştirilmiştir. Her ikisi de Google ve Adobe yazı tiplerini satır içi olarak destekler. Angular, ikinci sürümü 12.2 sürümünde kullanıma sunmayı planlıyor.
GitHub'da Next.js'de yazı tipi satır içine alma özelliğinin nasıl uygulandığını bulabilir ve bu optimizasyonu Angular bağlamında açıklayan videoyu izleyebilirsiniz.
Kritik CSS'leri satır içine alma
Bir diğer iyileştirme de kritik CSS'leri satır içine alarak First Contentful Paint (FCP) ve Largest Contentful Paint (LCP) metriklerini iyileştirmektir. Bir sayfanın kritik CSS'si, ilk oluşturulurken kullanılan tüm stilleri içerir. Konu hakkında daha fazla bilgi edinmek için Kritik olmayan CSS'leri erteleme bölümüne göz atın.
Birçok uygulamanın stilleri eşzamanlı olarak yüklediğini ve bu durumun uygulamaların oluşturulmasını engellediğini gözlemledik. Bu sorunu çözmek için stilleri eşzamansız olarak yükleyebilirsiniz. Komut dosyalarını media="all" ile yüklemek yerine media özelliğinin değerini print olarak ayarlayın ve yükleme tamamlandıktan sonra özellik değerini all olarak değiştirin:
<link rel="stylesheet" href="..." media="print" onload="this.media='all'">
Ancak bu uygulama, biçimlendirilmemiş içeriğin titremesine neden olabilir.
Yukarıdaki videoda, stillerini eşzamansız olarak yükleyen bir sayfanın oluşturulması gösterilmektedir. Tarayıcı ilk olarak stilleri indirmeye başlayıp ardından HTML'yi oluşturduğu için titreme meydana gelir. Tarayıcı stilleri indirdikten sonra bağlantı öğesinin onload etkinliğini tetikleyerek media özelliğini all olarak günceller ve stilleri DOM'ye uygular.
HTML'nin oluşturulması ve stillerin uygulanması arasındaki süre boyunca sayfanın stili kısmen değişir. Tarayıcı stilleri kullandığında titreme olduğunu görürüz. Bu, kötü bir kullanıcı deneyimi oluşturur ve Cumulative Layout Shift (CLS) sisteminde regresyonlara yol açar.
Kritik CSS satır içi işlemleri, eşzamansız stil yüklemeyle birlikte yükleme davranışını iyileştirebilir. Oluşturucular aracı, bir stil sayfasındaki seçicileri inceleyip bunları HTML ile eşleştirerek sayfada hangi stillerin kullanıldığını bulur. Eşleşme bulduğunda, karşılık gelen stilleri kritik CSS'nin parçası olarak dikkate alır ve satır içine alır.
Bir örneğe bakalım:
<head>
<link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">
</head>
<body>
<section>
<button class="primary"></button>
</section>
</body>
/* styles.css */
section button.primary {
/* ... */
}
.list {
/* ... */
}
Satır içine almadan önce örnek.
Yukarıdaki örnekte, birimler styles.css içeriğini okuyacak ve ayrıştıracak, ardından iki seçiciyi HTML ile eşleştirip section button.primary kullandığımızı keşfedecektir.
Son olarak, yaratıklar sayfanın <head> bölümündeki ilgili stilleri satır içine alır ve sonuç olarak:
<head>
<link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">
<style>
section button.primary {
/* ... */
}
</style>
</head>
<body>
<section>
<button class="primary"></button>
</section>
</body>
Satır içi olarak yerleştirildikten sonra örnek.
Kritik CSS'yi HTML'ye satır içine aldıktan sonra sayfadaki titreme sorunu kayboldu:
Kritik CSS satır içi satır öğeleri artık Angular'da kullanılabilir ve v12'de varsayılan olarak etkinleştirilir. v11 sürümünü kullanıyorsanız angular.json içinde inlineCritical özelliğini true olarak ayarlayarak bu özelliği etkinleştirin. Next.js'de bu özelliği etkinleştirmek için next.config.js öğenize experimental: { optimizeCss: true } ekleyin.
Sonuçlar
Bu yayında, Chrome ile web çerçeveleri arasındaki işbirliğinin bir kısmına değindik. Bir çerçeve yazarıysanız ve teknolojinizde çözdüğümüz bazı sorunların farkındaysanız bulgularımızın benzer performans optimizasyonlarını uygulamanız için size ilham vermesini umuyoruz.
İyileştirmeler hakkında daha fazla bilgi edinin. Core Web Vitals için yaptığımız optimizasyon çalışmalarının kapsamlı bir listesini, Aurora Tanıtımı başlıklı yayında bulabilirsiniz.