Kritik Oluşturma Yolu Nedir?

Kritik oluşturma yolu nedir?

  • Bir web sayfasının ilk görünümünü oluşturmak (görüntüleme) için gerçekleşmesi gereken olaylar dizisi.
  • Örnek: html almak> kaynaklar elde etmek> ayrıştırmak> web sayfasını görüntülemek

Bu etkinlikleri optimize etmek, önemli ölçüde daha hızlı web sayfalarına neden olur.

Kritik oluşturma yolu çok güzel bir şey yapabilir …

Birden fazla kaynağa sahip, küçük bir web sayfasından daha hızlı, çok sayıda kaynağa sahip büyük bir web sayfası hazırlama gücünü verir. Bunu sevdim.

Çoğu web sayfasının çok farklı bileşeni olduğundan, bir sayfayı daha hızlı yüklemek için her şeyi kaldırmak her zaman mümkün değildir. “Sayfalarımı hızlı hale getirmek için başka ne yapabilirim?” Diye merak ettiyseniz. Veya “Google, sayfaların bir saniyede yüklenmesini nasıl beklemektedir?” O zaman bu kavram sizin için.

Kritik oluşturma yolunu optimize etme

Açık kalabilmek için, birkaç şey tanımlayalım:

  • Kritik – kesinlikle gereklidir
  • Render – görüntüleme veya gösterme (bizim durumumuzda, web sayfalarımız bir kullanıcı tarafından görülebildikleri zaman “oluşturulur”)
  • Yol – web sayfamızın bir tarayıcıda görüntülenmesine neden olan olay zinciri
  • İlk görünümü – “katın üstü” olarak da bilinir, ilk görüntü, bir web sayfasının bir kullanıcıya kaydırılmadan önce görünen kısmıdır

Başka bir deyişle, oluşturma yolu, web sayfanızın bir tarayıcıda görünmesini sağlamak için gerçekleşen bir dizi olaydır.

İnternetteki neredeyse her web sitesi işlemek için gereksiz adımlar attığı için gerçekten anlamlı ve belirgin optimizasyonların gerçekleşebileceği yer burasıdır.

Kritik oluşturma yolunu optimize etmek, sayfa yükleme sürenizin birkaç saniye alabilir. Daha hızlı web sayfalarına gerçekten en hızlı yol.

Yol

Bir web sayfasını görüntülemek için bir tarayıcı, web sayfası tarafından çağrılan tüm kaynakları almış olmalıdır. Basit bir örnek bir resim, bir css dosyası ve bir javascript dosyası olan bir web sayfası olacaktır.

Bu sayfanın görüntülenmeden başlamış olduğu yolu inceleyelim ….

  1. Tarayıcı html dosyasını indirir
  2. Tarayıcı html’yi okur ve bir css dosyası, bir javascript dosyası ve bir resim olduğunu görür
  3. Tarayıcı resim indirmeye başladı
  4. Tarayıcı, web sayfasını css ve javascript almadan görüntüleyemeyeceğine karar verir
  5. Tarayıcı CSS dosyasını indirir ve başka bir şey çağrılmadığından emin olmak için okur
  6. Tarayıcı, web sayfasını hala javascript’e kadar görüntüleyemediğine karar verir
  7. Tarayıcı javascript dosyasını indirir ve başka bir şey çağrılmadığından emin olmak için okur
  8. Tarayıcı şimdi web sayfasını görüntüleyebileceğine karar verdi

Yukarıdaki yol, çok basit bir web sayfası için, şimdi de yolun nasıl olması gerektiği gibi bir resim.

Büyük olasılıkla sosyal düğmeler, birkaç CSS dosyası, birkaç javascript dosyası, birçok resim, widget ve belki de ses veya video da vardır.

Bu, oluşturma yolunuzun büyük olasılıkla büyük bir karmaşa olduğu anlamına gelir

Web sitelerinin çoğu görüntülenmeden önce tarayıcının yüklemesi gereken pek çok şey çağırdığından, çoğu web sitesi kesinlikle berbat hale yollarına sahiptir.

Bu başkalarından üstün olmaktır. Sayfalarınızı rakiplerinizden daha hızlı yaparsanız ziyaretçileri mutlu edecektir (bunu yaptığınızda Google bunu beğenir).

İşleme

Web sayfalarımızın, web sayfalarımızın işlenmesini gerçekten engelleyen belirli kaynak türleri vardır.

En yaygın olanı CSS dosyaları ve javascript dosyalarıdır.

Ne kadar çok sayıda tarayıcınız olursa olsun, kullanıcıya hiçbir şey göstermeden önce bu dosyaların her birini indirip ayrıştırmanız gerekir. Bir çok yaygın senaryoyu inceleyelim …

WordPress blogları temaları kullanır. Hemen her WordPress temasında birkaç css dosyası var.

