SEO'nun Sırlarını Çözmek: Web Sitesi Hızına Yönelik En İyi Kılavuzla Tanışın

Yayınlanan: 2018-08-07

Hız hem kullanıcılar hem de SEO için önemlidir: Hiç kimse bir web sitesinin yüklenmesi için birkaç saniye beklemek istemez. Kullanıcılar beklemekle zaman harcamak yerine sitenizden ayrılıp bir rakibe gitmeyi tercih eder. "Vakit nakittir" sözü, Benjamin Franklin'in yüzyıllar önce söylediği zamanki kadar bugün de doğrudur. Google için zaman da önemlidir. Hız, Google'ın sıralama faktörlerinden biridir. Her şey eşit olduğunda, web sitesi ne kadar hızlı olursa, sıralama o kadar yüksek olur. Ve bugünlerde hızlı bir web sitesine sahip olmanın bir zorunluluk olmadığını tartışacak kimse yok. Soru şu: Web sitenizi nasıl daha hızlı hale getirebilirsiniz? Bu SEO'nun Sırlarını Çözmek'teki konuk yazarımız, 2018 Avrupa Arama Ödülleri'nde “En İyi Küçük SEO Ajansı” ödülünü kazanan Elephate Araştırma ve Geliştirme ekibinin başkanı Tomek Rudzki. Rudzi, web sitenizi hızlandırma ve kazanma konusunda tavsiyeler sunar.

Bu kapsamlı Web Sitesi Hızı Kılavuzunda üç makale bulunmaktadır. Aşağıdaki gönderileri buradan okuyun: Web Sitesi Hızı İçin En İyi Kılavuz – Bölüm 2 ve Web Sitesi Hızı İçin En İyi Kılavuz – Bölüm 3.

Ücretsiz Sayfa Hızı Çalışması

1. Vakit nakittir

Daha hızlı bir web sitesinin daha fazla gelire eşit olduğuna işaret eden çok sayıda araştırma var.

  • Pinterest, algılanan bekleme sürelerini azaltmanın kayıt sayısını %15 oranında artırdığını fark etti .
  • BBC, web sitelerinin yüklendiği her ek saniye için kullanıcıların %10'unun ayrıldığını fark etti.
  • DoubleClick by Google , sayfa yükünü 19'dan (aşırı!) 5 saniyeye düşürmenin, hemen çıkma oranlarında %35 daha düşük ve %70 daha uzun oturumlarla sonuçlandığını araştırdı.
  • Amazon'un araştırması, web sitesi yükündeki bir saniyelik yavaşlamanın her yıl 1,6 milyar satış düşüşüne neden olabileceğini ortaya koyuyor.

“Tamam, ama Pinterest, BBC veya Amazon umurumda değil; benimle işim hakkında konuş .'” Google , hızın potansiyel gelir üzerindeki etkisini hesaplayan güzel bir araç yarattı. Aracı örnek verilerle doldurdum: Ortalama aylık ziyaretçi 1.000.000, %3.26 dönüşüm oranı, ortalama sipariş değeri 82$.

“Tomek, neden bu veriyi seçtin: 3.26 dönüşüm oranı ama %1 veya %4, hatta %10 değil mi?” diye sorabilirsiniz. Tamam, verileri Statista'dan aldım. Raporlarına göre, Amerika Birleşik Devletleri'nde 2017 yılının 4. çeyreğinde (ABD doları cinsinden) online alışveriş siparişlerinin ortalama değeri 82 oldu. Üstelik ortalama dönüşüm oranı 3,26 oldu.

Sayfa yükleme hızını 5 saniyeden 2,8 saniyeye düşürmek, yılda 1,97 milyon dolar daha fazla gelir sağlayabilir. Kulağa iyi geliyor!

Tabii ki, bu sadece bir hesap makinesi. Ancak hesap makinesi gerçek verilere dayanmaktadır. Google'ın hesaplanan değerin sonuna ciddi görünmesi için birkaç sıfır eklediğini düşünmüyorum.

2. Daima Mobil Kullanıcıları Düşünün

Statcounter'a göre, Şubat 2018'de kullanıcıların %55'inden fazlası mobil veya tablet üzerinden internete bağlanıyordu – etkileyici istatistikler!

Günümüzde mobil kullanıcılarınızı memnun etmek istiyorsanız şunları yapmalısınız:

  • web sitenizin mobil cihazlarda düzgün çalıştığından emin olun (yani duyarlıysa)
  • web sitesini gerçekten hızlı hale getirin.

