Kritik oluşturma yolu nedir?

  • Bir web sayfasının ilk görünümünü oluşturmak (görüntülemek) için yapılması gereken olaylar dizisidir.
  • Örnek: get html> kaynakları al> ayrıştırma> web sayfasını görüntüle

Bu etkinlikleri optimize etmek, web sayfalarının çok daha hızlı olmasını sağlar.

zaman çizelgesi ve kaynaklar


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

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

Çoğu web sayfasının birçok farklı bileşeni olduğundan, sayfanın daha hızlı yüklenmesi 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?” veya “Google, sayfaların bir saniyede yüklenmesini nasıl bekliyor?” o zaman bu kavram tam size göre.

Kritik oluşturma yolunu optimize etme

web sayfası yükleme

Açık olmak gerekirse, birkaç şeyi tanımlayalım:

  • kritik – kesinlikle gerekli
  • render – display veya show (bizim durumumuzda web sayfalarımız bir kullanıcı tarafından görülebildiğinde “oluşturulur”)
  • yol – web sayfamızın bir tarayıcıda görüntülenmesine yol açan olaylar zinciri
  • ilk görünüm – “ekranın üst kısmı” olarak da bilinir, ilk görünüm, bir web sayfasının kaydırma yapmadan önce kullanıcı tarafından görülebilen bölümüdür

Başka bir deyişle, oluşturma yolu, web sayfanızı bir tarayıcıda göstermek için gerçekleşen bir dizi etkinliktir.

Neredeyse internet üzerindeki her web sitesi render için gereksiz adımlar attığından, burası gerçekten anlamlı ve göze çarpan optimizasyonların gerçekleşebileceği yerdir.

Kritik oluşturma yolunu optimize etmek, sayfa yükleme sürenizden birkaç saniye sürebilir. Gerçekten daha hızlı web sayfalarına giden en hızlı yoldur.

Yol

html, css ve javascript

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

Bu sayfanın görüntülenmeden önce izlediği yola bakalım …

  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ı resmi indirmeye başlar
  4. tarayıcı önce css ve javascript almadan web sayfasını görüntüleyemediğine karar verir
  5. tarayıcı CSS dosyasını indirir ve başka hiçbir şeyin çağrılmadığından emin olmak için okur
  6. tarayıcı, javascript’i alana kadar web sayfasını henüz görüntüleyemediğine karar verir
  7. tarayıcı javascript dosyasını indirir ve başka hiçbir şeyin çağrılmadığından emin olmak için okur
  8. Tarayıcı artık web sayfasını görüntüleyebileceğine karar veriyor

Yukarıdaki yol çok basit bir web sayfası içindir, şimdi yolunuzun nasıl görünmesi gerektiğini görün.

Muhtemelen sosyal düğmeleriniz, birkaç CSS dosyanız, birkaç javascript dosyanız, birçok resim, widget’ınız ve belki de ses veya videonuz var.

Bu, oluşturma yolunuzun büyük bir karışıklık olduğu anlamına gelir

birbirine işaret eden dağınık dosya kümesi

Çoğu web sitesi kesinlikle korkunç oluşturma yollarına sahiptir, çünkü web sayfası görüntülenmeden önce tarayıcının yüklemesi gereken çok şey çağırırlar.

Bu, diğerlerine göre avantajınızdır. Sayfalarınızı rakiplerinizden daha hızlı yaparsanız, ziyaretçileri mutlu edersiniz (Google bunu yaptığınızda beğenir).

Render

Sayfa yavaş yükleniyor

Web sayfalarımızın aslında web sayfalarımızın oluşturulmasını engelleyen belirli türde kaynakları vardır.

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

Bunlardan kaç tanesine sahip olursanız olun, kullanıcıya hiçbir şey göstermeden önce bu dosyaların her birini indirip ayrıştırması gerekir. Çok yaygın bir senaryoya bakalım …

WordPress blogları temaları kullanır. Hemen hemen her wordpress temasında birkaç css dosyası vardır.

Birçoğunda altı veya yedi css dosyası bulunur (bu nedenle sayfa hızı kılavuzunda ” harici CSS dosyalarını birleştir ” vardır). Tüm bu CSS’ler sadece bir dosyada olabilir, ancak temanızı eklediğinizde, bunun birkaç CSS dosyası olması. Bu yüzden blogunuzda bir harf bile görüntülenmeden önce tarayıcının bu dosyaları her birini yüklemesi ve ayrıştırması (okuması) gerekir, bu da başlamak için bir sunucuya altı veya yedi gidiş dönüş anlamına gelir. Bu, render engelleme css olarak bilinir .

