Speed İndex Nedir? WordPress’de Speed İndex Nasıl Optimize Edilir?

Last Updated on 22 Eylül 2021 by Yıldırım SERTBAŞ

Web sitenizin ziyaretçilerinizin ekranında tam olarak yüklenmesinin kaç saniye sürdüğünü biliyor musunuz? Sorunun cevabı, ekranın üst kısmıyla ilgili herhangi bir şeyden etkilenen bir performans metriği olan Türkçesi Hız İndeksi olan Speed İndex (SI) metriğine odaklanır.

Speed İndex (SI), Lighthouse raporundaki genel performans puanınıza etki eden metriklerden biridir. İyi bir Hız İndeksine sahip olmak ve bunu sürekli kılmak iyi bir kullanıcı deneyimi sağlar. Bu, görünüm alanında bulunan içeriğin hızlı bir şekilde yüklendiği anlamına gelir. 

Performans puanınızı iyileştirmek için optimize etmeniz gereken altı ölçüm vardır ve Speed İndex, Lighthouse tarafından hesaplanan bu toplam skalanın %10’unu tutar. 

İyi bir Speed İndex skoru nedir? Nasıl ölçülür? Hangi araçlar en güvenilir olanlardır? Web siteniz için bir performans denetimi yapmak bu bakımdan zor olabilir.

Hız İndeksi(Speed İndex) metriğinizi kontrol etmek ve etkili bir performans iyileştirme süreci yürütmek için bu hazırladığım rehberdeki adımları takip edebilirsiniz. SI metriğini, performansınızı ölçmek için kullanabileceğiniz ücretsiz araçları ve iyi bir SI nskoru (3,4 sn’nin altında) almak için uygulayabileceğiniz bazı teknik ipuçlarını ayrıntılı olarak açıklayacağım.

Speed İndex(Hız İndeksi) Nedir?

Speed İndex(Hız indeksi), bir sayfanın içeriğinin ne kadar hızlı yüklendiğini ve kullanıcı için görünür olduğunu gösteren bir Lighthouse performans metriğidir. 

Hız İndeksi, bir web sayfasının üst kısmının (görünüm alanında) görünen kısmının yüklenme süresini gösterir. Kullanıcıların kaydırmadan önce gördüklerinin tüm yükleme sürecini ölçer. 

Aslında Lighthouse, yükleme işleminin bir videosunu çeker ve tüm kareler arasındaki farkı hesaplar. Ardından Lighthouse, son SI puanını hesaplamak için Speedline Node.JS modülünü kullanır. 

Speedline modülü hakkında daha fazla bilgiyi Github’da bulabilirsiniz.

Kaynak: https://github.com/paulirish/speedline

Hız İndeksi bir hesaplamanın sonucudur. Bir web sayfasının ortalama oluşturulma hızı ve görsel ilerleme, aynı zamanda görsel tamamlama olarak da adlandırılır.

Kullanıcıların bir web sitesinin performansını nasıl algıladıklarını doğrudan etkileyen, yükleme süresini ölçmek için anlamlı bir laboratuvar metriğidir.

Bu görsel tamamlamayı iki senaryo ile gösterelim: A sayfası optimize edilmişken B sayfası optimize edilmemiştir.

📖 Düşük Hız İndeksi puanı, sayfanızın görünen içeriği oldukça hızlı oluşturduğu ve ziyaretçilerinize daha hızlı yüklenen bir sayfa algısı verdiği anlamına gelir.

📖  SI metriği kullanıcı merkezlidir. Görsel ilerlemeyi izler.

Speed İndex Terimini ve Ölçüm Yöntemini Kim Geliştirdi?

Speed İndex web sayfası yükleme performans metriğini webpagetest.org bulmuştur. Webpagetest.org’a göre, her bir hız metriğinin sadece tek bir noktayı ama Speed İndex’in bütün içeriğin görsel tamamlanma hızını ölçtüğü için birçok hız metriğinin toplamını ifade ettiğini belirtmiştir.

Webpagetest.org’a göre Speed İndex, iki ayrı web sayfasındaki “onload” olayının, kullanıcının sayfa yükleme deneyimi için nasıl farklı değerlere sahip olduğunu gösteren bir web sayfası hızı ölçüm metriğidir.

Hız İndeksinin Performansa Etkisi Nedir?

Hız İndeksi, bir sayfanın öğelerinin görünüm alanında ne kadar hızlı görünür hale geldiğini gösteren bir yükleme performansı metriğidir. Web siteniz ziyaretçilerinize ne kadar hızlı görünüyor? Web performansınızı ölçerken yanıtlamaya çalıştığımız soru tam olarak bu! 

