-Reklam-
Bilgisayar Mühendisliği

Google Pagespeed İle Site Hızlandırma Rehberi

Site hızlandırma hem Google sıralama kriterleri arasında olması, hem de kazanç ve kullanıcı deneyimini doğrudan etkilemesi sebebiyle önemlidir. İşte Google Pagespeed hatalarının çözümleri ile site hızlandırma rehberi!

-Reklam-
 

Site Hızlandırma Nedir: İnternet sitesini yavaşlatan faktörlerin tespit edilip, ilgili sorunların çözüme kavuşturularak kullanıcı deneyimi ve SEO performansını arttırmak amacıyla yapılan teknik çalışmalardır. Bu çalışmalarda genellikle Google pagespeed insights aracı ve bu hataların çözümleri kullanılır.

Bu yazıda sırasıyla çarpıcı örnekler ile site hızlandırma çalışmalarının neden önemli olduğundan, Google Pagespeed İnsights aracından ve bu araçta aldığımız hataların teker teker özel tekniklerle nasıl çözümlenip sitemizin hızını önemli ölçüde nasıl artırabileceğimizden bahsedeceğiz. Lafı uzatmadan konuya girelim.

1- Site Hızlandırma Neden Önemlidir?

Site Hızlandırma Neden Önemlidir: Sitenizi hızlandırarak SEO ve kullanıcı deneyimi konusunda önemli bir iyileştirme yapıyor ve bunun organik trafik ve kazançlar başta olmak üzere hemen hemen her anlamda faydasını görüyorsunuz. Bu konuda şu tarz çarpıcı örnekler de mevcuttur:

-Reklam-
Site Hızlandırma Çalışmaları Neden Önemlidir? [Örnek]
Site Hızlandırma Çalışmaları Neden Önemlidir? [Örnek]

✅ Mobify ana sayfasını %1,11 hızlandırarak gelirini yıllık 380.000$ arttırdı. (Kazançları arttırma)
✅ BBC her 1 saniyelik yavaşlama için ek olarak %10 daha fazla kullanıcı kaybettiklerini gördü. (Hemen çıkma oranını düşürme)
✅ Pinterest, yüklenme hızını %40 arttırıp arama motoru trafiğini (organik trafik) %15 arttırdı. (Daha iyi sıralamalar elde etme)
✅ COOK, 850 mili saniyecik hız artışı sayesinde dönüşüm oranını %7 arttırdı. (Dönüşüm oranını arttırma)

Site hızlandırma işleminde temel amaç sayfanın yüklenme süresini kısaltarak kullanıcı deneyimini ve SEO’nuzu iyileştirmektir.
(Ayrıca Bakınız: Kullanıcı Deneyimi Nedir? Nasıl Geliştirilir?)

Site Hızlandırma İşleminde Temel Amaç Sayfanın Yüklenme Süresini Kısaltmaktır
Site Hızlandırma İşleminde Temel Amaç Sayfanın Yüklenme Süresini Kısaltmaktır

2- Google Pagespeed İnsights Nedir?

Google Pagespeed İnsights Nedir: Google tarafından internet sitelerinin hızlarının detaylı ve kapsamlı bir şekilde analizini yapabilmemiz için sunulan (ve kendisi tarafından da sonuçları baz alınan) bir hizmettir.

-Reklam-

Bu hizmet ile site hızlandırma çalışmaları yapmak adeta puzzle gibidir, çözmesi eğlencelidir ama sinir bozucudur. Sorunların bir kısmını halledersiniz, bir kısmı bozulur.

Sizler de bu hizmet ile ücretsiz olarak kendi internet sitenizin hızını kısa bir sürede detaylı bir şekilde analiz edip yazının devamındaki özel yöntemlerle iyileştirme çalışmalarına başlayabilirsiniz.
Site Hızınızı Test Edin: <Tıklayın>

Google Pagespeed İnsights Nedir? Ne İşe Yarar?
Google Pagespeed İnsights Nedir? Ne İşe Yarar?

Google Pagespeed İnsights İle Site Hızlandırma

Google Pagespeed İnsights aracı ile site hızlandırma yaparken sayfanın yüklenme süresini ölçen ilk zengin içerikli boya (LCP), sitenin interaktifliğini ölçen ilk giriş gecikmesi (FID) ve görsel stabilasyonunu ölçen kümülatif düzen kayması (CLS) değerlerini optimize etmek gerekir. Peki bu değerler nelerdir ve nasıl iyileştirilir?

-Reklam-

Google Pagespeed İle Site Hızlandırma İşleminde Önemli Web Verileri Nelerdir?
Google Pagespeed İle Site Hızlandırma İşleminde Önemli Web Verileri Nelerdir?

İlk Zengin İçerikli Boya Nedir (FCP): Cihazın ilk baştaki görüş alanında görünen en büyük resmin veya metin bloğunun oluşma süresine verilen isimdir. Bu metrik sitenin yüklenme süresini ifade eder. Peki ilk zengin içerikli boya süresi (FCP) nasıl kısaltılır? Şöyle:

• Sunucu yanıt süresini kısaltın.
• Oluşturmayı engelleyen kaynakları ortadan kaldırın.
• Önemli kaynakları önyükleme ile yükleyin. (Preload)
• Sitedeki görselleri her açıdan optimize edin.
• Blog yazılarında öne çıkarılan görsel kullanmayın.

İlk Zengin İçerikli Boya (FCP) ve En Büyük Anlamlı Boya (LCP) Örneği
İlk Zengin İçerikli Boya (FCP) ve En Büyük Anlamlı Boya (LCP) Örneği

İlk Giriş Gecikmesi Nedir (FID): Bir kullanıcının bir sayfayla ilk etkileşimde bulunduğunda (bir bağlantıya tıklama, bir düğmeye dokunma…) tarayıcının bu komutları işlemeye başlayabileceği süreyi ölçer. Bu metrik sitenin etkileşim ve yanıt verme süresi yani interaktiflik miktarını ölçer. Peki ilk giriş gecikmesi süresi (FID) nasıl kısaltılır? Şöyle:

• Uzun işlemleri parçalara ayırın.
• Sayfanızı etkileşime hazır olması için optimize edin.
• Web çalışanı (web worker) kullanın.
• JavaScript yürütme süresini azaltın.

-Reklam-

İlk Giriş Gecikmesi (FID) Örneği
İlk Giriş Gecikmesi (FID) Örneği

Kümülatif Düzen Kayması Nedir (CLS): Sayfa yüklenirken, görünür olan bileşenlerin yüklenen diğer bileşenlerin etkisiyle bir çerçeveden diğerine kaymasına verilen isimdir. Bu metrik sayfanın görsel stabilasyon değerini ifade eder. Peki kümülatif düzen kayması değeri (CLS) nasıl azaltılır? Şöyle:

• Görselleri boyut ve uzunluk özelliklerini belirterek kullanın.
• Boyut özellikleri olmayan reklam, çerçeve ve bileşenler kullanmayın.
• Dinamik olarak enjekte edilen içerikler kullanmaktan kaçının.
• Yüklenince değiştirilen (swap) ve yüklenene kadar görünmez olan yazı tipleri kullanmayın.
• DOM’u güncellemeden önce ağ yanıtı bekleyen işlemlerden kaçının.

Kümülatif Düzen Kayması (CLS) Örneği
Kümülatif Düzen Kayması (CLS) Örneği
Inline Critical CSS İşlemine Bir Örnek
Inline Critical CSS İşlemine Bir Örnek

Google Pagespeed Hataları ve Çözümleri

1- Sunucu Yanıt Sürelerini Kısaltın (TTFB)

Sunucu Yanıt Süresi Nedir: İnternet sunucusuna belirli bir istek gönderen bir internet tarayıcısı ile sunucunun gönderilen isteği yanıtlaması arasında geçen süreyi belirtir. Araştırmalara göre bu süre 3 saniyeyi geçtikten sonra kullanıcıların %40’ı siteyi girmeden terk ediyor.

Sunucu yanıt süresi sitenin trafiğine, sitenin kaynak kullanımına, kullandığınız sunucuya ve sunucunun özelliklerine bağlıdır. Peki sunucu yanıt süresi nasıl kısaltılır?

-Reklam-

Çözüm:
.#. Sitenizde kullandığınız temanın kötü kodlanmış olmadığından emin olun. Aşırı fonksiyonel veyahut aşırı tasarımsal özellikleri olan temalar siteyi yavaşlatırlar. Bu konuda Webmaster platformlarında uzmanlardan destek alabilirsiniz.
(Ayrıca Bakınız: Başarılı Bir Yazılımın Özellikleri Nelerdir?)

.#. Paylaşımlı sunucu pişmanlıktır ki zaten ucuz etin yahnisi yenmez. Sizinle aynı sunucuda olan birisi saldırı yer, aynı sunucuda bulunuyorsunuz diye siz de etkilenirsiniz. Bu sebeple VDS ve VPS gibi günümüz teknolojisine uygun sunucular tercih etmelisiniz.

Site Hızlandırma Konusunda Sunucu Seçimi Hayati Öneme Sahiptir
Site Hızlandırma Konusunda Sunucu Seçimi Hayati Öneme Sahiptir

.#. Ön bellek (cache) eklentisi kullanmayı düşünün. Eğer kullanıyorsanız da, aynı eklentinin ayarlarıyla oynamayı veya doğrudan farklı eklentiler deneyip, en iyi sonucu vereni kullanmayı düşünebilirsiniz.

.#. Aktif olup olmaması fark etmez, sunucuda kurulu ama kullanmadığınız, gereksiz (veya az gerekli) ne kadar eklenti varsa kaldırın. Ayrıca işini tema dosyalarına ekleyeceğiniz sadece bir kaç satır kod ile yaptırabileceğiniz ne kadar eklenti varsa onları da kaldırın.

-Reklam-

.#. Sunucuda %100 CPU ve %100 RAM sorunlarının olmadığından emin olun. Bu arada iyisinden bir ön bellek eklentisini de sunucu yanıt süresi hatasının çözümü için kullanabilirsiniz.

.#. CDN kullanmayı, yazının devamında detaylıca bahsettiğimiz CSS ve JS optimizasyonu yapmayı ayrıca yazı fontlarını kapatmayı da deneyebilirsiniz.
Veya işin ehli birisine sağlam bir SQL sorgusu yazdırabilirsiinz.
(Ayrıca Bakınız: Sunucu Yanıt Süresi Nasıl Kısaltılır?)

Sunucu Yanıt Süresi Nedir? Nasıl Kısaltılır?
Sunucu Yanıt Süresi Nedir? Nasıl Kısaltılır?

Google Pagespeed İnsights Diyor Ki: İlk Bayt Zamanı, sunucunuzun yanıt gönderme zamanını tanımlar. 