Birçoğunun altı veya yedi css dosyası var (bu yüzden pagespeed yönergeleri ” harici CSS dosyalarını birleştirme ” mevcut). Bu CSS’nin tamamı tek bir dosyada olabilir, ancak temanızı eklediğinizde aslında birkaç CSS dosyası olduğu gerçeğidir. Dolayısıyla blogunuzun bir harf bile görüntülenmeden tarayıcının bu dosyalardan her birini yüklemesi ve ayrıştırması (okuması) gerekir; bu, başlamak için yalnızca bir sunucuya altı veya yedi gidiş dönüş anlamına gelir. Bu render engelleme css olarak bilinir .

Bu gerçekleşirken sayfanızın ziyaretçisi boş bir beyaz ekrana bakıyor çünkü bu “kritik” adımlar tamamlanıncaya kadar hiçbir şey görünmeyecek.

Ancak, css’inizi indirdikten sonra bile blogunuz henüz oluşturulamıyor çünkü wordpress temaları da birkaç javascript dosyası olduğu biliniyor. Çoğu durumda javascript dosyaları elde edildiğinden sayfa hala görüntülenmeyecektir. Bu, javascript engelleme işlevi olarak bilinir .

Bu nedenle, bir wordpress blog sayfası tipik bir render sadece ana CSS ve javascript dosyaları almak için yirmi bir şey bir gezi gerektirebilir. Ancak bekleyin, şimdi sosyal düğmeleriniz veya widget’larınız var … oh, bu çeşitli CSS ve javascript kaynaklarının her biri için de gerekiyor.

Mesajınız bir kullanıcıya gösterilmeden önce düzinelerce şey yüklüyor olabilir.

Ancak bu sadece bir wordpress değil, sadece örnek olarak kullanıyorum. Bir web sayfasının ilk görünümü için gereken kaynaklar için birden fazla istek almak oldukça yaygındır.

İçeriğinizin oluşturulmasıyla ilgili bu gecikmeler kontrol edilebilir, kritik oluşturma yolu budur.

Kritik

Şimdiye dek çok kasvetli bir resim çizdim, ancak iyi haber şu ki, web sayfanız için milyonlarca şey çağırabilirsiniz ve 12000 resim, 200 javascript dosyası olabilir ve sayfa yine de saniyeler içinde yüklenebilir.

Bu nasıl yapılır?

Web sayfanız için kritik olanın ne olduğunu anlamak suretiyle yukarıdaki sayfanın katlandığı / ilk görünümü içeriği görüntülenir.

İşleme yolunu en iyileştirme

Konsantre sadece üç şey gerçekten var 1

  • Kritik kaynakların sayısını en aza indirin.
  • Kritik bayt sayısını en aza indirin.
  • Kritik yol uzunluğunu en aza indirin.

Örnekler

Görüntüler – Bir sayfada 12000 resim varsa bile, kağıdın üzerinde görünür olacak (kritik) yalnızca bir veya iki olasıdır. Yani bu iki görüntüye konsantre olursak, ilk sayfa yükleme süresini daha iyi hale getirebiliriz. 12000 resim göstermek zorunda değiliz, yalnızca ilk görünüşteki bir veya ikisini göstermemiz gerekiyor. Gerisi ertelenebilir veya tembel yüklenebilir .

Javascript dosyaları – Biz de onlardan 12000 olabilir, ancak biz sadece başlangıçta bizim web sayfasının üst kısmını göstermek için kritik olanları yüklemek gerekir, ve diğer 11998 javascript dosyaları edilebilir ertelenmiş .

CSS dosyalarıCSS dosyalarını en aza indirgemenin en iyi yolu bir çevrimiçi araç değildir – ilk etapta bu kadar çok şey kullanmamaktır.Sayfalarınızın CSS’nizin% 20’sinden daha azını kullanması muhtemeldir. Gerçi seçenekleri var. By birleştirerek harici CSS dosyaları bazı sen oluşturmak için gereken dosyaların miktarını azaltabilir. Ayrıca edebilirsiniz satır içi html’nizin içine CSS bazılarıdır. CSS’niz ne kadar büyük veya küçük olursa olsun, kullanıcılarınız sayfanızı görene kadar beklemeniz gerekir.

Aşağıda bir web sayfasına bakacağız ve önemli yolu daha hızlı yüklemek için kritik yolla ilgili bilgilerimizi nasıl kullanacağımıza bakacağız.

Sayfa hızı ölçümünü anlama

Google, pagespeed hakkında konuştuğunda, bir web sayfasını indirmek için gereken toplam süre hakkında konuşmazlar. Ne önem verdiği, bir kullanıcının o sayfada içeriği ne kadar çabuk görmeye başladığı (ilk görüntü) ve kullanıcı o içeriğe ne kadar çabuk başlayabileceğidir.