SI, görsel tamamlama sürecinin neredeyse sonunda, aşağıdaki resimde olduğu gibi temsil edilmektedir.

Şimdi, Speed İndex’in Lighthouse tarafından ölçülen diğer 5 metriği ile nasıl karşılaştırıldığına bakalım.

Speed İndex’in Lighthouse Skorundaki Ağırlığı Nedir?

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

Lighthouse tarafından Hız Endeksi Nasıl Hesaplanıyor? 

Web.Dev, Speed İndex puanınızın “sayfanızın hız indeksi ile gerçek web sitelerinin hız indekslerinin bir karşılaştırması” olduğunu açıklıyor.

Kaynak:https://web.dev/performance-scoring/

Lighthouse v8 sürümü, nihai performans puanınızı oluşturmak için altı ölçüm hesaplar. Bu Core Web Vitals, Etkileşim Zamanı(Time To İnteractive), Toplam Engelleme Süresi(Total Blocking Time) ve Speed İndex’i kapsar.

Metrik	Ağırlık	İyi Skor
First Contentful Paint	10%	0-2 sn
Speed İndex	10%	0-3,4 sn
Largest Contentful Paint	25%	0-2,5 sn
Time To İnteractive	10%	0-3,8 sn
Total Blocking Time	30%	< 200 ms
Cumulative Layout Shift	15%	0 – 0,1

Hız İndeksi, sayfanızın hızlı mı yoksa yavaş mı algılandığını tanımladığı için önemli bir laboratuvar metriğidir.

📖  Hız İndeksi Formülü: Aralık süresi * (1 – görsel bütünlük / 100)

Gerektiği zaman SI’nızı geliştirmek için size bazı teknik öneriler vermeden önce, Lighthouse’a göre iyi bir SI puanının ne olduğunu belirlemeliyiz. 

Bu da bizi bir başka terime götürüyor: Hız İndeksi eşiği. 

İyi Hız İndeksi Puanı Nedir?

İyi bir Hız İndeksi puanı 3,4 saniyenin altında olmalıdır.

Hız İndeksi(Speed İndex) ve İlk İçerikli Boya(First Contentful Paint)

Son Core Web Vitals güncellemesine aşinaysanız, Speed İndex metriği First Contentful Paint (FCP) metriğine benzer görünebilir . Temel farkı ve her iki ölçümün neden önemli olduğunu hemen açıklayayım.

First Contentful Paint ayrıca, tarayıcının herhangi bir içeriği ilk kez oluşturmasına kadar geçen süreyi ölçen görsel bir ölçümdür . Hız İndeksi, tam içeriğin ekranın üst kısmında görüntülenme hızını tanımlar . 

Bu nedenle, FCP’nizi ne kadar hızlandırırsanız, Speed İndex metriğiniz de iyileştirecektir. (Böylelikle ziyaretçilerinizin koca bir beyaz ekran görmesinin önüne geçersiniz.)

Speed İndex ve CLS

Ekranın üst kısmındaki içeriği stabilize eden ve etkileşimi artıran her ne ise, aynı zamanda iyi bir Hız İndeksinin korunmasına da yardımcı olacaktır. Google, görsel kararlılığı ölçmek için sayfa deneyimi sinyallerinden Kümülatif Düzen Kayması’nı (CLS) kullanır . CLS, bir sayfada, kullanıcı deneyimini bozan pop-up’lar veya araya giren reklamlar gibi, kullanıcı tarafından istenmeyen ani değişiklikleri ölçer.

Bu nedenle, iyi bir CLS puanı, iyi bir görsel stabilite anlamına gelir ve SI’nızı olumlu yönde etkileyebilir. 

İyi bir Hız İndeksi’ni sürdürmek, performans için olduğu kadar pazarlama için de harikadır. Nasıl olduğunu görelim. 

İyi Bir Hız İndeksine Sahip Olmanın Pazarlamada 4 Büyük Avantajı

1. Daha düşük hemen çıkma oranına sahip olursunuz

Evet daha önce John Mueller herhangi Google Analytics metriğini sıralama faktörü olarak kullanmadıklarını belirtmişti ama iyi bir hız indeksine sahip olmak kullanıcı deneyimi için önemlidir.

Bir web sitesine erişmeye çalıştığınızı, ancak herhangi bir içeriği hemen görmek yerine boş bir ekrana baktığınızı hayal edin. Ne yaparsın? O web sitesinden hemen çıkarsın.