Mobil kullanıcıların genellikle zayıf bağlantılara sahip olduğunu ve düşük kaliteli cihazlar kullandığını, bu nedenle “kablo” üzerinden gönderilen her kilobaytın gerçekten önemli olduğunu unutmamalısınız. Web siteniz tüm ekstralarla birlikte kişisel bir bilgisayarda hızlı çalışabilir, ancak mobil cihazlarda gerçekten yavaş olabilir. Ve birincisini elde etme ihtimaliniz artık sizin lehinize değil.

3. GTMetrix'i kullanın

Web sitenizi daha hızlı hale getirmek için neleri iyileştirebileceğinizi söyleyen harika bir araç var. Herhangi bir web sitesini ücretsiz olarak denetleyebilirsiniz. Denetim başlatmak için web sitesi sahibi olmanıza gerek yok (yani Giphy.com'u denetledim). Araç, Google PageSpeed ​​Insights ve Yahoo Slow'dan hem verileri hem de ipuçlarını birleştirir.

https://gtmetrix.com/ adresine gitmek ve web sitenizin URL'sini yazmak için zaman ayırmaya değer.

“PageSpeed” veya “YSlow” sekmelerine tıklayarak web sitenizin hızını nasıl artıracağınıza ilişkin önerilerin listesini görebilirsiniz.

Şimdilik bu sekmelerdeki bir çok bilgi çok teknik olduğu için anlaşılmayabilir. Bu iyi. Roma bir günde kurulmadı. Başlamanız için elimden geleni yapacağım. Kaynakların (JS & CSS dosyaları, resim dosyaları) tam olarak ne zaman indirildiğini ve yüklendiğini gösteren “Şelale” adlı ilginç bir bölüm var.

Bir GTMetrix hesabı almanızı şiddetle tavsiye ederim (ücretsizdir!). Kayıtlı kullanıcılar testi özelleştirebilir ve tarayıcı ve sunucu konumunu değiştirebilir. Ayrıca, giriş yaptıktan sonra “video oluştur” seçeneğini etkinleştirebilirsiniz. Video seçeneği harika. Kullanıcıların web sitenizdeki görsel değişiklikleri görene kadar ne kadar beklemeleri gerektiğini gösterir.

Ama GTMetrix ile Çıldırmayın

GTMetrix harika bir araç olsa da bazen önerileri sizi vahşi bir kaz kovalamacasına götürebilir. GTMetrix'te yanlış bir şey yok. Sadece hızı optimize ederken "herkese uyan" bir kural yoktur - GTMetrix'in çok iyi bildiği bir şey:

Örneğin, GTMetrix, Google Analytics veya Facebook sunucusunda depolanan kaynaklar için tarayıcı önbelleğini ayarlamanızı önerir. Gerçeği söylemek gerekirse, bu kaynaklar kontrolünüz dışındadır – hiçbir şey yapamazsınız . Google ve Facebook'un geliştiricileri, her ne sebeple olursa olsun, bu kaynakların uzun süre önbelleğe alınmaması gerektiğine karar verdiler.

Elbette GTMetrix'e benzer WebPageTest gibi (GMTetrix'ten çok daha güçlü olan) birçok araç var. Ancak, iki nedenden dolayı sizi GTMetrix ile tanıştırmaya karar verdim:

  1. GTMetrix daha kullanıcı dostu
  2. WebPageTest, ne yapacağınız konusunda size net önerilerde bulunmaz.

Bir başka ilginç araçtan bahsetmek istiyorum – Google Lighthouse (Chrome kullanıyorsanız, zaten yüklemişsinizdir). Elephate'den Kamila Spodymek, SEO'ların Google Lighthouse'un performans ölçümlerinden nasıl yararlanabileceği konusunda harika bir makale yazdı. Kesinlikle iyi okumalar!

4. GZIP Sıkıştırmasını Kullanın

Bilmeniz gereken bir kural var: Bir kaynak daha hafifse, tarayıcı onu çok daha hızlı indirebilir ve bu da daha hızlı sayfa yüklenmesine neden olur . Mobil kullanıcılarınız bundan gerçekten faydalanacak.

GZIP sıkıştırmasını uygulayarak metin dosyalarınızın (HTML, SVG, CSS ve JS gibi) boyutunu azaltabilirsiniz. GZIP sıkıştırmasının herhangi bir bilgiyi kaybetmeden bir kaynak boyutunun %70-80'ini kurtarması oldukça yaygındır. Bu gerçekten önemli bir şey!

GZIP uygulayarak kaç kilobayt kaydedebileceğinizi (veya zaten kaydettiğinizi!) kontrol etmek için https://checkgzipcompression.com/ adresini ziyaret edin. Searchmetrics.com durumunda, GZIP etkinleştirilmiştir (sayfa boyutunun %83'ünden tasarruf etmesine izin verilir). Kulağa iyi geliyor!

