fbpx
SEOWeb Tasarım

Web Site Hızı Denetleme ve Arttırma

SEO ile alakalı yazıları okurkan, web site hız konusunun üzerinden belki de 1000 defa geçtiniz değil mi? Bizde bu konu hakkında sık sık konuşuyoruz ama gel gelelim bugüne kadar web site hızını ölçmeye, arttırmaya yönelik bir içerik hazırlamamıştık. Emin olmanızı isteriz ki bu içeriği incelemeyi tamamladığınızda: web sitenizin neden yavaş açıldığını öğrenecek, bu sorunları ilgili yazılımcıya aktarabilecek ve hangi hız seviyesinin ziyaretçiler için önemli olduğunu anlayaksınız. Keyifli okumalar :)

Web Site Hızı Arttırma

Web Site Hızı Ölçme Araçları

Dijital Dünya’da web sitenizin hız performansınızı ölçebilecek bir çok araç vardır. Aslında bakarsak, biz web site yöneticileride aşağı yukarı bir hız denetlemesi yapabiliyoruz gözlemleyerek. Burada önemli olan web sitesinin hangi yönlerinin yavaş olduğunu, hangi yönlerinin hızlı olduğunu sınıflandırarak anlatabilecek bir aracın kullanılması. Eğer bu şekilde bir aracı kullanırsanız web sitenizin hız konusundaki yapacağınız arttırma çalışmalarında %80 bir başarı edebileceğinizi düşünüyorum. Çünkü sınıflandırılmış web site hız probremleri ile bu sorunların nereden kaynaklandığını tam olarak anlayabileceksiniz. Dilerseniz büyük bir SEO faktörü olan web site hızı denetleme araçlarına göz atalım.

1. PageSpeed Insights

PageSpeed Insights aracı masaüstü ve mobil cihazlarda bir web sitesinin hız performansı hakkında detaylı rapor oluşturur. Yine aynı sayfanın oluşturulan raporunda nasıl daha iyi hale getirilebileceği hakkında bilgi verir. PageSpeed aracına ilk girdiğinizde karşılaşayağınız ekran aşağıdaki gibidir. Ayrıca tamamen ücretsiz bir araçtır asla PRO versiyonu bulunmamaktadır.

Web Site Hızı Denetleme ve Arttırma

Gördüğünüz gibi çok şık ve sade bir tasarımı vardır işte web sitelerinizde uygulamanız gereken Kullanıcı Deneyimi budur ve sayfanın ne kadarda hızlı açıldığını farketmişsinizdir umarım. Karşınıza çıkan yazı butonuna web site URL’nizi yazın ve analiz et butonuna tıklayın. PageSpeed Insights aracı web site hızlarını karşılaştırırken mobil ve masaüstü olarak ikiye ayırmaktadır. Ee bildiğiniz üzere günümüz teknoloji internet kullanıcılarının %60’ından fazlası mobil kullanıcı, bu yüzdende mobil hızınızı yükseltmeyi hedefleyin mutlaka.

  • Mobil Cihazlar İçin Site Hızı

Mobil Sayfa Açılış Hızı

  • Masaüstü Cihazlar İçin Site Hızı

Masaüstü Sayfa Açılış Hızı

Bu araç 50’nin altındaki değerler için kırmızı renk gösterir, 50 ile 90 arası turuncu ve 90’dan sonra yeşil olarak raporlar. Bizim burada sizlere önereceğimiz şey mobil sayfa yüklenme sürenizi mutlaka ve mutlaka 60 ve üstü olarak geliştirmek olacaktır.

2. GTmetrix

Kanada konumlu olan GT.net şirketinin ürettiği bir araçtır. Web sitelerini Kanada konumundan ve Chrome masaüstü versiyonu ile test eder. Yine PageSpeed Insights aracında olduğu gibi bu aracımızda ücretsizdir ve rapor sunucu olan olumsuz sonuçların nedenini açıklar, nasıl çözebileceğinizi anlatır. GTmetrix sitesine girdiğinizde aşağıdaki görseldeki ekran ile karşılaşırsınız.

GTmetrix Ana Sayfa

Yine metin butonuna site adresini girdikten sonra karşılaşacağınız ekran:

GTmetrix Hız Testi Raporu