Bu “kritik” adımlar tamamlanana kadar hiçbir şey görünmeyeceği için sayfanızın ziyaretçisi bu beyaz boş bir ekrana bakıyor.

web sayfası yüklemek için kaynaklar

Ancak css indirildikten sonra bile, blogunuz henüz oluşturulamaz çünkü wordpress temaları da birkaç javascript dosyasına sahip olduğu bilinmektedir. Çoğu durumda javascript dosyaları aldığı için sayfa görüntülenmeyecektir. Bu, render engelleme javascript olarak bilinir .

Yani bir wordpress blog sayfasının tipik bir render sadece ana CSS ve javascript dosyalarını almak için yirmi şey yuvarlak geziler gerektirebilir. Ama bekleyin, şimdi de sosyal düğmeleriniz veya widget’larınız var … ah ah, bu birkaç CSS ve javascript kaynağının her biri için de gereklidir.

Yayınınız bir kullanıcıya gösterilmeden önce onlarca şey yüklüyor olabilirsiniz. Ahh. (sayfanızın ne yüklediğini öğrenmek için sayfa istekleri aracı kullanın )

Ama bu sadece bir wordpress işi değil, sadece örnek olarak kullanıyorum. Bir web sayfasının ilk kez görüntülenmesi için gereken kaynaklar için birden fazla istek olması oldukça yaygındır.

İçeriğinizin oluşturulmasında bu gecikmeler kontrol edilebilir, bu da kritik oluşturma yolunun temelini oluşturmaktadır.

Kritik

ekranın üst kısmında, ilk görünüm

Şimdiye kadar çok kasvetli bir resim yaptım, ancak iyi haber şu ki, web sayfanız için bir milyon şey çağırabilirsiniz ve 12000 resim, 200 javascript dosyası olabilir ve sayfa hala bir saniyede yüklenebilir.

Bu nasıl başarılır?

Web sayfanızın ekranın üst kısmındaki / başlangıçtaki görünüm içeriğini görüntülemek için neyin önemli olduğunu anlayarak.

Oluşturma yolunu optimize etme

Konsantre sadece üç şey gerçekten var 1

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

Örnekler

Resimler – Bir sayfada 12000 resim olsa bile, ekranın üst kısmında yalnızca bir veya iki tane görünür (kritik). Bu, bu iki görüntüye odaklanırsak, ilk sayfa yükleme süremizi çok daha iyi hale getirebileceğimiz anlamına gelir. 12000 resim göstermemiz gerekmiyor, sadece ilk görüşte olan bir veya iki resmi göstermemiz gerekiyor. Geri kalanlar ertelenebilir veya tembel yüklenebilir .

Javascript dosyaları – Bunlardan 12000 tane alabiliriz, ancak başlangıçta sadece web sayfamızın üst kısmını göstermek için kritik olanları yüklemeliyiz ve diğer 11.998 javascript dosyası ertelenebilir .

CSS dosyalarıCSS dosyalarını en aza indirmenin en iyi yolu çevrimiçi bir araç değildir – ilk etapta çok fazla kullanmamaktır. Sayfalarınız muhtemelen CSS’nizin% 20’sinden daha azını kullanıyor olabilir. Yine de seçenekler var. By birleştirerek harici CSS dosyaları bazı sen oluşturmak için gereken dosyaların miktarını azaltabilir. Ayrıca , CSS’nizin bir kısmını html’nize satır içine alabilirsiniz. CSS’niz ne kadar büyük veya küçük olursa olsun, kullanıcılarınızın sayfanızı görmek için indirilene kadar beklemesi gerekir.

Aşağıda bir web sayfasına bakacağız ve kritik yol hakkındaki bilgimizi önemli ölçüde daha hızlı yüklemek için nasıl kullanabileceğimizi göreceğiz.

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

Google sayfa hızından bahsettiğinde, bir web sayfasının indirilmesi için geçen toplam süreden bahsetmez. Önem verdikleri şey, bir kullanıcının o sayfadaki içeriği ne kadar hızlı görmeye başladığı (ilk görünüm) ve kullanıcının o içerikle ne kadar hızlı etkileşime girebileceğidir.

Google’ın sayfa hızını sıralama faktörü 2 olarak kullanmaya başlamasının nedeni , kullanıcılarının memnuniyetine dayanmaktadır. Yüklenmesi sonsuza dek süren bir sayfaya gönderildiğinde Google’da bir şey arayan bir kişi için iyi bir deneyim değildir.

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

Bir kullanıcı, yüklenmesini bekleyen 10 saniye boyunca boş bir beyaz web sayfasına bakıyorsa, bu kötüdür ve Google bu sayfayı sonuçlarında göstermek istemez. Aynı web sayfası ilk saniyede bilgi görüntülerse, o zaman harika bir deneyim olur ve Google bunu sonuçlarında ister.

Web sayfasının hızı hakkında konuştuğumuzda temel kaygımız, ilk görünümde en kısa sürede kullanıcıya içerik sağlamaktır.

Kritik oluşturma yolunu optimize etmeye yönelik gerçek bir dünya örneği

Şu anda okuduğunuz web sayfası bizim örneğimiz olacak. Bu sayfa yarım saniyeden daha kısa sürede görüntüleniyor, ancak web sayfalarınızın yaptığı birkaç ş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 edilmez ve bir sürüm (okuduğunuz sayfa) optimize edilir.

Bu, değişikliklerin ne kadar önemli olabileceği konusunda harika bir karşılaştırma sağlayacaktır. Ayrıca, Google’ın bir sayfa yükünü nasıl ölçtüğünü de gösterecek, bu da ilginç ve kullanışlı bir şey.
Bu sayfa birkaç javascript çağrısı kullanıyor, oldukça yaygın olanları, bu sayfanın ne kullandığını görelim …

  • Birkaç büyük resim
  • CSS
  • Google analizi
  • Google artı rozeti (birçok arama yapar)

Özetle, insanların web sayfalarında ihtiyaç duydukları temel şeyleri kullanıyorum (resimler, css, monitizasyon, analitik, sosyal paylaşım). Muhtemelen sayfalarınızda aynı şeyleri kullanıyorsunuzdur. Kritik yolu optimize ederek, aslında tüm bu çağrıları ve tüm bu şeyleri tek bir talebe indirgeyeceğim. Bu sayfayı oluşturmak için gereken tüm tarayıcılar html dosyasıdır. Tek bir küçük 12k dosya ve bu sayfa hemen yüklenir.
Öte yandan, bu sayfanın optimize edilmemiş sürümü düzinelerce istek ve gidiş-dönüş yapacak, masaüstlerine yüklenmesi daha uzun sürecek ve bir mobil cihaza yüklenmesi önemli ölçüde daha uzun sürecek … Yine de, bu iki sürüm sayfası tam olarak aynı içeriğe sahip olacak ve aynı şeyleri yapacak!
Geekimizi alalım ve malları gösterelim …

Bu sayfanın optimize edilmemiş sürümü

web sayfası istekleri - 20

Oluşturma süresi: 1,3 saniye
not: Sayfa kullanıcıya tüm bu dosyalar indirildikten sonra gösterilir (görüntünün en sağındaki açık mavi dikey çizgi ile gösterilir)

Sağda, bu sayfanın optimize edilmemiş sürümünün kaç çağrı yaptığını göreceksiniz. Optimize edilmemiş sürümün yüklenmesi 1.5 saniye sürer ve gerçek html’yi ve sayfanın nasıl yüklendiğini görmek istiyorsanız burada bulunabilir . Sayfa oldukça basit bir statik web sayfasıdır, ancak yine de yüklenmesi 20 istek gerektirir. Bu, bir kullanıcının görmeden önce sayfanın yüklenmesini 20 şey beklemesi gerektiği anlamına gelir.

Tarayıcının önce html’yi, ardından css’i, sonra görüntüleri indirdiğini, ardından kullanıcının sayfayı göstermeden önce indirmesi ve ayrıştırılması gereken javascript dosyalarına gittiğini unutmayın.

Bu optimize edilmemiş sürüm, kritik oluşturma yoluna hiç dikkat etmez ve bu nedenle temel olarak çağrılan tüm dosyaların sayfa oluşturulmadan önce indirilmesi gerekir.

Bu sayfanın optimize edilmiş sürümü

web sayfası istekleri - 20

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