Bu senaryoya (hepimizin kaçınmak istediği) “sıçrama” yani bounce denir. Birisi web sitenizi ziyaret eder ve sitenizle daha fazla etkileşime girmeden hemen ayrılır. 

📖  İyi bir FCP ve SI puanını korumak, kullanıcı web sitenizi hızlı olarak algılayacağından hemen çıkma oranınızı önemli ölçüde azaltacaktır.

2. Sayfada geçirilen süreleriniz artar

Speed İndex skorunuzu düşürürseniz, sitenizi ziyaret eden kullanıcılar sitenizde daha fazla kalmaya ve daha fazla sayfa ziyaret etmeye istekli olacaktır. 

3. Dönüşüm oranlarınız artar

Bir kullanıcı, iyi bir hız sayesinde sitenizde vakit geçirdiğinde, başka bir avantajınız daha olur. İhtiyaçları olan bilgiyi ve ürünleri onlara hemen sunduğunuz için dönüşüm oranlarınızın artmak ihtimali yüksek olacaktır.

4. SEO’nuzu geliştirir

Ziyaretçileriniz web sitenizde bulunma deneyiminden hoşlanıyorsa, Google’da bundan hoşlanacak ve sizi arama motoru sonuçlarında daha iyi bir konumla ödüllendirecektir. Unutmayın artık sayfa deneyimi resmi olarak Google’ın sıralama faktörleri arasındaki yerini aldı.

Hız İndeksi Nasıl Ölçülür?

Lighthouse, geliştiricilerin Hız İndeksi ve diğer performans ölçümlerini ölçmesine yardımcı olan açık kaynaklı bir araçtır. Otomatik araç hız, performans, erişilebilirlik, UX ve SEO hakkında ayrıntılı raporlar oluşturur.

Hangi Araçlar Speed İndex’i Ölçer?

Speed İndex’i ve genel performans puanınızı ölçmek için, Lighthouse teknolojisiyle desteklenen iki popüler araç olan Google PageSpeed ​​Insights ve GTmetrix’i kullanabilirsiniz. 

• Google PageSpeed Insight’ın SI metriğini ölçmek için kullanımı:

• SI notunu almak için GTmetrix’i kullanma:

Araçların her ikisi de farklı bir SI puanı sağlıyor, ancak ikisi de yeşil bölgede: 

• SI puanı (PSI): 1,7 sn
• SI puanı (GT Metrix): 999 ms

Hız İndeksini Ne Etkiler?

Yüksek bir Hız İndeksi puanının nedenleri, Google PageSpeed ​​Insights’ın teşhis bölümünde tanımlanabilir. Genellikle, kötü bir SI puanına katkıda bulunan dört ana sorunumuz vardır, yani:

1. JavaScript kodu ve kullanılmayan JS
2. JavaScript yürütme süresi
3. Ana iş parçacığı çalışması
4. Üçüncü taraf kodları

Lighthouse tarafından oluşturulan “fırsatlar” ve “teşhis” bölümleri sayesinde SI’nızı ve performans notunuzu nasıl iyileştirebileceğinizi bulabilirsiniz. 

Rapor, her bir hatanın performansınız üzerinde ne kadar etkisi olduğunu belirler. Bunları ele almak, Hız İndeksi notunuzu büyük ölçüde düşürür ve WordPress sitenizin genel kullanıcı deneyimini artırır. 

Amacımız basittir: ziyaretçinin ekranın üst kısmındaki içeriği mümkün olan en kısa sürede görmesini istiyoruz. 

Hız İndeksini iyileştirmek için PSI’dan gelen ana önerileri listeledik: 

• Oluşturmayı engelleyen kaynakları ortadan kaldırın
• Ana iş parçacığı çalışmasını en aza indirin (tarayıcı görevlerini en aza indirin )
• JavaScript yürütme süresini azaltın
• Web yazı tipi yüklemesi sırasında metnin görünür kalmasını sağlayın (özel yazı tiplerini doğru şekilde kullanın)
• Kullanılmayan JS’yi kaldırın
• Üçüncü taraf kodunun etkisini azaltın
• Kritik istek zincirlerinden kaçının
• Anahtar istekleri önceden yükleyin
• İstek sayılarını düşük ve aktarım boyutlarını küçük tutun
• TTFB ve sunucu yanıt sürelerini azaltın
• Yüklenecek dosyalarda bulunan görsellerin doğru formatta olmasına dikkat edin

Şimdi bunların her birinin nasıl optimize edebileceğinizi anlatayım.

Hız İndeksi Nasıl İyileştirilir: 8 Performans Arttıran İpucu

WordPress sitenizin Hız İndeksini ve genel hızını iyileştirmek için takip etmeniz gereken sekiz performans tekniği vardır: 

1. JS’yi ertele
2. JS’yi Geciktir ve Kullanılmayan JS’yi Kaldır
3. JS’yi küçült ve CSS’yi küçült
4. CSS Dağıtımını Optimize Edin ve Kullanılmayan CSS’yi Kaldırın
5. Görüntüleri Optimize Edin + Tembel Yük
6. Veri Sıkıştırmayı Kullan
7. CDN kullanın
8. Yazı Tiplerini Önceden Yükleyin ve Optimize Edin

Her birini inceleyelim.

1. Javascript erteleme(Defer JS)

JS dosyaları , tarayıcı en alakalı içeriği görüntüledikten sonra yüklenecektir. Bu işlem, tarayıcının komut dosyalarının yüklenmesini beklemeden tüm içeriği yüklemesini sağlar. 

JS dosyalarını erteleyerek, önce göstermek istediğiniz içerik türüne de öncelik vermiş olursunuz. Bizim durumumuzda, ekranın üst kısmındaki herhangi bir şeye odaklanmalıyız: ekranın altındaki gerekli olmayan tüm JS’ler ertelenmelidir.

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

✅ Popüler eklentileri kullanarak JavaScript’i erteleme: 

• WP Rocket, aşağıda gösterildiği gibi JS WordPress dosyalarını erteleme seçeneğine sahiptir.

• Asset CleanUp: Bu ücretsiz eklenti, sayfaya yüklenecek içeriği öncelikli olarak tarar ve algılar. Önce oluşturulmaması gereken CSS veya JS kodunu seçmeniz yeterlidir. Eklenti yazarı, en iyi performans sonuçlarını elde etmek için Asset CleanUp’ı WP Rocket gibi bir önbellek eklentisiyle kullanmanızı önerir.
• Speed Booster Pack: Tüm HTML oluşturulduktan sonra JS dosyalarını erteler.
• Async JS: erteleme özelliği eklemek istediğiniz komut dosyalarının kontrolünü size verir. 

✅ Manuel yolu kullanarak JavaScript’i erteleme

• Erteleme(defer) Niteliği: HTML’deki komut dosyası etiketi için “erteleme” yani “defer” niteliklerini kullanın. Bu, hedeflemek istediğiniz JS’yi erteleyecektir. Erteleme özniteliği uygulanmışken, HTML dokümanı hala ayrıştırılırken komut dosyası paralel olarak indirilir. İşin iyi yanı, HTML ayrıştırması(HTML parsing) tamamlanana kadar komut dosyasının yürütülmemesidir.

<script src =”library.js” defer ></script>

2. JS’yi Geciktirin ve Kullanılmayan JS’yi Kaldırın

JS yürütmesini geciktirmek ve kullanılmayan JS’yi kaldırmak, performansı ve SI puanınızı artırmanıza olanak tanır. Chrome geliştirici araçlarındaki kapsam sekmesi, kullanılmayan JavaScript kodunu bulmanıza yardımcı olabilir:

Denetimi gerçekleştirmenin ve optimize edilecek JS’yi belirlemenin başka bir yolu da PSI veya GTmetrix kullanmaktır: 

🚨 Lighthouse tarafından bildirilen sorunlar: “ Kullanılmayan JS’yi azaltın ” ve “Kritik istek zincirlerinden kaçının”.

✅ Manuel çözümler: 

• setTimeout() yöntemi işleviyle JS yürütmesinde bir gecikme oluşturabilirsiniz. Bu, ms cinsinden belirteceğiniz süreden sonra bir işlevi çağırır . Bu kod parçacıklarını , seçtiğiniz JS işlevlerini geciktirmek için kullanabilirsiniz . 

Not: Lighthouse, 20 kb’den fazla kullanılmayan JS koduna sahip herhangi bir dosyayı işaretler , bu nedenle her JS dosyasını manuel olarak geciktirmek biraz rahatsız edici olabilir.

✅ JS’yi  geciktirmek için bir WordPress eklentisi kullanın:

• Flying Scripts: JS’yi geciktirmek ve kritik JS dosyalarına daha fazla kaynak sağlamak için bir eklentidir. Öncelikli olarak yüklenmesi gereken JS içeriğine öncelik verilmesine yardımcı olur.  
• WP Meteor : JS komut dosyalarını ertelemek ve ziyaretçiler tarafından algılanan hızı büyük ölçüde artırmak için kullanılan bir eklentidir.
• Gonzales: CSS ve JS’yi koşullu olarak devre dışı bırakmaya izin verir.
• Perfmatters: Kullanılmayan komut dosyalarını devre dışı bırakarak sitenizi hızlandırmaya yardımcı olur. 

• Plugin Organizer: Eklentilerinizin yüklenme sırasını değiştirir.
• Asset Cleanup: Yüklenmesi gerekmeyen CSS/JS’yi seçmenizi sağlar.
• WP Roket önbellek eklentisi: En iyi sorunsuz çözümdür. WP Rocket eklentisi ile kullanılmayan JS’yi azaltmak için Delay Javascript Execution özelliği kullanılır. JS dosyalarını tek bir tıklama ile kolayca geciktirebilirsiniz.

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

Minification, JavaScript kodunun işlevselliğini değiştirmeden gereksiz tüm karakterleri kaldırma işlemidir. Basit İngilizcede, kodunuzu küçültmek, yeni satırlar, yorumlar, boşluklar, noktalı virgüller vb. gibi gereksiz noktalama işaretlerini ve dağınıklığı kaldırmak anlamına gelir. 

Şişkinliği azaltmak, ana iş parçacığı için zaman kazandıracaktır. Yine, ekranın üst kısmındaki içerik için yer ve zaman yaratmakla ilgilidir.

🚨 Lighthouse tarafından tanımlanan sorunlar: “ JavaScript yürütme süresini azaltın ”, “ Ana iş parçacığı çalışmasını en aza indirin ”, “ JS’yi küçült ” ve “CSS’yi küçült ”.

İşte size bazı seçenekler.

✅  Kodunuzu manuel olarak küçültme :

Önemli: Sitenizin veya sıkıştırmak istediğiniz dosyanın yedeğini almanızı öneririz. En iyisi, bu tür manipülasyonları bir geliştirme ortamında yapmaktır. Bu konuda yeterli bilginiz yoksa, bunun yerine bir eklenti kullanmanızı öneririz. 

• 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ısaltın ve koşullu ifadelerinizi optimize edin. 
• Dosyayı tekrar kaydedin.

✅ Çevrimiçi bir araç kullanarak  kodunuzu küçültme : 

• minifycode.com’a gidin ve ilgili sekmeyi açın: JS, CSS, HTML, vb 
• Dosyanızdaki kodu ana alana yapıştırın ve Minify JS düğmesini tıklayın.

✅  En İyi JS ve CSS küçültme araçları:

• Google’dan Closure Compiler , JavaScript’i ayrıştıran ve analiz eden, gerektiğinde kodu yeniden yazan ve bundan sonra JS’yi küçülten sağlam bir seçenektir.
• UglifyJs , JavaScript’inizi küçültür, ayrıştırır ve optimize eder.
• Autoptimize, CSS ve JS’yi optimize etmek için çok popüler bir seçenektir.
• Yahoo’dan YUI Compressor Tool, hem bir CSS hem de JavaScript küçültme aracıdır.
• WP Super Minify, satır içi JavaScript ve CSS dosyalarını birleştirir, küçültür ve önbelleğe alır.
• CSS Nano (CSS ön işlemcisi)
• CSSO (CSS ön işlemcisi)
• UNCSS (CSS ön işlemcisi )
• WP Rocket , aşağıda gösterildiği gibi 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

WordPress devasa bir ekosistemdir ve çoğu tema yazarı, çok sayıda CSS kullanılmasıyla sonuçlanan çok sayıda düzen seçeneği ve tasarım efekti sunar. Mesele şu ki, hepimizin CSS’ye ihtiyacı var çünkü web içeriğimizi şekillendiren kod bu. Bir yandan 2000’lerden kalma çirkin bir web sitesi istemiyoruz ama aynı zamanda iyi bir performans sağlamamız gerekiyor. Her şey, mükemmel dengeyi bulmak ve CSS’nin sayfanızda nasıl oluşturulacağını/yayınlandığını optimize etmekle ilgilidir. 

CSS dosyaları site yükleme sürenizi etkiler. Performansı ve SI puanınızı iyileştirmek için bu sorunu çözmeniz gerekir. CSS dağıtımını optimize etmek için farklı taktikleri görelim.

🚨 Lighthouse tarafından belirlenen sorunlar:

“ Ana iş parçacığı çalışmasını en aza indirin ”, “ Kullanılmayan CSS’yi azaltın ”, “ Oluşturmayı engelleyen CSS’yi ortadan kaldırın ”.

✅  Manuel çözümler: 

• CSS komut dosyalarınızı birleştirin, sıkıştırın ve satır içi yapın: bu, sayfaların ayrı birer CSS dosyalarıyla yüklenmediği anlamına gelir. Bunun yerine, bir sayfa için gerekli tüm stil bilgileri sayfaya dahil edilir (ve hiçbir işe yaramaz stil sayfası yüklenmez.)
• CSS kurallarına öncelik verin: önce ekranın üst kısmındaki içerik yüklenmelidir.
• Kodunuzu gözden geçirerek kullanılmayan CSS’yi manuel olarak kaldırın/azaltın. 

✅ CSS dağıtımını optimize etmek için kullanabileceğiniz WordPress eklentileri: 

• Autoptimize: WordPress panosundaki “CSS kodunu optimize et” onay kutusunu etkinleştirmeniz yeterlidir. 
• Speed Up-Optimize CSS Delivery: CSS dağıtımını optimize eder.
• WP Roket önbellek eklentisi: CSS dağıtımınızı optimize etmenize ve kullanılmayan CSS’yi birkaç tıklamayla doğrudan dosya Optimizasyonu sekmesinden kaldırmanıza yardımcı olur.

Önemli: Kullanılmayan CSS’yi kaldır özelliğini kullanırken temanızda herhangi bir bozulma olup olmadığını kontrol ederek kullanın. Zira yaptığım testlerde bazı temalarda bozulmalara neden olabiliyor. Henüz beta aşamasında olan bir özellik olduğunun altını çizmekte fayda var.

5. Görselleri Optimize Edin ve Lazy Load Kullanın

Web sitenizin resimlerini optimize etmeniz gerekiyor çünkü bunlar yükleme süresindeki sitenize en büyük yükü bindiren unsurlardan biridir. Neyse ki, kalitede gözle görülür bir kayıp olmadan yeniden boyutlandırmanıza ve sıkıştırmanıza yardımcı olan birkaç araç var. 

Resimlerinizi optimize etmenin başka bir yolu, lazy load özelliğini kullanmaktır. Daha sonra bu resimlerin kullanıcı tarafından görülmesi gerektiğinde, resimlerin ilgili sayfada yüklenmesini erteleyen bir tekniktir.

🚨 Lighthouse tarafından belirlenen sorunlar:

• Görüntüleri uygun şekilde boyutlandırın: Büyük görüntüleri doğru boyutlara göre yeniden boyutlandırın.
• Görüntüleri verimli bir şekilde kodlayın: Onları sıkıştırmanız gerektiği anlamına gelir.
• Görüntüleri yeni nesil formatlarda sunun: JPEG’leri/PNG’leri WebP’ye dönüştürün.
• Ekran dışı görüntüleri erteleyin: Lazy load uygulayın.

✅  Uygulamalar ve çevrimiçi araçlarla görüntüleri manuel olarak yeniden boyutlandırma: 

• GIMP: Windows ve Mac için ücretsiz.
• Preview for Mac: ücretsizdir ve varsayılan olarak yüklü gelir.
• Photoshop: Kullanımı yeni başlayanlar zor olabilir, ancak en eksiksiz tasarım yazılımıdır.
• BeFunky: web tabanlı bir grafik tasarım yazılımıdır.
• Picmonkey.com: logolar dahil görsel içeriği düzenleyebilirsiniz.
• Pixlr.com: ücretsiz ve kullanımı kolay fotoğraf düzenleyicidir.
• Fotor.com: hepsi bir arada görsel oluşturma platformu.
• squoosh.app: Web tabanlı ayrıca web uygulaması olan benim de kullandığım harika bir görsel optimizasyon aracıdır.

✅  Görüntüleri WordPress sitenize yüklemeden önce çevrimiçi araçlarla sıkıştırma :

• GIMP ( Görüntüyü ölçeklendirme seçeneği)
• Photoshop ( Web için kaydet seçeneği)
• JPEG Optimizer ( temel sıkıştırma seçeneği)
• Tiny PNG ( akıllı kayıplı sıkıştırma seçeneği)
• JPEG.io ( gelişmiş JPEG optimizasyon seçeneği)
• squoosh.app ( gelişmiş WebP optimizasyon seçeneği)

✅ WordPress eklentisi ile görselleri  optimize etme (mevcut görseller ve yeni görseller):

