Last Updated on 20 Ocak 2022 by Yıldırım SERTBAŞ

TTI (Time To Interactive) etkileşime geçme süresinin ne olduğunu ve WordPress sitenizin hızını nasıl etkilediğini merak mı ediyorsunuz?

O halde okumaya devam edin çünkü hepimiz hızlı ve etkileşimi kolay bir web sitesi istiyoruz. Sayfada bir yere tıklayıp eylemimizden sonuç alamamaktan daha sinir bozucu bir şey olamaz, değil mi?

Web sitenizin olağanüstü bir kullanıcı deneyimi sağladığından emin olmak için dikkat etmeniz gereken birkaç metrik vardır ve TTI bunlardan biridir.

Kullanıcı merkezli bir metrik olarak Time to Interactive, Lighthouse tarafından hesaplanan toplam performans puanının %10’unu oluşturur. Nihai puan için en etkili ölçüm olmayabilir, ancak kullanıcının yaşadığı hayal kırıklığı, onları sayfanızdan çıkmaya veya daha da kötüsü, web sitenizden çıkmaya yönlendirebilir!

Time to Interactive’in ne olduğunu, neden önemli olduğunu, hangi araçların ölçebileceğini ve puanını nelerin etkilediğini açıklayacağım. Kötü bir etkileşime geçme süresi notunu (TTI 3,8 saniyeden uzun) düzeltmek için bazı teknik ipuçlarını da paylaşacağım. Son olarak, genel performans puanınızı nasıl artıracağınızı ve web sitenizin bozuk görünmemesini sağlayacağız.

Etkileşim Süresi (TTI) Nedir?

TTI yani etkileşim zamanı, kullanıcıların performansı ve etkileşimi nasıl algıladıklarını doğrudan etkileyen, bir sayfanın etkileşimli göründüğü ancak gerçekte olmadığı durumları belirlemeye yardımcı olan bir performans metriğidir.

Time To Interactive, ziyaretçilerin sayfanızla tam olarak ne kadar hızlı etkileşime girebildiğini ölçer.

TTI metriği, sayfanın ana alt kaynakları yüklendiğinde ve bir kullanıcı işlemine hızlı bir şekilde yanıt verebildiğinde yüklenmeye başladığını ölçer.

Kısacası, TTI, bileşenlerin herhangi bir kullanıcı işlemine hızlı bir şekilde yanıt vermesi için bir sayfanın herhangi bir JavaScript kodunu ne kadar hızlı çalıştırabileceğini ölçer. Hangi sayfanın etkileşimli göründüğünü belirlemeye yardımcı olur .

Bir örnekle açıklayayım.

Bir kullanıcı, ekranda bir CTA yani harekete geçirici mesaj düğmesi görebilir. Üzerine tıklamaya çalışır, ancak hiçbir şey olmaz: öğe tıklanabilir değildir . Sinir bozucu, değil mi? TTI metriği , etkileşimli görünen ancak aslında öyle olmayan sayfaları belirlemenize yardımcı olur .

TTI, toplam engelleme süresi ile beraber çalışır çünkü ikisi birlikte, sayfanızın bir kullanıcının eylemine verdiği yanıta ilişkin bilgiler sağlar.

Bir sayfa şu durumlarda tam etkileşimli olarak kabul edilir:

– Sayfa, First Contentful Paint tarafından ölçülen faydalı içeriği görüntüler
– Olay işleyicileri en görünür sayfa elemanları için kaydedilir
– Sayfa, kullanıcı etkileşimlerine 3,8 saniye içinde yanıt verir.

Lighthouse, geliştiricilerin web sayfalarının kalitesini iyileştirmelerine yardımcı olan açık kaynaklı ve otomatik bir araçtır. Hız, performans, erişilebilirlik , UX ve arama motoru optimizasyonu (SEO) için denetimler oluşturur . Harika bir kullanıcı deneyimi sağlamak için siteler 90 ile 100 arasında bir puan almaya çalışmalıdır.

Kısacası, hızlı bir TTI, sayfanın kullanılabilir olmasını sağlamaya yardımcı olur .

Lighthouse v8 , Core Web Vitals , hız endeksi, etkileşim süresi ve toplam engelleme süresi dahil olmak üzere nihai performans puanınızı oluşturmak için altı ölçümü birleştirir:

Metrik	Ağırlık	İyi Puan Nedir?
First Contenful Paint(FCP)	%10	0-2 sn
Speed İndex(Hız İndeksi)	%10	0-3,4sn
Largest Contentful Paint(LCP)	%25	0-2,5sn
Etkileşim Zamanı (Time to Interactive)	%10	0-3,8sn (Web.dev, puanın 5 s’ye kadar kabul edilebilir olduğunu söylüyor)
Toplam Engelleme Süresi(Total Blocking Time)	%30	<200ms
Cumulative Layout Shift(CLS)	%15	0-0,1sn

Etkileşim Süresi Nasıl Ölçülür?

TTI puanınızı tanımlamak için, sayfanın yüklenmeye başladığı andan ilk komut dosyalarını görsel olarak oluşturduğu ana kadar geçen süreyi ölçmeniz gerekir ve sayfa, kullanıcı girdilerine hızlı bir şekilde güvenilir bir şekilde yanıt verebilir.

Lighthouse, TTI’yi ölçmek için dört adımı takip eder:

First Contentful Paint’ten başlar. ( ilk metin ve görüntü elamanları ekrana işlendiğinde.)
En az beş saniyelik boş bir pencere için zamanda ileriye doğru arama yapar.(boş pencere = long taskın ve ikiden fazla GET isteğinin olmadığı bir durumdur)
Sessiz pencereden önceki son long taskı geriye doğru arar, long task bulunamazsa FCP’de durur.
TTI, boş pencereden önceki son long taskın bitiş zamanıdır (long task bulunamazsa, FCP ile aynı değerdir).

Özetle; TTI, 5 saniyelik boşta kalma penceresinden önceki son uzun görevin süresi olarak ölçülür.

Aşağıdaki şema sayesinde sıraladığım süreçleri görsel olarak inceleyebilirsiniz.

etkileşim-süresi-nasıl-ölçülür — Etkileşim süresi nasıl ölçülür? – Kaynak: https://web.dev/tti/

Hangi Araçlar TTI’yı Ölçer?

Lighthouse teknolojisini kullanarak TTI ve performansınızı ölçmek için iki farklı araç kullanabilirsiniz.

TTI ölçmek için Google PageSpeed Insight kullanımı(PSI):

pagespeed-tti-ölçme — Pagespeed İle TTI Ölçümü

TTI ölçümünü almak için GTmetrix’i kullanma

gtmetrix-tti-ölçme — GTMetrix ile TTI Ölçümü

Her iki araç da bir TTI puanı sağlar, ancak gördüğünüz gibi, yeşil bölgedeki sayılar biraz farklıdır:

TTI skoru (PSI): 1,7 sn
TTI puanı (GT Metrix): 955ms

Bu, temel olarak Lighthouse test metodolojisi, testlerin yeri vb. dahil olmak üzere çeşitli faktörlerden kaynaklanmaktadır.

TTI(Etkileşim Süresi) İçin İyi Zaman Nedir?

İyi bir kullanıcı deneyimi sağlamak için her zaman etkileşim süresinin 3,8 saniyeden az olması için çaba göstermelisiniz. TTI puanınız, sayfanızın TTI süresi ile mobil veya masaüstüne yüklendiğinde yüksek dereceli sitelerin TTI sürelerinin karşılaştırmasıdır.

Etkileşim Süresi skorları aşağıdaki gibi sınıflandırılır:

Yeşil: 0-3.8 (iyi)
Turuncu: 3.8-7.3 (geliştirilmesi gerekiyor)
Kırmızı: 7.3 (Kötü)

Etkileşim süresi genellikle ilk giriş gecikmesi (FID) metriğiyle karşılaştırılır. Bir sonraki bölümde nedenini açıklayacağız.

İlk Giriş Gecikmesi (FID) ile Etkileşim Süresi (TTI) Aynı mıdır?

FID ve TTI, web sayfanızın etkileşim düzeyini ölçer. Ancak, bu ortak paydanın yanı sıra birkaç farklılık da bulunuyor.