Bu sayfanın optimize edilmiş sürümü (şu anda okumakta olduğunuz sürüm), ilk sayfa görüntüleme için yalnızca bir çağrı yapar. Sayfa kullanıcıya beş kat daha hızlı gösterilir (şemadaki açık mavi dikey çizgi ile gösterilir), ancak yine de aynı şeyleri yapar. Hala aynı dosyaların çoğunu yükler, yine de aynı javascripts’i kullanır, ancak fark kullanıcıya sayfayı sadece 250 milisaniye (saniyenin çeyreği) olarak göstermesidir. Bu, optimize edilmemiş sayfadan beş kat daha hızlıdır. Sayfanızın yüklenmesi 5 saniye sürüyorsa, muhtemelen bir saniyeden daha kısa sürede yüklenmesini sağlayabilirsiniz. Sihir gibi görünüyor, ha?

Web sayfamı nasıl inceledim

Sayfama baktım ve kendime sordum .. “Bu sayfanın yalnızca ekranın üst kısmındaki içeriği yüklemesi için gerçekten neye ihtiyacı var?” Bir masaüstü ekranında aşağıdaki şeylerin kesinlikle ekranın üst kısmında olduğunu fark ettim:

  • logo (harici küçük resim)
  • sağdaki ilk büyük resim (harici bir resim)
  • css (harici bir dosya)

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

  • Google artı rozeti
  • Kalan görüntüler
  • Google analizi

Daha sonra şelaleye baktım (sayfanın ne indirdiğini gösteren resim) ve yüklemem gerekmeyen şeylerin aslında yüklenmesi en çok zaman alan şeyler olduğunu fark ettim. Dolayısıyla, bu gereksiz şeyleri bir şekilde oluşturma yolunun dışına taşıyabilirsem, sayfam çok daha hızlı yüklenir.

Yaptığım optimizasyonlar

  • CSS’yi InlinedCSS’mi harici bir dosyadan aldım ve doğrudan HTML’ye ekledim
  • Base 64, logoyu ve ilk resmi kodladı – Logomu HTML’ye satır içine almak için base 64 kodlama aracını kullandım
  • tüm görüntüleri optimize ettim – tüm görüntülerimin dosya boyutlarını küçültdüm
  • tembel yükleme / erteleme görüntüleri – javascript kullanarak (jQuery olmadan) tüm görüntüleri erteledi
  • analitik, google plus ve viglink javascriptini erteledi
  • sayfamı sayfa hızı aracıyla kontrol ettim

Bu optimizasyonların sonucu, render yolundan elimden gelen her şeyi aldım. Aslında, tarayıcının web sayfasını bir kullanıcıya dönüştürmek için gereken her şeye sahip olan gerçek bir html dosyası olan tek bir çağrının kritik oluşturma yolunu azalttım.

CSSOM

Kritik oluşturma yoluna bakmanın daha teknik bir yolu, CSSOM hakkında temel bir anlayış içerir . CSSOM, CSS Nesne Modelidir.

CSSOM temel olarak stillerinizin ve bu stillerin nereye gitmesi gerektiğinin bir haritasıdır.

Eğer gerçekten ince ayar yapmak istiyorsanız, bunu yapmak için CSSOM hakkında bir anlayış esastır.

Anahtar noktaları

  • Kritik oluşturma yolu, bir web sayfasını görüntülemek için gerçekleşmesi gereken olaylar zinciridir
  • Oluşturma 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, sayfa görünümünden sonra yüklenmek üzere ertelenebilir (sosyal düğmeler, analizler vb. Gibi)
  • Sayfamı ekranın üst kısmındaki içeriği yüklemesi için nelere ihtiyaç duyduğunu düşünerek sayfamı inceledim (böylece ilk görünümü göstermek için sayfanın neye ihtiyaç duymadığını belirleyerek)
  • Sayfanın üst kısmındaki içerik için yüklenmesi gerekmeyen her şeyi kaldırmak veya ertelemek için sayfa hızı optimizasyonlarını kullandım .

Not: Kritik oluşturma yolunun gücünü belirtmek için ideal olandan daha az optimizasyon yaptım. (tembel yükleme, html’ime çok fazla bayt ekledi, büyük boyutlu bir html dosyası oluşturdu – hala sadece 19k’dı, ancak ideal html 14k’den az olurdu)