Google PageSpeed ​​Insights Puanınızı Artırmak için 12 İşlem Yapılabilir İpucu

Google, 2016'da mobil öncelikli dizine eklemenin kullanıma sunulmasından bu yana bir sıralama sinyali olarak site hızının önemini kademeli olarak artırıyor. Kendi sözleriyle, "Hız eşittir gelir."

Bir sayfanın yüklenmesi çok uzun sürdüğünde, ziyaretçiler yanıtları daha hızlı bulmak için başka bir sayfaya geçer. Yavaş hız, sizi nasıl bulduklarına bakılmaksızın (organik arama, yönlendirme bağlantısı, ücretli reklamlar) ziyaretçilerin sitenizde kalmasını engeller.

Hızlı bir site, sitenizin kullanıcı deneyimini (UX) iyileştirmenin yanı sıra genel SEO'yu da geliştirir.

Web siteniz hızlıysa, hemen çıkma oranları yüksek olan daha yavaş sitelerden daha yüksek sıralama şansınız vardır.

• Sayfa yükleme süresi bir saniyeden altı saniyeye çıktıkça ziyaretçilerin hemen çıkma olasılığı yüzde 106 daha fazladır.

Mobil sitelerin yüklenme hızındaki bir saniyelik gecikme, dönüşüm oranlarını yüzde 20'ye kadar etkileyebilir.

11.8 milyon Google arama sonucunu analiz eden bir Backlinko çalışması, oldukça şaşırtıcı bir şekilde, "sayfa yükleme hızı ile ilk sayfa Google sıralaması arasında hiçbir ilişki olmadığını" buldu. Google'ın Hız Güncellemesinin yalnızca aşırı yavaş sayfaları etkilediğini ve hızlı sayfalardan yararlanmak yerine onları alt sıraya koyduğunu açıkladı.

Ancak çalışma, ilk sayfadaki sonuçlar için ortalama sayfa yükleme hızının 1,65 saniye olduğunu buldu.

Ayrıca, Portent tarafından 2019 yılında yapılan bir araştırma, sitelerin işlem dönüşümlerini iyileştirmek için 0-2 saniyelik bir yükleme süresini hedeflemesi gerektiğini buldu.

Her şeyden önce Google, sayfa hızının hem mobil hem de masaüstü aramaları için bir sıralama faktörü olduğunu onaylamıştır ve site performansını değerlendirmek için PageSpeed ​​Insights ve Lighthouse'ın kullanılmasını tavsiye eder.

Bu nedenle, kullanıcı deneyimini geliştirmek ve arama motoru sıralamalarını yükseltmek için sayfa hızınızı artırmak bir öncelik olmalıdır.

PageSpeed ​​Insights nasıl çalışır?

PageSpeed ​​Insights, herhangi bir URL'yi analiz eden ve hem mobil hem de masaüstü sürümleri için 100 üzerinden bir puan veren ücretsiz bir performans değerlendirme aracıdır. Ayrıca iyileştirme için çeşitli öneriler sunar ve optimizasyon fırsatlarını tanımlar.

Araç, laboratuvar verileri ve saha verileri sağlayan Lighthouse tarafından desteklenmektedir.

• Alan verileri, ziyaretçiler sayfanızı yüklediğinde Chrome Kullanıcı Deneyimi Raporunda (CrUX) bulunan gerçek dünya performans verilerinden toplanır. Gerçek ziyaretçilerin sayfanızda dönüşüm gerçekleştirmesini engelleyen darboğazları tanımlar. O içerir:
• First Contentful Paint (FCP) – ilk metin veya resim varlığının yüklenmesi için geçen süre
• En Büyük İçerikli Boyama (LCP) – en büyük metin veya resim varlığının yüklenmesi için geçen süre
• İlk Giriş Gecikmesi (FID) – tarayıcının ziyaretçinin ilk etkileşimine yanıt vermesi için geçen süre
• Kümülatif Düzen Kaydırma (CLS) – görünüm alanında sayfanın herhangi bir hareketini ölçer
• Laboratuvar verileri, mobil ağlar ve orta seviye bir cihaz gibi simüle edilmiş, kontrollü bir ortamda web sayfasının hızını ölçer. Performans sorunlarını tespit etmenin ve bunları düzeltmek için çözümler bulmanın iyi bir yolu. FCP, LCP, CLS ve diğer üç metriği hesaplar:
• Hız İndeksi (SI) – sayfa yükleme sırasında içeriğin görsel olarak görünmesi için geçen süre
• Etkileşim Süresi (TTI) – sayfanın tamamen etkileşimli hale gelmesi için geçen süre
• Toplam Engelleme Süresi (TBT) – toplam FCP süresi ve tam etkileşim

100/100 puan almak, sayfa hızının doğrudan bir göstergesi değildir. Mükemmel bir skor elde etmeden hızlı yüklenen bir web sitesine sahip olabilirsiniz.

Ziyaretçiler de mükemmel bir skor umurlarında değil. Tek istedikleri içeriğinizi hızlı bir şekilde görüntülemek. Bu nedenle, araç tarafından verilen önerileri uygulamaya odaklanmak daha önemlidir.

Puanınızı hesaplamak için kullanılan performans metriği sonuçları farklı ağırlıklara sahiptir.

Bu tablo, Lighthouse 8'deki laboratuvar verilerinin ağırlıklarını verir:

Bu ağırlıklar yerine, size gösterilen toplam performans puanı ve puan grubunuzu gösteren bir renktir:

• Kırmızı (zayıf): 0 – 49
• Turuncu (ortalama): 50 – 89
• Yeşil (iyi): 90 – 100

Araç, puanınızı artırmanıza yardımcı olmak için Fırsatlar bölümünde ayrıntılı eylem öğeleri sağlar.

PageSpeed ​​Insights puanınızı nasıl iyileştirebilirsiniz?

PSI aracının sunduğu tavsiyelere dayanarak, performans puanınızı artırabileceğiniz 12 yol aşağıda belirtilmiştir:

Tıklama Sonrası Açılış Sayfası Yönlendirmelerinden Kaçının

Yönlendirmeler, web sitenizdeki bir sayfayı sildiğinizde veya taşıdığınızda yaygın olarak kullanılır.

Sunucuya yapılan bir istek ile ilk veri baytının istek sahibine geri gönderildiği zaman arasında geçen süre olan ilk bayt süresini (TTFB) artırırlar. Yönlendirmeleri kullanmanın doğası gereği yanlış bir şey olmamasına rağmen, aşırı kullanım sayfa yüklemede gecikmelere neden olur.

Yönlendirmeleri yalnızca sayfa yükleme hızlarını iyileştirmek ve genel SEO'yu iyileştirmek için gerektiğinde kullandığınızdan emin olun.

CSS, HTML ve JavaScript'i küçültün

Küçültme, bir tarayıcının HTML'yi nasıl işlediğini etkilemeden gereksiz veya yinelenen verileri ortadan kaldırma veya düzeltme sürecini ifade eder. Gereksiz boşlukları, karakterleri ve yinelemeleri kaldırmayı içerir.

CSS, HTML ve JavaScript'in küçültülmesi bu dosyaların boyutunu küçültür ve sayfa yükleme hızını artırır.

WordPress'te kodunuzu otomatik olarak küçültmek için WP Rocket, HTML Minify veya Autoptimize gibi eklentileri kullanın.

Ekranın Üstü İçeriğe Öncelik Verin

Tembel yükleme, ekranın üst kısmındaki içeriği görüntülemeden önce tarayıcının sayfadaki tüm resimleri yüklemesini sağlamak yerine hemen görünen resimlerin yüklenmesine öncelik vermeyi içerir. FCP ve FMP'ye ulaşmak için geçen süreyi azaltır.

Ekranın üst kısmındaki içeriğe öncelik vererek ve ekran dışı görüntüleri erteleyerek site performansını iyileştirebilirsiniz. Çoğu içerik ağırlıklı sitenin yaptığı gibi "sonsuz kaydırma" uyguladıysanız, tembel yükleme kullanmanız gerekir.

Lazy Load by WP Rocket ve a3 Lazy Load gibi WordPress eklentilerini kullanın. Autoptimize ayrıca tembel yükleme özelliklerine de sahiptir.

Sunucu Yanıt Süresini Hızlandırın

Sunucu yanıt süresi veya TTFB, tarayıcının sunucudan ilk veri baytını almadan önce ne kadar beklemesi gerektiğinin bir ölçüsüdür. Bu süre ne kadar uzun olursa, sayfanın yüklenmesi o kadar uzun sürer.

Düşük bir TTFB, hızlı bir genel site hızıyla aynı şey değildir, ancak hızlı bir sunucu yanıt süresi site performansını artırır.

Sunucu yanıt sürelerini hızlandırma yöntemleri:

1. Hızlı bir WordPress ana bilgisayarı kullanın – Kaliteli bir WordPress odaklı barındırma sağlayıcısı, dikkatlice düşünülmüş bir mimariye sahiptir ve hıza öncelik verir.
2. Bir İçerik Dağıtım Ağı (CDN) uygulayın – Dünyanın her yerinden ziyaretçilere hizmet veren bir web siteniz varsa, bir CDN kullanmak TTFB'nizi önemli ölçüde düşürür.
3. WordPress önbelleğe alma kullanın - Önbelleğe alma, sunucu işleme süresini azalttığı için TTFB'nin yanı sıra sayfa yükleme sürelerini de azaltabilir. Önbellek Etkinleştirici gibi ücretsiz önbelleğe alma eklentileri mevcuttur.
4. Premium bir Etki Alanı Adı Sistemi (DNS) sağlayıcısı seçin – Tipik olarak, premium DNS sağlayıcılarında DNS arama süreleri daha hızlıdır. Ancak Cloudflare, mükemmel performans sunan ücretsiz bir DNS sağlayıcısıdır.

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

Oluşturmayı engelleyen kaynaklar, JavaScript, CSS, HTML ve bir web sayfasının oluşturulması için çok önemli olan yazı tipleri gibi statik dosyalardır. Sayfanın geri kalanının görüntülenebilmesi için ziyaretçinin tarayıcısının bu dosyaları indirmesi ve işlemesi gerekir.

Bu nedenle, bu dosyalardan çok sayıda "ekranın üst kısmında" olması bir darboğaz yaratır ve site hızını yavaşlatır.

PageSpeed ​​Insights Puanınızı Artırın

Pressable'ın cayır cayır yanan hızlı WordPress barındırma hizmetiyle

Daha fazla bilgi edin

Oluşturmayı engelleyen kaynakları kaldırmanın iki yöntemi vardır:

1. Satır İçi – Web sayfanızda çok fazla JavaScript veya CSS yoksa, bunları satır içine almayı düşünün, yani JavaScript ve/veya CSS kodunu HTML dosyasına dahil edin. WordPress kullanıyorsanız kodunuzu satır içi yapmak için Autoptimize gibi bir eklenti kullanabilirsiniz. Bu yöntemin yalnızca çok küçük siteler için çalıştığını unutmayın. Çoğu WordPress sitesinde, bu tekniğin ters etki yapmasına yetecek kadar JavaScript bulunur.
2. Async ve Erteleme – Büyük web siteleri için, oluşturma engellemeyi ortadan kaldırmak için zaman erteleme özelliği, HTML ayrıştırma sırasında komut dosyalarını indirir, ancak yalnızca ayrıştırma tamamlandıktan sonra yürütür. Ayrıca bunları sayfada görünüm sırasına göre yürütür. Zaman uyumsuz özniteliğe sahip komut dosyaları, indirme işlemi tamamlanır tamamlanmaz yürütülür.

Ana İş Parçacığı Çalışmasını En Aza İndirin

“Ana iş parçacığı”, kodu ziyaretçilerin çalışabileceği bir web sayfasına dönüştürmekle görevli bir kullanıcının tarayıcısının ana öğesidir. İki işlevi vardır: JavaScript, HTML ve CSS'yi ayrıştırır ve yürütür ve kullanıcı etkileşimlerini yönetir.

Ana iş parçacığı sitenin kodu üzerinde çalışırken, kullanıcı isteklerini aynı anda işleyemez. Bu nedenle, ana iş parçacığı çalışması çok uzun sürerse (>4 saniye), yavaş sayfa yükleme hızına ve zayıf UX'e yol açar.

Ana iş parçacığı çalışmasını en aza indirme yöntemleri:

1. CSS, HTML, JavaScript'i küçültün – Dosya boyutlarını azaltmak için satır içi veya ertelemeyi kullanın.
2. Kullanılmayan kodu kaldırın - Tıpkı kodu küçülttüğünüz gibi, web sayfanız için hangi şekilde çalışırsa çalışsın stilleri satır içine almayı veya ertelemeyi düşünün. Kullanılmayan JavaScript ve CSS kodunu bulmak için ChromeDevTools gibi araçları kullanın.
3. Tarayıcı önbelleğini uygulama – Önceden yüklenmiş kaynakların kopyalarını kaydetmeyi içerir, böylece tarayıcı her ziyarette yeniden yüklemek zorunda kalmaz. WordPress web siteleri için W3 Total Cache gibi araçları kullanın.
4. Kod bölmeyi uygula – Web sayfası etkileşimli hale gelmeden önce tarayıcıların tüm kodu yüklemesini sağlamak yerine, gerektiğinde yürütülmek üzere JavaScript'i paketlere bölmeyi içeren gelişmiş bir tekniktir. Kod bölmeyi uygulamak için web paketini kullanın.

Görüntüleri Yeni Nesil Biçimlerde Sunun

JPEG 2000, JPEG XR ve WebP gibi yeni nesil biçimlerdeki görüntüler, JPEG ve PNG gibi yaygın olarak kullanılan dosya biçimlerinden daha hızlı yüklenir.

• WebP, aynı kalitede JPEG'den yüzde 25 – 35 daha küçük dosya boyutları sunar.
• WebP görüntüleri, PNG görüntülerine göre yüzde 42,8'lik bir düşüşe neden oluyor.

WebP görüntüleri, görüntüler için giderek daha fazla standart biçim haline geliyor ve Smush ve Imagify gibi eklentiler bir WebP dönüştürme özelliği sunuyor.

Tarayıcı Önbelleğinden Yararlanın

Tarayıcı önbelleğe alma, web sayfalarınızın tekrar eden ziyaretçiler için daha hızlı yüklenmesini sağlayan temel bir optimizasyondur. Ziyaretçi sitenizde yeni bir sayfaya geçtiğinde, önbelleğe alma, tüm verilerinizin (logolar ve yazı tipleri gibi) yeniden yüklenmesine gerek kalmamasını sağlar.

Bu, site hızında büyük bir gelişme ile sonuçlanır.

Tarayıcı önbelleğini uygulamak için W3 Total Cache, WP Super Cache ve WP Rocket for WordPress web siteleri gibi eklentileri kullanın.

Google PageSpeed ​​Insights, "verimli" bir önbellek politikasına sahip olmanızı gerektirir. Bu, tarayıcınızın önbelleğini temizleme sıklığını optimize etmeniz gerektiği anlamına gelir. Ancak bunun çok sık olmasını istemezsiniz çünkü tarayıcı önbelleğe alma amacını ortadan kaldırır.

Bir Nginx sunucusuna Cache-Control ve Expires başlıkları ekleyerek önbellek sona erme sürenizi optimize edebilirsiniz. Apache sunucularınız varsa, bir .htaccess dosyasını düzenleyebilir veya oluşturabilirsiniz (bir web geliştiricisinin yardımıyla).

Ayrıca, Google Analytics'i Perfmatters ve Complete Analytics Optimization Suite (CAOS) gibi eklentilerle yerel olarak barındırmayı da düşünebilirsiniz.

Büyük Düzen Kaydırmalarından Kaçının

Sayfa öğeleri aniden belirdiği, yer değiştirdiği ve ziyaretçilerin web sayfasıyla etkileşimini engellediği için büyük yerleşim değişiklikleri sinir bozucu bir kullanıcı deneyimine yol açar. Düzen kaymaları meydana geldiğinde, bir ziyaretçi bir öğeye (düğmeler, resimler, iletişim formları) tıklamak veya dokunmak üzereyken, ekran aşağı kayar ve kişi başka bir şeye tıklamıştır.

Büyük yerleşim değişikliklerinden kaçınmak, özellikle mobil cihazlar için önemlidir. Düşük bir CLS puanı, web sayfanızın "çarpık" veya görsel olarak kararsız olduğunu gösterir.

Büyük düzen kaymalarını önlemenin yolları:

• Görüntü boyutlarını belirtin – Görüntüler ve videolar için doğru aralığın kullanılması için görüntüler ve video öğelerinin genişliğini ve yüksekliğini ayarlayın. Bunu ayrıca CSS en boy oranı kutularını kullanarak da yapabilirsiniz.
• Gömmeler, reklamlar ve iFrame'lerin neden olduğu düzen kaymalarını azaltın – iFrame'ler, reklamlar ve gömmeler nedeniyle düzen boklarını en aza indirmek için birkaç işlem yapabilirsiniz:
  • Görüntülenebilecek reklam olmadığında yer tutucuları kullanın
  • Reklamları görünümün altına veya dışına kaydırın
  • Reklam kitaplığını yüklemeden önce en büyük reklam alanını ayırın

• Mevcut içeriğin üzerine dinamik içerik eklemekten kaçının – Ziyaretçi etkileşimine yanıt vermedikçe, mevcut içeriğin üzerine afişler ve formlar gibi yeni içerikler eklemeyerek büyük düzen kaymalarını önleyebilirsiniz.
• Görünmez Metnin Flaşını (FOIT) Önleyin – CLS puanınız FOIT sorunlarından etkilenebilir. Yazı tipi yükleme sırasında metninizin görünür kalmasını sağlamak için yazı tiplerini önceden yükleyebilir ve/veya yazı tipi görüntüleme özniteliğini kullanabilirsiniz.
• Birleştirilmemiş animasyonlardan kaçının – Bir web geliştiricisinin yardımıyla, ana iş parçacığı çalışmasını en aza indirmek ve sayfa yükleme sırasında piksellerin yeniden boyanmasını önlemek için mümkün olan her yerde yalnızca birleştirilmiş animasyonlar gerçekleştirin.

Görüntüleri Optimize Edin

Yavaş sayfalar ve düşük PageSpeed ​​Insights puanları büyük ölçüde büyük resimlerden kaynaklanır. Görüntüleri optimize etmek, FCP ve LCP sürelerini düşürmeye yardımcı olur ve CLS sorunlarını önler.

Görüntüleri optimize etmenin birkaç yolu:

1. Görüntüleri yeniden boyutlandırın ve sıkıştırın : Görüntü boyutunda ortalama yüzde 50 veya daha fazla tasarruf etmek için WP Smush Image veya Crush.pics gibi eklentileri kullanın. Optimizilla ve Compress JPEG gibi çevrimiçi araçları da kullanabilirsiniz.
2. Standartları belirleyin: Site için format standartlarını ve görüntülerin maksimum çözünürlüğünü tanımlayın
3. Görüntülerinizi teslim etmek için bir CDN kullanın: Görüntülerin daha hızlı teslim edilmesi için bir içerik dağıtım ağı kullanın.
4. Duyarlı görüntüler kullan – Farklı boyutlarda alternatif görüntü dosyalarını belirtmek için <img> etiketlerine eklenen Tarayıcılar bu listeyi okur, mevcut cihaz için hangi görüntü boyutunun uygun olduğuna karar verir ve görüntünün o sürümünü görüntüler.

Üçüncü Taraf Kodunun Etkisini Azaltın

Üçüncü taraf komut dosyaları, ana iş parçacığı çalışmasını uzatarak sitenizin performansını düşürebilir. Üçüncü taraf komut dosyalarına örnekler:

• Google Analytics
• JavaScript ve yazı tipleri için kitaplıklar
• Reklamlar ve diğer içerikler için iFrame'ler
• YouTube video yerleştirmeleri
• Sosyal medya paylaşım düğmeleri ve beslemeleri

Bunlardan bazıları web siteniz için gerekli olsa da etkilerini en aza indirmenin yolları vardır:

1. JavaScript'in yüklenmesini erteleyin
2. Google Analytics gibi üçüncü taraf komut dosyalarını yerel olarak barındırın
3. Ön bağlantı özelliklerine sahip bağlantı etiketlerini kullanın

Aşırı DOM Boyutundan Kaçının

Belge Hedef Modeli (DOM), tarayıcıların HTML'yi nesnelere nasıl dönüştürdüğüdür. Her nesneyi temsil eden birkaç ayrı düğüme sahip bir ağaç yapısı kullanır. DOM boyutu ne kadar büyük olursa, web sayfanızın yüklenmesi o kadar uzun sürer.

Google PageSpeed ​​Insights, düğüm sayısını ve CSS stilinizin karmaşıklığını azaltmanızı önerecektir.

Ayrıca GZIP sıkıştırması kullanan veya daha duyarlı bir tasarıma sahip hafif bir web sitesi teması kullanmalısınız. Ağır temalar, DOM'a daha fazla hacim öğesi ekler ve sayfa yükleme hızlarını yavaşlatan kıvrımlı bir stile sahip olabilir.

Sana doğru

Google PageSpeed ​​Insights, daha az teknik bilgiye sahip olanlar da dahil olmak üzere site sahipleri ve pazarlamacılar için paha biçilmez bir araçtır. PSI raporundaki önerileri takip ederek (ancak mükemmel bir puan almayı takıntı haline getirmeyerek), web sitenizin SERP'lerdeki sıralamasını yükselteceğinizden emin olabilirsiniz.