TTI, bir sayfanın kullanıcı girdisine yanıt vermeye hazır olmasının ne kadar sürdüğünü ölçerken FID, gerçek kullanıcılar sayfanızla etkileşime girmeye çalıştığında sayfanızın ne kadar duyarlı olduğunu ölçer.
TTI, laboratuvar verileriyle (gerçek dünya kullanıcıları olmadan) hesaplanabilir, ancak İlk Giriş Gecikmesi (FID), gerçek kullanıcı verilerini gerektiren, yalnızca sahada kullanılan bir ölçümdür. FID hesaplaması laboratuvar ortamında yapılamaz. Bu tür veriler yalnızca gerçek kullanıcılardan toplanabilir.
İlk Giriş Gecikmesi , sayfa tamamen etkileşimli hale gelmeden önce gerçekleşen kullanıcı girişini izler . İlk Giriş Gecikmesi, bu erken, kritik etkileşimleri yakalamanıza olanak tanır:
Gerçek dünyadaki kullanıcıların hesaplanmasını gerektiren FID , aşağıda gösterildiği gibi birisi sayfayla etkileşim kurduğunda ne olduğunu ölçen bir Core Web Vitals ölçümüdür.

FID TTI karsilastirmasi — FID-TTI Karşılaştırması

Özetlemek gerekirse: Hem TTI hem de FID etkileşimi ölçer. Metrikler, kullanıcının bir sitenin etkileşimi ve yanıt verme hızına ilişkin ilk izlenimini yakalar. TTI, gerçek dünya kullanıcıları olmadan hesaplanabilirken FID hesaplanamaz.

Etkileşim Süresinin Performans Üzerindeki Etkisi Nedir?

Daha önce görüldüğü gibi, yüksek bir TTI, sinir bozucu bir kullanıcı deneyimi yaratabilir. Kullanıcı sitenin tamamen hazır olduğunu düşünür, ancak bir yere tıklamaya çalıştığında hiçbir şey olmaz.

TTI için gerçek hayattan bir örnek görelim. Gördüğünüz gibi, ana iş parçacığı yaklaşık 4-5 saniye boyunca uzun görevlerden arındırılmışsa, bir sayfayı tamamen etkileşimli olarak işaretler.

PageSpeed Insights gibi araçlar bundan pek hoşlanmazlar ve performans notunuzu düşürerek web sitenizi cezalandırmaktan çekinmezler.

Lighthouse skorunda TTI ağırlığı

Lighthouse v8 Performance skorunda TTI’nin ağırlığı %15’ten %10’a düşürüldü.

Lighthouse skor hesaplama araci TTI agirligi — Lighthouse Skor Hesaplama Aracı

Neden böyle bir değişiklik yapıldı? Web.dev, kullanıcıların geri bildirimlerine ve “kullanıcı deneyiminde iyileştirmelere yol açan metrik optimizasyonlardaki tutarsızlıklara” doğrudan yanıt verdiğini açıklıyor.

“TTI is still a useful signal for when a page is fully interactive, however with TBT as a complement–variability is reduced. With this scoring change, we hope developers are more effectively encouraged to optimize for user interactivity.”
Source: Web.dev

TTI, sayfanızın etkileşime hazır olmasının ne kadar sürdüğünü ölçer. Ana JS iş parçacığının ne kadar süreyle engellendiğini ve bir kullanıcının eylemiyle ne kadar sürede başa çıkma kapasitesine sahip olacağını.

Sayfanızın kullanılabilir olup olmadığını belirlediği için önemli bir laboratuvar metriğidir .

TTI’nizi 3,8 sn’nin altında tutmak için size uygulanabilir önerilerde bulunmadan önce, kötü bir TTI puanına neyin neden olduğunu tanımlamamız gerekir.

Etkileşim Süresini Ne Etkiler?

Google PageSpeed Insights’ın teşhis bölümünün yardımıyla yüksek etkileşim süresi puanına nelerin neden olabileceğini görelim. Genel olarak kötü bir TTI skoruna katkıda bulunan dört sorunumuz var, yani:

JavaScript kodu ve kullanılmayan JS
JavaScript yürütme süresi
Ana iş parçacığı çalışması
Üçüncü taraf kod

Lighthouse raporunuzdaki “fırsatlar” ve “teşhis” bölümleri sayesinde genel performans notunuzu yükseltmek için bazı ipuçlarından yararlanabilirsiniz.

pagespeed insights fırsatlar ve teşhisler bölümü