Google’ın pagepeed’i sıralama faktörü 2 olarak kullanmaya başlamasının nedeni, kullanıcılarının memnuniyetine dayanmaktadır. Yüklemek için sonsuza kadar süren bir sayfaya gönderildiğinde Google’da bir şeyler arayan biri için iyi bir deneyim değil.

İnsanlar bu konuda Google’a şikayet ediyor, “Neden beni yavaş soooo yükleyen bir sayfaya gönderiyorsun?” Diyorlar. Bu algılanan hız olarak bilinir.

Bir kullanıcı boş bir beyaz web sayfasına 10 saniye boyunca bakıyorsa, bu durum kötü demektir ve Google bu sayfayı sonuçlarında göstermek istemiyor. Aynı web sayfası ilk saniyede bilgi görüntüseydi o zaman harika bir deneyim olurdu ve Google sonuçlarında bunu istiyor.

Web sayfası hızından bahsettiğimiz ana kaygımız, ilk görünüşte kullanıcıya mümkün olan en kısa sürede içerik sağlamaktır.

Kritik oluşturma yolunu optimize eden gerçek dünya örneği

Şu an okuduğunuz web sayfası bizim örneğimiz olacak. Bu sayfa yarım saniyeden daha az bir sürede oluşturuluyor, ancak web sayfalarınızın yapmış olduğu pek çok şey var.

Size bu web sayfasının iki sürümünü göstereceğim, bir sürüm kritik oluşturma yolu için optimize edilmeyecek ve bir sürümü (okuduğunuz sayfa) optimize edilmiştir.

Bu, değişikliklerin ne kadar önemli olabileceği konusunda büyük bir karşılaştırma yapmanızı sağlar. Ayrıca, Google’ın bilmek istediği ilginç ve yararlı bir sayfa yükünü nasıl ölçtüğünü de gösterecektir.
Bu sayfa birkaç javascript çağrısı kullanıyor, daha yaygın olanları, bu sayfanın neyi kullandığını görelim …

  • Birkaç tane büyük resim
  • CSS
  • Google analytics
  • Google artı rozeti (çok sayıda arama yapar)

Kısacası, insanların web sayfalarında (resim, CSS, monitizasyon, analitik, sosyal paylaşım) gereken temel şeyleri kullanıyorum. Sayfalarınızda aynı şeyleri muhtemelen kullanıyorsunuzdur. Kritik yolu optimize ederek, aslında tüm bu aramaları ve tüm bu şeyleri bir talebe indirgeyeceğim. Tüm tarayıcıların bu sayfayı oluşturması gerekir html dosyasıdır. Tek bir küçük 12k dosya ve bu sayfa hemen yüklenir.
Öte yandan, bu sayfanın optimize edilmemiş versiyonu düzinelerce talep ve gidiş dönüş yapacak, masaüstlerine yüklenmesi daha uzun sürecek ve bir mobil cihaza yüklenmesi çok uzun sürecektir …. Ancak, bunun iki versiyonu Sayfanın içeriği tamamen aynı olacak ve aynı şeyleri yapacak!
Delikanımızı açıp malları gösterelim …

Bu sayfanın optimize edilmemiş hali

İşleme süresi: 1.3 saniye Not: Sayfa yalnızca kullanıcıların tüm dosyaları indirildikten sonra gösterilir (resmin en sağındaki açık mavi dikey çizgi ile gösterilir)

Sağ tarafta, bu sayfanın kaçınılmaz sürümü kaç tane çağrı yaptığını göreceksiniz. Unoptimized sürümü yüklemek için 1.5 saniye sürer ve bulunabilir burada gerçek html ve nasıl sayfa yüklendiğinde görmek istiyorsanız. Sayfa oldukça basit bir statik web sayfasıdır, ancak yüklemek için hala 20 istek gerekiyor. Bu, bir kullanıcının görmesi için sayfanın yüklenmesi için 20 şey beklemek zorunda olduğu anlamına gelir.

Tarayıcının önce html’yi, sonra css’i, ardından resimleri görüntüleyeceğini ve daha sonra javascript dosyalarına girdiğini ve bunların hepsinin indirilmesi ve sayfanın görüntülenmeden önce ayrıştırılacağına dikkat edin.

Bu en iyi duruma getirilmemiş sürüm, kritik oluşturma yoluna hiç dikkat etmez ve bu nedenle çağrılan tüm dosyalar sayfa oluşturulmadan önce indirilmelidir.

Bu sayfanın en iyileştirilmiş versiyonu

İşleme süresi: .25 saniye (250 milisaniye)
not: Sayfa, yalnızca bir dosya indirildikten sonra kullanıcıya gösterilir (resmin ortasına yakın açık mavi dikey çizgi ile gösterilir)

