Çok Dilli Bir Web Sitesinde Temel Web Değerleri Nasıl İyileştirilir?

Core Web Vitals, web sitelerindeki kullanıcı deneyiminin kalitesini ölçen bir metrik koleksiyonudur. Google bunları sıralama sinyalleri olarak sayar ve bu nedenle (çok dilli) SEO için de önemlidirler. Bunları ihmal ederseniz, hem ziyaretçiler hem de arama motorları tarafından dışlanma riskiyle karşı karşıya kalırsınız.

Bu senaryodan kaçınmak için, bu yazıda çok dilli web sitenizde bu metrikleri iyileştirmek için bilmeniz gereken her şeyi öğreneceksiniz. Core Web Vitals'ın ne olduğunu, sitenizin mevcut performansını nasıl test edeceğinizi ve web sitenizdeki her bir metriği nasıl iyileştireceğinize dair adım adım talimatları açıklayacağız.

Core Web Vitals Nedir?

Daha önce de belirtildiği gibi, Core Web Vitals web sitelerindeki kullanıcı deneyimini ölçmektedir. Hepsi bir şekilde yükleme hızı ve web sitesi etkileşimi ile ilgilidir. Bu metrikler Google tarafından 2020 yılında tanıtıldı ve arama algoritmasının bir parçası haline geldi. Şimdi bunların üzerinden tek tek geçelim.

En Büyük İçerikli Boya (LCP)

Bunlardan ilki En Büyük İçerik Boyasıdır (LCP). Bir sayfanın görüntülenebilir ve kullanılabilir hale gelene kadar yüklenmesi için geçen süreyi ölçer. Bunu, genellikle bir resim veya metin bloğu olan bir web sayfasının en büyük içerik öğesini ve ziyaretçiler tarafından ne zaman görünür hale geldiğini tespit ederek belirler.

Bu aralık saniye cinsinden ölçülür ve LCP puanı olarak kullanılır. Google, sitenizin ne tür bir zamanlamayı hedeflemesi gerektiğini tanımlamak için bir dizi kesme noktası tanımlamıştır.

Yukarıda görebileceğiniz gibi, LCP öğesinin yüklenmesi için 2,5 saniyeye kadar iyi bir puan. 4 saniyeye kadar kabul edilebilir ancak iyileştirilmelidir ve bunun ötesindeki her şey Google tarafından çok uzun olarak değerlendirilir.

Kümülatif Yerleşim Kayması (CLS)

Sıradaki metrik, bir web sitesi düzeninin yüklenirkenki kararlılığını, yani sayfada yeni öğeler göründüğünde ne kadar hareket gösterdiğini izler. Buna Kümülatif Düzen Kayması veya CLS denir.

Bu neden önemli?

Yüksek derecede CLS, kullanıcının sitenizle etkileşimini bozabilir. Sadece iyi görünmemesinin yanı sıra, hareket eden metin nedeniyle sayfadaki yerlerini kaybetmelerine veya yanlış anda kaydığı için yanlış öğeye yanlışlıkla tıklamalarına da neden olabilir.

CLS, yükleme sırasında düzenin ne kadar hareket ettiğine ve bu hareketlerin ne kadar büyük olduğuna bakılarak hesaplanır. Bu iki oran birbiriyle çarpılarak skor elde edilir.

CLS skorunun 0,1'in altında olması iyidir; 0,25'e kadar iyileştirme gerekir ve bunun üzerindeki her şey kabul edilemez.

Bir not: Kullanıcının sayfayla etkileşiminden sonraki 500 ms içindeki sayfa hareketleri (tıklama gibi) CLS puanınızı etkilemez. Bunların kasıtlı olduğu kabul edilir.

Sonraki Boyaya Etkileşim (INP)

Interaction to Next Paint veya INP, Core Web Vitals metriklerinin en son eklentisidir. Mart 2024'te orijinal ölçümlerden biri olan İlk Girdi Gecikmesinin (FID) yerini alacaktır.