Rapor, her bir hatanın tahmini tasarruflarınız üzerinde ne kadar etkisi olduğunu gösterir; bunları çözmek, TTI ve kullanıcı deneyiminizi büyük ölçüde iyileştirecektir.

TTI puanınızı yükseltmeniz gerekebilir diye PSI’dan birkaç öneri listeledim.

Oluşturmayı engelleyen kaynakları ortadan kaldırın
Ana iş parçacığı çalışmasını en aza indirin
JavaScript yürütme süresini azaltın
Kullanılmayan JS’yi kaldırın
Üçüncü taraf kodunun etkisini azaltın
Kritik istekleri zincirlerinden kaçının
Önemli istekleri önceden yükle
İstek sayılarını düşük ve aktarım boyutlarını küçük tutun
Sunucu yanıt sürelerini azaltın

WordPress Sitenizde TTI Nasıl İyileştirilir?

JS dosyalarınızı (üçüncü taraf kodu dahil) optimize ederek etkileşim süresi puanınızı azaltabilirsiniz. JS yürütmesine yönelik her türlü iyi önlem büyük olasılıkla TTI’yi iyileştirecektir. Her zaman kaynaklarınızın sırasına ve yükleme tercihlerine ve isteklerin sayısı ve boyutuna odaklanın.

Time to Interactive’i iyileştimek ve WordPress sitenizin genel hızını artırmak istiyorsanız, uygulamanızı önerdiğim sekiz performans optimizasyonu vardır.

JS’yi erteleyin
JS’yi geciktirin ve kullanılmayan JS’yi azaltın
JS ve CSS’yi küçültün
CSS dağıtımını optimize edin ve kullanılmayan CSS’yi azaltın
TTFB’yi azaltın
DNS isteklerini önceden getirin
Yazı tiplerini önceden yükleyin
Mobilde TTI’yi iyileştirin

1. JS’yi erteleyin

JS dosyalarının ertelenmesi, yalnızca tarayıcı en önemli içeriği görüntüledikten sonra yüklenecekleri anlamına gelir . Amaç, önce göstermek istediğiniz içeriğe öncelik vererek sayfanızın daha hızlı yüklenmesini sağlamaktır. JS dosyalarının ayrıştırılması, derlenmesi ve çalıştırılması için harcanan süreyi azaltacak ve bu da TTI’nin iyileştirilmesine yardımcı olacaktır.

Genel olarak ertelenebilecek temel olmayan JS örnekleri: Sosyal paylaşım, çerez izinleri vb.

🚨 Lighthouse tarafından belirlenen sorunlar: “Oluşturmayı engelleyen kaynakları ortadan kaldırın”, “Kullanılmayan JavaScript’i azaltın” ve “Kritik istekleri zincirlemeden kaçının” sorunları.

✅ Manuel çözüm:

Defer özelliğinin kullanımı: JS’yi ertelemeye çalışırken, HTML’deki komut dosyası etiketi için “defer” boolean özniteliklerini kullanabilirsiniz:
<script src =”library.js” defer ></script>

defer özniteliği nasıl çalışır — Defer özelliğinin çalışma prensibi

✅ WordPress eklentileri çözümü:

Asset Cleanup : Bu ücretsiz eklenti, sayfaya yüklenecek içeriği öncelikli olarak tarar ve algılar. Tek yapmanız gereken, önce oluşturulmaması gereken CSS veya JS kodunu seçmek.
Not: Eklenti yazarı, en iyi performans sonuçlarını elde etmek için Asset CleanUp’ı WP Rocket gibi bir önbellek eklentisi ile kullanmanızı önerir.
Async JS : Async JavaScript, WordPress web sitenizin performansını artırmaya yardımcı olmak için hangi komut dosyalarının bir ‘defer’ özelliği ekleyeceğiniz konusunda tam kontrol sağlar.
WP Rocket , JavaScript’in ayrıştırılmasını erteleme ve JS WordPress dosyalarını aşağıda gösterildiği gibi erteleme seçeneğine sahiptir:

2. JS’yi Geciktirin ve Kullanılmayan JS’yi Azaltın

JS yürütmesini geciktirerek ve kullanılmayan JS’yi kaldırarak veya azaltarak performansı ve TTI puanınızı iyileştirebilirsiniz.

