WordPress'te FCP'yi İyileştirmenin 8 Eyleme Geçirilebilir Yolu

Bu makale, WordPress'te FCP veya First Contentful Paint'inizi iyileştirmenin birkaç kolay yolunu ele alacaktır. Bu performans metriğini geliştirerek, WordPress web siteniz daha iyi bir kullanıcı deneyimine sahip olacak, Google'da daha üst sıralarda yer alacak ve gözle görülür şekilde daha hızlı yüklenecektir. İlk olarak, FCP'nin ne olduğunu çok hızlı bir şekilde gözden geçirelim ve ardından WordPress web sitenizde bu metriği iyileştirmenin birkaç kolay yolunu tartışalım.

FCP nedir?

First Contentful Paint olarak da bilinen FCP, Chrome kullanıcı deneyimi raporu aracılığıyla gerçek kullanıcılardan toplanan bir istatistiktir. Bu, gerçek dünya kullanıcı deneyiminin daha gerçekçi ölçümlerinden biridir. Bireysel ziyaretçilerin ve kullanıcıların bir web sitesinin performansını nasıl algıladıklarını ölçmek için tasarlanmıştır. Ayrıca, Google'ın tüm web sitelerinde tüketiciler için kullanıcı deneyimini daha iyi hale getirmeyi amaçlayan web sitesi keyfi kampanyasında kullanmaya başlayacağı birçok hız istatistiğinin ilklerinden biridir.

First Contentful Paint, son kullanıcı için görsel içerik oluşturmanın ilk örneğidir. Bu örnekte, FCP ikinci çerçevede gerçekleşir ve kullanıcı için oluşturulan ilk içerik öğesidir. Daha hızlı bir FCP'ye sahip olmak, bu içeriğin yüklenmesinin algılanan süresi çok daha hızlı olduğu için, kullanıcının tüm içerik yüklenene kadar web sitenizde kalmasını sağlar.

FCP ve LCP'nin ne olduğuna dair kapsamlı yazımızda belirttiğimiz gibi, bunun web sitesine ve belirli sayfaya göre değiştiğini anlamalısınız. Böylece FCP'niz bir sayfada bir şey ve başka bir sayfada başka bir şey olabilir. Bu, optimizasyon sürecine biraz karmaşıklık katar, ancak FCP'nin ne olduğunu anladığınız ve bu makalede tartışılan yöntemleri uyguladığınız sürece, gitmenizde fayda var.

Google'ın bu metrikleri 2021 Mart'ta ciddi sıralama göstergeleri olarak kullanmaya başlayacağını, dolayısıyla First Contentful Paint'inizi bu noktadan önce çözmenizin sizin yararınıza olacağını unutmayın.

First Contentful Paint'i Test Etme ve Anlama

First Contentful Paint ölçümlerinizi anlamak ve test etmek çok kolaydır. Tek kullanmanız gereken Google sayfa hızı aracıdır. Sadece URL'nizi girin ve ilk ölçümlerden biri size web sitenizin ne kadar hızlı yüklendiğini saniyeler içinde söyleyecektir.

FCP açısından bir saniyenin altında yüklenen bir web sitesi hızlı olarak sınıflandırılır, 3 saniyenin altında yüklenen bir web sitesi FCP olarak bilinir ve First Contentful Paint'e üç saniye veya daha fazla sahip olan bir web sitesi yavaş olarak bilinir. Gördüğünüz gibi, burada çok fazla hareket alanı yok ve Google'da iyi bir sıralama elde etmek için kesinlikle 3 saniyeden çok daha hızlı bir FCP'ye ihtiyacınız var.

İyi haber şu ki, WordPress'teki First Contentful Paint'inizi iyileştirmenin, anında ve kalıcı bir iyileştirme sağlayacak birkaç eyleme geçirilebilir yöntemi var. Bu çözümlerin çoğu, optimizasyon sürecini sizin için otomatikleştirecek ve WordPress'te FCP optimizasyonunu çok daha kolay hale getirecek eklentileri içerir.

Bu FCP tanıtımının aradan çıkmasıyla, hadi bu metriği nasıl iyileştirebileceğimizi anlayalım. İyi bir FCP'ye sahip olsanız bile, onu milisaniyeler kadar iyileştirmek, kullanıcı deneyiminizi artırabilir ve doğrudan WordPress web sitenizde artan dönüşümler ve daha düşük bir hemen çıkma oranı ile sonuçlanabilir.

