ev borcu WordPress sitesi
İlk İçerikli Boyama (FCP) ve İlk Anlamlı Boyama (FMP) Açıklaması
Web sitenizi Google'ın PageSpeed Insights , GTMetrix.com gibi hız testi araçlarında test ettiğinizde, sonucu First Contentful Paint ve First Anlamlı Paint ile birlikte diğer hız ölçümleriyle birlikte görürsünüz. Bunlar, ziyaretçilerinizin içeriği ne kadar süredir beklediği hakkında size çok şey söyleyebilecek önemli kullanıcı merkezli ölçümlerdir. Aşağıdaki iki ekran görüntüsüne bir göz atalım.
PageSpeed Insights hız raporu:
GTMetrix.com hız raporu:
Herhangi bir web sitesi için bu iki ölçüm, belirli bir web sitesinin içeriğinin ekranda ne kadar hızlı açıldığını gösterir. Bu metriklerin tam olarak ne olduğunu merak ediyor olabilirsiniz. Bu yazımızda First Contentful Paint (FCP) ve First Anlamlı Paint (MFP) konularını detaylı olarak ele alacağız. Ayrıca, PageSpeed Insights puanınızı artırmak için WordPress siteniz için Boyama Sürelerini azaltmanın 4 yöntemini tartışıyoruz.
First Contentful Paint (FCP) Nedir?
İlk içerikli boyama (FCP) , kullanıcılar web sitesinde gezinirken ekranda görüntülenen ilk içeriktir. Gezinmeden tarayıcının Belge Nesne Modeli'nde (DOM) tanımlanan ilk içerik parçasını oluşturduğu zamana kadar geçen süreyi ölçer. Bu metin, resim veya tuval işleme olabilir.
WordPress web sitesinde, başlık öğeleri , başlangıçta oluşturulan ilk içeriktir. Ziyaretçi site logosunu ve gezinme menüsünü görür.
First Contentful Paint'te iki aşama vardır. İlk Boya ve İçerikli Boya .
İlk Boyama – Tarayıcıda bir oluşturma algılandığında İlk Boyama tetiklenir. Bu, arka plan rengindeki bir değişiklik kadar ince ve bilgi vermeyen bir şey olabilir. Bu zamanlamayla ilgili sorun, ilk boyamaların sayfa yükleme sırasında nispeten erken tetiklenebilmesi ve tüketim için kullanıcıya herhangi bir içerik veya bilgi iletmesi gerekmemesidir.
Web sitelerinin bileşenleri kademeli olarak yüklenebilir ve bir arka plan rengi hızlı bir şekilde boyanabilirken, gerçek içeriğin/etkileşimin yüklenmesi daha uzun sürebilir.
Contentful Paint – İlk İçerikli Boyama, Belge Nesne Modeli'nden (DOM) içeriğin ilk biti boyandığında tetiklenir. Bu, DOM'da tanımlanan metin, resim veya tuval oluşturma olabilir.
Odak noktası içerik olduğu için fikir şudur ki, bu metriğin size kullanıcınızın metin, görseller vb. gibi tüketilebilir bilgileri ne zaman aldığı hakkında bir fikir vermesidir.
First Paint ve Contentful Paint'in farklı aşamaları aşağıdaki resimde gösterilmektedir:
İlk Anlamlı Boya (FMP) Nedir?
Bir web sitesinin içeriği, kullanıcıların aradığı tam olarak yüklendiğinde, buna İlk Anlamlı Boya denir. Bu, kullanıcının sayfanın birincil içeriğinin görünür olduğunu hissettiği zamandır. İlk anlamlı boyama işleminden sonra adından da anlaşılacağı gibi kullanıcılara anlamlı bilgiler vermektedir.
Anlamlı bilgiler siteden siteye farklılık gösterir, ancak şu anda genel uygulama, kahraman öğeleri olarak bilinen değerli içeriğin oluşturulmasını belirlemektir. Kahraman öğeleri, siteyi ziyaret ettiklerinde bir kullanıcı için daha anlamlı olması muhtemel olan çerçeveler, resimler ve başlıklar içerir, bu da onları FMP zamanlaması için iyi bayraklar haline getirir.
Bir blog web sitesi için kahraman öğeleri, öne çıkan resimler içeren blog gönderileri olabilir ve sosyal siteler için kahraman öğeleri zaman çizelgeleri, kullanıcı profili olabilir.
Aşağıdaki resim, acme temalarının tam yüklü bir web sitesini göstermektedir.
İlk İçerikli Boyama (FCP) ve İlk Anlamlı Boyama (FMP) Nasıl Hızlandırılır
First Contentful Paint'i geliştirmek için kaynakların indirme süresini hızlandırın veya tarayıcının DOM içeriğini oluşturmasını engelleyen daha az iş yapın. Aşağıdakiler, web sitesinin hızını artırmanın yollarıdır.
1. Sayfanın bağlı olduğu, oluşturmayı engelleyen harici CSS ve komut dosyalarının sayısını azaltın.
Bu, oluşturmayı engelleyen kaynakları ortadan kaldırarak web sitenizin boyama süresini azaltmanın ilk yoludur. İşleme bloğu, Belge Nesne Modelini (DOM) işleme yollarına giren herhangi bir şeydir. Bir CSS dosyası, oluşturmayı engelleyen bir kaynak olarak kabul edilir, yani tarayıcı, CSSOM oluşturulana kadar işlenmiş herhangi bir içerik oluşturmayacaktır. CSS'nizi yalın tuttuğunuzdan, mümkün olduğunca çabuk teslim ettiğinizden ve oluşturma engelini kaldırmak için medya türlerini ve sorguları kullandığınızdan emin olun.
2. HTTP Önbelleğe Alma özelliğini kullanın
HTTP önbelleğe alma, herhangi bir web sitesinin boyama süresini azaltmanın başka bir yoludur. Birisi bir web sitesini ziyaret ettiğinde, sitenin görüntülemek ve işletmek için ihtiyaç duyduğu her şeyin bir yerden gelmesi gerekir. Tüm metinler, resimler, CSS stilleri, komut dosyaları, medya dosyaları vb., görüntüleme veya yürütme için tarayıcı tarafından alınmalıdır.
Tarayıcıya, bir kaynağı nereden alabileceği konusunda seçenekler verebilirsiniz ve bu, sayfanızın yüklenme hızında büyük bir fark yaratabilir.
3. Metin tabanlı varlıkları küçültün ve sıkıştırın
Web sayfalarınız metin tabanlı HTML, CSS ve JavaScript dosyalarından oluşur. Bir dosyayı gerekli olduğu için ortadan kaldıramıyorsanız, dosya boyutunu mümkün olduğunca küçültmeniz gerekir. Dosya boyutunu küçültmenin, küçültmenin veya sıkıştırmanın dışında bırakmanın yolları vardır.
- Minification: Minification, kaynağın tarayıcı tarafından nasıl işlendiğini etkilemeden gereksiz veya fazla verilerin kaldırılması sürecini ifade eder – örneğin kod yorumları ve biçimlendirme, kullanılmayan kodun kaldırılması, daha kısa değişken ve işlev adlarının kullanılması vb.
- Sıkıştırma: Metin dosyasındaki kalıpları ve çoğaltmaları tespit etme ve bunları çok daha verimli bir şekilde kodlama işlemi ise sıkıştırma.
Bu tekniklerin her ikisi de boyama süresini önemli ölçüde azaltır.
4. JavaScript'i Optimize Edin
JavaScript dosyası, bir web sitesi için diğer dosyalara kıyasla en ağır dosyadır. Örneğin görüntülerin kodunun çözülmesi gerekir, ancak JavaScript'in ayrıştırılması, derlenmesi ve ardından çok değerli zaman harcayarak en sonunda çalıştırılması gerekir. JavaScript dosyanızı optimize etmek için Tree Shaking ve Code Splitting gibi farklı yöntemler kullanabilirsiniz.
- Ağaç Sallama: Ağaç sallama, ölü kodun kaldırılmasını açıklamak için JavaScript bağlamında yaygın olarak kullanılan bir terimdir.
- Kod Bölme: Kodu küçük parçalara ayırma ve kritik olmayan parçaları sitenizin başından dışarı taşıma, ilk boyama süresini azaltma işlemidir.
Özet
Sayfa yükleme süresini azaltmaktan bahsetmişken, bu, hız testi araçlarının dikkate aldığı yalnızca bir bakış açısıdır (teknik çözüm). Web sitesi yükleme hızını etkileyen çeşitli başka faktörler vardır.
Hem First Contentful Paint hem de First Anlamlı Boyama , en iyi kullanıcı deneyimi için bir saniyeden az olmalıdır. Çünkü bu metrikler, ziyaretçilerinizin içeriği ne kadar süredir beklediği hakkında size çok şey söyleyebilecek kullanıcı merkezli metriklerdir. Dolayısıyla FCP ve FMP'yi azaltmak için yukarıda sıralanan yöntemleri takip edebilirsiniz. Google'ın PageSpeed Insights'ında sitenizin sayfa hızına bakın ve web sitenizin durumunu öğrenin.
Diğer SEO Makaleleri:
Do-Follow ve No-Follow Giden Bağlantı – Hangisi daha iyi?
WordPress 301 Yönlendirme – Adım Adım Kılavuz
Giden Bağlantı – Takipsiz ve Do-Dollow Bağlantıları Arasındaki Fark
Bu makaleyi beğendiyseniz, bizi Twitter , Facebook ve LinkedIn'de takip etmeyi düşünün.