Ana fikir, bir düğmeye tıklamak veya sayfanın sonuna kaydırmak gibi bir kullanıcı etkileşimi gerçekleşene kadar tüm JS dosyalarının yüklenmesini geciktirmektir.

JavaScript’in nereye yüklendiğini görmek için GTmetrix waterfall grafiğinizi kontrol etmek iyi bir başlangıç noktasıdır. Aynı teşhisi PSI kullanarak da alabilirsiniz. Denetimi çalıştırdıktan sonra, “kötü” JS’nin kodunuzdan mı yoksa üçüncü taraf bir uygulamadan mı geldiğini belirleyebilirsiniz.

🚨 Lighthouse tarafından belirlenen sorunlar: “Kritik istek zincirlerinden kaçının” ve “Kullanılmayan JavaScript’i azaltın”

✅ Manuel çözümler:

JS’de bir gecikme yaratmanın manuel yolu, setTimeout() method işlevini kullanmaktır. Bu, ms cinsinden belirteceğiniz süreden sonra bir işlevi çağırır . Herhangi bir JS işlevini geciktirmek için bu çok yararlı kod parçacıklarını kullanabilirsiniz.
Kullanılmayan JS’yi manuel olarak silmek web siteniz için tehlikeli olabilir. Bir boşluk veya bir köşeli ayraç dahi kaldırırsanız, işler oldukça kötüye gidebilir. Uzman bir geliştirici değilseniz, böyle bir şeyi manuel olarak yapmanızı önermem.

✅ Bir WordPress eklentisi kullanın:

Flying Scripts: JS’yi geciktirmek ve kritik JS dosyalarına daha fazla kaynak sağlamak için bir eklentidir. Önceliklendirmeye yardımcı olur.
Plugin Organizer: Eklentilerinizin yüklenme sırasını değiştirir (ilk olarak oluşturulacak içeriğe öncelik vermenize yardımcı olur.)
WP Meteor : JS komut dosyalarını ertelemek ve ziyaretçiler tarafından algılanan, hızı büyük ölçüde geliştirmek için bir eklenti (kullanıcı deneyimi için çok önemlidir).
Gonzales: Ziyaret ettiğiniz sayfaya bağlı olarak CSS, JS ve hatta eklentileri koşullu olarak devre dışı bırakmanıza izin verir.
Asset CleanUp: (lütfen yukarıdaki bölüme bakın).
Perfmatters : Eklentileri sayfalar ve gönderiler dışında her yerde devre dışı bırakmanıza izin verir.

elemantor-kullanılmayan-js-dosyasının-Perfmatters-ile-kadırılması

WP Roket önbellek eklentisi : Hepsi bir arada çözümdür. Tek bir tıklamayla JavaScript dosyalarını kolayca geciktirebilir ve kullanılmayan JS’yi kaldırabilir (veya azaltabilirsiniz).

3. JS ve CSS’yi küçültün

Kodunuzu küçültmek, dağınıklığı ve gereksiz noktalama işaretlerini ortadan kaldırmak anlamına gelir: yeni satırlar, boşluklar, vb. Bu öğeler size veya geliştiricinize kodu okumada yardımcı olabilir, ancak sitenizi yavaşlatmaktan da sorumlu olabilirler.

Bu “işe yaramaz” kısımları kod bütününüzden çıkarmak, ana iş parçacığının birçok önemli göreve odaklanması için zaman kazandıracaktır. Yine, en alakalı içeriğin önce işlenmesi için yer ve zaman ayırmakla ilgilidir. Chrome geliştirici araçları’ndaki kapsam sekmesi, kullanılmayan JavaScript ve CSS kodunu bulmanıza yardımcı olabilir.

🚨 Lighthouse tarafından belirlenen sorunlar: “JavaScript Yürütme Süresini Azalt”, “Ana iş parçacığı çalışmasını en aza indir”, “JS’yi küçült” ve “CSS’yi küçült”.

✅ Manuel çözümler:

Önemli: Sitenizin yedeğini alın veya JS veya CSS dosyalarınızı doğrudan bir üretim sunucusunda düzenlemeyin.
Sublime Text veya Visual Studio Code gibi bir metin düzenleyici kullanın .
Kodunuzu içeren dosyayı açın ve yorumları, boşlukları, yeni satırları ve girintileri kaldırın. Kimlik, sınıf veya değişken adlarını olabildiğince kısaltmayı ve koşullu ifadenizi optimize etmeyi unutmayın.

✅ Bir web aracı kullanarak:

minifycode.com’a gidin ve CSS / JS minifier sekmesine tıklayın.
CSS/JS kodunu giriş kutusuna yapıştırın ve CSS/JS’yi küçült düğmesini tıklayın.

✅ CSS ve JS’nizi küçültmek için bir WordPress eklentisi kullanın:

Closure Complier (JS)
UglifyJS (JS)
Autoptimize (CSS ve JS)
YUI Compressor Tool (CSS ve JS)
WP Super Minify (CSS ve JS)
CSS Nano (CSS)
CSSO (CSS)
UNCSS (CSS)
WP Rocket , birkaç tıklamayla hem JS hem de CSS dosyalarınızı küçültmenize olanak tanır.

4. CSS Dağıtımını Optimize Edin ve Kullanılmayan CSS’yi Azaltın

Tarayıcı içeriği oluşturabilmeden önce, geçerli sayfa için tüm stil ve düzen bilgilerini işlemelidir. Başka bir deyişle, tarayıcının CSS’yi teslim etmesi gerekir, ancak bu eylem ana iş parçacığının diğer önemli görevleri ve işlemleri gerçekleştirmesini engelleyebilir. Bu nedenle, iyi performansı sürdürmek için iki görevi gerçekleştirmek önemlidir:

CSS’nizin teslim edilme şeklini optimize edin.
Kullanılmayan tüm CSS’leri kaldırın.

🚨 Lighthouse tarafından tanımlanan sorunlar: “Ana iş parçacığı çalışmasını en aza indirin” ve “Kullanılmayan CSS’yi azaltın”.

✅ CSS dağıtımını optimize etmek için manuel çözümler:

CSS komut dosyalarınızı birleştirin, sıkıştırın ve satır içi yapın.
CSS kurallarına öncelik verin: ekranın üst kısmındaki içerik önce gelir!
HTML gövdesinde STYLE etiketlerini kullanmaktan kaçının.

✅ Kullanılmayan CSS’yi kaldırmak veya azaltmak için manuel çözümler:

Bu işlemi gerçekleştirmek için biraz teknik bilgiye ihtiyacınız olacak ve sayfanızı bozmamaya dikkat edin. Kullanılmayan CSS’yi tamamen kaldırmak istiyorsanız , CSS dosyalarınızın ne kadar azaltılabileceğini öğrenmek için PurifyCSS gibi bir araç kullanın . Dezavantajı, silinecek CSS tanımlandığında, onu sayfadan manuel olarak kaldırmanız gerektiğidir .

✅ CSS dağıtımını optimize etmek ve kullanılmayan CSS’yi kaldırmak için WordPress eklentileri:

Speed Up-Optimize CSS Delivery , stil sayfasını eşzamansız olarak yükler ve sayfa yükleme sürelerinizi iyileştirir.
Autoptimize , CSS’yi satır içi ve erteleme ve CSS’yi optimize etme seçeneklerini içerir.
Asset CleanUp , kullanılmayan CSS’yi azaltmaya yardımcı olur
WP Roket önbellek eklentisi , CSS teslimini optimize etmenize ve kullanılmayan CSS’yi birkaç tıklamayla doğrudan ” Dosya Optimizasyonu menüsünden” kaldırmanıza (veya azaltmanıza) olanak tanır.

wprocket css dağıtımını iyileştime ve kullanılmayan CSS kaldırma

5. Sunucu Yanıt Süresini ve İlk Bayt Süresini (TTFB) Azaltın

TTI puanınızın düşük kalmasını istiyorsanız sunucunuzun hızlı olması gerekiyor. Sunucu yanıt sürenizi azaltmak için aşağıdaki yöntemleri kullanabilirsiniz:

Hızlı ve verimli bir barındırma sağlayıcısı seçin
Bir CDN hizmeti kullanın (dünya çapında hızlı bir CDN’ye sahip olmak, daha hızlı içerik dağıtımı sağlayacaktır)
Gelişmiş önbelleğe almayı kullanın
GZIP sıkıştırmasını kullan
Veritabanınızı optimize edin
PHP’nin en son sürümünü kullanın

🚨 Lighthouse tarafından tanımlanan sorun: “İlk sunucu yanıt süresini azaltın”.

✅ Gelişmiş bir önbellek eklentisi ve bir CDN kullanın :

WP Rocket önbellek eklentisi ve RocketCDN , TTI puanını düşürmenize yardımcı olacaktır.

✅ GZIP sıkıştırmasını etkinleştir

GZIP Sıkıştırma Eklentisini kullanın.
WP Rocket, GZIP özelliğini otomatik olarak etkinleştirir.

✅ Veritabanınızı optimize edin

Bir şeyleri bozmadan veritabanınızı temizlemek için WP Rocket kullanın.

6. DNS İsteklerini Önceden Getirin (Prefetch DNS)

Sitenizde Vimeo veya bazı Google Fonts’ta barındırılan bir video gibi bir üçüncü taraf kodunuz varsa, DNS isteğini önceden getirmelisiniz. Web sitenizi daha hızlı hale getirecek, başka bir web sitesinden yükleme süresini ve kaynakları en aza indirecektir. Ana fikir, üçüncü taraf komut dosyaları isteyene kadar beklemek yerine erken bağlantı kurmak için Preconnect’i kullanmaktır.

🚨 Lighthouse tarafından tanımlanan sorunlar: “İlk sunucu yanıt süresini azaltın”, “Üçüncü taraf kullanımını en aza indirin” ve “Gerekli kaynaklara önceden bağlanın”.

✅ Manuel çözüm:

Başlık bölümünde “rel=dns-prefetch” kullanın. Tarayıcının prefetch özelliği için etki alanını manuel olarak belirleyebilirsiniz:

✅ Bir WordPress eklentisi kullanın:

Perfmatters eklentisinin DNS önceden getirme seçeneği vardır.
WP Rocket eklentisinin WordPress panosunda ayrıca bir “DNS İsteklerini Önceden Getir” bölümü vardır.

7. Yazı Tiplerini Önceden Yükleyin

Yazı tipi ön yükleme sayesinde, bir ziyaretçinin tarayıcısını önemli yazı tiplerini erkenden yüklemeye “zorlayabilirsiniz”.

Özel bir yazı tipi, markanızın çok önemli bir parçası olabilir, bu nedenle web sitenizde görüntülemek çok önemlidir. Ancak, performans sorunlarından kaçınmak için web yazı tipi önyüklemesi için bazı en iyi uygulamalar vardır. İşte göz önünde bulundurmak isteyebileceğiniz üç tavsiye:

Doğru yazı tipi biçimini kullanın (woff ve woff2).
Yazı tiplerini önceden yükleyin (aşağıdaki bölümde açıklandığı gibi).
Doğru yazı tipi-yüz bildirimini kullanın (doğru yazı tipi ailesi).

🚨 Lighthouse tarafından tanımlanan sorun: “Önemli önyükleme istekleri”.

✅ Manuel çözüm :

Tarayıcıya uygun rel=”preload” etiketini ve özniteliklerini kullanarak yazı tipini önceden yüklemesini söyleyin :

Örnek:

<link rel=”preload” as=”font” href=”/fonts/custom-font.woff” type=”font/ woff2″ crossorigin=”anonymous”>

Etiketi nereye koyalım?

Siteye yüklenen her CSS, komut dosyası ve yazı tipi dosyası için HTML’nizdeki head etiketleri arasına bu bağlantı etiketini eklemeniz gerekir.

✅ Bir WordPress eklentisi kullanarak :

Yazı tiplerini önceden yüklemek için WP Rocket kullanın . “Ön Yükle sekmesine” gidin, “Yazı Tiplerini Önceden Yükle”ye gidin ve önceden yüklemek istediğiniz yazı tipi dosyalarının URL’lerini belirtin:

wprocket yazı tiplerini önyükleme özelliği

8. Mobilde Etkileşim Zamanına Odaklanın

Mobil cihazlarda etkileşim süresi nasıl iyileştirilir? İlk olarak, herhangi bir JavaScript sorununu çözmeye odaklanın. Ardından, yukarıda listelenen tüm performans önerilerini uygulayın. Unutmayın: ne kadar çok komut dosyası varsa, TTI o kadar uzun olur ve bu da bir cihazdan diğerine değişebilir.

