Yavaş İnternet Sitesi Müşteri Kaybettiriyor!

1 Temmuz 2019 tarihinde Google tarafından yapılan açıklamaya göre mobile-first indexing (mobil öncelikli indeksleme) hayata geçti. (İlgili içeriğe şuradan ulaşabilirsiniz) Google, bir yandan internet sitelerinin deneyimlerini/performanslarını ölçümleyen araçlara yatırım yaparken bir diğer yandan da internet sitesi sahiplerini bazı değişiklikleri yapmaları konusunda ara ara uyarıyordu. 1 Temmuz 2019 tarihi itibariyle Google, indeksleme için kullandığı sunucu kaynaklarını mobil öncelikli olarak kullanacağını kesin olarak duyurmuş oldu. Böylece, gelinen noktada mobil deneyimin dikkate alınmadığı bir internet sitesi kabul edilemez olduğunu görüyoruz. 

6Harf blogunda 5.5 yıldır içerik üretiliyor. 11 Ağustos 2018 tarihinde yayınladığımız Mobil Devrim Gümbür Gümbür Büyüyor başlıklı yazımızda mobil kullanım oranlarının %65 civarında bulduğundan bahsetmiştik.  Bu veriler, uzun yıllardır içerik üreten, aylık ziyaretçi sayısı 500 binin üzerinde olan kendi sitelerimizden çıkarımla vermiştik. Bugün bu rakamlar aynı sitelerde %75’i aşmış durumda.

Hız Neden Bu Kadar Önemli?

Ziyaretçileriniz Açısından

Ziyaretçilerin tamamı internet sitenizi bir amaç için ziyaret ediyor. Her ziyaretçi, geldiği sayfa ile neden geldiğiyle ilgili size ipuçları sağlarken, neden o sayfadan ayrıldıkları da aslında neyin eksik olduğu, neyin yanlış olduğu konusunda bilgi veriyor. 

Ziyaretçi, sitenizin ziyareti sırasında yaşadığı deneyim süresince hız kaynaklı bir problem yaşıyorsa sitenizi hiç bir işlem gerçekleştirmeden terk ediyor. Bu da potansiyel müşterilerinizin, okurlarınızın sizin istediğiniz eylemleri sayfanızda gerçekleştirmeden sizi terk etmesi anlamına geliyor.

Düşünün ki bir dükkan açtınız. Çanta satıyorsunuz. Dükkanınızı ziyaret eden müşteri, dükkandaki satış personeline bir şey soruyor ve o sıra bir başka müşteriyle ilgilenen satış temsilcisi soru soran müşteriyi bekletiyor ve müşteri dükkanı terk ediyor.

Tüm gün internet sitelerinizde gerçekleşen durum yukarıdakiyle aynı ve siz bunun farkında olmuyorsunuz. Kaybettiğiniz cironuz bir yana bir süre sonra dükkanınıza kimsenin gelip gitmediğini de göreceksiniz. Mantık tamamen aynı.

Google Açısından

Google’ı anlamaya çalışırken yaptığımız hataların başında gelen şey, -bence- Google’ın da bir internet sitesi olduğunu unutmak oluyor genelde. Google da kendi ziyaretçilerini memnun etmenin peşinde. Siz, Google tarafından size gönderilen ziyaretçiyi memnun etmezseniz artık size ziyaretçi göndermemeye başlıyor. 

Sitenizin güzelliği, sağladığınız destek, ödeme seçenekleriniz vb şeylere çok güzel bir şekilde özenseniz dahi, -hiç hesaba katmazsanız- hız sizi mahvedebilir.

Hız, Projenin En Başından Düşünülmeli

İnternet siteniz ya da yazılım projeniz hayata geçirilirken kullanılan teknolojiler, yapılan yapılandırmaların tamamı planlanmalı. Her aşamasında, her kullanılan teknolojide kendi özelinde düşünülmeli. Aksi takdirde bitmiş projelerin üzerinden hız konusunda tasarruf sağlamak genelde çok sancılı ve zor oluyor.

Hız Problemi Neden Oluyor?

Sunucu Kaynaklı Hız Problemleri

