PRPL kalıbıyla anında yüklemeyi uygula

PRPL, web sayfalarının daha hızlı yüklenmesini ve etkileşimli hale gelmesini sağlamak için kullanılan bir kalıbı açıklayan bir kısaltmadır:

  • Geç keşfedilen kaynakları önceden yükleyin.
  • İlk rotayı en kısa sürede oluştur.
  • Kalan öğeleri önceden önbelleğe alın.
  • Diğer rotaları ve kritik olmayan öğeleri gecikmeli yükleyin.

Bu kılavuzda, bu tekniklerin her birinin birlikte nasıl kullanıldığını ancak performans sonuçları elde etmek için bağımsız olarak da nasıl kullanılabileceğini öğreneceksiniz.

Lighthouse ile sayfanızı denetleme

PRPL teknikleriyle uyumlu iyileştirme fırsatlarını belirlemek için Lighthouse'u çalıştırın:

  1. Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
  2. Lighthouse sekmesini tıklayın.
  3. Performans ve Progresif Web Uygulaması onay kutularını işaretleyin.
  4. Rapor oluşturmak için Denetlemeleri Ç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ç getirilirse aşağıdaki başarısız denetimi gösterir:

Lighthouse: Anahtar isteklerini önceden yükleme denetimi

Önceden yükleme, tarayıcıya background-image mülkü tarafından referans verilen bir resim gibi, tarayıcının önceden yükleme tarayıcısıyla keşfedilemeyen bir kaynağı istemesini söyleyen açıklayıcı bir 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 eklemek, söz konusu kaynak için bir istek başlatır ve bu isteği önbelleğe depolar. Tarayıcı, gerektiğinde bu bilgileri alabilir.

Kritik kaynakları önceden yükleme hakkında daha fazla bilgi için Kritik öğeleri önceden yükleme kılavuzunu inceleyin.

İlk rotayı en kısa sürede oluşturma

Lighthouse, sitenizin ekranda piksel oluşturma anını ifade eden ilk boyamayı geciktiren kaynaklar varsa uyarı verir:

Lighthouse: Oluşturmayı engelleyen kaynakları ortadan kaldırın denetimi

İlk Boyama'yı iyileştirmek için Lighthouse, kritik JavaScript'i satır içi yapmayı ve kalanını async kullanarak geciktirmeyi, ayrıca sayfanın üst kısmında kullanılan kritik CSS'yi satır içi yapmayı önerir. Bu, oluşturmayı engelleyen öğeleri getirmek için sunucuya gidiş dönüşlerini ortadan kaldırarak performansı artırır. Bununla birlikte, 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.

İlk boyamayı iyileştirmeye yönelik başka bir yaklaşım, sayfanızı oluşturan ilk HTML'yi sunucu tarafında oluşturmaktır. Bu sayede, komut dosyaları henüz getirilip ayrıştırılmaya ve yürütülmeye devam ederken içerik kullanıcıya hemen gösterilir. Ancak bu, HTML dosyasının yükünü önemli ölçüde artırabilir. Bu da etkileşimli olma süresi'ne (yani uygulamanızın etkileşimli hale gelmesi ve kullanıcı girişine yanıt vermesi için geçen süreye) zarar verebilir.

Uygulamanızda ilk boyamayı azaltmak için tek bir doğru çözüm yoktur. Stillerin satır içi olarak yerleştirilmesini ve sunucu tarafı oluşturmayı yalnızca uygulamanız için avantajları dezavantajlarından ağır basıyorsa değerlendirmeniz gerekir. Aşağıdaki kaynakları inceleyerek bu iki kavram hakkında daha fazla bilgi edinebilirsiniz.

Hizmet çalışanı ile istekler/yanıtlar

Öğeleri önceden önbelleğe alma

Hizmet çalışanları, proxy olarak hareket ederek öğeleri tekrarlanan ziyaretlerde sunucu yerine doğrudan önbellekten getirebilir. Bu, kullanıcıların internet bağlantısı olmadığında uygulamanızı kullanmasına olanak tanır ve tekrar ziyaretlerde sayfa yükleme sürelerinin kısalmasını sağlar.

Bir kitaplığın sağlayabileceğinden daha karmaşık önbelleğe alma gereksinimleriniz olmadığı sürece Service Worker oluşturma sürecini basitleştirmek için üçüncü taraf kitaplığı kullanın. Örneğin, Workbox, öğeleri önbelleğe almak için bir servis çalışanı oluşturup yönetmenize olanak tanıyan bir araç koleksiyonu sağlar. Hizmet çalışanları ve çevrimdışı güvenilirlik hakkında daha fazla bilgi için güvenilirlik öğrenme yolunda bulunan hizmet çalışanı kılavuzuna bakın.

Geç yükleme

Ağ üzerinden çok fazla veri gönderirseniz Lighthouse başarısız bir denetim gösterir.

Lighthouse: Çok büyük ağ yükü denetimi var

Tüm öğe türleri bu kapsamdadır ancak büyük JavaScript yük verileri, tarayıcının bunları ayrıştırması ve derlemesi için gereken süre nedeniyle özellikle maliyetlidir. Lighthouse, uygun olduğunda bu konuda uyarı da sağlar.

Lighthouse: JavaScript&#39;in başlatılma süresi denetimi

Kullanıcı uygulamanızı ilk kez yüklediğinde yalnızca gereken kodu içeren daha küçük bir JavaScript yükü göndermek için paketin tamamını bölün ve parçaları gerektiğinde gecikmeli olarak yükleyin.

Paketinizi bölmeyi başardıktan sonra daha önemli olan parçaları önceden yükleyin (Kritik öğeleri önceden yükleme kılavuzuna bakın). Önceden yükleme, daha önemli kaynakların tarayıcı tarafından daha erken getirilmesi ve indirilmesini sağlar.

Lighthouse, isteğe bağlı olarak farklı JavaScript parçalarını bölmenin ve yüklemenin yanı sıra kritik olmayan görüntülerin geç yüklenmesi için bir denetim de sağlar.

Lighthouse: Ekran dışındaki görselleri erteleme denetimi

Web sayfanıza çok sayıda resim yüklüyorsanız sayfa yüklendiğinde sayfanın altındaki veya cihaz görüntü alanının dışındaki tüm resimleri erteleyin (Resimleri yavaş yüklemek için lazysizes'i kullanma başlıklı makaleyi inceleyin).

Sonraki Adımlar

Artık PRPL kalıbının temel kavramlarından bazılarını anladığınıza göre daha fazla bilgi edinmek için bu bölümdeki bir sonraki kılavuza geçebilirsiniz. Tüm tekniklerin birlikte uygulanması gerekmez. Aşağıdakilerden herhangi biriyle yapılan çalışmalar, performansta belirgin iyileştirmeler sağlar.

  • Kritik kaynakları önceden yükleyin.
  • İlk rotayı en kısa sürede oluştur.
  • Kalan öğeleri önceden önbelleğe alın.
  • Diğer rotaları ve kritik olmayan öğeleri gecikmeli yükleyin.

PRPL kalıpları hakkında daha fazla bilgi edinebilirsiniz.