WordPress'te İlk İçerikli Boya (FCP) Nasıl Geliştirilir (Sunucu Tarafı ve Ön Uç Optimizasyonu)

Hiç WordPress sitenizin yüklenmesinin uzun sürdüğünü hissettiniz mi? Eğer öyleyse, yalnız değilsin. Yavaş web siteleri kullanıcıları hayal kırıklığına uğratır ve arama sıralamanıza zarar verir. Ancak endişelenmeyin, WordPress geliştiricileri! Bu makale önemli bir ölçümün iyileştirilmesini basitleştiriyor: İlk İçerikli Boya (FCP).

FCP'yi, kullanıcınızın metin veya resim gibi gerçek içeriğin ilk parçasını gördüğü an olarak düşünün. Ne kadar hızlı görünürse o kadar mutlu olurlar. Yavaş FCP mi? Yararlı içeriğinizi görmeden tıklayabilirler.

Bu makalede, FCP iyileştirmelerini kodlama eğitimi alan ninjaların bile anlayabileceği kolay adımlara ayıracağım. Özel stiller kullanma (“kritik CSS”) ve tüm engelleri kaldırma (“oluşturmayı engelleyen kaynaklar”) hakkında konuşacağım.

FCP Nedir ve Neden Önemlidir?

FCP, tarayıcının sayfanızdaki ilk anlamlı içeriği oluşturması için geçen süreyi ölçen önemli bir ölçümdür. Bu bir metin, bir resim, bir simge veya yalnızca yükleme döndürücü veya arka plan rengi olmayan herhangi bir öğe olabilir.

Temelde bu, ziyaretçinizin nihayet somut bir şey gördüğü andır; bu, web sitenizin canlı ve hareketli olduğuna dair bir işarettir. Hızlı bir FCP, ziyaretçilere "Hey, biz buradayız ve size harika bir şey göstermeye hazırız!" diyor.

Öte yandan, yavaş bir FCP, yavaşlık ve olası teknik sorunların imajını taşır. Bu, sinirli ziyaretçilerin içeriğinizi deneyimlemeden hemen ayrılmalarına neden olabilir, bu da etkileşim ve dönüşüm oranlarınızı etkileyebilir.

FCP'yi geliştirmek, web sitenizin o ilk "vay" anını hızlı bir şekilde sunmasını sağlamakla ilgilidir. Sayfanızın nasıl oluşturulduğunu kontrol altına alarak kullanıcı deneyimini iyileştirebilir, SEO sıralamalarını yükseltebilir ve gerçekten parlayan bir web sitesi oluşturabilirsiniz.

İyi bir FCP Puanı Nedir?

1,8 saniye veya daha kısa bir FCP'yi hedefleyin. Bu zaman dilimi çoğu kullanıcının sitenizi hızlı ve duyarlı olarak algılamasını sağlar. Google bunu iyi bir kullanıcı deneyimi olarak görüyor.

Hedef 1,8 saniye olsa da, daha da hızlı olmaya çalışın. Mobil ve masaüstü cihazlara bölünmüş sayfa yüklemelerinin yüzde 75'lik dilimi ideal olarak bu aralığa girmelidir. Bu tutarlılık sağlar ve farklı cihaz türlerine ve ağ hızlarına hitap eder.

İşte döküm:

0-1,8 saniye: Güzel! Kullanıcılar sitenizi ışık hızında algılar.
1,8-3 saniye: Hala iyi, ancak potansiyel kullanıcı hayal kırıklığını önlemek için iyileştirmeyi hedefleyin.
3+ saniye: Kötü! Ziyaretçiler, algılanan yavaşlık nedeniyle geri dönebilir.

– Kaynak: web.dev

FCP Sorunlarınızı Teşhis Etme

Lighthouse, Google PageSpeed ​​Insights ve GTmetrix gibi araçlar web sitenizi analiz edebilir ve FCP'nizi geciktiren belirli unsurları tespit edebilir. Aşağıdaki gibi suçluları arayın:

• Büyük veya optimize edilmemiş resimler
• Oluşturmayı engelleyen kaynaklar
• Ağır yazı tipleri
• Aşırı karmaşık JS ve CSS

Şüphelileri belirledikten sonra etkilerini anlamak için daha derine inin. Google PageSpeed ​​Insights gibi araçlar, ayrıntılı performans analizi sunarak FCP'yi etkileyen belirli komut dosyalarını, stilleri ve ağ isteklerini belirlemenize yardımcı olur.

Google PageSpeed ​​Insights'ı açın, web sitenizin URL'sini arama çubuğuna girin veAnaliz Et ' i tıklayın.

• Bu, FCP'yi ve genel performansı iyileştirmek için iyileştirmelerin yapılabileceği alanları vurgulayan ayrıntılı bir rapor oluşturacaktır.

• FCP metriğine dikkat edin. Gerçek içeriğin ilk kısmının ziyaretçinizin ekranında görünmesinin ne kadar süreceğini size söyler.

• Daha sonra PageSpeed ​​Insights'takiTeşhis bölümüne göz atın.Sitenizdeki FCP'yi iyileştirmenin belirli yollarını listeler.

FCP'yi İyileştirme Stratejileri

Gerçekten ilgi çekici deneyimler yaratmak için FCP'yi her iki cephede de ele almamız gerekiyor: sunucu tarafı ve ön uç optimizasyonu. Her biri için uygulanabilir stratejilere bakalım:

Sunucu Tarafı Optimizasyonu

Bu, web sayfasını görüntülemek için gerekli verileri hızlı bir şekilde göndermek üzere sunucuda değişiklik yapmakla ilgilidir. Bu, iyi önbellekleme yöntemleri kullanılarak, dosyaları göndermeden önce sıkıştırarak ve sunucunun daha hızlı yanıt vermesini sağlayarak yapılabilir.

1. Sunucu Yanıt Süresini (TTFB) Azaltın

İlk Bayta Kadar Geçen Süre (TTFB), bir web sunucusunun veya başka bir ağ kaynağının yanıt verebilirliğinin bir göstergesi olarak kullanılan bir ölçümdür.

TTFB'yi azaltmak, sunucunuzun yazılım yapılandırmasını optimize ederek, verimli veritabanı sorguları sağlayarak ve HTTP isteklerini en aza indirerek başarılabilir.

1.1. Daha İyi Bir Barındırma Sağlayıcısı Seçin

Barındırma sağlayıcısının seçimi sitenizin performansını önemli ölçüde etkileyebilir. Mükemmel çalışma süresi, güçlü güvenlik önlemleri ve yüksek hızlı donanım sunan sağlayıcıları arayın.

Performansa ve optimizasyona öncelik verdiği için Cloudways iyi bir seçim olabilir. Üstelik güvenilir bir çalışma süresine sahiptir ve web sitenizin kullanıcılar için her zaman erişilebilir olmasını sağlar. Cloudways'in web sitenizin performansını artırmak için neler sunduğunu görelim. Ayrıca bununla ilgili daha fazla bilgiyi burada ayrıntılı olarak okuyabilirsiniz.

1.2. Sunucu Yazılımını Optimize Edin

Bu, optimum performansı sağlamak için web sunucusu yazılım yapılandırmanızda ince ayar yapılmasını içerir. Bu, sıkıştırmayı etkinleştirmeyi, SSL/TLS yapılandırmanızı hız ve güvenlik açısından optimize etmeyi ve sunucunuzu statik dosyaları verimli bir şekilde sunacak şekilde yapılandırmayı içerebilir.

1.3. İçerik Dağıtım Ağı (CDN) kullanın

CDN, dünyanın çeşitli yerlerine dağıtılmış sunuculardan oluşan bir ağdır.

Bir kullanıcı sitenizden bir dosya istediğinde, dosya CDN'deki en yakın sunucudan teslim edilir, bu da yükleme sürelerinin daha hızlı olmasını sağlar. CDN'ler ayrıca sitenizi trafik artışlarından ve DDoS saldırılarından korumanıza da yardımcı olur.

Cloudways kullanıcıları için Cloudflare CDN'yi entegre etmek, yalnızca coğrafi dağıtımın ötesinde ek avantajlar sunar. Cloudways hesabınızla sorunsuz bir şekilde bütünleşerek kurulum ve yönetimi basitleştirir. Ayrıca Cloudflare CDN aşağıdaki gibi özellikleri içerir:

2. Sunucu Düzeyinde Önbelleğe Almadan Yararlanın

Sunucu düzeyinde önbelleğe alma, site sayfalarının bir kopyasını geçici bir depolama konumunda saklayarak web sitenizin hızını önemli ölçüde artırabilir. Bu, sayfa görünümü oluşturmak için gereken iş miktarını azaltarak kullanıcılarınız için daha hızlı yükleme süreleri sağlar.

2.1. Sunucu Düzeyinde Önbelleğe Alma için WP Eklentileri

Sunucu düzeyinde önbelleğe alma uygulamanıza yardımcı olabilecek birkaç WordPress eklentisi vardır. Bunlar şunları içerir:

1. W3 Total Cache: Bu eklenti, sayfa önbelleğe alma, nesne önbelleğe alma ve tarayıcı önbelleğe alma dahil olmak üzere kapsamlı bir önbellekleme seçenekleri paketi sunar.
2. WP Super Cache: Bu kullanıcı dostu eklenti, dinamik WordPress sitenizden statik HTML dosyaları oluşturur. Web sunucusu, daha ağır PHP komut dosyalarını işlemek yerine bu HTML dosyalarını kullanacaktır.

2.2. Sunucu Tarafı Önbelleğe Alma Kurallarını Yapılandırma

Sunucu tarafı önbelleğe almayı yapılandırmak, sunucunuzun içeriği nasıl ve ne zaman önbelleğe alması gerektiğine ilişkin kuralların ayarlanmasını içerir. İşte bazı genel adımlar:

• Önbelleğe Almayı Etkinleştir: Bu genellikle sunucunuzun yapılandırma dosyası aracılığıyla yapılır (örn. Apache sunucuları için .htaccess).
• Önbellek Kontrolü Başlıklarını Ayarlayın: Bu başlıklar, hangi tür dosyaların önbelleğe alınacağını ve bunların ne kadar süre saklanacağını tanımlar.
• ETag'leri Yapılandırın: ETag'ler, tarayıcının, önbelleğe alınan içeriğin son önbelleğe alınmasından bu yana değişip değişmediğini belirlemesine yardımcı olur.
• Sona Erme Başlıklarını Kullan: Bu başlıklar, tarayıcıya içeriğin ne kadar süreyle önbelleğe alınacağını bildirir.

Ön Uç Optimizasyonu

Bu, web sayfasını daha hızlı görüntülemek için kullanıcının cihazında değişiklik yapılmasıyla ilgilidir. Bu, sayfayı yavaşlatan kaynakların kullanımını azaltarak, CSS ve JavaScript dosyalarını iyileştirerek ve görselleri yalnızca gerektiğinde yükleyerek yapılabilir.

3. Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın

CSS ve JavaScript gibi oluşturmayı engelleyen kaynaklar web sitenizin yükleme süresini yavaşlatabilir. Bu sorunu nasıl çözeceğiniz aşağıda açıklanmıştır:

3.1. Kritik CSS'yi Belirleyin ve Önce Onu Yükleyin

Kritik CSS, bir web sayfasının ekranın üst kısmındaki içeriğini oluşturmak için gereken minimum CSS engelleme kümesidir. HTML belgesindeki kritik CSS'yi tanımlayın ve satır içi yapın ve diğer tüm CSS stillerinin yüklenmesini erteleyin.

3.2. Erteleme veya Zaman uyumsuz yükleme Kritik Olmayan JavaScript

Kritik olmayan JavaScript, sayfa oluşturmayı hızlandırmak için eşzamansız olarak ertelenebilir veya yüklenebilir. Bunu başarmak için komut dosyası etiketlerinizde defer veya async özelliğini kullanın.

HTML belgesi tamamen ayrıştırılana kadar kritik olmayan JavaScript'in yüklenmesini ertelemek için komut dosyası etiketlerinizdeki defer özelliğini kullanın:

 <script src="non-kritik.js" defer></script>

Alternatif olarak, betiği eşzamansız olarak yüklemek için eşzamansız özelliğini kullanın:

 <script src='kritik olmayan.js' async></script>

3.3 Kullanılmayan Komut Dosyalarını ve Stilleri Kaldırma

Kullanılmayan komut dosyalarını ve stilleri kaldırarak gereksiz baytları ortadan kaldırın. Aşağıdaki araçlar kullanılmayan CSS'nin belirlenmesine ve kaldırılmasına yardımcı olabilir.

1. PurifyCSS: Bu araç kullanılmayan CSS'yi kaldırmak için kullanılabilir. Kaynak dosyalarınızı kontrol eder ve kullanılmayan seçicileri CSS'nizden kaldırır.
2. UnCSS: PurifyCSS'ye benzer şekilde UnCSS de kullanılmayan stilleri stil sayfalarınızdan kaldırır.
3. Chrome Geliştirme Araçları: Chrome Geliştirme Araçları'ndaki Kapsam sekmesi, kullanılmayan JavaScript ve CSS kodlarının belirlenmesine yardımcı olabilir.

4. CSS Yapınızı Optimize Edin

CSS'nizi optimize etmek, daha hızlı oluşturma sürelerine ve daha iyi bir kullanıcı deneyimine yol açabilir. İşte nasıl:

4.1. CSS Dosyalarını Küçültün ve Azaltın

Küçültme, gereksiz karakterleri koddan kaldırarak boyutunu küçültür, böylece yükleme sürelerini iyileştirir. Sıkıştırma, tarayıcıya dağıtımı optimize etmek için CSS dosyalarının boyutunu azaltır. Breeze, daha iyi yükleme süreleri için tüm CSS dosyalarınızı otomatik olarak en aza indiren yerleşik CSS küçültme özelliği sunar. Ayrıca, FCP'yi daha da geliştirerek kritik CSS'yi satır içine almak için ayrı seçenekler sunar.

4.2. Anahtar CSS İsteklerini Önceden Yükleme

<link> etiketindeki önyüklemeözelliği, tarayıcının önemli CSS dosyalarını mümkün olan en kısa sürede indirmesine olanak tanır, bu da sayfayı oluşturmak için gereken süreyi azaltabilir. Bir CSS dosyasınıönceden yüklemek için önyükleme özelliğinin nasıl kullanılacağına ilişkin bir örnek:

 <link rel = "preload" href = "styles.css" as = "style">

Bu, tarayıcıya, muhtemelen yakında ihtiyaç duyulacağından, stilleri.css dosyasını hemen indirmeye başlamasını söyler.as=”style” özelliği, tarayıcının kaynağı indirmek için doğru önceliği belirlemesine yardımcı olduğu için önemlidir.

Not: Gerekli bant genişliğini kullanarak performansı yavaşlatabileceğinden çok fazla kaynağı önceden yüklerken dikkatli olun.İlk sayfa yüklemesi için yalnızca kritik CSS dosyalarının önceden yüklenmesi önerilir.

5. Ekranın Üst Kısmında JavaScript'e Bağlı Öğelerden Kaçının

JavaScript'e bağımlı öğeler web sitenizin yükleme süresini yavaşlatabilir. Bu sorunu nasıl çözeceğiniz aşağıda açıklanmıştır:

5.1. Animasyonlar ve Kaydırıcılar için Alternatif Çözümler Kullanın

JavaScript tabanlı animasyonlara ve kaydırıcılara alternatif olarak CSS animasyonlarını veya HTML5 videosunu kullanmayı düşünün. Bu alternatifler, sayfa yükleme süresini daha az etkileyerek benzer işlevler sağlayabilir.

CSS animasyonları, JavaScript animasyonlarının yerini alabilecek güçlü bir özelliktir. Bunlar, daha iyi performans için donanım hızlandırmayı kullanabilen tarayıcının oluşturma motoru tarafından gerçekleştirilir.

İşte basit bir CSS animasyonunun bir örneği:

 @keyframes slaytı {
  from { transform:translateX(0); }
  to { transform: TranslateX(100px); }
}

.myElement {
  animasyon: 2 saniyeyi sonsuz olarak kaydırın;
}

HTML5 videosu, JavaScript'e güvenmeden zengin, dinamik içerik oluşturmak için kullanılabilir. Tüm modern tarayıcılar tarafından desteklenir ve standart HTML5 video API'si kullanılarak kontrol edilebilir.

 <video width = "1080" yükseklik = "720" kontroller>
  <source src = "movie.mp4" type = "video/mp4">
  Tarayıcınız video etiketini desteklemiyor.
</video>

5.2. Gerekli Olmayan JavaScript Yürütmesini Geciktirin

Gerekli olmayan JavaScript, sayfa yüklenene kadar ertelenebilir. Bu, tarayıcının sayfayı daha hızlı oluşturmasını sağlar ve kullanıcı deneyimini geliştirir.

<script> etiketindeki deferözelliği, HTML belgesi tamamen ayrıştırıldıktan sonra tarayıcının komut dosyasını yürütmesine olanak tanır.

 <script src="script.js" defer></script>

Async özelliği, betiğin diğer kaynaklarla paralel olarak getirilmesine ve sayfanın oluşturulmasını engellemeden kullanılabilir olur olmaz yürütülmesine olanak tanır.

 <script src="script.js" async></script>

JavaScript, gerekli olmayan JavaScript'in yürütülmesini sayfa yüklenene kadar geciktirmek için kullanılabilecek DOMContentLoaded ve loadgibi olaylar sağlar.

 window.addEventListener('yük', function() {
  // Kodunuz buraya
});

6. Görüntüleri Ekranın Üst Kısmına Tembel Şekilde Yüklemekten Kaçının

Tembel yükleme, görüntüleri yalnızca ihtiyaç duyuldukça yükleyerek performansı artırabilir. Ancak, ekranın üst kısmında görünen görsellerin geç yüklenmesinden kaçınmak önemlidir. İşte nasıl:

6.1. Kritik Görselleri Önceden Yükleyin

Ön yükleme, tarayıcının önemli görselleri mümkün olan en kısa sürede indirmesine olanak tanır. Bu, sayfayı oluşturmak için gereken süreyi azaltır ve kullanıcı deneyimini iyileştirir. Bunu nasıl yapabileceğiniz aşağıda açıklanmıştır:

• HTML'nizdeki birbağlantı öğesinde relözelliğininönyüklemedeğerini kullanın. Bu, tarayıcıya belirtilen kaynağı mümkün olan en kısa sürede indirmeye başlamasını söyler.
• Sunucunuz HTTP/2'yi destekliyorsa kaynakları istemciye istenmeden göndermek için Sunucu Push'u kullanabilirsiniz. Bu, özellikle kritik görüntülerin önceden yüklenmesinde etkili olabilir.

6.2. Ekranın Üst Kısmında Görüntü Optimizasyon Tekniklerini Kullanın

Ekranın üst kısmında görünen görselleri sıkıştırarak, uygun şekilde yeniden boyutlandırarak ve WebP gibi modern görsel formatlarını kullanarak optimize edin.

7. Görselleri Optimize Edin ve Sıkıştırın

Görüntü optimizasyonu, sayfa yükleme sürelerini önemli ölçüde azaltabilir, bant genişliği kullanımını azaltabilir ve kullanıcı deneyimini iyileştirebilir. İşte nasıl:

7.1. Doğru Görüntü Formatını ve Sıkıştırma Düzeyini Seçin

Görüntünün içeriğine bağlı olarak farklı görüntü formatları ve sıkıştırma seviyeleri kullanılabilir. Örneğin, fotoğraflar için JPEG, az renkli grafikler için PNG ve vektör görselleri için SVG kullanın.

Imagify, görüntüleri tek bir tıklamayla zahmetsizce yeniden boyutlandırmanıza ve sıkıştırmanıza olanak tanır ve en iyi WordPress görüntü optimizasyon eklentileri arasında kabul edilir. İşte talimatlar:

• Öncelikle Imagify eklentisini WordPress sitenize kurun ve etkinleştirin.
• API anahtarını oluşturmak için e-posta adresinizi kullanın. Oluşturulduktan sonra bu anahtarı kopyalayın ve şu yola yapıştırın:WordPress Dashboard > Settings > Imagify .
• WordPress Kontrol Paneli → Ayarlar → Imagify → Optimizasyon Bölümüne gidin.

Optimizasyon bölümünde, Sitedeki görselleri WebP formatında göster ve <picture> etiketlerini kullanseçeneğini seçin.

7.2. Duyarlı Görüntü Tekniklerini Kullanın

HTML'dekisrcset özelliği gibi duyarlı görüntü teknikleri, tarayıcının cihazın ekran boyutuna ve çözünürlüğüne göre en uygun görüntü kaynağını seçmesine olanak tanır.Bu, bant genişliği kullanımını azaltabilir ve mobil cihazlarda yükleme sürelerini iyileştirebilir.

8. DOM Boyutunuzu Azaltın

Belge Nesne Modelinizin (DOM) boyutunu küçültmek daha iyi performansa yol açabilir. İşte bazı stratejiler:

8.1. HTML İşaretlemesini En Aza İndirin

HTML'nizi temiz ve yalın tutun. Gereksiz etiketleri kaldırın, anlamsal HTML öğeleri kullanın ve mümkün olduğunca satır içi stillendirmeden kaçının.

HTML'nizi temiz ve yalın tutmak için şunları yapabilirsiniz:

• Gereksiz etiketleri belirlemek ve kaldırmak için W3C İşaretleme Doğrulama Hizmeti gibi HTML doğrulayıcıları kullanın.
• İçeriğiniz hakkında daha fazla bilgi sağlamak için <article>, <section> ve <nav> gibi anlamsal HTML öğelerini kullanın.
• <head> bölümünde satır içi stiller yerine harici CSS stil sayfalarını veya dahili CSS'yi kullanın.

 <!-- İyi -->
<kafa>
    <stil>
        .sınıfım {
            renk: mavi;
        }
    </style>
</head>
<gövde>
    <div class="myClass">Merhaba Dünya!</div>
</body>

<!-- Kötü -->
<gövde>
    <div>Merhaba Dünya!</div>
</body>

8.2. Gereksiz İç İçe Elemanlardan Kaçının

Derinlemesine yuvalanmış öğeler DOM'u daha büyük ve daha karmaşık hale getirerek sayfa oluşturmayı yavaşlatabilir. HTML yapınızı mümkün olduğunca düz tutmaya çalışın.

DOM'un daha büyük ve daha karmaşık hale gelmesini önlemek için şunları yapabilirsiniz:

• Mizanpaj amacıyla iç içe tablolar veya div'ler yerine CSS Flexbox veya Grid'i kullanın.
• HTML karmaşıklığını artırmadan öğelere stil vermek için CSS birleştiricilerini kullanın.

Derinlemesine yuvalanmış öğelere doğrudan erişmek içinDocument.querySelector() veya Document.querySelectorAll() öğesinikullanın.

 <!-- İyi -->
<div class = "kapsayıcı">
    <div class="item">Öğe 1</div>
    <div class="item">Öğe 2</div>
</div>

<!-- Kötü -->
<div>
    <div>
        <div>Öğe 1</div>
    </div>
    <div>
        <div>Öğe 2</div>
    </div>
</div>