Göreceğiniz üzere “Test Server Region: Vancouver, Canada” olarak gözükmektedir. Burdan şunu analiz edebiliriz ki, eğer bir CDN kullanıyorsanız özelliklede bu CloudFlare servisi ise şuan gördüğünüz bu test sonuçları sitenize giren Türkiye konumlu ziyaretçiler için daha hızlı olabilir. Ama bu fark çok çok gözle görülebilir bir fark değildir kesinlikle o yüzden yine PageSpeed Insights aracını dikkate alabileceğiniz gibi bu aracıda dikkate almanızı öneririz.

Size dikkate almanız gereken iki web site hız testi aracınıda tanıttık. Web Tasarım ajansları ile çalışmadan önce lütfen bu araçları bildiğinizi onlara anlatın ve proje bitiminde bu tarz sonuçlar: yüksek hız görmek istediğinizi belirtin. “Ee kardeşim ben bu araçları kullandım test ettim web site hızım kötü çıktı nasıl düzelteceğim veya arttıracağım?” diye soracaksınız normal olarak.

Eğer bu test araçlarında web site hızı performansınız çok ama çok düşükse (10-20) artık bu konuda pek yapabileceğiniz bir şey yoktur üzgünüm ki. Ancak belirli çalışmalar ile 50-60 değerlerine çıkarabilirsiniz hız değerinizi her iki araçta olmak üzere. Bu sorun temel olarak kullandığınız yazılımdan kaynaklanmaktadır. Eğer bir WordPress teması kullanıyorsanız lütfen bu temayı değiştirin, daha hızlı ve kullanıcıya hitap eden bir tema satın alın. Şayet WordPress kullanmıyorsanız, kullandığınız yazılım özel ise lütfen üretici ile konuşmayı ve bu konuda bir çalışma yapmasını isteyin. Ancak tekrar üzülerek belirtmek isteriz ki, yavaş açılan bir web sitesinin yazılımını onarmak neredeyse baştan bir yazılım kodlamak kadar karışık ve zordur.

Web Site Hızı Arttırma

Evet testlerinizi yaptınız edindiğiniz rapordaki sonuçlar sizi tatmin etmedi. Fazla kodlama bilgisi bilmeden ve o problemin size neden kaynaklandığını anlatarak bir yazılımcı ile işbirliğinde çözüme kavuşturmanızı sağlayacağız. Ama öncelikle WordPress kullanıyorsanız mutlaka ve mutlaka LiteSpeed Cache Ayarları ve En İyi WordPress Temaları yazılarımızı okumanızı öneriyoruz.

PageSpeed Insights Maddeleri

PageSpeed Insights aracının madde madde terimleri üzerinden geçeceğiz. Bu sorunları çözemeyebilirsiniz ancak, hakkında bir bilgi bilmek bilmemekten daha iyidir.

  • İlk Zengin İçerikli Boya ve İlk Anlamlı Boya

Web sitenizde ziyaretçiye görsel olarak gözükecek olan öğenin süresiyle alakalıdır. Kritik olmayan JS ve CSS kodlarınızı sayfanın başka yerinden yükletmeyi deneyin.

  • Hız Endeksi

Sayfa içeriğinizle alakalıdır metinler, HTML kodları, CSS, JS, resimler… Bu maddeden olumlu sonuç elde etmek istiyorsanız mutlaka ve mutlaka sayfanızı bütün olarak düşünmeniz ve optimize etmeniz gerekir.

  • İlk CPU Boşta

Sayfa tamamen yüklenmeden önce gerekli tüm kaynakları (CSS,JS) en aza indirin veya başka bir yöntem uygulayın.

  • Etkileşim Süresi

Ziyaretçilerin web sayfanız üzerinde herhangi bir etkileşim gösterebilme sürecidir. Bunun madde optimizasyonu için yine sitenizi bütün olarak ele almanız gerekmektedir.

  • İlk Giriş Gecikmesi

Bir ziyaretçinin sitenize ilk girişindeki sitenizle etkileşim yapabilme süresini ölçer. Bu çok önemli bir maddedir. Özellikle sitenizi tekrar ziyaret eden ziyaretçiler bu maddeye kesinlikle dahil değildir, sadece web sitenize ilk kez girecek olan kullanıcıları dahil eder. Tekrar söylemek gerekirse yine bu maddeden olumlu sonuç alabilmek için web sitenizi bütün olarak ele almak gerekir.

  • Kullanılmayan CSS’i Kaldırın

