Web site hızı, tarayıcının içeriği işlemeyi ve oluşturmayı tamamlayana kadar geçen süredir. İçeriğin miktarı ve türü, verinin kat ettiği mesafe, bağlantı türü, cihaz, işletim sistemi ve tarayıcı gibi birçok faktör hızı etkiler. Bu makalede; web site hızınızı nasıl artırabileceğiniz ve PageSpeed Insight aracılığıyla web site hızınızı nasıl ölçebileceğinizi öğreneceksiniz.
Web Site Hızı Nedir?
Web site hızı, web sayfalarının veya medya içeriğinin web sitesi hosting sunucularından indirildiği ve istekte bulunan web tarayıcısında görüntülendiği süreyi ifade eder. Sayfa yükleme süresi, bağlantıya tıklanması ile web sayfasındaki tüm içeriğin istekte bulunan tarayıcıda görüntülenmesi arasındaki süredir.
Web sitesi performansı, sayfa hızı, kullanıcı deneyimi ve web sitesinin yanıt verebilirliği gibi faktörler arama motorlarındaki sıralamaları etkiler. Web sitesi performansını en üst düzeye çıkarmanın kritik ilkesi, sayfa hızı optimizasyonuna odaklanmaktır.
Neden Web Site Hızınızı Önemsemelisiniz?
Web site hızınız kullanıcı algılarını etkiler ve siteniz yavaş yüklenirse siteniz yüklenmeyi tamamlamadan onları kaybedersiniz. İnsanların bir siteye, markaya ve ürünlere ilişkin algılarını olumsuz yönde etkilemek için sayfa hızında 500 milisaniyelik bir düşüş bile yeterlidir. Sayfa hızınız hedeflerinize ulaşmanızı zorlaştırabilir ve bunun sonucunda beklentilerinize ulaşamayabilirsiniz.
PageSpeed Insights ile Web Site Hızı Ölçümü
Google PageSpeed Insights, site hızınızı 0 ile 100 arasında bir ölçekte puanlayan popüler bir web sitesi hız testi aracıdır. Puan ne kadar yüksekse web siteniz o kadar iyi performans gösteriyor demektir. Bu araç trafiğinizi hesaba katmak için hem masaüstü hem de mobil web siteniz için testler oluşturabilir. En iyi yanı, sitenizin performansını iyileştirmeye yönelik öneriler sunmasıdır ve bunlardan bazılarını hemen uygulayabilirsiniz.
Üstelik PageSpeed Insights, web sitenizi Google’ın Core Web Vital’ına göre test ederek web sitenizin sayfa yükleme sürecinin her aşamasına ulaşması için geçen süreyi hesaplar. Core Web Vitals, sayfa yüklemenizin nasıl göründüğüne ve bunun kullanıcı deneyimini nasıl etkilediğine ilişkin daha ayrıntılı bir anlayışa olanak tanır. Bu araç ile web site hızınızı ölçmek için ise PageSpeed Insights sayfasına gitmeli ve “Web sayfası URL’si girin” alanına hızını ölçmek istediğiniz web sitesinin URL’ini girmelisiniz. 2 ila 3 dakika arasında süren bu hız testi sonrasında neleri optimize etmeniz gerektiğini görebilirsiniz.
PageSpeed Insights Metrikleri
PageSpeed Insight, belirli metriklere göre ölçüm yapar. Bu metrikler; FCP, FID, LCP ve CLS şeklindedir.
- FCP (First Contentful Paint), tarayıcının ilk metni oluşturması veya arka plan resmi veya SVG de olabilen ilk resmi yüklemesi için geçen süreyi ölçer. Bu değer, kullanıcının web sitesiyle ilk kez ne zaman etkileşime geçebileceğini yaklaşık olarak göstermektedir.
- FID (First Input Delay) değeri, bir kullanıcının sayfayla ilk etkileşimi (bir bağlantıya, düğmeye veya başka bir butona tıklayarak) ile tarayıcının bu etkileşimi gerçekten gerçekleştirebildiği zaman arasındaki süredir.
- LCP (Largest Contentful Paint), sayfanın en büyük öğesinin oluşturulmasının ne zaman bittiğine bakar. Bunun sayfanın ana içeriği olduğu ve kullanıcıların bu noktadan itibaren asıl içeriği kullanabileceği varsayılabilir.
- Google, CLS (Cumulative Layout Shift) ile içeriğin yükleme sırasında ne kadar “atlandığına” bakar. Bu genellikle resimler yeniden yüklendiğinde veya reklamların görüntülenmesi daha uzun sürdüğünde olur. Düzen ne kadar az atlanırsa ziyaretçilerin içerik tüketmesi o kadar keyifli olur.
PageSpeed Insights Önerileri
PageSpeed Insights ile web site hızınızı ölçtükten sonra bazı öneriler görebilirsiniz. Bu önerilerin dikkate alınması ve gerekli optimizasyonların yapılması önemlidir. Ancak bu aşamada bu önerilerin ne anlama geldiğini ve ne yapmanız gerektiğini bilmelisiniz.
1. Oluşturmayı engelleyen kaynakları ortadan kaldırın
PageSpeed Insights’ın en yaygın tavsiyelerinden biri, oluşturmayı engelleyen kaynakları ortadan kaldırmaktır:
Bu, sayfanızın hızlı yüklenmesini engelleyen JavaScript ve CSS komut dosyalarına atıfta bulunur. Ziyaretçinin tarayıcısının, sayfanın geri kalanını gösterebilmesi için bu dosyaları indirmesi ve işlemesi gerekir, bu nedenle birçoğunun “ekranın üst kısmında” olması sitenizin hızını olumsuz etkileyebilir.
Bu aşamada göz önünde bulundurmanız gereken iki çözüm vardır:
- Çok fazla JavaScript veya CSS’niz yoksa bu uyarıdan kurtulmak için bunları satır içine alabilirsiniz. Bu işlem, JavaScript’inizi ve/veya CSS’nizi HTML dosyanıza dahil etmeyi ifade eder. Bunu Autoptimize gibi bir eklenti ile yapabilirsiniz. Ancak bu gerçekten sadece çok küçük siteler için geçerlidir. Çoğu WordPress sitesinde bu yöntemin sizi gerçekten yavaşlatabileceği kadar JavaScript bulunur.
- Diğer seçenek, JavaScript’inizi ertelemektir. Bu öznitelik, HTML ayrıştırma sırasında JavaScript dosyanızı indirir, ancak yalnızca ayrıştırma tamamlandıktan sonra yürütür. Ayrıca bu özniteliğe sahip komut dosyaları, sayfada görünüm sırasına göre yürütülür.
2. Kritik istek zinciri oluşturmaktan kaçın
Kritik istekleri zincirleme kavramı, Kritik İşleme Yolu (CRP) ve tarayıcıların sayfalarınızı nasıl yüklediği ile ilgilidir. JavaScript ve CSS gibi belirli öğeler, sayfanız görünür hale gelmeden önce tamamen yüklenmelidir. Bu önerinin bir parçası olarak Google PageSpeed Insights, analiz ettiğiniz sayfadaki istek zincirlerini size gösterecektir:
Bu şema, sayfanız görünür hale gelmeden önce yerine getirilmesi gereken bir dizi bağımlı istek gösterecektir. Ayrıca size her kaynağın boyutunu da söyleyecektir. İdeal olarak bağımlı isteklerin sayısını ve boyutlarını en aza indirmeniz gerekir. Bu hedeflere ulaşmak için çeşitli yöntemler vardır:
- Oluşturmayı engelleyen kaynakları ortadan kaldırma,
- Ekran dışı görüntüleri erteleme,
- JavaScript ve CSS’yi küçültme.
3. İstek sayısını az ve aktarma boyutlarını küçük tutun
Tarayıcılar sayfalarınızı yüklemek için ne kadar çok istek yaparsa ve sunucunuzun yanıt olarak döndürdüğü kaynaklar ne kadar büyük olursa web sitenizin yüklenmesi o kadar uzun sürer. Bu nedenle Google’ın gerekli istek sayısını en aza indirmenizi ve kaynaklarınızın boyutunu azaltmanızı önermesi mantıklıdır.
Akılda tutulması gereken ideal bir istek sayısı veya maksimum boyut yoktur. Bunun yerine Google, bir performans bütçesi oluşturarak bu standartları sizin belirlemenizi önerir. Bu, aşağıdakiler gibi yönlerle ilgili olabilecek bir dizi tanımlanmış hedeftir:
- Maksimum görüntü boyutları,
- Kullanılan web yazı tipi sayısı,
- Kaç tane dış kaynağa başvurduğunuz,
- Komut dosyalarının boyutu.
4. Kullanılmayan CSS’yi azaltın
Stil sayfanızdaki herhangi bir kod, sayfanızın kullanıcılara görünür hale gelmesi için yüklenmesi gereken içeriktir. Sitenizde gerçekten yararlı olmayan CSS varsa performansınız gereksiz yere tüketiliyor demektir. Bu nedenle Google, kullanılmayan CSS’leri azaltmanızı önerir:
Buradaki çözüm, oluşturmayı engelleyen CSS’yi ortadan kaldırmakla aynıdır. Stilleri, sayfalarınız için en anlamlı olan şekilde satır içine alabilir veya erteleyebilirsiniz. Optimize edilmesi gereken kullanılmayan CSS’yi bulmak için Chrome DevTools gibi bir araç da kullanabilirsiniz.
5. İlk sunucu yanıt süresini azaltın
İlk Bayt Süresi (TTFB), bir tarayıcının bir istek yaptıktan sonra sitenizin sunucusundan ilk veri baytını geri almasının ne kadar sürdüğünün bir ölçüsüdür. Bu, genel site hızınızla aynı olmasa da düşük bir TTFB’ye sahip olmak sitenizin performansı için anlaşılır bir şekilde iyidir.
Bu nedenle sunucu yanıt sürelerini azaltmak Google PageSpeed Insights’ın önerileri arasındadır:
TTFB’nizi etkileyebilecek birkaç faktör vardır. Bunu düşürmek için bazı stratejiler şunları içerir:
- Hıza odaklanan yüksek kaliteli bir hosting sağlayıcısı seçmek,
- Hızlı temalar ve eklentiler kullanmak,
- Sitenizde yüklü olan eklentilerin sayısını azaltmak,
- Bir CDN kullanmak,
- Tarayıcı önbelleğini uygulamak,
- Sağlam bir DNS sağlayıcısı seçmek.
6. Kullanılmayan JavaScript’i azaltın
CSS dosya boyutunu küçültebildiğiniz gibi JavaScript dosyalarınızı da küçültebilirsiniz:
Autoptimize veya WP Rocket, WordPress siteniz için de bu işlemi yerine getirebilir.
7. Doğru boyuta sahip resimler
Resimleri uygun şekilde boyutlandırmak, yükleme sürelerinizi azaltmanın basit bir yoludur:
Sayfanız olması gerekenden daha büyük resimler içeriyorsa bunları uygun şekilde yeniden boyutlandırmak için CSS kullanılır. Bu, başlangıçta görüntüleri doğru boyutta yüklemekten daha uzun sürer ve bu nedenle sayfanızın performansını etkiler.
Bunu düzeltmek için görselleri uygun boyutlarda yükleyebilir veya responsive görseller kullanabilirsiniz. Bu, çeşitli cihazlar için farklı boyutta görseller oluşturmayı içerir.
Bunu, farklı boyutlarda alternatif görsel dosyaları belirtmek için <img> etiketlerine eklenen srcset özniteliğini kullanarak yapabilirsiniz. Tarayıcılar bu listeyi okuyabilir, mevcut ekran için hangi seçeneğin en iyi olduğunu belirleyebilir ve görüntünüzün o sürümünü sunabilir.
8. Resimleri yeni nesil biçimlerde yayınlayın
Diğerlerinden daha hızlı yüklenen bazı görüntü dosyası biçimleri vardır. Ne yazık ki yaygın olarak kullanılan PNG veya JPEG bunlar arasında yer almaz. WebP görüntüleri yeni standart haline gelmekte ve Google PageSpeed, görselleriniz buna uymuyorsa size bir öneri sunmaktadır:
Bu, muhtemelen WordPress sitenizde zaten çok sayıda görsele sahip olduğunuzdan karşılanması zor bir öneri gibi görünebilir. Neyse ki yardımcı olabilecek eklentiler vardır. Örneğin; Imagify ve Smush, bir WebP dönüştürme özelliği sunar.
9. Web yazı tipi yüklemesi sırasında metnin görünür halde kalmasını sağlayın
Görsel gibi yazı tipleri de yüklenmesi uzun zaman alan büyük dosyalar olma eğilimindedir. Bazı durumlarda tarayıcılar, kullandığınız yazı tipi tamamen yüklenene kadar metninizi gizleyebilir ve bu, Google PageSpeed Insights’ın şu önerisiyle sonuçlanır:
Google, @font-face stilinize Font Display API yönergesini uygulayarak bu sorunu çözmenizi önerir. Bunu yapmak için stil sayfanıza (style.css) erişin ve @font-face altına src özelliğinden sonra şunu ekleyin:
- font-display: swap
Buna ek olarak WordPress siteniz için LiteSpeed Cache eklentisini de kullanabilirsiniz. Bu eklentiyi etkinleştirdikten sonra tek yapmanız gereken “Sayfa Optimizasyonu” alanına gitmeniz ve “CSS Ayarları” sekmesinde bulunan “Yazı tipi görünüm optimizasyonu” seçeneğini “Swap” butonu ile güncellemeniz.
10. Üçüncü taraf kodun etkisini azaltın
İdeal olarak olumsuz etkileri önlemek için üçüncü taraf kodlara olan güveninizi sınırlamak en iyisidir. Ancak bazı durumlarda sitenizin sahip olduğu bir ihtiyacın en iyi çözümü, bir üçüncü taraf komut dosyası eklemektir. Üçüncü taraf kodlar aşağıdakileri içerebilir:
- Sosyal medya paylaşım düğmeleri,
- YouTube video yerleştirmeleri,
- Reklamlar ve diğer içerikler için iFrame’ler,
- JavaScript, yazı tipleri ve diğer öğeler için kitaplıklar.
Üçüncü taraf komut dosyasının kullanılmasını gerekli gördüğünüz durumlarda PageSpeed analizi sonuçlarınızın size söyleyeceği gibi sitenizin performansı üzerindeki etkisini azaltmak önemlidir:
Üçüncü taraf kodunu daha verimli bir şekilde yüklemek için bu gönderide daha önce bahsettiğimiz tekniklerden birini düşünebilirsiniz:
- JavaScript’in yüklenmesini erteleyin,
- Ön bağlantı özelliklerine sahip bağlantı etiketlerini kullanın.
Web Site Hızı Nasıl Artırılır?
1. Dosyalarınızı sıkıştırın
Web siteniz CSS, HTML ve JavaScript dosyalarından oluşur. Web site hızınızı artırmak istiyorsanız bu dosyaları sıkıştırarak boyutlarını küçültebilirsiniz. Dosya sıkıştırma söz konusu olduğunda GNU Gzip dahil olmak üzere birkaç farklı araç arasından seçim yapabilirsiniz. TextFixer ve JSCompress gibi birkaç tarayıcı tabanlı araç da mevcuttur.
2. Sunucu yanıt sürenizi iyileştirin
Web sitenizin sunucusundan gelen yavaş yanıt süreleri, web site hızınızı azaltabilir. 200 ms’nin altında kalması gereken sunucu yanıt süreniz, aşağıdakiler de dahil olmak üzere çeşitli faktörlere bağlıdır:
- Web sitesi trafiği,
- Sayfa kaynakları,
- Sunucu yazılımı,
- Hosting sağlayıcısı.
3. Görsellerinizi sıkıştırın
Görsel sıkıştırma, web site hızını artırmak için çok önemli bir uygulamadır. HTML, CSS ve JavaScript dosyalarınız gibi görsellerinizin boyutlarını azaltabilirsiniz. Daha küçük bir görsel dosyası, web site hızınızı artırabilir. Bu da hızlı bir web sitesinin tüm avantajlarına yol açabilir: Daha yüksek sıralamalar, trafik ve satışlar.
Web sitenizin görsellerini sıkıştırmanın yanı sıra SEO dostu bir dosya formatı da seçebilirsiniz. En iyi sonuçları elde etmek için dosya formatlarınız için PNG veya JPEG’i tercih edebilirsiniz. Ayrıca PageSpeed Insights’ın önerdiği yeni nesil görüntü biçimlerini kullanabilirsiniz, ancak bu biçimler Safari gibi her tarayıcıyla uyumlu değildir.
4. Tarayıcı önbelleğini kullanın
Safari veya Chrome gibi bir tarayıcı, kullanıcıların sitenize geri dönmesini kolaylaştırmak için genellikle web sitesi bilgilerini önbelleğe alır veya depolar.
Tarayıcılar, görseller ve stiller dahil olmak üzere bir dizi dosyayı önbelleğe alabilir. Ancak web siteniz, tarayıcıların bilgilerinizi ne kadar süreyle saklayacağını belirler. Sayfa hızınızı artırmak istiyorsanız bir tarayıcının önbellek ayarlarını genişletebilirsiniz.
Örneğin; web siteniz için bir ay sonra sona erecek bir tarayıcı önbelleği ayarlamak yerine bu sona erme tarihini bir yıla kadar uzatabilirsiniz. Ancak bu web sitesi hız optimizasyonu taktiğini yalnızca site tasarımınız statik ise kullanmalısınız. Web sitenizin görünümünü rutin olarak güncelliyorsanız tarayıcıların sitenizin en son sürümünü göstermek için önbelleklerini daha sık temizlemesini istemelisiniz.
5. Kodunuzu küçültün
CSS, HTML ve JavaScript kodu veya dosyalarınızdaki kodu küçültmeniz de mümkündür. Kodunuzu birkaç şekilde küçültebilirsiniz. Örneğin; aşağıdakileri kod yapınızdan kaldırabilirsiniz:
- Virgül,
- Boşluk,
- Kullanılmayan kod,
- Yorum.
6. Yönlendirmelerinizi sınırlayın
Aşırı sayıda yönlendirme, web site hızınıza da zarar verebilir. Bu nedenle yönlendirmelerinizi minimumda tutmaya çalışmalısınız.