9. Web Yazı Tipi Yüklenmesi Sırasında Metnin Görünür Kalmasını Sağlayın

Web yazı tipleri sitenizi yavaşlatabilir ancak metnin web yazı tipi yüklemesi sırasında görünür kalmasını sağlayarak bunu azaltabilirsiniz.

9.1. “Değiştir” veya “Geri Dönüş” Gibi Yazı Tipi Görüntüleme Seçeneklerini Kullanın

CSSfont-display özelliği, bir yazı tipinin indirilip indirilmediğine ve ne zaman indirilip kullanıma hazır olduğuna bağlı olarak nasıl görüntüleneceğini kontrol eder.

"Takas" değeri, tarayıcıya, özel yazı tipi yüklenene kadar metni görüntülemek için yedek yazı tipini kullanmasını söylerken "geri dönüş" değeri, yazı tipine kısa bir blok süresi ve sonsuz bir takas süresi verir.

"Takas" veya "geri dönüş" gibi yazı tipi görüntüleme seçeneklerini kullanmak için font-display özelliğini CSS'nizdeki @font-facekuralınıza ekleyebilirsiniz. Bunu nasıl yapabileceğiniz aşağıda açıklanmıştır:

 @yazı tipi yüzü {
  yazı tipi ailesi: 'MyFont';
  kaynak: url('/path/to/myfont.woff2') format('woff2'),
       url('/path/to/myfont.woff') format('woff');
  yazı tipi ekranı: takas; /* veya geri dönüş */
}

Bu, tarayıcıya, özel yazı tipi yüklenene kadar metni görüntülemek için yedek yazı tipini kullanmasını söyler. "Geri dönüş" seçeneğini kullanırsanız yazı tipi kısa bir blok süresine ve sonsuz bir takas süresine sahip olur.

9.2. Web Yazı Tiplerini Yerel Olarak veya bir CDN'de Barındırın

Web yazı tiplerini yerel olarak veya İçerik Dağıtım Ağı'nda (CDN) barındırmak, HTTP isteklerinin sayısını azaltarak, tarayıcı önbelleğinden yararlanarak ve içerik dağıtım hızını artırarak yükleme sürelerini hızlandırabilir.

Web yazı tiplerini yerel olarak veya bir CDN'de barındırmak için şu adımları takip edebilirsiniz:

• Webfont dosyalarını Google Fonts, Font Squirrel vb. kaynaklardan indirebilirsiniz.
• Web yazı tiplerini yerel olarak barındırıyorsanız dosyaları sunucunuza yükleyin. CDN kullanıyorsanız dosyaları yüklemek için CDN'nin talimatlarını izleyin.
• Yazı tipi dosyalarının konumunu belirtmek için CSS'nizdeki @font-face kuralını kullanın.

 @yazı tipi yüzü {
  yazı tipi ailesi: 'MyFont';
  kaynak: url('/path/to/myfont.woff2') format('woff2'),
       url('/path/to/myfont.woff') format('woff');
}

Bu, HTTP isteklerinin sayısını azaltarak, tarayıcı önbelleğinden yararlanarak ve içerik dağıtım hızını artırarak yükleme sürelerini hızlandırabilir.

Özet

Sonuç olarak, WordPress sitenizin First Contentful Paint'i (FCP) geliştirmek, hem sunucu tarafı hem de ön uç stratejilerini içeren çok yönlü bir süreçtir. Sunucu yanıtını iyileştirmek, sunucu önbelleğe almayı kullanmak, oluşturma bloklarını kaldırmak ve CSS'yi geliştirmek FCP'yi hızlandırır.

Lighthouse, Google PageSpeed ​​Insights ve GTmetrix gibi araçlar FCP sorunlarını teşhis etmenize ve optimizasyon çalışmalarınıza rehberlik etmenize yardımcı olabilir. İyi bir FCP puanının 1,8 saniye veya daha az olduğunu unutmayın; bu, çoğu kullanıcının sitenizi hızlı ve duyarlı olarak algılamasını sağlar.