Bu CSS kodları o an yüklenen sayfadaki herhangi bir içeriğe etki etmiyor olabilir. Özellikle WordPress yöneticileri için kullanacağınız eklenti/tema çok önemlidir. İnternet sitenizin her bölümünde aynı CSS kodları kullanılmıyor olabilir. Bu kodları kullanılmayan sayfalar için kaldırın, sayfa yüklenme hızınızı artıracaktır.

  • Resimleri Yeni Nesil Biçimlerde Yayınlayın

PNG ve JPEG formatlarını artık kullanmayın. JPEG 2000, JPEG XR ve WebP resim formatları diğerlerine oranla daha performanslıdır. Dosya boyutları küçüleceği için dolayısıyla CPU tüketimide azalacaktır. Bu maddeyi düzelttiğinizde web sitenizde çok sayıda bir giriş olduğunda sayfalar arası etkileşim için performansınız olumlu yönde olacaktır.

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

Bir ziyaretçi web sayfasını ziyaret ederken ilk önce CSS ve JS türevlerini tarayıcısına yüklemesi gerekir. Dolayısıyla bu dosyaların boyutu yüksek olursa bu maddeniz olumsuz sonuç verir.

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

Bu madde ise yazı tipleri ile doğrudan alakalıdır. Kullandığınız yazı tipi web sayfanızın yüklenme hızını büyük ölçüde kısıyorsa, bu yazı tipini kullanmayın veya başka bir yazı tipi kullanın. Zaten kurumsal web siteleri farklı bir yazı tipi kullanmazlar genellikle yani varsayılandır.

  • Statik Öğeleri Verimli Bir Önbellek Politikasıyla Yayınlayın

Mutlaka ve mutlaka bir önbellekleme eklentisi kullanın. Bu önbellekleme kodları web siteniz için UI/UX konusunda ziyaretçilerinize olumsuz bir etki yaratmamalıdır.

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

JS kodlarını ayrıştırma, derleme bu maddeye dahildir. Yine gördüğünüz gibi tüm maddeler aynı şeyden bahsediyor. Mutlaka ve mutlaka CSS ve JS kodları, bu dosyaların çağırılışı çok önemlidir.

  • Kritik İsteklerin Derinliğini En Aza İndirin

Yukarıdaki maddelerde bahsettiğimiz siteniz için kesinlikle gerekli olan dosyaları en aza indirmeniz gerekiyor eğer bu madde sizde olumsuz olarak gözüküyorsa.

  • Kullanıcı Zamanlaması İşaretleri ve Ölçüleri 

Bu uyarı aslında çok çok önem arz etmemektedir o yüzden üzerinde durmayacağız.

  • İstek Sayısını Az ve Aktarma Boyutlarını Küçük Tutun

Bu madde de yine web sayfanızı bütünsel olarak analiz eder. Verileri istek sayısı ve kaynak boyutu olarak tablolar. Buradan web sayfanızda hangi kaynağın yüksek bir boyuta sahip olduğunu görebilirsiniz bu sayede sitenizi hızlandırmak için ilk hedefiniz belirlenmiş olur.

  • Doğru Boyuta Sahip Resimler

Bu madde kısaca: Resimlerinizin orjinal boyutu ve tarayıcıda gösterilmek üzere tanımlanan boyutuyla alakalıdır. Resimlerinizi göstermek istediğiniz boyutta kırpın o şekilde sunucunuza yükleyin ve taracıyıda gösterin. Aksi taktirde ziyaretçi tarayıcısı ilk önce resmin orjinal boyutunu yükleyecek ve daha sonra o resmi boyutlandıracaktır.

  • Ekran Dışındaki Resimleri Ertele

Web sayfasında aşağı yukarı yapmadan ilk açılan kısımın dışındaki görsel öğelerin yüklenmesini engelleyin. Ziyaretçiler aşağıya indikçe görsellerin yüklenmesi sayfa açılış süresini arttırmaktadır.

  • CSS’i, JavaScript’i Küçültün

Yine bunu önbellekleme eklentileri yerine getirmekte zaten. Ama kısaca özetleyecek olursak bir web sayfasının kaynak kodlarını incelediğinizde kodlar arasındaki boşlukların azaltılması bu iki faktörü küçültmek demektir.

  • Resimleri Verimli Bir Şekilde Kodlayın