Her ikisi de bir ziyaretçinin bir sayfa öğesiyle etkileşime girmesi ile ne kadar hızlı yanıt verdiği arasındaki süreyi izler. Elbette, tepki ne kadar hızlı olursa o kadar iyidir.

İlk Giriş Gecikmesi yalnızca ziyaretçinin ilk etkileşimine bakarken, Sonraki Boyaya Etkileşim bir ziyaret sırasındaki tüm sayfa etkileşimlerini izler ve en kötü puanı gösterir. Bu şekilde, sayfanın yanıt verebilirliği hakkında daha doğru bir resme sahip olursunuz.

Hedeflemek için iyi bir INP puanı nedir?

200 ms'ye kadar iyi ve 500 ms'ye kadar makuldür; bunun ötesindeki her şey Google'ın sitenize bakışını olumsuz etkileyecektir.

Web Sitenizin Temel Web Değerleri Nasıl Test Edilir?

Core Web Vitals'ın tam olarak ne olduğunu öğrendikten sonra, bir sonraki mantıklı soru, sitenizin nerede durduğunu nasıl öğreneceğinizdir? Bunu öğrenmenin en kolay yolu PageSpeed Insights gibi bir hız testi aracı kullanmaktır.

Web sitenizin URL'sini en üste girmeniz ve testi çalıştırmanız yeterlidir. Test tamamlandığında, yalnızca web sitenizin Core Web Vitals değerlendirmesini geçip geçmediğini söylemekle kalmaz, aynı zamanda belirtilen veri noktalarının her biri için değerler de sağlar.

Varsa, hem gerçek hayat hem de laboratuvar sonuçlarının bir karışımını elde edersiniz. Bu, Google'ın Chrome tarayıcısından web sitesi kullanıcı verilerini topladığı CrUX'tan gelen bilgileri içerir. Eğer böyle bir veri yoksa, ölçümleri sadece Lighthouse'dan alabiliyorsunuz ve bu da onları ad hoc olarak hesaplıyor.

Core Web Vitals performansınız hakkında size bilgi verebilecek diğer araçlar GTmetrix, WebPageTest veya Chrome Web Vitals uzantısıdır.

Çok Dilli Web Sitelerinde Temel Web Değerlerini İyileştirme

Peki, değerleriniz mükemmel değilse ne yapmanız gerekiyor? Şimdi bunun hakkında konuşalım.

Buradan itibaren, çok dilli sitenizde her bir Core Web Vital metriğini nasıl iyileştireceğinizi adım adım açıklayacağız. Bunu manuel olarak nasıl yapacağınızı ve WordPress kullanıcıları için WP Rocket eklentisinin yardımıyla bunu yapmanın kolay bir yolunu ele alacağız.

WP Rocket, teknik bilgisi olmayan kişilerin sofistike performans iyileştirmelerini hızlı ve zahmetsizce uygulamasını çok kolaylaştırır. Kolaylıkla en güçlü ve acemi dostu önbellekleme eklentilerinden biridir.

Genel Performans İyileştirmeleri

Web sitenizin hızlı yüklendiğinden nasıl emin olacağınıza dair bazı genel ipuçlarıyla başlayalım:

• İyi bir barındırma şirketi seçin - Web sitenizin yerleştirildiği barındırma sağlayıcısının kalitesi, ne kadar hızlı yükleneceği üzerinde çok etkilidir. Karar vermeden önce bazı hız karşılaştırmalarını ve kullanıcı yorumlarını okuyarak saygın bir sağlayıcıya gittiğinizden emin olun.
• Sitenizi güncel tutun - Web siteniz WordPress gibi bir içerik yönetim sistemine dayanıyorsa, her şeyi güncel tuttuğunuzdan emin olun. Bu, yazılımın yanı sıra tüm eklentiler, temalar, sunucunun PHP sürümü ve siteye ait diğer her şey anlamına gelir. Ancak bu şekilde yeni hız iyileştirmelerinden faydalanabilirsiniz.
• Daha az eklenti kullanın - Aynı zamanda sitenize eklediğiniz şeylerde aşırıya kaçmamaya çalışın. Her eklenti ve uzantı, sitenizi potansiyel olarak yavaşlatabilecek ekstra kodlarla birlikte gelir. Bu nedenle, sitenizde bulunanları mutlak minimumda tutun.
• Yüksek kaliteli bileşenleri tercih edin - Web sitenizde yer alan uzantıların yüksek kaliteli ve performans için optimize edilmiş olduğundan emin olun, örneğin Weglot.