• Imagify: Görselleri tek tıklamayla optimize etmek için en gelişmiş araçlardan biridir. Kaliteden ödün vermeden daha az boyuta sahip görseller elde edin, WebP’ye dönüştürün ve toplu olarak sıkıştırın (Toplu Optimize özelliği). Imagify, tüm görüntü biçimlerini optimize edebilir: jpg, png, pdf ve gif. Imagify yaklaşık 200 görsel optimizasyonu için ücretsizdir, ardından premium sürüme geçmeniz gerekir. 
• Imsanity: WordPress kitaplığınıza bir yükleme boyutu sınırı koyar ve büyük resimleri otomatik olarak yeniden boyutlandırır. Ayrıca standart WordPress sıkıştırmasını kullanarak yeniden boyutlandırma sürecinde JPG görüntülerini sıkıştırır. Ancak yine de EWWW Image Optimizer veya Imagify gibi daha sıkıştırma odaklı bir eklenti kullanmanızı önerirler.
• EWWW Image Optimizer: Her şeyi otomatikleştirir ve görüntüler otomatik olarak sıkıştırılır, sayfaya sığacak şekilde ölçeklenir ve yeni nesil biçime dönüştürülür.

✅  WordPress eklentisi kullanarak görüntülere Lazy Load uygulama:

• Lazy Load by WP Rocket: WpRocket tarafından geliştirilen ve resimlere lazy load komut dosyası uygulayan ücretsiz bir eklenti yardımcısıdır. Web sitenizi hızlandırmak için Youtube iframe’lerini bir ön izleme thumbnail’i ile de değiştirebilirsiniz.

Önemli: WP Rocket önbellek eklentisi, LazyLoad özelliğiyle birlikte gelir, bu nedenle zaten bir WP Rocket kullanıcısıysanız, WP Rocket Lazy Load eklentisine ayrıca ihtiyacınız yoktur.

• WP Rocket: Önbellek eklentisi ayrıca, aşağıdaki medya sekmesinde görebileceğiniz gibi, fotoğraflar ve videolar için lazy load özelliği ile birlikte gelir:

6. Veri Sıkıştırma 

Sıkıştırma, performans puanınızı artırmak için web sitenizin dosya boyutlarını küçültme işlemidir. Mantık basit: Tarayıcınıza daha hafif dosyalar gönderdikçe, oluşturma süresi daha hızlı olacaktır. 

HTML sözdizimi tekrarlı bir yapıya sahiptir ve <p>, <span>, <img>, <div> gibi etiketleri kullanır, sonuç olarak, kodu sıkıştırmak ve açmak için “GZIP sıkıştırması” adlı bir yöntemi kullanmak yararlı olabilir. 

✅  Bir WordPress eklentisi kullanarak GZIP sıkıştırmasını etkinleştirme:

• GZIP sıkıştırma eklentisi , WordPress sitenizde Gzip sıkıştırmasını etkinleştirme ve devre dışı bırakma olanağı sağlar.
• WP Rocket bu özelliği, eklenti kurulduğunda .htaccess dosyasına eklenen mod_deflate modülü ile sağlar ve etkinleştirir.

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

Bir CDN, dosyaları dünyanın farklı yerlerinde bulunan çeşitli sunuculardan dağıtmanıza olanak tanır. Bu sistem sayesinde özellikle uluslararası ziyaretçiler için sitenizin yüklenme süresi iyileştirilir. 

✅ CDN’nizi  etkinleştirmek için bir WordPress eklentisi kullanma:

• WP Rocket’in iki seçeneği vardır:

1. RocketCDN’ye aylık 7,99$’a abone olabilirsiniz. CDN, çok kullanışlı olan diğer WP Rocket özellikleriyle otomatik olarak yapılandırılır. 

2. Kendi CDN’nizi doğrudan WordPress panosuna entegre edebilirsiniz. Eğer WpRocketCDN kullanmayacaksanız Bunny CDN, ücretli Cloudflare ya da StackPath tercih edebilirsiniz.

8. Yazı Tiplerini Önceden Yükleyin ve Optimize Edin

Yazı tiplerini önceden yükleme, bir ziyaretçinin tarayıcısından önemli yazı tiplerini erkenden yüklemesini ve tüm ikincil yazı tiplerini geciktirmesini “istediğiniz” anlamına gelir. Hız İndeksi ekranın üst kısmında ne olduğuna dayanır, dolayısıyla yazı tiplerinin önceden yüklenmesi, görünür içeriğin ziyaretçiler için düzgün bir şekilde görüntülenmesini sağlar. 