Bu sayfanın optimize edilmiş versiyonu (şu an okuduğunuz) yalnızca ilk sayfa görüntüleme için bir çağrı yapar. Sayfa, kullanıcıya beş kat daha hızlı (diyagramda açık mavi dikey çizgi ile gösterilir) gösterilir ancak yine de aynı şeyleri yapar. Hâlâ aynı dosyaların çoğunu yükler, yine de aynı javascriptleri kullanır, ancak fark, kullanıcının sayfayı yalnızca 250 milisaniye (saniyenin dörtte biri) cinsinden gösterdiği şeklindedir. Bu, optimize edilmemiş sayfanın beş kat daha hızlı. Sayfanızın yüklenmesi 5 saniye sürüyorsa, saniyede bir saniyede bir yük yükleyebilirsiniz. Sihir gibi görünüyor ha?

Web sayfamı nasıl inceledim

Sayfama baktım ve kendime sordum. “Bu sayfanın kat içeriğini yalnızca yukarıya yüklemesi gerçekten ne gerekli?” Aşağıdaki şeylerin bir masaüstü ekranında kesinlikle üstte olduğunu fark ettim:

  • Logo (harici küçük resim)
  • Sağdaki ilk büyük görüntü (harici bir görüntü)
  • Benim css (harici bir dosya)

Bu, aşağıdaki şeylerin sayfanın ilk görünümü için gerekli olmadığı anlamına geliyordu …

  • Google plus rozet
  • Kalan resimler
  • Google analytics

Sonra şelale (sayfanın ne indirildiğini gösteren resim) baktım ve yüklemeye ihtiyaç duymadığım şeylerin aslında yüklemek için en fazla zaman harcadıklarını anladım. Dolayısıyla, gereksiz şeyleri oluşturma yolunun dışında bir şekilde taşıyabilirsem, sayfam çok daha hızlı yüklenir.

Yaptığım optimizasyonlar

  • CSS’yi girdi – CSS’yi harici bir dosyadan aldım ve HTML’ye doğru ekledim
  • Base 64, logoyu ve ilk resmi şifreledi – Logonuzu HTML içine girmek için base 64 kodlama aracını kullandım
  • Tüm resimleri optimize – tüm resimlerimin dosya boyutlarını küçülttim.
  • Tembel yükleme / erteleme görüntüleri – javascript (jQuery olmadan) kullanarak tüm resimler ertelendi
  • JavaScript Tecilli analitik, google artı ve VigLink
  • Sayfamı sayfa hızı aracıyla kontrol ettim

Bu optimizasyonların sonucu, render yolunun dışına çıkabileceğim her şeyi yapmamdı. Aslında yalnızca tek bir çağrıya, yani web sayfasını bir kullanıcıya sunmak için tarayıcının ihtiyaç duyduğu her şeyin bulunduğu gerçek HTML dosyasına eleştirel render yolunu düşürdüm.

CSSOM

Kritik oluşturma yoluna bakmanın daha teknik bir yolu, CSSOM’un temel bir anlayışını içerir . CSSOM, CSS Nesne Modeli’dir.

CSSOM temel olarak stillerin haritasıdır ve bu stillerin nereye gitmesi gerektiği.

Gerçekten ince ayar yapmak isterseniz CSSOM’u anlamanız temel önem taşır.

Kilit noktaları

  • Kritik oluşturma yolu, bir web sayfasını görüntülemek için gerçekleşmesi gereken olay zinciridir
  • İşleme yolunu iyileştirmenin yolu, ilk sayfa görünümü için gerekli olmayan çağrıları kaldırmak veya ertelemektir
  • Javascript kullandığınız şeylerin çoğu muhtemelen sayfa görüntülemeden sonra yüklenmek üzere ertelenebilir (sosyal düğmeler, analizler vb. Şeyler)
  • Sayfayı, sayfanın yukarıdaki kat içeriğini yüklemek için ne gerek duyduğunu inceleyerek inceledim (böylece, ilk görünümü göstermek için sayfanın yüklemesine gerek olmadığını belirledi)
  • Kullandığım Sayfa Hızı optimizasyonlar kaldırmak veya sayfa ekranın üst için yüklemek için gereken vermedi her şeyi erteleme.

Not: Kritik oluşturma yolunun gücünü göstermek için idealden daha az optimizasyon yaptım. (Tembel yükleme bir sürü boyutlu html dosyası oluşturarak, html dosyamın içine bayt ekledi – hala sadece 19k idi, ancak ideal html 14k’den az olurdu)

 

Kısa Özet
Yayın Tarihi
Konunun Adı
Kritik Oluşturma Yolu Nedir?
Verilen Puan
51star1star1star1star1star

Leave a Reply

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir