Sayfa yükleme süresini nasıl optimize eder ve SEO'nuzu nasıl geliştirirsiniz?

Delicesine sabırsız bir dünyada yaşıyoruz. Kaliteli içeriği hızlı bir şekilde sağlamak, birkaç yıl önce imrenilecek bir başarıydı. Bugün, herhangi bir iş için ilkel bir gerekliliktir.

İnsanları web sitenize erişmek için ne kadar uzun süre bekletirseniz, geri dönme olasılıkları o kadar yüksek olur. Yavaş bir web sitesi, hemen ilgilenilmesi gereken ciddi bir sorundur.

Neden? Niye?

%3'lük bir dönüşüm oranınız olduğunu varsayalım. Her 100 tıklama için üç potansiyel müşteri elde edersiniz. Şimdi, açılış sayfanız dinozor yıllarında yüklendiği için üçü de geri dönerse ne olur? Alt satırınızdaki etkiyi hayal edin.

Bu yazıda, bu senaryodan nasıl kaçınacağınızı göstereceğiz. Sayfa yükleme sürenizi optimize etmenin 5 adımı vardır.

Birinci Adım: Mevcut sayfa yükleme hızınızı bulun.

Google PageSpeed ​​Insights ve GTMetrix, sayfa hızını hesaplamak için kullanışlı araçlardır. Her ikisi de hızı engelleyen faktörleri listeler. Ancak GTMetrix, sayfanızın yüklenmesinin kaç saniye sürdüğünü size söyler.

Etki alanı URL'nizi GTMetrix'e ekleyin ve aracın sihrini gerçekleştirmesine izin verin.

Birkaç saniye içinde sayıları dolduracak ve size bir not verecektir.

Ayrıca, sayfanın her bir öğesinin yüklenmesinin ne kadar sürdüğünü de gösterir. Örneğin, yukarıdaki resme göre, FCP'nin veya İlk Renkli Boya'nın yüklenmesi 5.5 saniye sürdü. Toplam sayfa yükleme süresi tembel bir 7,3 saniyedir!

Araç ayrıca sayfa yükleme hızınızı artırmak için bir öneri listesi de sunar…

…ve birkaç ipucu daha:

Gelecek bölüm, GTMetrix'te nasıl daha hızlı bir hız puanı alınacağını ayrıntılı olarak açıklamaktadır.

İkinci Adım: Sayfa yükleme hızını artırmak için web sitenizi optimize edin.

SEO Görüntü Optimizasyonu için İpuçları

Görüntü boyutu nasıl küçültülür?

Her web sitesi, istek üzerine sunuculardan yüklenen bir dosyadır. Hızlı yüklemeyi desteklemek için bu dosya boyutunun minimum olmasını istiyorsunuz.

Görüntüler genellikle çok büyük boyuttadır! Yüklemeleri çok uzun sürüyor.

Ancak akıllıca kullanılırlarsa muazzam bir değer katarlar. Örneğin, GTMetrix'in görüntüleri size bir referans verirken amacımı daha iyi ortaya koymama yardımcı oldu.

Görüntüleri ortadan kaldırmamalıyız, ancak kullanımlarını optimize edebiliriz. Bunlar, görüntü boyutunu küçültmenin 4 yöntemidir.

• Görüntü Sıkıştırma
• Görüntüleri Kırpma
• Görüntüleri Yeniden Boyutlandırma

Görüntü Sıkıştırma

Kullandığınız resimlerin boyutunu küçültün. Bu dosya boyutunu küçültme işlemine görüntü sıkıştırma denir. Görüntüler bir katman yığınıdır; her katman bir lezzet katıyor. Sıkıştırma, görüntüyü keskinleştiren katmanları kaldırarak sayfa boyutunu küçültür.

Bu, görüntü kalitesini etkiler, ancak size SEO puanları kazandırarak telafi etmekten çok daha fazlasını yapar.

Daha az disk alanı kapladıkları için resimlerinizi JPG formatında kaydederek başlayın. Bazı bloglar JPEG2000 veya WEBP'yi öneriyor, ancak temamda bu formatta görüntü oluşturma sorunları vardı. Çoğu zaman, JPG iyi çalışır.

Buradan, daha fazla sıkıştırma elde etmenin iki yolu vardır.

1. Görüntüleri çevrimiçi sıkıştır

JPG resminizi sıkıştırmak ve yüklemek için devam edin. Araç, resminizi sıkıştırır ve ne kadar sıkıştırıldığını söyler. Sıkıştırılmış görüntüyü indirin ve web sayfanız için kullanın.