Özel web yazı tipleri de ani düzen kaymalarına neden olabilir ve Google bundan pek hoşlanmaz. Aslında, ziyaretçileriniz iki ana sorunla karşı karşıya kalabilir: 

• FOUT (stil uygulanmadığı için yazı tipinin çekici gelmemesi)
• FOIT (görünmez metin ve yazı tipini ekranda görmek için yüksek bekleme süresi sorunları) 

İyi bir kullanıcı deneyimi sağlamak ve bu tür durumlardan kaçınmak için web yazı tiplerinizi önceden yüklemenizi öneririm.

🚨 Lighthouse tarafından tanımlanan sorun: “Anahtar isteklerini önceden yükle” ve “Web yazı tipi yüklemesi sırasında metnin görünür kalmasını sağlayın”.

✅ Yazı tiplerini önceden yüklemek için manuel bir çözüm kullanma: 

Tarayıcınızdan yazı tipini önceden yüklemesini istemek için rel=”preload” etiketini ve özniteliklerini kullanabilirsiniz.

Güncel bir örnek: 

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

rel=”preload” etiketi nereye koyulur?

Her CSS komut dosyası için HTML’nizdeki head etiketleri ile siteye yüklenen yazı tipi dosyaları arasında.

✅ Yazı tiplerini önceden yüklemek için bir WordPress eklentisi kullanma:

• Yazı tiplerini önceden yüklemek için yine WP Rocket kullabilirsiniz . “Önyükleme sekmesine” gidin daha sonra “Yazı Tiplerini Önyükle”ye gidin ve önceden yüklemek istediğiniz yazı tipi dosyalarının URL’lerini belirtin.

WP Rocket ile Hız İndeksi Nasıl Arttırılır: Wp Rocket Deaktif ve Aktif Karşılaştıma

WordPress için en iyi önbellekleme eklentisi olan WP Rocket’i kullanarak Hız İndeksi notunuzu düşürebilirsiniz .

Gerçekten de, JS/CSS dosyalarının optimizasyonuna ve yazı tipi ön yüklemesine yönelik herhangi bir şey, büyük olasılıkla SI’yi iyileştirecektir. Kendi sitelerimde de kullandığım WP Rocket bunların hepsini gerçekten iyi derecede yerine getiriyor.

Sadece yazılanlara bakmanızı istemem. Şu anda bu yazıyı okuduğunuz web sitemde sizin için eklenti deaktif ve aktif haldeyken sonuçların nasıl olduğuna dair testi paylaştım.

• 

• 

4,2 saniye olan Speed İndex skorum Wp Rocket aktifken 2,2 saniyeye düşmekte. Paylaştığım görsellerdeki sonuçlar mobil sürüme aittir. Etkileşime geçme zamanı, first contentful paint ve ayrıca largest contentful paint değerlerindeki iyileşmelere de dikkatiniz çekmek isterim.

Sonuç

Speed İndex(Hız İndeksi), web sayfası performans metrikleri, kullanıcı odaklı metrikler, kullanıcının algıladığı sayfa hızı ile doğrudan ilgili bir hız metriğidir. Geleneksel SEO kapsamı dışında da ele alındığında dönüşüm oranı optimizasyonunun uygulanması adına da oldukça önemli bir metriktir.

Ancak hızlı bir sitede vakit geçiren ziyaretçilerden daha fazla dönüşüm sağlamasını bekleriz. Algısal olarak da web sitenizin hızlı olması kullanıcı açısından olumlu değerlendirilir. İlk izlenimin iyi olması her zaman iyidir.

Hız İndeksi’nin nasıl ölçüldüğü de bütünsel SEO için önemlidir. Lighthouse’un Speed ​​İndex ölçüm yöntemi ile diğer araçların Speed ​​İndex ölçüm yöntemleri birbirinden farklıdır. Bu farklılıkları bilmek ve anlamak da SEO tarafında hız optimizasyona daha farklı açılardan bakmamızı sağlayacaktır.

Bu rehberimde size WordPress sitelerinizde Speed İndex puanınızı nasıl geliştirebileceğinizi anlattım. Umarım sitelerinize değer katmak adına ve WordPress hız optimizasyonu çalışmalarınızda sürekli yararlanacağınız bir kaynak hazırlayabilmişimdir.

Fayda sağlaması dileğiyle.

Faydalanılan Kaynaklar:

• Speedline Nedir?
• Lighthouse tarafından Speed İndex Nasıl Hesaplanır?
• Speed İndex