İlk Bayt Zamanına Odaklanın

FCP sürenizi azaltmak ve bu puanı artırmak için yapabileceğiniz ilk ve en uygulanabilir şey, İlk Bayt Süresine odaklanmak olacaktır. Birçok web sitesinde çok yavaş bir TTFB veya bir tarayıcının web sayfası içeriğinin ilk ısırmasını alması için geçen süre vardır. TTFB, HTTP isteğinin alınması, bu isteğin işlenmesi ve HTTP isteğinin kendisinin yanıt süresinin toplamıdır.

Layman'ın terimleriyle, web sitenizin sunucuya bağlanması ortalamadan daha uzun sürerse, içeriğin oluşturulması ve indirilmesi son kullanıcı için daha yavaş olacak ve bu da daha yavaş bir FCP ile sonuçlanacaktır.

FCP, ortaya çıkan ilk ölçümdür, bu nedenle neredeyse doğrudan TTFB ile ilgilidir. Bir WordPress web sitesinde İlk Bayt Sürenizi iyileştirmenin, First Contentful Paint puanınızı doğrudan artırmanın iki ana yolu, hızlı bir WordPress ana bilgisayarı seçmek ve kaliteli bir CDN kullanmaktır.

Hızlı bir WordPress sunucunuz varsa, veriler ziyaretçi tarayıcısına normalden çok daha hızlı gönderilir ve TTFB'yi artırır. Web sitesini sunucu konumu açısından coğrafi olarak uzak bir yerden yükleyen bir kullanıcınız varsa, son kullanıcıya fiziksel olarak daha yakın olan bireysel bir düğüme sahip bir CDN kullanmak, TFB'nizi ciddi şekilde artıracak ve çok daha iyi bir İlk'e yol açacaktır. Contentful Paint puanı.

İyi bir WordPress ana bilgisayarı ve CDN önerirken, bunun her zaman entegre bir çözüm olması gerektiğini söylüyoruz. Ayrı bir CDN ve ayrı bir WordPress ana bilgisayarı aramamalısınız, bunun yerine hizmetlerinde bir CDN içeren çok hızlı bir WordPress ana bilgisayarı aramalısınız. Bu sadece size para kazandırmakla kalmayacak, aynı zamanda çok daha az karmaşık olacak ve entegrasyon nedeniyle muhtemelen daha hızlı olacaktır.

Bu nedenle, FCP'nizi geliştirmek için yapabileceğiniz ilk işlem yapılabilir şey, iyi bir ana bilgisayara bakmaktır. Entegre bir CDN'ye (otomatik platform optimizasyonu içeren Cloudflare kuruluşu) sahip en iyi ana bilgisayar Rocket.net'tir.

Bu, blogumuzu ayda yaklaşık 100.000 ziyaretçiye sunmak için kullandığımız WordPress ana bilgisayarı ve birinci sınıf bir CDN ve ışık hızında donanımla entegrasyonu nedeniyle, tam sayfa önbelleğinin yanı sıra TTFB inanılmaz derecede düşük, FCP'mizin kısıtlı olmadığı anlamına gelir.

İşleme Engelleme Kaynaklarını Ortadan Kaldırın

FCP sürenizi en aza indirmek için yapabileceğiniz bir sonraki eyleme geçirilebilir şey, oluşturma engelleme kaynaklarını ortadan kaldırmaktır. Oluşturma engelleme kaynakları, Web Sayfanızın oluşturma işlemi sırasında çağrılan, genellikle CSS ve JavaScript olmak üzere bir web sitesinin öğeleridir.

Bunlar oluşturma sürecini engellediğinden, tarayıcının bir ziyaretçiye DOM öğelerini gerçekten göstermesi, oluşturma engelleme kaynağını indirmesi, ayrıştırması ve ardından tüm sayfayı oluşturmaya devam etmesi için beklemesi gerekir.

Oluşturmanın bu şekilde engellenmesinin First Contentful öğesini de engellediğini varsayarsanız, bu doğru olacaktır. Ve bu kaynaklar oluşturma sürecini ne kadar uzun süre bloke ederse, First Contentful öğesinin oluşturulması o kadar uzun sürer ve bu da daha yüksek FCP süreleri puanına yol açar.