Yukarıdaki ipuçları, daha özel önlemlere geçmeden önce genel olarak hızlı performans için iyi bir temel oluşturacaktır.

En Büyük İçerikli Boyanın Düzeltilmesi

Largest Contentful Paint'i iyileştirmek için iki ana yol vardır: genel olarak sayfa yükleme hızını optimize etmek (yukarıda ele alındığı gibi) ve LCP öğelerinizin dağıtımını daha hızlı hale getirmek.

LCP öğeniz nedir? PageSpeed Insights bunu size Tanılama altında söyleyecektir.

Önbelleğe Alma ve Sıkıştırma Uygulama

Önbelleğe alma ve sıkıştırma, site performansını artırmak için kullanılan iki temel tekniktir. İlki, ziyaretçilerin daha hızlı erişmesini sağlamak için işlenmiş sayfa verilerini depolamak anlamına gelir. Web sitenizi güçlendirmek için WordPress kullanırken özellikle etkilidir.

Neden mi?

WordPress CMS sayfalar genellikle PHP kodundan ve veritabanından alınan içerikten dinamik olarak oluşturulur. Sunucu bunları HTML belgelerine dönüştürür ve tarayıcıya gönderir.

Önbellekleme, web sayfalarınızın önceden oluşturulmuş HTML sürümlerini sunucuda depolayarak bu süreci hızlandırır, böylece bunları doğrudan ziyaretçilerinize gönderebilirsiniz. Bu, ziyaret başına birkaç gidiş gelişi ortadan kaldırabilir ve kullanıcı deneyimini çok daha hızlı ve iyi hale getirebilir.

Öte yandan sıkıştırma, zip dosyaları oluşturmakla aynı şeydir, sadece ev bilgisayarınız yerine bir sunucuda gerçekleşir. Bir web sitesini oluşturan dosyaları küçültür, böylece daha hızlı indirebilir ve görüntüleyebilirler.

Sunucunuzda hem önbelleğe almayı hem de sıkıştırmayı etkinleştirmek için .htaccess adlı bir dosyayı düzenlemeniz gerekir. Bu dosya web sunucunuzun işlevselliği için önemli direktifler içerir ve genellikle web sitenizin kök dizininde bulunur.

Yukarıda bahsedilen her iki hız optimizasyon tekniğini de etkinleştirmek için aşağıdaki kodu kopyalayıp yapıştırabilirsiniz:

<IfModule mod_deflate.c>
   # Compress HTML, CSS, JavaScript, Text, XML and fonts
   AddOutputFilterByType DEFLATE application/javascript
   AddOutputFilterByType DEFLATE application/rss+xml
   AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
   AddOutputFilterByType DEFLATE application/x-font
   AddOutputFilterByType DEFLATE application/x-font-opentype
   AddOutputFilterByType DEFLATE application/x-font-otf
   AddOutputFilterByType DEFLATE application/x-font-truetype
   AddOutputFilterByType DEFLATE application/x-font-ttf
   AddOutputFilterByType DEFLATE application/x-javascript
   AddOutputFilterByType DEFLATE application/xhtml+xml
   AddOutputFilterByType DEFLATE application/xml
   AddOutputFilterByType DEFLATE font/opentype
   AddOutputFilterByType DEFLATE font/otf
   AddOutputFilterByType DEFLATE font/ttf
   AddOutputFilterByType DEFLATE image/svg+xml
   AddOutputFilterByType DEFLATE image/x-icon
   AddOutputFilterByType DEFLATE text/css
   AddOutputFilterByType DEFLATE text/html
   AddOutputFilterByType DEFLATE text/javascript
   AddOutputFilterByType DEFLATE text/plain
   AddOutputFilterByType DEFLATE text/xml

   # Remove browser bugs (only needed for really old browsers)
   BrowserMatch ^Mozilla/4 gzip-only-text/html
   BrowserMatch ^Mozilla/4\.0[678] no-gzip
   BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
   Header append Vary User-Agent
