PRPL, web sayfalarının yüklenmesi ve yüklenmesi için kullanılan kalıbı etkileşimli ve daha hızlı hale gelir:
- 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ükleme.
Bu kılavuzda, bu tekniklerin her birinin nasıl bir araya geldiğini ama yine de bağımsız olarak kullanılır.
Sayfanızı Lighthouse ile denetleyin
PRPL ile uyumlu iyileştirme fırsatlarını belirlemek için Lighthouse'u çalıştırın teknikler:
- Geliştirici Araçları'nı açmak için "Control+Üst Karakter+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 konusuna bakın.
Kritik kaynakları önceden yükleyin
Lighthouse, belirli bir kaynak ayrıştırılırsa ve geç getirildi:
Önceden Yükle
Tarayıcıya, tarayıcının önceden yükleme tarayıcısı tarafından keşfedilemeyecek bir kaynağı (ör. background-image özelliği tarafından başvurulan bir resim) istemesini bildiren bildirimli getirme isteğidir. HTML belgenizin 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, söz konusu kaynak için istek başlatılır ve kaynak önbellekte depolanır. Böylece tarayıcı gerektiğinde bu verileri alabilir.
Kritik kaynakları önceden yükleme hakkında daha fazla bilgi için Kritik öğeleri önceden yükleme kılavuzu.
İlk rotayı mümkün olan en kısa sürede oluştur
Lighthouse, İlk Boyama'yı geciktiren kaynaklar varsa sitenizin ekranda pikselleri oluşturduğu an:
Lighthouse, First Paint'i iyileştirmek için kritik JavaScript ve
kalan kısmını
async
Ayrıca ekranın üst kısmında kullanılan önemli CSS'leri satır içine de alabilirsiniz. Böylece, performans artar
Böylece, oluşturmayı engelleyen öğeleri getirmek için sunucuya gidiş dönüşleri ortadan kaldırabilirsiniz.
Ancak satır içi kodu yönetmek, geliştirme açısından daha zordur.
tarafından önbelleğe alınamaz.
İlk Boyama'yı iyileştirmek için diğer bir yaklaşım, ilk boya için sunucu tarafı oluşturma Sayfanızın HTML'si. Bu işlem, komut dosyaları sırasında içeriği kullanıcıya hemen gösterir getiriliyor, ayrıştırılıyor ve yürütülmeye devam ediyor. Ancak bu durum, HTML dosyasının yükünü önemli ölçüde artırabilir ve Etkileşime Hazır Olma Süresi, veya uygulamanızın etkileşimli hale gelmesi ve yanıt verebilmesi için gereken süre büyük önem taşır.
Projenizde ilk boyama oranını azaltacak tek bir doğru çözüm yoktur. çok önemlidir ve sadece stilleri ve sunucu tarafını satır içine uygulamanız için gereken faydalardan ağır bastığında reklam oluşturma işlemini uygulayın. Şunları yapabilirsiniz: aşağıdaki kaynaklardan yararlanarak bu iki kavram hakkında daha fazla bilgi edinebilirsiniz.
Öğeleri önbelleğe al
Service çalışanları, proxy gibi davranarak öğeleri doğrudan önbellekten getirebilir sunucu yerine geri bildirimde bulunur. Bu sadece, kullanıcıların aynı zamanda çevrimdışıyken de daha hızlı sayfa yüklenme sürelerine yinelenen ziyaretler.
Service Worker oluşturma sürecini basitleştirmek için üçüncü taraf kitaplığı kullanma bir kitaplığın oluşturabileceğinden daha karmaşık önbelleğe alma gereksinimleriniz yoksa sağlar. Örneğin, Çalışma kutusu, bir hizmetleri verimli bir şekilde kullanabilmenizi ve . Service Worker'lar ve çevrimdışı güvenilirlik hakkında daha fazla bilgi için Güvenilirlik öğrenme rotasındaki Service Worker kılavuzuna bakın.
Geç yükleme
Ağ üzerinden çok fazla veri gönderirseniz Lighthouse başarısız bir denetim gösterir.
Buna tüm öğe türleri dahildir, ancak özellikle büyük JavaScript yükleri tarayıcının ayrıştırıp derlemesi için gereken süreden dolayı yüksek maliyetlidir. Uygun olduğunda Lighthouse bunun için bir uyarı da sağlar.
Bir kod çalıştırıldığında yalnızca gerekli olan kodu içeren daha küçük bir JavaScript yükü Kullanıcı başlangıçta uygulamanızı yükler, tüm paketi ve isteğe bağlı olarak geç yükleme parçalarını böler.
Paketinizi böldükten sonra, paketinizden daha yüksek olan parçaları önceden yükleyin önemlidir (Kritik öğeleri önceden yükleme kılavuzuna bakın). Önceden yükleme, daha önemli kaynakların daha erken getirilmesini ve indirilmesini sağlar tarafından görülebilir.
İsteğe bağlı olarak farklı JavaScript parçalarını bölmenin ve yüklemenin yanı sıra, Lighthouse, kritik olmayan görüntülerin geç yüklenmesi için de denetim sağlar.
Web sayfanıza çok sayıda resim yüklüyorsanız ekranın alt kısmındaki tüm resimleri erteleyin veya (bkz. Görüntüleri geç yüklemek için geç boyutları kullanma bölümüne bakın).
Sonraki Adımlar
Artık PRPL modelinin arkasındaki bazı temel kavramları anladığınıza göre, daha fazla bilgi edinmek için bu bölümdeki bir sonraki kılavuza geçin. Tüm tekniklerin aynı anda birkaç farklı birlikte uygulanır. Aşağıdakilerden herhangi birine ilişkin her türlü çaba, performans artışı sağlayabilir.
- 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ükleme.
PRPL kalıpları hakkında daha fazla bilgi edinebilirsiniz.