Açıklanan İlk İçerik Boya (FCP) ve İlk Maninli Boya (FMP)
Web sitenizi Google Pagespeed Insights, GTMetrix.com gibi hız test araçlarında her test ettiğinizde, diğer hızlı boya ile birlikte ilk içerikli boya ve ilk manevratik boya ile sonuçları göreceksiniz. Bu, ziyaretçilerinizin içerik için ne kadar süre beklediğine dair birçok şey söyleyebilen kullanıcılara odaklanan önemli bir metriktir. Aşağıdaki iki ekran görüntüsüne bakalım. PagePeed Insights Hız Raporu:
GTMetrix.com Hız Raporu: Herhangi bir web sitesi için, bu iki metrik ekranda belirli web sitesi içeriğinin ne kadar hızlı açıldığını gösterir. Metriğin tam olarak ne olduğunu merak ediyor olabilirsiniz. Bu makalede, ilk İçerik Boya (FCP) ve ilk Maningful Boya’yı (MFP) ayrıntılı olarak tartışacağız. Ayrıca, PagePeed Insights puanınızı artırmak için WordPress sitenizin boya süresini azaltmak için 4 yöntem tartışıyoruz.İçerik Tablosu
İlk İçerik Boya (FCP) nedir?
İlk Maningful Boya (FMP) nedir?
İlk İçerik Boya (FCP) ve First Maningful Boya (FMP) nasıl hızlandırılır
1. Bahçenin bağımlı olduğu yerin hedefini engelleyen CSS ve harici komut dosyalarının sayısını azaltın.
2. HTTP önbellekleme kullanın
3. Metin tabanlı varlıklar küçük ve sıkıştırın
4. JavaScript’i optimize edin
Özet
İlk İçerik Boya (FCP) nedir? İlk İçerik Boya (FCP), kullanıcı web sitesini izlediğinde ekranda görüntülenen ilk içeriktir. Bu, tarayıcının belge nesne modelinde (DOM) belirtilen içeriğin ilk bölümünü oluşturduğu zamana kadar süreyi ölçer. Bu metin, görüntü veya oluşturma tuvali şeklinde olabilir.
WordPress sitesi söz konusu olduğunda, başlık öğesi ilk oluşturma içeriğidir. Ziyaretçiler site logosu ve navigasyon menüsünü görür. İlk içerikli boyada iki aşama vardır. İlk boya ve içerikli boya. İlk Boya – İlk boya tarayıcıda tespit edildiğinde tetiklenir. Bu ince bir şey olabilir ve arka plan rengindeki bir değişiklik gibi bilgilendirici olmayabilir. Bu zaman ayarı ile ilgili sorun, ilk resmin, tüketim için kullanıcıya herhangi bir içerik veya bilgi göndermek zorunda kalmamasına rağmen, ilk resmin nispeten sayfa yüklemesi tarafından tetiklenebilmesidir. Web sitesi bileşenleri aşamalar halinde yüklenebilir ve arka plan rengi hızlı bir şekilde boyanabilirken, gerçek içerik/etkileşim yüklemek için daha fazla zaman gerektirebilir.
İçerik Boya – Belge nesne modelinin (DOM) ilk içeriği sırasında tetiklenen ilk içerikli boya boyalı. Bu, DOM’da belirtilen metin, görüntüler veya tuval oluşturma şeklinde olabilir. Odak noktası içerik üzerinde olduğundan, bu metriğin size kullanıcınızın metin, görseller, vb. İlk boyanın ve içerikli boyanın farklı aşamaları aşağıdaki resimde gösterilmiştir:
İlk İçerik Kedi Fazında İlk Manenli Boya (FMP) nedir? Web sitesinin içeriği kullanıcı tarafından aranan tam olarak yüklendiğinde, buna ilk Maningful Boya olarak adlandırılır. Bu, kullanıcıların sayfanın ana içeriğinin görünür olduğunu hissettikleri zamandır. Adından anlamlı bir ilk boya oluşturma işleminden sonra önerdiği gibi, kullanıcı için önemli bilgiler sağlar. Anlamlı bilgi siteden siteye farklıdır, ancak mevcut genel uygulama, kahraman öğeleri olarak bilinen değerli içeriğin oluşturulmasını belirlemektir.Kahramanların öğeleri, siteyi ziyaret ettiklerinde kullanıcılar için daha anlamlı olma eğiliminde olan çadırları, görüntüleri ve başlıkları içerir, FMP zaman ayarlama kahramanları için iyi bir işaret haline getirir.Aşağıdaki resim, tam şarjlı ACME tema web sitesini göstermektedir. İlk içerikli boyayı geliştirmek, kaynak indirme süresini hızlandırmak veya tarayıcıların DOM içeriğini oluşturmasını önleyen daha az iş yapmak için ilk içerik boya (FCP) ve ilk manenful boyayı (FMP) nasıl hızlandırır.Web sitesi hızını artırmanın yolları aşağıdadır.
1. Bahçenin bağımlı olduğu yerin hedefini engelleyen CSS ve harici komut dosyalarının sayısını azaltın. Bu, oluşturmayı engelleyen kaynakları ortadan kaldırarak web sitenizi boyama zamanını azaltmanın ilk yoludur. Oluşturma bloğu, oluşturma belgesi nesne modelini (DOM) engelleyen her şeydir. CSS dosyası, bir oluşturma engelleme kaynağı olarak ele alınır, bu da tarayıcının CSSOM oluşturulana kadar işlenen içeriği oluşturmayacağı anlamına gelir. CSS’nizin ince kaldığından, mümkün olan en kısa sürede gönderin ve oluşturmayı engellemek için medya ve sorgu türünü kullanın. 2. HTTP kullanın HTTP önbellek, herhangi bir web sitesini boyama süresini azaltmanın başka bir yoludur. Birisi bir web sitesini ziyaret ettiğinde, sitenin görüntülenmesi ve işletilmesi gereken her şey bir yerden gelmelidir. Tüm metinler, resimler, CSS stilleri, komut dosyaları, medya dosyaları vb. Tarayıcı tarafından görüntülenecek veya yürütülecektir. Tarayıcıya kaynakları nereden alabileceği konusunda bir seçim sağlayabilirsiniz ve büyük bir fark yaratabilir. Sayfanızı yükleme hızı. 3. Web sayfalarınıza göre daha küçük ve sıkıştırma varlıkları HTML, CSS ve metin tabanlı JavaScript dosyalarından oluşur. Dosyaları çok önemli olduğu için ortadan kaldıramıyorsanız, dosyanın boyutunu mümkün olduğunca azaltmanız gerekir. Dosya boyutunu azaltmanın, büzülmenin veya sıkıştırmanın birkaç yolu vardır.
Minifikasyon: Minifikasyon, kaynakların tarayıcı tarafından işleme şeklini etkilemeden gereksiz veya aşırı verilerin kaldırılması sürecini ifade eder – örneğin yorumlar ve kod biçimlendirme, kullanılmayan kodları silme, değişkenlerin ve daha kısa işlevlerin adlarını kullanarak ve bu nedenle üzerinde.Sıkıştırma: Sıkıştırma Metin dosyalarında ve kodlamada kalıpları ve kopyaları algılama işlemi çok daha verimli ise.
Bu tekniklerin her ikisi de boyama süresini önemli ölçüde azaltır.
4. JavaScript JavaScript dosyası, bir web sitesi için diğer dosyalara kıyasla en zor dosyadır. Örneğin görüntüler kod çözülmelidir, ancak JavaScript açıklanmalı, derlenmeli ve sonunda yürütülmeli, çok değerli zaman geçirmelidir. JavaScript dosyanızı optimize etmek için ağaç çalkalama ve kod bölme gibi farklı yöntemler kullanabilirsiniz.
Ağaç sallama: Ağaç sallama, ölü kodun kaldırılmasını tanımlamak için JavaScript bağlamında yaygın olarak kullanılan bir terimdir.
Kod Ayrılması: Bu, kodu küçük parçalara ayırma ve önemsiz parçaları sitenizin kafasından çıkararak ilk boyama süresini azaltma işlemidir.
Sayfa açma saatini azaltma hakkında konuşmanın bir özeti, bu sadece bir hız test cihazı tarafından düşünülen bir perspektiftir (teknik çözüm). Web sitelerini yükleme hızını etkileyen çeşitli faktörler de vardır.
En iyi kullanıcı deneyimi için hem ilk içerikli boya hem de ilk manikalı boya bir saniyeden az olmalıdır. Çünkü bu metrik, ziyaretçilerinizin içerik için ne kadar süre beklediğine dair birçok şey söyleyebilen kullanıcı merkezli bir metriktir. Böylece, FCP ve FMP’yi azaltmak için yukarıda listelenen yöntemleri izleyebilirsiniz. Google Pagespeed Insights adresindeki Site sayfanızın hızını kontrol edin ve web sitenizin durumunu öğrenin.
Diğer SEO Makaleler: Do-Follow vs takipsiz bağlantılar-hangisi daha iyi? WordPress 301 transferi – adım adım kılavuz