</IfModule>

<IfModule mod_expires.c>
   ExpiresActive On

   # Images
   ExpiresByType image/jpeg "access plus 1 year"
   ExpiresByType image/gif "access plus 1 year"
   ExpiresByType image/png "access plus 1 year"
   ExpiresByType image/webp "access plus 1 year"
   ExpiresByType image/svg+xml "access plus 1 year"
   ExpiresByType image/x-icon "access plus 1 year"

   # Video
   ExpiresByType video/webm "access plus 1 year"
   ExpiresByType video/mp4 "access plus 1 year"
   ExpiresByType video/mpeg "access plus 1 year"

   # Fonts
   ExpiresByType font/ttf "access plus 1 year"
   ExpiresByType font/otf "access plus 1 year"
   ExpiresByType font/woff "access plus 1 year"
   ExpiresByType font/woff2 "access plus 1 year"
   ExpiresByType application/font-woff "access plus 1 year"
   ExpiresByType application/font-woff2 "access plus 1 year"

   # CSS, JavaScript
   ExpiresByType text/css "access plus 1 year"
   ExpiresByType text/javascript "access plus 1 year"
   ExpiresByType application/javascript "access plus 1 year"

   # Others
   ExpiresByType application/pdf "access plus 1 year"
   ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>

Her iki kod parçacığı da GTmetrix 'ten alınmıştır ve Apache sunucuları için çalışmaktadır. NGINX gibi diğer sunucular için talimatları çevrimiçi olarak, örneğin KeyCDN'deki bu eğitimde bulabilirsiniz.

Bu göz korkutucu görünüyorsa, yukarıda bahsedilen WP Rocket eklentisini kullanarak aynı şeyi başarabilirsiniz. Burada yalnızca eklentiyi kurmanız ve etkinleştirmeniz yeterlidir; mobil cihazlar da dahil olmak üzere hem sıkıştırma hem de önbelleğe alma işlemlerini otomatik olarak gerçekleştirir.

Kodu ve Kod Dağıtımını Optimize Edin

Web sitenizin kodunun teslimini ve işlenmesini kolaylaştırmak için yapabileceğiniz her şey, çok dilli web sitenizdeki Largest Contentful Paint'i iyileştirmeye yardımcı olacaktır. Bunun için bazı iyi seçeneklerin üzerinden geçelim:

• Gereksiz işaretlemeyi kaldırma - Sitenizde çok fazla gereksiz JavaScript ve CSS kodu varsa, kesinlikle gerekli olmayan her şeyi ortadan kaldırarak performansı artırabilirsiniz.
• Küçültme - Bu, web sitesi dosyalarındaki boşlukları ve yorumları kaldırmak anlamına gelir. Bunu yapmak dosya boyutunu küçülterek daha hızlı indirilmesini ve işlenmesini sağlar.
• CSS ve JavaScript optimizasyonu - Burada web sitenizin dosyalarını, web sitenizin geri kalanının yüklenmesini engellemeyecek şekilde ayarlarsınız. Bu, hız testi araçlarından alabileceğiniz meşhur "render engelleyici kaynakları ortadan kaldır" mesajıdır. Bunun için iki popüler araç defer ve async özellikleridir. Sırasıyla, JavaScript yürütmesini yükleme kuyruğunun sonuna taşırlar ve tarayıcıya dosyaları arka planda indirmesini ve yalnızca kullanılabilir olduklarında yürütmesini söylerler.

Elle minifikasyon için Minifier veya Grunt gibi araçları kullanabilirsiniz. CSS ve JavaScript'i optimize etmek genellikle sayfalarınızın yüklenmesini neyin engellediğine dair çok sayıda analiz anlamına gelir. Hız testi araçları size sorunlu komut dosyaları hakkında bilgi verecektir.

Bundan sonra, bunlara manuel olarak defer ve async etiketleri eklemek size kalmıştır. Şöyle görünürler:

<script async src="important.js"></script>
<script defer src="not-so-important.js"></script>

Ayrıca, yalnızca ilk başta gerekli olanları yüklemek için bazı kodları bölebilirsiniz. Aşağıda INP'yi optimize etmekten bahsederken bu konu hakkında daha fazla bilgi vereceğiz.

Bu işlemleri otomatikleştirmek istiyorsanız, WP Rocket kodu küçültebilir, kullanılmayan CSS'leri kaldırabilir, JavaScript'i erteleyebilir ve sadece birkaç kutuyu işaretleyerek eşzamansız olarak yükleyebilir.

Görüntüleri Optimize Edin

Görüntü optimizasyonu, kaliteden ödün vermeden web sitenizdeki görsellerin boyutunu küçültmek anlamına gelir. Bu harika bir genel performans iyileştirmesidir ve görseller genellikle LCP öğeleri olduğundan özellikle En Büyük İçerik Boyamasını iyileştirmeye yardımcı olur.

Sitenizdeki görselleri nasıl optimize edebilirsiniz?

• Görselleri çevir in - Web sitenizi çevirmek yalnızca metinle sınırlı değildir. Görsellerinizdeki metinleri de dönüştürmeniz ve/veya kültürel açıdan daha uygun görseller kullanmanız gerekecektir. Neyse ki, Weglot bu alanda size yardımcı oluyor.
• Sıkıştırma - Tıpkı metin dosyalarında olduğu gibi, resimlerin boyutunu küçültmek için gereksiz verileri çıkarabilirsiniz.
• Modern formatları kullanın - WebP veya AVIF gibi yeni nesil formatlardaki görüntüler JPG veya PNG'den çok daha küçüktür ve aynı derecede iyi görünür.
• Görselleri doğru boyutlandırın - Görselleri web sitenizde göründükleri kadar büyük gösterin. Aksi takdirde ziyaretçilerinize gereksiz veri yükletmiş olursunuz.
• Tembel yük lemeyi açın - Bu teknik yalnızca ilk yükleme sırasında tarayıcıda gerçekten görünür olan görüntüleri yükler ve ziyaretçiler sayfayı kaydırdıkça sayfanın ilerleyen kısımlarında bulunanları getirir. Bu aynı zamanda bant genişliğinin LCP olmayan görüntülere harcanmasını önler, böylece önemli olanlar daha hızlı yüklenebilir.

Mevcut Araçlar

Görüntüleri sıkıştırmak ve diğer dosya formatlarına dönüştürmek için TinyPNG gibi araçlar kullanabilirsiniz. Image Resizer gibi bir araç da bunları istediğiniz boyutlarda kesebilir. Bunun için WordPress'te Ayarlar > Medya altında seçenekler de bulabilirsiniz.

Ayrıca, WordPress'in en son sürümünü (veya 5.4 sürümünden sonraki herhangi bir sürümünü) çalıştırıyorsanız, sitenizde varsayılan olarak tembel yükleme etkinleştirilmiş olmalıdır.

Otomatik bir çözüm istiyorsanız, Imagify var. WP Rocket ile birlikte iyi çalışan kolay bir görüntü iyileştirici eklentisidir. Kalite ve performansı dengelerken görsellerinizi daha hafif hale getirmek için otomatik olarak işleyebilir. Eklenti, görsellerinizi WebP ve Avif'e dönüştürür, büyük görselleri yeniden boyutlandırır ve optimize edilmiş sürümleri WordPress web sitenizde otomatik olarak görüntüler.

Buna ek olarak, WP Rocket sadece resimler için değil, aynı zamanda CSS arka planları ve videolar gibi gömülü medya için de tembel yükleme sunar. Ayrıca, mantıklı olduğunda medyayı tembel yüklemenin dışında tutabilirsiniz.

Bir CDN kullanın

Bir içerik dağıtım ağı (CDN), web sitenizin dosyalarını içeren dünyanın farklı bölgelerinde bulunan birbirine bağlı bir dizi bilgisayardan oluşur. Amacı, bunları ziyaretçilerinize en yakın konumdan mümkün olduğunca hızlı bir şekilde ulaştırmaktır. Bu, özellikle uluslararası bir kitleye sahip çok dilli web siteleri için önemlidir.

Bu nedenle, Weglot otomatik olarak bir CDN kurar, böylece çevrilmiş içeriğinizi tüm dünyaya hızlı bir şekilde ulaştırabilirsiniz. Weglot kullanıcısı değilseniz, genellikle bir CDN'e kaydolmanız ve siteniz için yapılandırmanız gerekir. Bu, sağlayıcıdan sağlayıcıya farklılık gösterir; işte örnek talimatlar.

Yardıma ihtiyacınız varsa WP Rocket, iki popüler çözüm olan Sucuri ve Cloudflare için özel eklentilere sahiptir. Siteniz için bu içerik dağıtım ağlarını yapılandırmayı daha hızlı ve kolay hale getirirler.

Sağlayıcınızın CNAME'sini girerek CDN ayarlarında diğer ağları da etkinleştirebilirsiniz.

Son olarak WP Rocket, eklentinin içinden otomatik olarak yapılandırabileceğiniz RocketCDN adlı kendi ağına da sahiptir. Ek olarak, WP Rocket'in kod dosyalarını küçültme yeteneği CDN trafiğini ve maliyetlerini azaltabilir.

Kümülatif Yerleşim Kaymasının Ele Alınması

Çok dilli web sitenizde geliştirmeniz gereken Temel Web Değerleri listemizde sırada CLS var. Bu bölümde başarılı olduğunuzdan nasıl emin olabileceğinizi aşağıda bulabilirsiniz.

Görüntü Boyutu Özniteliklerini Dahil Etme

Kötü CLS puanlarının en büyük etkenlerinden biri genellikle tanımlanmış yükseklik ve genişlik özellikleri olmayan görüntülerdir.

Bir resmin son sayfada ne kadar büyük olacağını belirtmezseniz, tarayıcı bunun için doğru miktarda alan ayıramaz. Sonuç olarak, gerçek boyut yer tutucudan farklı olduğunda, görüntü aniden ortaya çıkar ve altındaki her şeyi aşağı iter. Bu durum özellikle sayfa ilk kez yüklenirken görünmeyen tembel yüklenmiş medya için söz konusu olabilir.

Dolayısıyla, CLS'yi optimize etmenin ilk kuralı resimlerinize yükseklik ve genişlik tanımları eklemektir. Bunu nasıl yapacaksınız?

Saf HTML'de basitçe şöyle görünür:

<img src="image.jpg" alt="Insert alt text" width="600" height="700">

WordPress blok düzenleyicisini kullanıyorsanız, boyutları otomatik olarak ayarlaması gerekir, ancak içeriğinizi oluştururken belirli boyutları da tanımlayabilirsiniz.

Ek olarak, WP Rocket, bazılarını kaçırmanız durumunda medya dosyalarınıza eksik genişlik ve yükseklik bildirimleri ekleme seçeneğine sahiptir.

Eklemeler, İframe'ler ve Reklam Yuvaları için Yer Ayırma

Yukarıdaki kuralın aynısı gömülü öğeler veya reklamlar gibi dinamik içerikler için de geçerlidir. Bunların da sayfa düzeninin geri kalanında hareket etmesini önlemek için yükseklik ve genişlik tanımlarına ihtiyacı vardır.

Buradaki sorun, bu unsurların ne kadar büyük olacağını her zaman kontrol edememenizdir çünkü genellikle üçüncü taraf kaynaklardan gelirler. Bu durumda, yer ayırmak için en azından bir tahmin yapmak iyi bir uygulamadır. Nihai öğe daha büyük olsa bile, kayma o kadar belirgin olmayacak ve daha düşük bir CLS puanına yol açacaktır.