Oluşturma engelleme kaynaklarını ortadan kaldırmanın en iyi yolu, JavaScript ve CSS'yi ertelemek ve eşzamansız olarak yüklemek için Varlık Temizleme adlı üçüncü taraf bir eklenti kullanmaktır. Hatta kullanılmayan CSS'yi en aza indirerek bir web sayfasındaki çeşitli komut dosyalarını devre dışı bırakarak, bu makalenin ilerleyen bölümlerinde bahsedeceğiz.

Satır İçi Kritik CSS

Ek olarak, kritik CSS'yi satır içine almak, ana CSS stil sayfanızın yüklenmesini işleme sürecinin sonuna kadar ertelemenize olanak tanır. Bu, varlık temizliği ile yapılabilir, ancak önbelleğe alma ve optimizasyon eklentisi olan WP Rocket'i birleştirmenizi de öneririz. Bu, otomatik bir kritik CSS oluşturucuya sahiptir ve işleme engelleme kaynaklarını kaldırma konusunda çok iyi çalışır.

Kullanılmayan CSS Yok Edildi

Sırada, bahsettiğimiz gibi kullanılmayan CSS'yi ortadan kaldırmak olacak. Bir web sayfasına kullanılmayan stiller yüklüyorsanız, bunlar oluşturmayı engelleyebilir, ancak sayfanızı ağırlaştırarak daha fazla veri aktarımına neden olarak daha yavaş bir FCP'ye neden olurlar.

Bu kullanılmayan CSS stil sayfalarından kurtulmak, aktarılan veri miktarını en aza indirmenin harika bir yoludur ve sitenizde kritik First Contentful öğesinin boyanmasının önünü açar. Bu, doğrudan FC puanını faydalı bir şekilde etkiler.

Bunu yapmak için otomatik bir yazılım yoktur, ancak CSS'yi tek tek sayfalardan ve sayfa aralıklarından kaldırmanıza yardımcı olan bir eklenti vardır. Bu, yukarıda bahsettiğimiz gibi Varlık Temizleme'dir ve stilleri ve komut dosyalarını açıp kapatmanıza olanak tanır.

Ardından, herhangi bir şeyin bozulup bozulmadığını görmek için web sitenizin ön ucunu test edebilirsiniz ve eğer bozulmadıysa, kullanılmayan CSS'yi kaldırdınız, bu da daha hızlı yüklenen bir web sitesi ve daha iyi bir FCP puanı elde etmenizi sağlar.

Ekranın Üstündeki Komut Dosyası Öğelerini Kaldırın (JS Reklamları gibi)

Web sitenizin gerçek yapısı açısından, ekranın üst kısmındaki komut dosyası tabanlı öğeleri kaldırmak, bir WordPress web sitesinin İlk Contentful Paint'ini iyileştirmenin kesin bir yoludur. JavaScript mümkün olduğu kadar optimize edilebilir, ancak yapısı nedeniyle, doğrudan HTML ve satır içi kritik CSS'den işlenmesi her zaman daha yavaş olacaktır.

Bu nedenle, bir web sayfasının İlk İçerikli Boyası olarak kabul edilebilecek herhangi bir JavaScript'iniz varsa (esas olarak ekranın üst kısmında veya ziyaretçiye yüklenen ilk görünüm alanında bulunan herhangi bir şey), kesinlikle ondan kurtulmak ve değiştirmek istersiniz. saf HTML ile.

Bu genellikle, ekranın üst kısmına yüklenen JavaScript tabanlı reklamları kullanan içerik web sitelerinde görülen bir sorundur. Bu komut dosyalarının ayrıca kümülatif düzen değişikliğiniz üzerinde büyük bir olumsuz etkisi olabilir.

Bunları daha hızlı yüklenen HTML ile değiştirerek, HTML ve CSS teknolojisinin doğası gereği First Contentful Paint'i ciddi şekilde geliştireceksiniz.

Katın Üstündeki Tembel Yükü Devre Dışı Bırak (çılgın, biliyorum)

JavaScript tabanlı öğelerin bu temizliğine devam ederken, ekranın üst kısmında görüntülenen herhangi bir resmi yüklemekte tembelseniz, bu özelliği gerçekten devre dışı bırakmak isteyeceksiniz.