Bir bilgisayardan daha az güçlü bir işlemciye sahip bir akıllı telefon örneğini ele alalım. İkincisine yüklenen bir site, Javascript komut dosyalarının sayısının etkisinden mutlaka etkilenecektir.

Google’ın önerileri, mobil web sitesinin kararlılığı ve oluşturulması için gerekli olmayan komut dosyalarının kaldırılması veya ertelenmesidir. Bu nedenle JavaScript’inizi kontrol edin, mobil sürüm tasarımını basit tutun ve kaydırıcı(slider) gibi ağır öğelerin aşırı kullanımından kaçının.

WP Roketi ile TTI Puanı Nasıl Düşürülür?

Önceki bölümde görüldüğü gibi, JavaScript’in yürütülmesi TTI metriğini etkileyen en önemli faktördür. WP Rocket kullanarak JavaScript’i geciktirerek ve erteleyerek WordPress sitenizin hızını artıracaksınız.

TTI derecesini iyileştiren WP Rocket özelliklerini inceleyelim.

PSI Kullanarak WP Rocket’in TTI Puanı Üzerindeki Etkisini Analiz Etme

TTI puanınızı yükseltmek için WP Rocket kullanmanızı öneriyorum. Halihazırda kendi projelerimde de mutlaka WP Rocket kullanıyorum.

Sizin için kendi web sitemin WP Rocket kullanmadan önceki ile kullanım sonrası TTI skorlarını görmeniz açısından bir test gerçekleştirdim. Sonuçlar şu şekildedir.

WP Rocket İle Performansı Optimize Etme

Peki sitemin tüm optimizasyon işlemlerini WP Rocket ile nasıl yaptım. Biraz da buna değinelim.

WP Rocket aktivasyonundan sonra, bir önceki bölümde önerdiğimiz gibi aşağıdaki seçenekleri de etkinleştirdim:

JS dosyalarının optimizasyonu (ertelenmiş JS yükleme ve JS yürütme özelliklerini geciktirme)

Minify’dan CSS dağıtımını optimize etmeye kadar CSS dosyalarının optimizasyonu:

Ayrıca önceden alınacak bazı URL’ler ekledim ve bu puanımı tekrar artırdı. Burada sizin için WP Rocket çok önemli ve sık kullanılan servisleri varsayılan olarak eklemiş durumda. Siz ayrıca listenin aşağısına doğru DNS’leri ekleyebilirsiniz.

Ayrıca WP Rocket “Yazı tiplerini önceden yükle” özelliğini de kullandım.

Sonuç olarak, “başarılı denetimler” listem önemli ölçüde büyüdü ve WP Rocket sayesinde “JS’yi Küçült”, “Ana iş parçacığı çalışmalarını en aza indir”, “Kullanılmayan JS’yi kaldır” veya “Oluşturmayı engelleyen kaynakları ortadan kaldır” gibi bazı sorunlar WP Rocket sayesinde tamamen ortadan kalktı.

wp rocket sonrası başarılı denetimler listesi

Özetle

Umarım bu teknik rehber, WordPress siteniz için TTI puanınızı nasıl optimize edeceğinizi anlamanıza yardımcı olmuştur.

TTI, Lighthouse performans derecesinin %10’unu oluşturduğundan, kullanıcı merkezli önemli bir performans metriğidir.

Bu metriği optimize etmek, ziyaretçilerinizin sayfanızdaki içerikle tam olarak ne kadar hızlı etkileşime girebilecekleri konusunda gözle görülür bir gelişme algılamasına yardımcı olabilir.

Harika bir TTI puanı almanın en kolay ve en uygun yolu, etkinleştirildikten sonra web performansı en iyi uygulamalarının %80’ini otomatik olarak uygulayan WP Rocket’i yüklemektir.

WP Rocket kullanmanın bir başka avantajı da hepsi bir arada bir çözüm olmasıdır: Her bir öneri için birden fazla performans eklentisini etkinleştirmeniz gerekmez. Başlı başına bu bile WordPress sitenizin hızı için çok olumlu bir katkıdır.

WordPress’te Etkileşime Geçme Süresi (TTI) Nasıl İyileştirilir?