Temalar, eklentiler ve sunucu özellikleri ögelerinin tümü sunucunun yanıt süresini etkiler. Bir optimizayon eklentisini dikkatle seçerek ve/veya sunucunuzu yeni sürüme geçirerek, daha ileri düzeyde optimize edilmiş bir tema bulmayı düşünün.

-Reklam-

(2) Ekran Dışındaki Resimleri Ertele

Sitenin yüklenip içeriğin görüntülenebilmesi için dosyaların indirilmesi gerekir. Standart bir sitede sayfanın başından sonuna kadar her şey indirilir. Burada sorun şu ki, burada görseller, videolar, özellikle reklamlar ve benzeri şeyler bu boyutu ciddi şekilde arttırır.

Bu durum da sunucu yanıt süresini arttırarak Google pagespeed insights hatasına yol açar. Bu sorunun çözümü ekran dışındaki resimleri ertelemek yani lazy load eklentisi kullanmaktır. Yani şudur:

Lazy Load Sayfadaki Görsel Sayısı Kaç Tane Olursa Olsun Sitenizi Ciddi Ölçüde Hızlandırır
Lazy Load Sayfadaki Görsel Sayısı Kaç Tane Olursa Olsun Sitenizi Ciddi Ölçüde Hızlandırır

Çözüm: Lazy load diye tabir ettiğimiz; görsel, video, reklam ve benzerlerinin sayfayı aşağı indirdikçe yüklenmesini sağlayan eklentilerden kurarak hem bu sorunu çözebilir hem de site hızlandırma yapmış olursunuz.
(Ayrıca Bakınız: Lazy Load Nedir? Ne İşe Yarar?)

Google Pagespeed İnsights Diyor Ki: Etkileşim için hazır olma süresini kısaltmak için ekran dışı ve gizli resimleri, tüm kritik kaynakların yüklenmesi bittikten sonra gecikmeli olarak yükleme seçeneğini değerlendirin.

-Reklam-

Ekran dışı görüntüleri erteleme veya bu işlevselliği sağlayan bir temaya geçiş yapma olanağı veren bir lazy load eklentisi yükleyin. Ayrıca AMP eklentisini kullanmayı da değerlendirin.

Lazy Load Sayesinde Sayfanın Başındaki Resimler Hemen Yüklenir, Altındakiler İse Sayfayı Kaydırdıkça Yüklenir
Lazy Load Sayesinde Sayfanın Başındaki Resimler Hemen Yüklenir, Altındakiler İse Sayfayı Kaydırdıkça Yüklenir

(3) Web Yazı Tipi Yüklemesi Sırasında Metnin Görünür Halde Kalmasını Sağlayın

Standart bir internet tarayıcısı yazı tiplerinin yüklenmesini bekledikten sonra onları görünür hale getirir. Başka bir ifade ile, bu yükleme yapılana kadar sadece beyaz boş bir alan bulunmaktadır.

Bunun sonucunda site yavaş açılır, gereksiz yere işlemci gücü harcanır. Belki ziyaretçiler boş bir sayfaya bakıyormuş gibi görüyor bile olabilirler. Bundan dolayı Google pagespeed insights bize bu hatayı verir.

Yazı Tiplerini (Fontları) Kapatarak İnternet Sitenizi Hızlandırabilirsiniz
Yazı Tiplerini (Fontları) Kapatarak İnternet Sitenizi Hızlandırabilirsiniz

Çözüm: Oldukça basittir, kullandığınız özel bir yazı tipi (font) varsa CSS ilgili satırına şu kodu ekleyin:

font-display: auto;
/* Örnek bir kullanım
@font-face {
font-family: ‘Arvo’;
font-display: auto;
src: local(‘Arvo’), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format(‘woff2’);
}

Google Pagespeed İnsights Diyor Ki: Web yazı tipleri yüklenirken kullanıcının metni görebilmesini sağlamak için yazı tipi görüntüleme CSS özelliğinden yararlanın.

Site Hızlandırma Google Pagespeed İnsights Hataları ve Çözümleri ile Yapılır
Site Hızlandırma Google Pagespeed İnsights Hataları ve Çözümleri ile Yapılır

(4) Ana İş Parçacığı Çalışmasını En Aza İndir

İnternet sitenizin güzel bir tasarıma sahip olmasını sağlayan (.CSS) ve fonksiyonel olmasını sağlayan (.JS) dosyaları genellikle bu sorunun en temel sebebidir.

-Reklam-

Orada gördüğünüz değerlerde Style & Layout CSS dosyalarını, Script Evaluation ise JS dosyalarını temsil etmektedir. Bu dosyalara gerekli optimizasyon işlemlerinin yapılmaması sonucu Google pagespeed insights bize bu hatayı verir. Ana sebebi yazı fontlarıdır.

Çözüm:
✅ Javascript dosyalarının yüklemesini geciktiren JS Files Deferred metodunu kullanmak
✅ Kullanılmayan CSS ve JS dosyalarını kaldırmak
✅ CSS ve JS dosyalarının boyunu küçültmek (Minify CSS & JS)

Minify İşlemi İle Dosya Boyutu Nasıl Küçültülür
Minify İşlemi İle Dosya Boyutu Nasıl Küçültülür

✅ CSS dosyalarını tek bir CSS dosyasında birleştirmek
✅ HTML içi CSS dosyalarını harici CSS dosyasına taşımak
✅ Stil (CSS) dosyalarının daha planlı ve daha düzenli olmasını sağlayan Inline Critical Path CSS işlemini yapmak
✅ Görsellere, videolara ve reklamlara lazy load özelliği eklemek
(Ayrıca Bakınız: Lazy Load Nedir? Ne İşe Yarar?)
✅ Site tasarımında sadeleştirmeler yapmak
✅ Sitenizdeki ekstra yazı tiplerini (fontları) kaldırmak veya farklı yükleme metotları deneyip en uygun olanını bulmak

Yazı Tipi (Font) Yükleme Ayarlarını Autoptimize Gibi Eklentiler İle Kolaylıkla Yapabilirsiniz
Yazı Tipi (Font) Yükleme Ayarlarını Autoptimize Gibi Eklentiler İle Kolaylıkla Yapabilirsiniz

Ana iş parçacığı sorunun çözümü hakkında daha detaylı bilgi almak isterseniz, doğrudan bu sorunla ilgili olarak yazılmış “Ana İş Parçacığı Çalışmasını En Aza İndir [Çözüm]” adlı yazımıza göz atabilirsiniz.

Google Pagespeed İnsights Diyor Ki: JS’yi ayrıştırma, derleme ve yürütme için harcanan zamanı kısaltmayı düşünün. Daha küçük JS yüklerinin sağlanması bu konuda yardımcı olabilir.

(5) JavaScript Yürütme Süresini Azaltın

Kullanılmayan, küçültülme yapılmamış, sıkıştırılmamış, derlenmemiş, ön bellek kullanılmayan siteler bu hatayı alırlar. Bu durum sayfa açılış süresini doğrudan etkiler.

-Reklam-

Javascript; Sitenizin Daha Dinamik, Daha İşlevsel Olmasını ve Çift Taraflı Çalışmasını Sağlayan Komut Bloklarıdır
Javascript; Sitenizin Daha Dinamik, Daha İşlevsel Olmasını ve Çift Taraflı Çalışmasını Sağlayan Komut Bloklarıdır

Çözüm:
.#. Kullanıcılara sadece ihtiyaç duyduğu kodu gösterin.
.#. JavaScript kodunuzu küçültün.
.#. JavaScript kodunuzu sıkıştırın.
.#. Kullanılmayan JavaScript kodlarını kaldırın.
.#. JavaScript kodunuzu ön belleğe alın.

Google Pagespeed İnsights Diyor Ki: JS’yi ayrıştırma, derleme ve yürütme için harcanan zamanı kısaltmayı düşünün. Daha küçük JS yüklerinin sağlanması bu konuda yardımcı olabilir.

(6) Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın

Tahmin ettiğiniz gibi, maalesef yine CSS ve JS hatası :) Bu seferki sorun ise bu dosyaların çoğunun sayfanın üst kısmında (header) olmasından ötürü, sayfanın ilk yüklenmesi esnasında gereksiz bir dosya büyüklüğü oluşmasıdır.
(Ayrıca Bakınız: Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırmak)

Çözüm:
-— Site hızlandırma için sayfanın üst kısmında (header) bulunan JavaScript dosyalarını sayfanın alt kısmına (footer) alın ve oradan yüklenmesini sağlayın.
— CSS dosyalarında aynı işlemi yapmayın, zira bu durum sitenin ilk yüklemesinde anlık bir görüntü bozukluğuna sebep olur.
— CSS dosyalarına ise satır içi CSS kullanımı yaparak bu sorunu çözebilirsiniz, üstelik görünümsel bir sorun yaşamadan. Bir taşla iki kuş.
— CSS ve JS dosyalarına minify işlemi yapabilirsiniz. Minify işlemi şu örnekteki gibi boşlukları ve yorum satırlarını kaldırarak dosya boyutunu küçültür:

Minify İşlemi İle Dosya Boyutu Nasıl Küçültülür
Minify İşlemi İle Dosya Boyutu Nasıl Küçültülür

Google Pagespeed İnsights Diyor Ki: Kaynaklar, sayfanızda ilk boyamayı engelliyor. Kritik JS/CSS’yi satır içinde yayınlama ve kritik olmayan tüm JS/stilleri erteleme seçeneğini değerlendirin. (…)

Kritik öğeleri satır içi yapmanıza veya daha az önemli kaynakları ertelemenize yardımcı olabilecek çeşitli eklentiler vardır. Bu eklentilerin sağlayacağı optimizasyonların tema veya eklentilerinizin özelliklerini bozabileceğine dikkat edin. Bunu engellemek için muhtemelen kodda değişiklik yapmanız gerekecektir.

-Reklam-

(7) Statik Ögeleri Verimli Bir Önbellek Politikasıyla Yayınlayın

Statik Öge: Siz değiştirmedikçe değişmeyen şeyler. İçeriklerin başlıkları örnek olarak verilebilir.
Dinamik Öge: Çeşitli zaman aralıklarında değişen şeyler. Anlık online sayısı örnek olarak verilebilir.

Ön Bellek (Cache) Kullanımı Sitenizin Açılış Süresini Azaltır
Ön Bellek (Cache) Kullanımı Sitenizin Açılış Süresini Azaltır

Çözüm:
✅ Sonuç ekranında özellikle uyarı veren bölüm ve sayfalarınız için önbellek uygulaması kullanmanız gerekmektedir.
✅ Eğer önbellek uygulamanız mevcut ise ama yine de bu hatayı alıyorsanız site hızlandırma için önbellek süresini arttırmalısınız.
✅ Benzer bir uyarıyı Google Adsense, Google Analytics, Yandex Metrica gibi servisler için de alabileceğinizi belirtelim.

💡 Soru: Neden statik ögeleri ön belleğe alıyoruz, dinamik ögeleri de alsak olmaz mı?
Cevap: İsterseniz alın ama sonra saatlerce aynı görünen kullanıcı sayısı gibi şeyler sitenin kullanılabilirliğini ve anlık veri akışını bozuyor.

Google Pagespeed İnsights Diyor Ki: Uzun önbellek ömrü, sayfanızın tekrar ziyaret edilmesi sürecini hızlandırabilir. Tarayıcı ön belleği ile ilgili bilgi edinin.

(8) Üçüncü Taraf Kodun Etkisini Azaltın

Üçüncü Taraf Kod Nedir: Google Analytics, Google Adsense, Yandex Metrica, video oynatıcıları, sosyal paylaşım butonları gibi sitenin işleyişi ile doğrudan alakası olmayan kodlardır.

Neden Programlarımızı Temiz Şekilde Kodlamalıyız
Üçüncü Taraf Kodlar Kod Karmaşıklığını Arttırıp Sitenizi Yavaşlatır

Çözüm:
.#. Pagespeed İnsights uygulamasında size uyarı veren üçüncü taraf kodlardan önemsiz olanları kaldırın.
.#. Eğer sitenizin işleyişi bozulmuyorsa, bu kodları üst kısımda (header) yükletmek yerine alt kısımda (footer) yüklenmesini sağlayın.
.#. Temiz kodlamaya sahip olmak için gereksiz ek kodlar kullanmayın.

-Reklam-

Google Pagespeed İnsights Diyor Ki: Üçüncü taraf kodu, yükleme performansını önemli ölçüde etkileyebilir. Yedekli üçüncü taraf sağlayıcıların sayısını sınırlayın ve öncelikle sayfanızın yüklenmesi tamamlandıktan sonra üçüncü taraf kodunu yükleyin.

Temiz Kodlanmış Temalar Kullanmak En Kısa Yoldan Site Hızlandırma İşlemidir
Temiz Kodlanmış Temalar Kullanmak En Kısa Yoldan Site Hızlandırma İşlemidir

(9) Resimleri Verimli Bir Şekilde Kodlayın & Resimleri Yeni Nesil Biçimde Yayınlayın

Bu iki hatanın da sebebi benzerdir. Resimlerinize ilgili optimizasyon işlemlerinin yapılmamasından kaynaklanır. Çözümleri ise oldukça basittir:

Çözüm:
.#. Resimlerin kalitesini düşürmeden, dosya boyutunu küçülten siteler ve eklentiler bulunmaktadır. Bunları kullanın ve site hızlandırma konulu ilk uyarının üstesinden gelin.
.#. Veyahut, yine resimlerin kalitesini düşürmeden, yeni nesil biçimlere çeviren, üstelik bu sayede dosya boyutlarını da ciddi şekilde küçülten siteler, programlar ve eklentiler bulunmaktadır. Bunlar ile iki sorunu birden çözebilirsiniz.
(Ayrıca Bakınız: Dosya Uzantısı Nedir? Nasıl Değiştirilir?)

Yeni Nesil Resim Formatları Daha Küçük Dosya Boyutuna Sahiptir
Yeni Nesil Resim Formatları Daha Küçük Dosya Boyutuna Sahiptir

Eski Nesil Biçimler: PNG, JPEG…
Yeni Nesil Biçimler: JPEG 2000, JPEG XR, WebP…

Google Pagespeed İnsights Diyor Ki: Resimleri verimli bir şekilde kodlayın. Optimize edilmiş resimler daha hızlı yüklenir ve daha az hücresel veri kullanır. 

Resimleri yeni nesil biçimlerde yayınlayın. JPEG 2000, JPEG XR ve WebP gibi resim biçimleri genellikle PNG veya JPEG’den daha iyi sıkıştırma sağlar. Böylece indirme işlemleri daha hızlı tamamlanır ve veri tüketimi daha az olur.

-Reklam-

Site Hızlandırma En Önemli Site İçi SEO Adımlarından Birisidir
Site Hızlandırma En Önemli Site İçi SEO Adımlarından Birisidir

(10) CSS’yi Küçültün & JavaScript’i Küçültün

Her ne kadar üstte açıklamış olsak da, direkt yazının burasını okuyan birisi vardır diye tekrardan açıklayalım. CSS ve JavaScript dosyaları kod satırlarıdır. Bir çok kodda olduğu gibi; bunların arasında da dosya boyutunu şişiren, dosyanın okunma süresini uzatan boşluklar ve yorum satırları bulunmaktadır.

İşte bu yorum satırlarını ve boşlukları kaldırarak bu dosyaların boyutlarını küçültebiliriz. Aynı zamanda bunları sıraya sokup, derleyip, sıkıştırarak daha da etkili bir işlem yapabiliriz.

Çözüm:
✅ Kullanılmayan CSS ve JS dosyalarını kaldırmak
✅ Bu dosyaları MİNİFY işlemi ile küçültmek
✅ Bu dosyaları GZİP işlemi ile sıkıştırmak

GZIP Sıkıştırması Sayfa Boyutunu Küçülterek Site Hızlandırma Yapar
GZIP Sıkıştırması Sayfa Boyutunu Küçülterek Site Hızlandırma Yapar

Site Hızlandırma Profesyonel İpucu: Bu kadar eklentiyi kurunca, bu seferde sunucu yanıt sürelerini kısaltın hatası almaya başlayabilirsiniz. Bu sebeple içerisinde olabildiğince çok fonksiyon içeren eklentileri tercih ediniz.

Google Pagespeed İnsights Diyor Ki: CSS / JavaScript dosyalarının küçültülmesi ağ yükü boyutlarını azaltabilir ve komut dosyası ayrıştırma süresini kısaltabilir.

Çeşitli eklentiler stillerinizi (CSS) ve komut dosyalarınızı (JS) sıralayarak, küçülterek ve sıkıştırarak sitenizi hızlandırabilir. Ayrıca mümkünse bu küçültme yapmak için bir derleme işlemi kullanmak isteyebilirsiniz.

(11) Aşırı Büyük Bir DOM Boyutundan Kaçının

Temel programlama konseptlerini bilenler, bir kodda iç içe döngülerin, iç içe satırların yani kodun derinliğinin arttıkça o kodun çalışma hızının azaldığını bilirler.
(Ayrıca Bakınız: Başarılı Bir Yazılımın Özellikleri Nelerdir?)

İşte burada da bizlere, “Çok fazla kod derinliği oluşturmayın” şeklinde bir uyarı yapılmaktadır. Zira kod derinliği arttıkça HTML yapımız sıkılaşacak ve karmaşık hale gelecek dolayısıyla site yavaşlayacaktır.

-Reklam-

DOM Nedir? DOM İle Site Hızlandırma
DOM Nedir? DOM İle Site Hızlandırma

İdeal DOM (Document Object Model) büyüklüğü 0-1000 arasıdır fakat 1500 civarına kadar başka konulardaki site hızlandırma iyileştirmeleri ile telafi edilebilmektedir.

Çözüm:
✅ Sayfa düzeniniz için iç içe geçmiş tablolar kullanmak yerine grids.css, fonts.css ve reset.css gibi opsiyonları kullanabilirsiniz.
✅ Sayfa düzenini düzeltmek için erişilen elementlere ön belleğe alınmış yönlendirmeler yapabilirsiniz.
✅ Nodları çevrim dışı güncelleyebilirsiniz.
✅ JavaScript kullanımından kaçınabilirsiniz.

Google Pagespeed İnsights Diyor Ki: Tarayıcı mühendisleri, sayfaların yaklaşık olarak 1.500’den az DOM ögesi içermesini önerir. En iyisi, 32 ögeden ve 60 alt/üst ögeden az olan bir ağaç derinliğidir. Büyük bir DOM, bellek kullanımını artırarak daha uzun stil hesaplamalarına, yol açabilir ve yüksek maliyetli düzen yeniden düzenlemelere.

(12) Kullanılmayan CSS’i Kaldırın

Akıl var mantık var, kullanılmayan dosyayı niye boş yere orada tutup, her kullanıcının yüklemesini sağlayıp giriş sürelerini uzatıyorsunuz? Aldığımız puanı geçtim, her şeyden evvel kullanıcıya yazıktır.

Kullanılmayan CSS’i Tespit Etme:
Google Chrome geliştirme araçlarında kod kapsamını çalıştırmayı deneyin. Sorumlu tema veyahut eklentiyi stil sayfasının URL bağlantısından belirleyebilirsiniz. Listede çok sayıda stil sayfasına sahip olan ve kod kapsamında çok sayıda kırmızı işaret taşıyan eklentileri arayın. Bir eklenti sadece sayfada gerçekten kullanılan bir stil sayfasını kuyruğa almalıdır.

CSS - HTML Farkı
CSS – HTML Farkı

Çözüm:
.# Site hızlandırma için ise kullanılmayan bu dosyaları tespit edip kaldıracaksınız.
.# Eğer bulup kaldırmaya üşeniyorsanız, en azından yüklenmelerini erteleyin ve site hızlandırma işlemi yapın. (Sayfanın en alt kısmına, footer bölümüne alın)
.# CSS dosyalarının boyutunu gereksiz şekilde büyüten eklentiler varsa onları da ayrıca kaldırın. (Tek tek eklentileri kaldırıp test edebilirsiniz)
.# Bu duruma kullanılmayan kütüphanelerin sebep olabileceğini de unutmayın.

-Reklam-

Google Pagespeed İnsights Diyor Ki: Ağ etkinliğinin gereksiz yere kullandığı bayt sayısını azaltmak için, kullanılmayan kuralları stil sayfalarından kaldırın ve ekranın üst kısmında içerik için kullanılmayan CSS’nin yüklenmesini erteleyin.

(13) Kritik İsteklerin Derinliğini En Aza İndirin

Bu hatanın altında size şöyle de bir harita verilir, inceleyip anormal bir şey var mı diye göz atın diye:

Google Pagespeed ile Site Hızlandırma Önerileri
Google Pagespeed ile Site Hızlandırma Önerileri

Aslında bakmayın böyle organik trafik çekmek için madde madde her şeyi ayrı yazdığımıza. Üstte uzun uzun açıkladığımız;

✅ Resim optimizasyon işlemleri
✅ CSS / JS boyutu küçültme
✅ Geç yükleme
✅ Inline critical path CSS
✅ Sayfa içeriği sıkıştırma
gibi aklınıza gelebilecek her türlü boyut azaltma, site hızlandırma işlemiyle beraber bu sorun da otomatik olarak çözülmüş oluyor.

(14) Doğru Boyuta Sahip Resimler Kullanın

Doğru boyutta olmayan (çok büyük / çok küçük) resimler hem tasarımsal olarak hoş değildir, hem de sayfa boyutunu büyüterek yüklenme süresini arttırırlar. Yanlış boyuttaki resimler kullanıcı deneyimini öldürür.
(Ayrıca Bakınız: Kullanıcı Deneyimi Nedir? Nasıl Geliştirilir?)

Doğru Boyuta Sahip Resimler Kullanmak ve Ahenkli Bir Tasarım Yapmak Kullanıcı Deneyimini ve Hızı Arttırır
Doğru Boyuta Sahip Resimler Kullanmak ve Ahenkli Bir Tasarım Yapmak Kullanıcı Deneyimini ve Hızı Arttırır

Çözüm:
.#. Resim widget’ını kullanın veyahut resimleri medya kitaplığı (kütüphanesi) ile ekleyin. Zira resimlerin mobil / masaüstü için dinamik olarak ölçekli boyutlar alması gerekir.
.#. Tam boyutlu resimler kullanmaktan olabildiğince kaçının.

-Reklam-

Not: Sorunun çözülüp çözülmediğini test etmeden önce tarayıcı ön belleğini temizlemeyi unutmayın. Yoksa aynı şeyi görme ihtimaliniz yüksektir.

(15) Birçok Sayfa Yönlendirmesini Önleyin

Bir bağlantıya girdiniz, o bir yere, o bambaşka bir yere, oradan başka bir yere… Bu oyalamaların sonucunda siteye girebildiniz. Bu yanlıştır, açılış zamanını uzatır ve kullanıcı deneyimini öldürür.

Google Pagespeed İnsights Diyor Ki: Yönlendirmeler, sayfanın yüklenmesinden önce ek gecikmelere neden olur.

Site hızlandırma için aradaki gereksiz yönlendirmeleri tespit edip, direkt olarak ilgili sayfada 301 yönlendirmesi yapmanız önerilir.

Arama sonuçlarında daha iyi sıralamalar elde etmek için site hızlandırma oldukça önemlidir fakat tek başına yeterli değildir. Diğer site içi SEO kriterleri için “Site İçi SEO Nedir? Nasıl Yapılır? [Rehber]” adlı yazımıza göz atabilirsiniz.

(16) Kaydırma Performansını Artırmak İçin Pasif İşleyicileri Kullanmıyor

Bunu yapmak için ilgili dosyada document.addEventListener fonksiyonunda parantez içinde şu formatta olan ifadelerde 3. parametreyi !0 gibi değerler yerine, {passive: true} olarak değiştirin. Ama dosyada kayıp yaşamamak için dosyayı yedekleyin.

document.addEventListener('touchstart', onTouchStart, {passive: true});

Sayfanızın kaydırma performansını artırmak için dokunma ve ve tekerlek etkinliği işleyicilerini `passive` olarak işaretlemeyi değerlendirin

Site Hızlandırma İçin Diğer Taktikler

– Metin sıkıştırmayı etkinleştirin: Bu sayede toplam sayfa boyutunu azaltmış olursunuz. Sıkıştırma için Google tarafından gzip, deflate veya brotli önerilmektedir.

-Reklam-

GZIP Sıkıştırması Sayfa Boyutunu Küçülterek Site Hızlandırma Yapar
GZIP Sıkıştırması Sayfa Boyutunu Küçülterek Site Hızlandırma Yapar

– İstek sayısını az ve aktarma boyutlarını küçük tutun: Ne kadar az istek, (HTTP, SQL sorgusu) ve ne kadar az aktarma boyutu o kadar iyi site hızlandırma işlemi.

Bunun için Google bize sayfa kaynaklarının miktarlarının ve büyüklüklerinin ne olacağını belirlemek için sınırlandırmalar belirleyebileceğimiz bir budget.json dosyası kullanmamızı öneriyor.

– Çok büyük miktardaki ağ yüklerinden kaçının: Üstte belirttiğimiz resim optimizasyon işlemleri, sayfa boyunu küçültmek adına yaptığımız her türlü işlem site hızlandırma adına otomatikman bu sorunu da halledecektir.

Bunlara ek olarak uzun ve büyük içerikleri sayfalara bölebilir veyahut yorumların ilk başta yüklenmemesi için bir ayar / eklenti kullanabilirsiniz.

– Önemli istekleri önceden yükleyin: Mevcut durumda sayfa yüklemesinden sonra istenen kaynakları daha önce getirmek için şu kodu kullanabilirsiniz:

<link rel=preload>
Uyumlu Tasarıma Sahip ve Hızlı Siteler İyi Bir Kullanıcı Deneyimi Yaşatırlar
Uyumlu Tasarıma Sahip ve Hızlı Siteler İyi Bir Kullanıcı Deneyimi Yaşatırlar

– Gerekli kaynaklara önceden bağlan: Önemli üçüncü taraf kaynaklarına erken bağlantılar oluşturmak için ‘preconnect’ veya ‘dns-prefetch’ kaynak ipuçları ekleme seçeneğini değerlendirin.

– Animasyonlu içerik için video biçimleri kullanın: Veri tasarrufu için önerilen bir eylemdir. Nasıl resimlerde yeni nesik PNG / WebP kullanmamız öneriliyor ise animasyonlarda da site hızlandırma için GIF yerine MPEG4 / WebM kullanmamız önerilmektedir.

-Reklam-

-Kullanıcı zamanlaması işaretleri ve ölçüleri: Gerçek dünya kullanıcılarına karşı sitenizin performansını görüp daha gerçekçi veriler elde etmenizi sağlar. (User Timing API)

Sayfa Açılış Hızı ve Hemen Çıkma Oranı İlişkisi
Sayfa Açılış Hızı ve Hemen Çıkma Oranı İlişkisi
Sayfa Açılış Hızı ve Sayfa Görüntülenme Sayısı İlişkisi
Sayfa Açılış Hızı ve Sayfa Görüntülenme Sayısı İlişkisi

Google Pagespeed İnsights ile Site Hızlandırma – Son Söz

Site hızlandırma işlemi elbette site içi SEO ve sıralamalar için hayati derecede önemlidir, başta kanser eden bir yap boz oyunu gibi gelebilir ama zevklidir. Unutmayın ki başarının sırrı azimdir.
(Ayrıca Bakınız: Nasıl Başarılı Olunur?)

Fakat bu puanları yükselteceğiz diye kullanıcı deneyimi (UX) tasarımdan, özgünlükten ve kaliteden taviz vermeyin. Belki tasarımdan taviz verebilirsiniz. Önemli olan şeyin ilk renkli boyama (FCP) ve ilk giriş gecikmesi olduğunu unutmayın; gerisi geç yükleme falan ile düzeltilebilen şeylerdir.

Google Pagespeed İnsights Puanı Önemli Değildir, Sitenizin Açılış Süresi Önemlidir
Google Pagespeed İnsights Puanı Önemli Değildir, Sitenizin Açılış Süresi Önemlidir

İnternet sitenizde yaptığınız hataları ve çözüm yollarını öğrenerek sitenizin performansını arttırmak adına detaylı bilgiye “SEO Nedir? Nasıl Yapılır? [Rehber]” adlı yazımıza ulaşabilirsiniz.

Technogezgin.com Bilgi
Site hızlandırma: Google Pagespeed İnsights hataları ve çözümleri” konulu yazımız hakkında eklemek istediklerinizi, sorularınızı ve (eğer varsa) yazıdaki yanlışları yorumlarda belirtebilirsiniz.

Bilgi güçtür, paylaştıkça büyür. Bu sebeple bu yazıyı da; yazının altındaki (logolu) paylaşım tuşlarını kullanarak gönül rahatlığı ile paylaşarak bize büyük bir iyilik yapabilirsiniz.

Ana Sayfa: 
https://www.technogezgin.com/
Hayata Dair Özgün ve Kaliteli Yazılarımız: 
https://www.technogezgin.com/blog/

Etiketler
Google Optimizasyon Pagespeed Insights Site Hızlandırma

Yazar: MrKaptanTR

Hacettepe Üniversitesi'nde bilgisayar mühendisliği öğrencisi, aynı zamanda technogezgin.com internet sitesinin de kurucusu. Kafaları açan, bilgi hazinelerine değer katan, bakış açılarını adeta uçuran, “Vay be, adamlar bunu da mı yapmış?” dedirtecek cinsten içerikler üretmeye çalışan birisi.

24 Yorum

  1. Merhaba,

    bir türlü sitemin mobil istatistilerini 30 un üstene çıkaramadım. inanılmaz derece yavaş görünüyor. newspaper temasından kaynaklanıyor. gtmetrix 90 75 gibi skor verirken google speed 70 25 gibi skor veriyor.

    1. Hocam, reklamlar varken bu ciddi düşüşler normal :)
      Şuan masaüstü puanınız 68 ama açılış (FCP) süresi 1 saniyeden kısa yani olması gerektiği gibi. Fakat mobilde 3 saniyeden fazla. Hocam bunun gerçekten işe yarayan 2 çaresi var; önbellek eklentisi kullanmak ve (en iyi çözüm olarak) işi bilen birisine sitenize özel SQL sorgusu yazdırmanız. :)

  2. Paylaşım için teşekkürler.

    Adsense kullanıyorsanız, en baba cache eklentisi bile harici yüklemelere müdehale edemez hız kaybı kesindir. Her testte farklı sonuç 60,70, 80 vb. çıkar çünkü reklam görseli şekli değişir

    Yinede sitenizin olabildiğince hızlı olması harici yüklemelerin etkisini azaltır

  3. Merhabalar,
    ‘Kaydırma performansını artırmak için pasif işleyicileri kullanmıyor’ başlığındaki kodu WordPress sitede hangi dosyaya ekliyoruz.?

    İyi Çalışmalar….

      1. O yazınızı da okudum ancak sanırım anlamadım.Dolayısı ile de yapamadım.Daha önce bu hatayı almıyordum Lite Speed Kurduktan sonra olduğunu düşünüyorum.Eklentiyi kaldırdım ancak sorunum devam ediyor.Hangi dosya olduğu konusunda destek verirseniz düzenlemeyi yapabilirim.

      2. Optimize olmayan dosyanın URL’sini pagespeed’de siteyi teste sokup çıkan hata mesajının üzerine tıklayınca gösteriyor hocam. Daha sonra yönetim panelinden sorunlu dosyayı bulduktan linkini attığım yazıda anlattığım gibi düzenleyin. Tabi yedek almayı da unutmayın.

  4. Evet onu görüyorum ancak cache dosyası olduğu için ön bellek temizlendiğinde siliniyor ve başka farklı bir dosya oluşuyor.

    1. O zaman ilgili önbellek eklentisini kapatın, tekrar test yapın. Orijinal sorunlu dosyayı gösterecektir. Orijinal dosyayı optimize ettikten sonra tekrardan önbellek eklentisini aktifleştirebilirsiniz.

  5. Site hızlandırma konusunda internetteki diğer içeriklerin haricine çok güzel bir içerik olmuş, elleriz dert görmesin hocam :)

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu
Kapalı