Yine de dikkatli ol! Bazen web yöneticileri bir hata yapar ve JPEG, PNG görüntüleri ve PDF'ler dahil tüm statik dosyaları sıkıştırır. Yahoo Developer Network Documentation'dan alıntı yapmama izin verin: “Görüntü ve PDF dosyaları zaten sıkıştırılmış olduklarından gzip ile sıkıştırılmamalıdır. Bunları sıkıştırmaya çalışmak yalnızca CPU'yu boşa harcamakla kalmaz, potansiyel olarak dosya boyutlarını da artırabilir”.

Ek kilobayt kaydetmek istiyorsanız HTML, JS ve CSS dosyalarınızı küçültmek de iyi bir fikirdir.

5. Ölçekli Görüntüler Sunun

Bir web sitesinin çok sayıda resim nedeniyle (özellikle cep telefonlarında!) çok yavaş yükleneceği bir gerçektir.

Bu nedenle, bazen görüntü sayısını azaltmak iyi bir fikir olabilir. Ama onları sınırlamak yerine var olanları optimize etmeni tavsiye ederim . Bununla birlikte, kullanıcılarınıza sunulan görseller ölçeklenmeli ve sıkıştırılmalıdır (kayıpsız veya kayıplı).

Öncelikle resimlerin ölçeklenmesinden bahsedelim. Diyelim ki sayfa başına on adet 220×220 küçük resim var ama sunucuya 800×800 resim yüklediniz. Halihazırda ölçeklenmiş görüntüleri kullanıcılara mı sunmalısınız yoksa tarayıcıyı “anında” ölçeklendirmeye mi zorlamalısınız?

Cevap kolay. Görüntüleri sunucu tarafında ölçeklendirmezseniz, tarayıcının gerekenden çok daha fazla kilobayt indirmesi gerekir. Hiçbir şey için, çünkü görüntüler zaten ölçeklenecek. Ayrıca, istemci tarafında GPU için ek bir iş. Sayfa yükleme hızından bahsetmiyorum bile.

6. Resimlerinizi sıkıştırın

Şimdi, görüntüleri sıkıştırma hakkında konuşalım. Bu, modern web için sahip olunması gereken başka bir tekniktir.

Genel olarak, iki tür görüntü sıkıştırma vardır:

  • Kayıpsız (gerçekten iyi iş çıkarıyor, kalitenin düşmeyeceğinden emin olabilirsiniz).
  • Kayıplı (genellikle bir görüntüyü daha hafif yapar, ancak adından da anlaşılacağı gibi: kalitenin bir kısmını kaybedersiniz).
https://www.geckoandfly.com/23620/jpeg-compression-tool-batch-lossy-lossless-optimization

Soru ortaya çıkıyor: Hangi tür sıkıştırma daha iyidir: kayıpsız mı yoksa kayıplı mı?

  • Gerçekten duruma bağlı. Web siteniz uzaydan görüntüler sağlıyorsa, her ayrıntı önemlidir. Ancak kişisel bir blog yaparsanız, yüksek sıkıştırma oranıyla bile kayıplı sıkıştırma konusunda muhtemelen sorun yaşamazsınız. Hangi ayarların web sitenize en uygun olduğunu görmek için denemenizi tavsiye ederim.

7. Mobil Ziyaretçilerinizi Full HD Fotoğraflar İndirmeye Zorlamayın!

Mobil kullanıcılar çok daha küçük ekranlara sahiptir ve HD fotoğraflarınızdan faydalanamazlar. Bunun yerine, onları büyük resimleri indirmeye zorlarsanız sinirlenirler.

Elephate.com örneğini inceleyelim. Ana sayfamızın (522kb) üst kısmında şirket üyelerimizin oldukça büyük bir fotoğrafı (2600×1463 piksel) var.

Masaüstü bilgisayarlar için tamamen sorun değil – gerçekten hızlı bir şekilde indirebilirler. Ancak mobil kullanıcılar için HTML'nin “srcset” parametrelerini kullanıyoruz. Bunu uygulamak sayesinde, mobil kullanıcılar sayfa yükleme süresi üzerinde olumlu bir etkisi olan çok daha küçük bir resim indirecekler (daha büyük bir resme ihtiyaç duymazlar).

Masaüstü kullanıcıları full HD fotoğrafı görecekleri için sıkıntı çekmezler. Ancak mobil kullanıcılar bundan gerçekten faydalanacak.