Sunucular, kişisel bilgisayarlarınız gibi, kendi özellikleri bulunan birer sanal ya da fiziksel bilgisayarlardır. Projenize ait kaynak planlaması doğru olarak yapılmadıysa, yavaş bir bilgisayar nasıl yavaş çalışacaksa, yavaş bir sunucu da yavaş cevap verecektir. 

Cloud (Bulut) teknolojileri ile artık kaynak problemi yaşamadan, anında birden fazla bilgisayarı devreye sokarak kaynak yetmezliğini ortadan kaldırmış oluyoruz. Yani, doğru yapılandırma ile sunucularınız hiçbir zaman yetersiz kalmaz.

Veritabanı Sunucusundan Kaynaklı Hız Problemleri

Veribanları, içerilerine bilgi sakladığımız ve gerektiğinde o bilgileri onlardan istediğimiz yapılar.

İlişkisel Veritabanları (SQL, MySQL)

Depoladığımız bilgi boyutu büyüdükçe, mevcut yığın içinden istediğimiz bilgiyi almamız da uzun sürmeye başlıyor. Özellikle düzenli olarak kaydedilmemiş bilgi arasından bir şeyleri arıyorsak bu durum bir hayli kaynak gerektirmeye başlıyor. İlişkisel veritabanları için optimizasyon önerileri şöyle:

• Veritabanı tablolarının optimize edilmesi, optimize kurgulanması
• İlişkisel sorguların azaltılması
• İndeksleme ayarlarının yapılması

NoSQL Veritabanları

NoSQL veritabanları ilişkisel veri tabanlarından farklı olarak bilgilerin ilişkili bilgilerini ayrı ayrı tablolarda tutmak yerine birbirlerine iliştiriyor. 

Örneğin arabalar için MySQL’da markalar, modeller olarak iki ayrı tabloda tutulan bilgiler NoSQL yapılarda Arabalar içinde marka adında bir alanda tutuluyor. Böylece, arabalara ulaşırken tek bir yerden bilgi alınıyor, arama işlevleri çok daha hızlı çalışıyor.

Uygulanan Yazılım Tekniklerinden Kaynaklı Hız Problemleri

Çok çok büyük kaynaklarla çalışmıyorsanız, kullandığınız dilin pek bir önemi yok. Kullanılan yöntemlerse ilk günkü gibi önemini koruyor. İlişkisel veri tabanlarından bilgi çekerken, ilişkisel sorgular (birden fazla tablodan aynı anda veri çekimi) ile çalışıyorsanız ve bu sorgular önbellek üzerinden alınmıyorsa vay halinize!

Veri Önbellekleme

Örneğin: Basit bir blog yazısı sayfasının yüklenmesi için ilişkisel veritabanı kullanılan bir sistemde nelerin her seferinde veri tabanından alınması gerektiğine bakalım:

• İçeriği (Varsa beğeniler vb)
• Kategorisi
• Yazar
• Yorumlar (Varsa beğeniler)
• İlişkili diğer bloglar

Gördüğünüz üzere, basit bir blog yazısı okunurken bile en az 5 tablodan veri alınması gerekiyor. Bu da her blog sayfası açıldığında tekrar ediliyor. Önbellekleme sistemleriyle bu aldığımız 5 veriyi bir döküman halinde birleşik olarak saklayabiliyoruz. Böylece, ilgili blog yazısı ilk açılması haricinde hep bu dökümandan gösteriliyor. Böylece sistem, 5 tablodan veri almayı bırakıyor.

Çıktı Önbellekleme (Response)

Bu önbellekleme çeşidinde, yapılan isteklere verilen cevaplar önbellekleniyor. Örneğin:

Yukarıdaki blog yazısı sayfası için 5 farklı tablodan veri alındı, bir döküman halinde önbellek sisteminde saklandı ve bir sayfa görüntüsü oluşturuldu. Bu görüntü, sunucudan tarayıcınıza kodlar olarak gönderiliyor, tarayıcınız da bu kodları görüntüye dönüştürüyor. 

Gönderilen bu kod cevabı, yapılan istek ile ilişkili olarak kaydediliyor. Böylece, her istek geldiğinde aradaki veritabanından bilgi al, veri önbelleğine yaz, kod/cevap oluştur gibi adımlar atlanarak direkt hazır kod/cevap olarak tarayıcıya gönderiliyor.