2. Görüntüleri sıkıştırmak için eklentileri kullanın

Eklentileri kullanmanın büyük bir hayranı değilim. Elbette, kod yazamıyorsanız işi kolaylaştırırlar. Ancak web sitenizin mevcut kodunu engelliyorlar. Ancak, dikkate değer bir seçenektir.

Görüntüleri sıkıştırmanıza yardımcı olabilecek tonlarca eklenti var; seçim için şımarıksın. Her neyse, herhangi bir eklentiyi kullanmadan önce 'WordPress sürümünüzle uyumlu' onay işaretini kontrol edin.

Kayıplı/Kayıpsız Sıkıştırma arasında seçim yapın

Sıkıştırma kayıplı/kayıpsız olabilir. Resimlerinizi ne derecede sıkıştırdığınızı açıklar.

Metin ağırlıklı görüntüler için kayıpsız sıkıştırma kullanıyorum. Kayıplı resim metni okunamayacak kadar bulanık olma eğilimindedir. Diğer her şey için kayıpsız sıkıştırma kullanıyorum.

Hangisinin sizin için en iyi çalıştığını deneyin.

Görüntüleri Kırp

Görüntü boyutunu küçültmek için bariz bir yöntem gibi görünüyor – kelimenin tam anlamıyla görüntü boyutunu küçültüyorsunuz – ancak çoğu bunu görmezden gelme eğiliminde.

Blogunuz için işe yarayan resim boyutlarını not alın. Ana görsel ve öne çıkan görsel boyutları tutarlı olmalıdır. Bununla birlikte, gerekli olanı göstermek için destekleyici görseller kırpılabilir.

Örneğin, bu gönderideki ekran görüntülerinin hiçbirinde gereksiz görseller yok. Adres çubuğu veya alt bilgi yok. Her piksel sayfa yükleme süresine eklenir. Gereksiz olanları kaldırın.

MS Paint'te Resimleri Yeniden Boyutlandırın

Kulağa bariz gelen bu yöntem, görünürde gizlenir.

1. Resminizi MS Paint'te açın. Yeniden boyutlandırma seçeneğini göreceksiniz.
2. Yeniden boyutlandırma yüzdenizi ayarlayın ve şimdi boyut ve boyut olarak çok daha küçük bir sürümünüz var. Dosya boyutunda yük tasarrufu sağlar!

Tembel Yükleme Resimleri

Tüm web sitesi verileriniz veri merkezlerinde saklanır ve gerektiğinde alınır; görüntüler farklı değil. Tembel yükleme tekniği, geri alma sürecini ziyaretçinin görsele geçtiği zamana kadar geciktirir.

Ancak o zaman sistem, söz konusu imaja hizmet etmek için gereken kaynakları toplar. Bu teknik, elemanları yalnızca gerektiğinde yükleme için kuyruğa alarak sistemdeki ilk yükü azaltır.

Bu, yalnızca ilk yükleme süresinden tasarruf sağlamakla kalmaz, aynı zamanda bant genişliğini de korur.

Bu sayfada deneyin: aşağı kaydırın ve bir görüntünün daha önce değil, ona ulaştığınızda nasıl yüklendiğini görün.

Lazy Load web sitenize nasıl uygulanır?

a3 Lazy Load eklentisi, tembel yükü hızlı bir şekilde uygulamanıza yardımcı olabilir.

Uygun Yazı Tipi'ni seçin.

Yazı tipi genellikle tasarımın kapsamına girer; nadiren bir performans faktörü olarak görülür.

Ancak sayfa boyutuna katkıda bulunur. GTMetrix'in daha önce tartışılan raporu, Font'un resimlerden sonra en fazla boyutu kapladığını gösteriyor.

Hızlı yükleme hızı için hızlı yüklenen yazı tiplerini seçmelisiniz.

Web sitem için Open Sans kullanıyorum çünkü iş kategorim için süslü olmam gerekmiyor. Yaratıcı bir işiniz varsa, güzellik yönü için biraz sayfa hızından fedakarlık etmek isteyebilirsiniz. Ayrıca, marka kimliğinize katkıda bulunan şık bir yazı tipi istiyorsanız, bunun için gidin. Marka >> Sayfa Hızı.

Kodu sıkıştır

JavaScript(JS) ve Basamaklı Stil Sayfaları(CSS), gördüğünüz her web sayfasını destekleyen kod parçalarıdır. Her ikisi de sayfa yükleme hızını iki şekilde etkiler - sayfa boyutuna eklenirler ve sunucuya işlenmesi zaman alan bir dizi istekte bulunurlar.

Ancak web sitenize biraz stil ve çekicilik eklemeleri gerekiyor. Örneğin, aşağıdaki abonelik kutuma dikkat edin - aşağı kaydırdığınızda başını sallar. Efekti kaçırdıysanız, bu sayfayı yeniden yükleyin ve tekrar deneyin.

Etki dikkat çeker, ancak aşırı kullanılırsa dikkati dağıtır.

Stil ve sayfa hızı arasında bir ödünleşim vardır. Sayfa hızı için stili ortadan kaldırmayın. Ancak kodu optimize etmek sayfa yükleme hızınızı artıracaktır.

Ve işte böyle yaptım:

JS/CSS'yi küçült

Küçültme, gereksiz kod parçalarını ortadan kaldırarak dosya boyutunu azaltır. Bu, tarayıcıların kodu daha hızlı indirmesini ve yürütmesini sağlayarak bant genişliğinden tasarruf sağlar.

Önbelleğe Almadan Yararlanın

Önbellek, web sitenizin kopyalarını saklayan ve her çağrıldığında yükleme ihtiyacını ortadan kaldıran depolama birimidir. Önbelleğe alma ile, ilk kez yüklendikten sonra web siteniz tekrar çağrıldığında daha hızlı yüklenir.

Kodu ve önbelleği küçültmek için LiteSpeed ​​Cache eklentisini kullanıyorum.

Üçüncü adım: Web barındırma sağlayıcınızı değiştirmeyi düşünün.

Aerodinamik bir spor araba Gazyağı ile çalışır mı? Hayır.

Benzer şekilde, iyi optimize edilmiş bir web sitesi, sunucu yalnızca bir sonraki buzul çağına kadar yanıt verirse, sayfa yükleme hızı yavaş olacaktır.

Esas olarak belirsizlik nedeniyle değişikliği yapmakta tereddüt ettim. Ama biraz araştırma yaptım ve Hostinger'ı seçmeye karar verdim ve hiç pişman değilim.

Diğer birçok web barındırıcısı işi sizin için yapar. Bütçenize ve konumunuza göre sizin için neyin işe yaradığına karar verin.

İşte WebHost'unuzu değiştirmek için eksiksiz bir kılavuz.

Dördüncü adım: Bir İçerik Dağıtım Ağı (CDN) kullanın.

Coğrafi mesafe, sayfa hızını büyük ölçüde etkiler. Bir ziyaretçi web sitenizin barındırıldığı yerden ne kadar uzaktaysa, sayfa yükleme süresi o kadar uzun olur.

CDN, dünya çapında birden çok veri merkezinde bulunan küresel sunucuların bir koleksiyonudur. Bir ziyaretçinin ev sunucusu yerine coğrafi olarak daha yakın bir sunucuyla bağlantı kurmasını sağlar. Bunu, farklı ağlar arasındaki değişim noktalarındaki sunuculardan yararlanarak yapar.

Azaltılmış mesafe, web sayfanızın daha hızlı sunulmasını sağlar.

Cloudflare CDN kullanıyorum ve amacına büyük ölçüde hizmet etti.

Beşinci adım (isteğe bağlı): Mobil sayfa yükleme hızını artırmak için Hızlandırılmış Mobil Sayfaları (AMP) kullanın

Kodu küçültmekten bahsettiğimizi unutmayın. HTML, CSS/JS'den daha hafif olan bir kod biçimidir. Stil oluşturmaya izin vermez, ancak HTML, sunucuların web sitenizi yüklemek için ihtiyaç duyduğu temel koddur.

AMP sayfaları, web sayfanızın HTML biçimidir. Bunlar, ağırlıklı olarak mobil cihazlar için kullanılan ikinci sürüm sayfalarıdır. Kodlar minimuma indirgenir, bu nedenle sayfalar bir saniyeden kısa sürede yüklenir.

AMP'ye geçmek, sayfanızdaki stili kaldırmak anlamına gelir. Ancak, haber sayfaları ve bloglar için faydalıdırlar. Bunları kısaca kullandım ama karardan geri döndüm çünkü ilk üç adım mobil sayfa hızım için bile yeterliydi.

AMP uygulamak isteyip istemediğinize karar vermek için ayrıntılı bir kılavuz yazdım.

Sonuçlar

Yukarıdaki adımlar, sayfa yükleme hızım için harikalar yarattı. GTMetrix'e geri dönersek, web sitem bugün burada duruyor.

1.2 saniyede yükleniyor. Yaklaşık 6 kat artış.

Ama kanıt pudingin içinde. Deneyin ve nasıl gittiğini yorumlarda bana bildirin.