PRPL, web sayfalarının daha hızlı yüklenmesi ve etkileşimli hale gelmesi için kullanılan bir kalıbı tanımlayan bir kısaltmadır:
- Geç keşfedilen kaynakları önceden yükleyin.
- İlk rotayı mümkün olan en kısa sürede oluşturun.
- Kalan öğeleri önbelleğe alın.
- Diğer rotaları ve kritik olmayan öğeleri geç yükleyin.
Bu kılavuzda, bu tekniklerin her birinin birbiriyle nasıl uyum içinde olduğu ancak yine de performans sonuçları elde etmek için bağımsız olarak kullanılabileceği hakkında bilgi edinin.
Sayfanızı Lighthouse ile denetleyin
PRPL tekniklerine uygun iyileştirme fırsatlarını belirlemek için Lighthouse'u çalıştırın:
- Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- Lighthouse sekmesini tıklayın.
- Performans ve Progresif Web Uygulaması onay kutularını işaretleyin.
- Rapor oluşturmak için Denetimleri Çalıştır'ı tıklayın.
Daha fazla bilgi için Lighthouse ile performans fırsatlarını keşfetme başlıklı makaleye bakın.
Kritik kaynakları önceden yükleme
Lighthouse, belirli bir kaynak ayrıştırılıp geç getirilirse aşağıdaki başarısız denetimi gösterir:
Önceden yükleme, tarayıcıya, normalde tarayıcının ön yükleme tarayıcısı tarafından bulunamayacak bir kaynağı (ör. background-image özelliği tarafından başvurulan bir resim) istemesini bildiren bildirim temelli bir getirme isteğidir. HTML dokümanınızın başına rel="preload" içeren bir <link> etiketi ekleyerek geç keşfedilen kaynakları önceden yükleyin:
<link rel="preload" as="image" href="hero-image.jpg">
<link rel="preload"> yönergesi eklendiğinde bu kaynak için bir istek başlatılır ve önbellekte depolanır. Böylece, tarayıcı gerektiğinde dosyayı alabilir.
Kritik kaynakları önceden yükleme hakkında daha fazla bilgi için Kritik öğeleri önceden yükleme kılavuzuna bakın.
İlk rotayı mümkün olan en kısa sürede oluşturun
İlk Boyama'yı geciktiren kaynaklar varsa (sitenizin ekranda piksel oluşturduğu anda) Lighthouse bir uyarı verir:
First Paint'i iyileştirmek için Lighthouse, kritik JavaScript'leri satır içine almanızı, geri kalanını async kullanarak ve ekranın üst kısmında kullanılan kritik CSS'yi satır içine almanızı önerir. Bu, oluşturmayı engelleyen öğeleri getirmek için sunucuya gidiş gelişleri ortadan kaldırarak performansı artırır.
Ancak, geliştirme açısından satır içi kodun bakımı daha zordur ve tarayıcı tarafından ayrı olarak önbelleğe alınamaz.
First Paint'i iyileştirmeye yönelik bir başka yaklaşım da, sayfanızın ilk HTML'sini sunucu tarafında oluşturmaktır. Bu, komut dosyaları getirilmeye, ayrıştırılmaya ve yürütülmeye devam ederken içeriği kullanıcıya hemen gösterir. Ancak bu durum, HTML dosyasının yükünü önemli ölçüde artırabilir. Bu da Etkileşime Hazır Olma Süresi'ne veya uygulamanızın etkileşimli hale gelip kullanıcı girişine yanıt verebilmesi için gereken süreye zarar verebilir.
Uygulamanızda İlk Boyama'yı azaltmanın tek bir doğru çözümü yoktur ve sadece avantajların uygulamanızın dengesine ağır bastığı durumlarda stilleri satır içine yerleştirmeyi ve sunucu tarafı oluşturmayı düşünmelisiniz. Aşağıdaki kaynaklardan bu iki kavram hakkında daha fazla bilgi edinebilirsiniz.
Öğeleri önbelleğe alma
Service Worker'lar, proxy gibi davranarak öğeleri yinelenen ziyaretlerde sunucu yerine doğrudan önbellekten getirebilir. Bu, kullanıcıların uygulamanızı çevrimdışıyken kullanmasına olanak sağlamanın yanı sıra, yinelenen ziyaretlerde sayfa yüklenme sürelerinin de kısa olmasını sağlar.
Bir kitaplığın sağlayabileceğinden daha karmaşık önbelleğe alma gereksinimleriniz olmadığı sürece, hizmet çalışanı oluşturma sürecini basitleştirmek için üçüncü taraf kitaplığı kullanın. Örneğin Workbox, varlıkları önbelleğe almak için bir hizmet çalışanı oluşturmanıza ve sürdürmenize olanak tanıyan bir araç koleksiyonu sunar. Service Worker'lar ve çevrimdışı güvenilirlik hakkında daha fazla bilgi edinmek için güvenilirlik öğrenme yolundaki Service Worker kılavuzuna bakın.
Geç yükle
Ağ üzerinden çok fazla veri gönderirseniz Lighthouse, başarısız olan bir denetim gösterir.
Bu, tüm öğe türlerini içerir ancak özellikle tarayıcının bunları ayrıştırıp derlemesi için gereken süre nedeniyle büyük JavaScript yükleri, oldukça maliyetli olur. Uygun olduğunda Lighthouse bu konuda bir uyarı da sağlar.
Yalnızca bir kullanıcı uygulamanızı ilk kez yüklediğinde gereken kodu içeren daha küçük bir JavaScript yükü göndermek için tüm paketi ve isteğe bağlı geç yükleme parçalarını bölün.
Paketinizi bölmeyi başardıktan sonra, daha önemli olan parçaları önceden yükleyin (Önemli öğeleri önceden yükleme kılavuzuna bakın). Önceden yükleme, tarayıcı tarafından daha kısa sürede daha önemli kaynakların getirilmesini ve indirilmesini sağlar.
Lighthouse, isteğe bağlı olarak farklı JavaScript parçalarını bölme ve yüklemenin yanı sıra kritik olmayan görüntülerin geç yüklenmesi için de denetim sağlar.
Web sayfanıza çok sayıda resim yüklerseniz sayfa yüklendiğinde ekranın alt kısmında veya cihaz görüntü alanının dışındaki tüm öğeleri erteleyin (Resimleri geç yüklemek için geç boyutları kullanma bölümüne bakın).
Sonraki adımlar
Artık PRPL kalıbının ardındaki bazı temel kavramları anladığınıza göre, daha fazla bilgi edinmek için bu bölümde yer alan bir sonraki kılavuza geçebilirsiniz. Tüm tekniklerin bir arada uygulanması gerekmediğini unutmayın. Aşağıdakilerden herhangi biri kullanılarak yapılan herhangi bir çaba, performansta gözle görülür iyileşmeler sağlayacaktır.
- Kritik kaynakları önceden yükleyin.
- İlk rotayı mümkün olan en kısa sürede oluşturun.
- Kalan öğeleri önbelleğe alın.
- Diğer rotaları ve kritik olmayan öğeleri geç yükleyin.
PRPL kalıpları hakkında daha fazla bilgi edinebilirsiniz.