Tembel yükleme görüntüleri, WordPress web sitenizin performansını artırmanın harika bir yoludur, ancak bu işlevselliği etkinleştirmek için JavaScript kitaplıklarını kullandıklarından, First Contentful Paint üzerinde aslında olumsuz bir etkisi vardır.

Bu nedenle, ekranın üst kısmına yüklenen görüntülerin gecikmeli yüklenmesini devre dışı bırakın, ancak bunların uygun şekilde optimize edildiğinden emin olun. Bu, onları WebP formatına dönüştürmeyi (Kısa Piksel kullanın) ve netliği korurken mümkün olduğunca küçük olacak şekilde tamamen sıkıştırmayı içerir.

Satır İçi Görüntüler (SVG veya Base64)

Görüntü optimizasyonunuzla daha da çılgın olmak istiyorsanız, büyük bir çözünürlük gereksinimi olmayan daha küçük görüntüler için devam edebilir ve bunları satır içine alabilirsiniz. Bu, ekranın üst kısmına yüklenen belirli bir logonuz veya daha küçük bir resminiz varsa iyidir. Bunları SVG veya temel 64 biçimlerine dönüştürerek, görüntüyü satır içine yerleştirirsiniz, bunları indirmek için fazladan HTTP isteğini azaltır, FCP'nizi geliştirirsiniz.

Bu tavsiyenin yalnızca belirli kullanım durumları için yararlı olabileceğini unutmayın ve HTTP2 tabanlı bir sunucunuz veya hizalamaya çalıştığınız inanılmaz derecede ağır bir görüntünüz varsa, onu olduğu gibi tutmak en iyisidir.

Ancak, SVG ve taban 64 logolarını, arama simgelerini, sosyal medya simgelerini ve arka planları kullanmak, First Contentful Paint'iniz için faydalı olabilir, Google'daki WordPress web sitesi puanınızı iyileştirebilir ve sıralamanızdan ve kullanıcı deneyiminizden faydalanabilir.

DOM Boyutuna Odaklanın

Yapabileceğiniz son önemli şey, DOM boyutunuza odaklanmaktır. DOM veya belge nesne modeli, esasen sayfanızdaki her öğeye atıfta bulunan ağaç benzeri bir yapıdır.

Bu nedenle, gövde içindeki tüm div'ler, yayılma sarmalayıcıları, paragraflar, üstbilgiler, metal bağlantılar ve daha fazlası DOM öğeleri olarak kabul edilir. Bir sayfada ne kadar çok öğe varsa, oluşturma süresi o kadar uzun olur ve First Contentful Paint'iniz o kadar yavaş olur.

Böylece DOM öğelerinin sayısını azaltarak daha hızlı yüklenen bir web sitesine sahip olacaksınız. Bu, sayfanın mümkün olduğunca yalın olacak şekilde, içine yerleştirilmiş herhangi bir öğeyle veya yeni bir tema veya sayfa oluşturucu kullanılarak tamamen yeniden yapılandırılmasıyla yapılabilir.

Örneğin, Elementor öğelerini düzinelerce gereksiz div'e sarar, bu nedenle daha düşük kod şişkinliğine sahip bir sayfa oluşturucuya geçmek, bir sayfadaki DOM öğelerinin sayısını en aza indirebilir, bu da daha az veri aktarımına yol açarak daha hızlı oluşturma sürelerine yol açar ve sonuç olarak Google'da daha iyi First Contentful Paint puanları.

Çözüm

First Contentful Paint, WordPress web sitenizdeki gerçek dünya kullanıcı deneyiminden türetildiği için, düşük performans gösteren bir varlıkla paten yapamazsınız. Bunun yerine, daha iyi bir kullanıcı deneyimi, daha yüksek sıralama yerleşimi ve daha düşük hemen çıkma oranı ile sonuçlanan bu altı yöntemi optimizasyonunuza dahil ederek, ilk önceliğinizi ele almanız ve boya puanlarıyla başa çıkmanız gerekir.

Bir WordPress web sitesinin genel performansını artırmak için kullanabileceğiniz, First Contentful Paint'iniz için de faydalı olacak başka birçok yöntem vardır, ancak bu altı yöntem, bir WordPress web sitesinde ilk tapınak boyanızı artırmanın en iyi yoludur. Ek optimizasyon önerileriniz varsa, bunları aşağıdaki yorumlar bölümünde bırakmaktan çekinmeyin.