WordPress'te editör ayrıca gömülü içeriğe otomatik olarak genişlik ve yükseklik ekler. Ek olarak, belirtildiği gibi, WP Rocket gömülü medyanızı tembel yükleme seçeneği ile birlikte gelir. Bu, yüklendikleri zaman için gerekli alanı otomatik olarak ayırır.

Web Yazı Tipi Dağıtımını Optimize Edin

Yazı tipleri de, özellikle web sitenizde özel yazı tipleri kullanıyorsanız, düzen kaymalarına neden olabilir. Buradaki en yaygın iki sorun şunlardır:

• Flash of Unstyled Text (FOUT) - Bu, bir ziyaretçinin web sitenizdeki metni ilk olarak yazı tipi dosyası yüklendiği anda değişen ve potansiyel olarak düzen hareketine yol açan standart bir yazı tipinde görmesi anlamına gelir.
• Flash of Invisible Text (FOIT) - Burada ilk başta herhangi bir metin göremezsiniz. Yalnızca web yazı tipi dosyasıyla birlikte görünür.

Aşağıdaki stratejileri kullanarak bu sorunlardan kaçınabilirsiniz:

• Modern font formatlarını kullanın - Resimler gibi fontlar da büyük ve küçük dosya formatlarında gelir. En hızlı yüklenenler genellikle WOFF veya WOFF2'dir.
• Benzer bir yedek yazı tipi tanımlayın - Asıl yazı tipinize çok benzeyen bir yedek yazı tipi koymak, geçiş yapıldığında sayfa hareketini azaltır. İyi kombinasyonlar bulmak için Font Style Matcher 'ı kullanabilirsiniz.
• Fontları önceden yükleyin - Web font dosyalarını belgenin başına yerleştirerek ve çağrıya rel=preload ekleyerek önceliklendirin. Bu şekilde, tarayıcı bunları daha hızlı yükleyecektir.

WP Rocket kullanıyorsanız, eklenti yazı tipi dosyalarını önceden yükleme seçeneğiyle birlikte gelir. Tek yapmanız gereken bulundukları yolu girmektir.

Bu arada, çok dilli bir web sitesi için yazı tipi optimizasyonunun bir parçası da farklı alfabelerle uyumlu yazı tipleri kullanmaktır. Bu, özellikle sitenizde RTL dilleri (sağdan sola doğru yazılan) sunuyorsanız geçerlidir.

Dinamik İçerikle Başa Çıkma

Dinamik içerik derken, bir sayfanın yüklenmesi tamamlandıktan sonra görünen öğeleri kastediyoruz. Buna örnek olarak lazy-loaded resimler, bannerlar, formlar vb. verilebilir.

CLS puanınız üzerindeki etkilerini düşük tutmak için yukarıdaki tavsiyelerin aynısını uygulayın:

• Kaplarını önceden tanımlayın ve onlara sabit boyutlar verin.
• Görünüşlerini bir kullanıcı etkileşimine bağlayın. Bu şekilde CLS cezasından kaçınmış olursunuz.

Bu arada, Weglot dinamik içeriği tamamen çevirme yeteneğine sahiptir. Böylece, kitle üyelerinizin anlamaması konusunda endişelenmenize gerek kalmaz.

Sonraki Boyaya Etkileşim Üzerinde Çalışılıyor

Son olarak, INP'nizin yerinde olduğundan nasıl emin olabileceğinizden bahsedelim.

JavaScript'i Optimize Edin

JavaScript, özellikle "uzun görevler" olarak adlandırılan Next Paint'e Etkileşim ile ilgili sorunlar söz konusu olduğunda genellikle ana faktörlerden biridir. Bunlar, tamamlanması 50 ms'den uzun süren JavaScript görevleridir ve tarayıcının sayfadaki kullanıcı etkileşimlerini işleme yeteneğini engelleyebilirler. Ayrıca, genel olarak sitenizde çok sayıda komut dosyası bulunması sayfaların yanıt verme hızını düşürebilir.