Örnek istek:
https://6harf.com/dijital-varlik-ve-guven-iliskisi/ solda kalın olarak belirtilen kısım, tarayıcı vasıtasıyla sunucuya yaptığınız isteği gösteriyor. Sunucu bu istek sonucunda size gösterdiği sayfayı dijital-varlik-ve-guven-iliskisi adıyla kaydediyor. Sonraki isteklerde, o sayfayı yeniden oluşturmak olarak dijital-varlik-ve-guven-iliskisi adında kaydettiği cevabı size gönderiyor.

Veri Transferi Kaynaklı Hız Problemleri

Tüm bu teknolojiler arasındaki iletişimden kaynaklı problemler olarak tanımlayabilirim. Kendi içlerinde hızlı yapılarda çalışsalar da ayrık yapılar arasındaki iletişim ne kadar fazla adette olursa o kadar yavaş çalışmaya başlıyor. 

Örneğin: https://6harf.com/dijital-varlik-ve-guven-iliskisi/ adresini ziyaret ettiğinizde, 6harf sunucusu ile tarayıcınız arasında bir bağlantı protokolü başlatılıyor. Böylece 6harf sunucusundan tarayıcınıza veri akışı gerçekleşiyor. Bu bağlantı sayısı ne kadar azsa, site o kadar hızlı açılıyor. Her gördüğünüz resim, her ikon eğer tek tek yüklenirse bağlantı performansı düşüyor. 

Bu gibi durumların önüne geçmek için tarayıcılar, kendi önbellek kurallarını geliştirdiler. Siz bir siteyi açtıktan sonra indirilen dosyaların çoğu bir sonraki sayfa ziyaretinizde yeniden indirilmek yerine bilgisayarınızda kayıtlı olanlardan size sunulur. Bağlantı sayısı azalır, gezinti performansı artar.

HTML Kaynaklı Hız Problemleri

Html kaynaklı hız problemleri genelde belleği şişirmekle ilgili oluyor. Bir sayfadaki element sayısı ne kadar artarsa, tarayıcı ziyaretçinin belleğinden o kadar RAM istiyor ve bu bir noktada yetersiz kaldığında sayfa ziyareti sırasında kitlenmeler vb. oluşuyor. 

Bu gibi durumların önüne geçebilmek adına virtual dom/re-usability gibi konseptler ortaya çıkmış durumda. Daha detaylı bilgi için ilgili kavramları Google üzerinde araştırabilirsiniz.

CSS Kaynaklı Hız Problemleri

CSS Dosyaların Yüklenmesi (loading)

CSS dosyalarınızı ne kadar küçük tutarsanız siteniz o kadar hızlı yükleniyor. Böylece, sayfanıza ait görüntü daha az sürede oluşturulmaya başlanıyor. (rendering)

CSS Dosyaların İşlenmesi (rendering)

Bu problem genelde, kullanılmayan CSS kodlarından ya da re-usability gözetmeden kodlanan CSS kodlarından ortaya çıkıyor. 

Örneğin: elementlerin etrafını oval hale getiren bir kod yazdınız. Bunu ilgili elementlerle kesişecek şekilde yazmaz da her elemente ayrı ayrı aynı kodu yazarsanız vay halinize!

Javascript Kaynaklı Hız Problemleri

JS Dosyaların Yüklenmesi (loading)

JS dosyalarınızı ne kadar küçük tutarsanız siteniz o kadar hızlı yükleniyor ve executing işlemi bir an önce başlıyor.

JS Dosyaların İşlenmesi (executing)

Sayfanızdaki tüm dosyalar, tüm cssler tüm JSler yüklendikten sonra executing dediğimiz JS dosyalarının çalıştırılması başlıyor. Bu noktada JS dosyalarının içinde yazdığınız kodlar ne kadar süre alıyor bunun incelenmesi gerek. Sayfanın yüklenmesini geciktiren, ajax, interval vb işlevlerden uzak durmak gerek.

Site/web yazılım hızıyla ilgili genel olarak faktörler bu şekilde. Normalde her bir madde kendi dikeyinde çok fazla daha detaya sahip. Her biri için en az bu uzunlukta yazı yazılabilir. Temel seviyede mantıklarını anlatmaya çalıştım.

Sonraki yazıda görüşmek üzere!

Yaptığımız süper hızlı projeler için sizi şöyle alalım 6harf.com