Resimlerinizi kalitesini fazla bozmadan optimize edin. Bu çok yüksek kalitedeki resimlerin fazlaca kaynak tüketmesini engelleyecektir. Artı olarak yine web sayfanızı ilk kez ziyaret edecek olan ziyaretçiler için hızlı bir web deneyimi sunacaktır.

  • Metin Sıkıştırmayı Etkinleştirin

Metin verilerinin sıkıştırılması web sayfanızın yüklenme hızını doğrudan etkileyecektir. Ama unutmadan bu maddeyi düzeltmek çok fazla bir performans sağlamayacaktır.

  • Gerekli Kaynaklara Önceden Bağlan

Web sayfanız için çok ama çok gerekli önceden yüklenmesini istediğiniz bir veriyi özel olarak tanımlayın. “preconnect” ve “dns-prefetch” etiketleri ile tanımlayabilirsiniz.

  • Sunucu Yanıt Süreleri

Bu madde aslında doğrudan web barındırma hizmetiniz ile alakalıdır. Bu madde sizin web sayfanız için olumsuz olarak görüntüleniyorsa, web barındırma hizmeti seçerken dikkat etmeniz gerekmektedir.

  • Birden Çok Sayfa Yönlendirmesi

Bu web sayfanızın kaynak kodlarındaki yönlendirmeleri kapsar. HTTP, HTTPS, www ve www olmayan yönlendirmelerde buna dahildir. Bu yönlendirmeleri HTML, PHP ve “.htaccess” kodları ile yapmak yerine NS sağlayıcınız tarafında yapmanız gerekir. Bahsettiğimiz şekilde yapılan yönlendirmeler web sayfanızın daha hızlı açılmasına yol açacaktır.

  • Önemli İstekleri Önceden Yükleyin

Sayfa yüklendikten sonra öne çıkarmak istediğiniz kaynakları daha önce yüklenmesini isteyebilirsiniz. “<link rel=preload> etiketi ile yapabilirsiniz.

  • Animasyonlu İçerik İçin Video Biçimleri Kullanın

GIF dosya formatına sahip olan animasyonların dosya boyutları çok yüksek olabilmektedir. Bu animasyonları HTML5 video türlerine dönüştürmeyi unutmayın.

  • Çok Büyük Ağ Yüklerini Önleme

Sayfada kullanacağınız öğelerin linkini başka sayfalardan çağırın. WordPress altyapısı bunu otomatik olarak yapar. Örneğin /destek/index.html sayfası için bir resim yükleyecekseniz bunu /destek/yüklemeler/resim.jpg olarak ayarlamalısınız.

  • Aşırı DOM Boyutu

Bu “fa fa-” ve benzeri kullanımlar için geçerlidir. Bu öğeleri web sayfanızda çok fazla kullanmamanız gerekir.

  • JavaScript Yürütme Süresi

Bu tamamen JavaScript kodları ve dosyaları ile alakalıdır. Bu kodları, dosyaları sıkıştırmayı ve küçültmeyi düşünün.

  • Üçüncü Taraf Kullanımı

Sizin sitenizin dışında başka sunucu veya sitelerden çekilebilecek her türlü CSS ve JS dosyalarını içerir. Bunları azaltmak veya verimli olanını kullanmak: Web sayfanızın açılış sürecini önemli ölçüde değiştirir.

GTmetrix aracının terimlerini açıklamayı düşünmüyoruz. Çünkü zaten PageSpeed Insights aracı için web sitenizi yapılandırırsanız GTmetrix aracındaki sonuçlarda olumlu olacaktır bu konuda hiç merakınız olmasın. Ayrıca yine bugün Dünya’nın en çok kullanılan arama motoru “Google” olduğu için bu şirketin oluşturduğu bir web site hızı denetleme aracı varken neden başka bir aracı kullanalım ki değilmi?

Öte yandan ilerleyen zamanlarda PageSpeed Insights terimlerini oldukça derinden inceleyeceğiz ve webmasterlar için olumlu çözümler sunacağız. Tekrar belirtmek isterim ki bir internet sitesi yaptırmayı düşünüyorsanız: Web Tasarım ajansı seçerken onların web site hızlarını mutlaka denetleyin. Sonuçta kendi siteleri için hızı önemsemeyen bir ajans sizin site hızınızı ne kadar önemseyebilir ki?

 

 

İlgili Makaleler

Bir cevap yazın

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

Başa dön tuşu
Kapalı