LCP bölümünde JavaScript'i nasıl optimize edebileceğinizden bahsetmiştik. INP için, sitenizdeki uzun görevlerle ilgilenmeniz özellikle önemlidir. Eğer varsa, bunları Chrome geliştirici araçlarında bulabilirsiniz. Küçük kırmızı üçgenlerle işaretlenmişlerdir.

Tarayıcının ana iş parçacığını kalıcı olarak engellemeden bunları art arda yüklenebilecek daha küçük parçalara bölüp bölemeyeceğinize bakın. Bu konuda ayrıntılı bilgiyi bu web.dev eğitiminde bulabilirsiniz. Küçültme, erteleme, asenkronize etme ve gereksiz kodları kaldırma da tarayıcının kullanıcı etkileşimine duyarlı kalmasına yardımcı olur.

WP Rocket kullanıyorsanız, eklenti hangi JavaScript dosyalarının yüklenmesini geciktirmek istediğinize ve hangilerini istemediğinize dair ayrıntılı yapılandırmalar yapmanıza olanak tanır.

Kullanılmayan CSS'yi Azaltın

JavaScript için geçerli olan her şey CSS için de geçerlidir. Stil sayfalarının indirilmesi ve işlenmesi tarayıcıyı meşgul edebilir ve kullanıcı girdisine tepki vermesini geciktirebilir.

Burada, kullanılmayan CSS'yi bulmak için hız testi araçlarını da kullanabilirsiniz. Buna ek olarak, stil sayfalarınızı önemli CSS'yi önce yüklemek veya satır içine almak için bölebilirsiniz.

Belirtildiği gibi, WP Rocket kullanılmayan CSS'yi otomatik olarak kaldırma seçeneklerine sahiptir.

Tembel Yükleme Ekleme

Görüntü optimizasyonu için tembel yüklemeden zaten bahsetmiştik. Kullanıcı girdisine tepki vermek için tarayıcı kaynaklarını serbest bıraktığı için INP üzerinde de olumlu bir etkisi olabilir. Bunu uygulamak için yukarıdaki talimatları dikkate alın.

Bu arada, tembel yüklenen görselleri çevirirken sorun yaşıyorsanız, Weglot varsayılan olarak data-src veya srcset özniteliklerine eklenen görsel URL'lerini çevirir. Tembel yüklemeniz özel nitelikler kullanıyorsa, Weglot bunları kutudan çıkar çıkmaz çevirmeyecektir; özellikle WordPress entegrasyonları için bir PHP filtresi eklemeniz gerekecektir.

Weglot JavaScript entegrasyonunu kullanıyorsanız ve/veya resimlerinizi hala çeviremiyorsanız, daha fazla bilgi için destek ekibiyle iletişime geçin.

Çok Dilli Web Sitenizdeki Temel Web Değerlerini Bugün İyileştirin!

Core Web Vitals, çok dilli web sitenizin kullanılabilirliği için önemli bir kalite göstergesidir. Ziyaretçiler bu konuya önem vermekle kalmaz, Core Web Vitals arama sıralamalarını da etkiler. Bu nedenle, sitenizi onlar için optimize etmek kesinlikle ciddiye almanız gereken bir şeydir.

Muhtemelen yukarıda gördüğünüz gibi, bu o kadar da zor değil. Çoğunlukla web sayfalarınızın hızlı yüklenmesini ve bu süre zarfında kararlı ve duyarlı kalmasını sağlamakla ilgilidir. Bunun için alabileceğiniz ve yukarıda ayrıntılı olarak ele aldığımız bazı temel önlemler vardır.

Kod ve web sitesi dosyalarıyla uğraşmanın yeteneklerinizin ötesinde olduğunu düşünüyorsanız, WP Rocket gibi bir eklenti çözümünü de tercih edebilirsiniz. Geliştirme veya teknik becerilere ihtiyaç duymadan sitenizi sizin için optimize edebilir ve işin çoğunu varsayılan olarak yapar.